இதனை மேற்கொள்ள முதலில் தங்களின் பிளாக்கர் அக்கொண்டில் நுழைந்து கொள்ளுங்கள். பின்னர் முதலில் Dashboard Ø Design Ø Edit Html.
சென்று </head> என்ற வரியை கண்டுபிடிக்கவும். எளிதாக கண்டுபிடிக்க தங்களின் கீபோர்டில் பயன்படுத்தவும்.
கீழே உள்ள கோட்டிங்கை </head> என்பதற்கு முன்னர் அதாவது மேலே பேஸ்ட் செய்யவும்.
<script src='http://btemplatescripts.googlecode.com/files/auto-slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg', -48, 0], rightnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
பின்னர் தற்போது ]]></b:skin> என்னும் வரியை கண்டுபிடிக்கவும்.
#myslides{
background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
மேலே உள்ள கோட்டிங்கை ]]></b:skin> என்பதற்கு மேலே பேஸ்ட் செய்யவும். பின்னர் சேவ் டேம்பிளேட் தந்து தங்களின் பிளாக் டேம்பிளேட்டை சேவ் செய்துக்கொள்ளுங்கள்.
இன்னும் ஒரே செயல்முறை தான் பாக்கி உள்ளது. தற்போது மீண்டும் Dashboard Ø Design Ø Add a Gadget Ø Html/Javascript சென்று,
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SQTQLthrdvI/AAAAAAAAAHk/JY-ySDnZ8Xw/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SZpu68uI7xI/AAAAAAAAAM8/4qHvgwss23o/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- end code of 2nd -->
<!-- 3rd Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"> <img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->
<!-- 4th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"> <img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/> </a>
</div>
<!-- end code of 4th -->
<!-- 5th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://2.bp.blogspot.com/_nX0wvumD9VU/ShkEH2GD1nI/AAAAAAAAAOY/xeVepHCMH2M/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- end code of 5th -->
<!-- 6th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/money-blogger-blogger-template.html" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://1.bp.blogspot.com/_nX0wvumD9VU/SiuAxR7uKDI/AAAAAAAAAPE/BYtw4ToMfr4/s320/money2520blogger.png" height="110"/> </a>
</div>
<!-- end code of 6th -->
<!-- 7th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/digital-statement-blogger-template.html" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png" height="110"/> </a>
</div>
<!-- end code of 7th -->
<!-- 8th Template -->
<div class="panel">
<a href="http://www.anshuldudeja.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/> </a>
</div>
<!-- end code of 8th -->
</div></div></div>
மேலே உள்ள கோட்டிங்கை காப்பி செய்து Html/JavaScript என்பதில் பேஸ்ட் செய்த பின்னர் சேவ் தரவும். மேலே உள்ள கோட்டிங்கில் அங்கு உள்ள இமேஜ் புகைபடத்திற்கான முகவரிக்கு பதில் தங்களின் புகைபடத்தின் முகவரியை இடவும். முடிந்தது அவ்வளவு தான்.
http://tipsblogtricks.blogspot.com/2011/05/automatic-image-slider.html
