Sep 17, 2011

Blogல் புதிய பதிவுகளுக்கு Slide Show அமைக்கலாம் வாங்க

முதலில் Blogger Templateக்கு சென்று Edit HTML ல் Proceed கிளிக் செய்து உள்ளே செல்லவும். அதில் ‘Expand Widget Templates’ ஐ கிளிக் செய்ய வேண்டாம். பிறகு ctrl+f கிளிக் செய்து ]]></b:skin என்பதை கண்டுபிடித்து அதற்க்கு மேலே, கிழே உள்ள script ஐ Paste செய்யவும். கிழே படத்தில் அம்புக்குறியுடன் காட்டியுள்ளேன் பார்த்துக்கொள்ளவும்.






/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:260px;
position:relative;
width:640px;
}
#slider {
height:260px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:640px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
right:0px;
text-align:left;
top:0;
width:120px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:640px;
height:260px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/



அடுத்து </body> என்பதை கண்டுபிடித்து அதற்க்கு மேலே, கிழே உள்ள script ஐ Paste செய்யவும்.







<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>



கடைசியாக Layout சென்று Add a Gadjet ல் HTML/JavaScript ல் கிழே உள்ள script ஐ Paste செய்யவும்.



<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 10;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://vadakaraithariq.blogspot.com//feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>



சிகப்பு கலரில் உள்ளதில் உங்கள் ப்ளாக் அட்ரஸ் ஐ Replash செய்து விடவும். அவ்வளவுதான். பதிவு எழுத ஐடியா தந்த Thoufic அவர்களுக்கு மிக்க நன்றி.


மறக்காமல் கருத்துக்களையும், ஓட்டையும் பதிவு செய்யுங்கள். +1 கிளிக் செய்துவிட்டு போங்களேன். 

7 comments:

  1. அருமை நண்பா ...........

    ReplyDelete
  2. நானும் முயற்சிக்கிறேன்...

    அன்புச் சகோதரன்...
    ம.தி.சுதா
    மங்காத்தாவை வெல்ல வைத்த விஜய் ரசிகர்கள்

    ReplyDelete
  3. நன்றி உங்கள் பதிவிற்கு

    ReplyDelete
  4. பாய் blogger ல நன் பண்ண post full single page ல வருது என்ன பானுறது உங்களை மாரி எப்படி நான் post செய்றது

    ReplyDelete
  5. Get all your favorite spirits and wines on Duty Free Depot!

    All the world famous brand name drinks for unbelievable low price tags.

    ReplyDelete

உங்கள் கருத்துக்களை பதிவு செய்யவும்

Popular Posts