WEBDESING and SEO: அழகிய AUTOMATIC IMAGE SLIDERயை தங்களின் பிளாக்கில் அமைக்க!

Saturday, July 16, 2011

அழகிய AUTOMATIC IMAGE SLIDERயை தங்களின் பிளாக்கில் அமைக்க!

தங்களின் பிளாக்கில் அழகிய AUTOMATIC IMAGE SLIDER அமைக்க ஆசையா! ஆசை என்றால் இந்த பதிவை தொடர்ந்து படியுங்கள்.

இதனை மேற்கொள்ள முதலில் தங்களின் பிளாக்கர் அக்கொண்டில் நுழைந்து கொள்ளுங்கள். பின்னர் முதலில் 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: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHsLz-WeqwB8mH8hgXoiWyzJD5wzmDYt1iJzlNRUuJiv3EZpqTRFY_UO3jaEY4tyNYzigmjxcA-ESZ6JBHdQdjyURgpe7d7xRgv_bLDnBBEdq2AKdiXxqwGwMBiNG2gTQ20LIRyC-7NQ/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlARdTAR1n7bJqmwZmZOqzOVayUGGyBqusbY5C-91QYwozrGUgcVzR7Le2Aik13h72KMKeVROQ6DY_rHq-kNP7pkdBsiL9G95y8X50uqupaydiJTNDrYxAbLCmIOCqcBZlgkomLehtOn0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjng5QSEiJJusQsp_BF_U8uS2zahrUcF2l08seQ_n9OAZUaxBoKIaXiB1tpolhHZxSdmFyF0mx-6NGd1EI20LK4M4UpDeHQ60i4zxNqmfQ6tlpdkJzmUu6AZM-henBUeJPEdG4qfaYvgg/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">



<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCFjJ1Tt-D1NpL0TQH97un0I-_v7D8Wy-GU9WWZx2gpYQ0FJe1HxADeIbL-OYjMoxn4o-mkJlnnoFax7SgHYfG4uLKBZFUdmbekwYkQMYpiVgSPnzrLbk73LAqdisb_Y7Gq80xuIOJSQ/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>

</div>





<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ52XCLYvKEm9PH7f8c4qJVIHHKUvSQYirHsYRPXWVY2ZKjpWvghZZ5-DAt1bij6NiNFiivFhA1XuhkO6OvHFanytNwojSaWNXjJZBX2qgzGujvU3KlZVkajWPziSobCsJL5ZKOpPJpVw/s400/simple+Blog+Template.png" height="110"/> </a>

</div>





<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>





<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>





<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA0PUdzf1fOpjA_PTNttGg_NkUe4JN7eL1_A1FgFFRgYCuySix7AHhpEkk8Whh-a7YrP1Y06nhS4nQE7YfPynwHziEpd5x1J2xfnHD_JfxyZfmKAPy_kn8zGsTAsRpBek2eOjpOfLp0hk/s400/Preview.jpg" height="110"/> </a>

</div>





<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirx1KBODUehQLfEiSZQ1is6sSnj0BN_voD_SvbMgzaBDJNJtCUes6bN0r3-NChTAgC7piSssC2nOWBV0Ne1Xfhn8HKYkbPTujANoxxlsEFNllmQvFJM2K4Q1zNNGzBOXV4SIsRJb8hra8/s320/money2520blogger.png" height="110"/> </a>

</div>





<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>





<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>



</div></div></div>

மேலே உள்ள கோட்டிங்கை காப்பி செய்து Html/JavaScript என்பதில் பேஸ்ட் செய்த பின்னர் சேவ் தரவும். மேலே உள்ள கோட்டிங்கில் அங்கு உள்ள இமேஜ் புகைபடத்திற்கான முகவரிக்கு பதில் தங்களின் புகைபடத்தின் முகவரியை இடவும். முடிந்தது அவ்வளவு தான்.

http://tipsblogtricks.blogspot.com/2011/05/automatic-image-slider.html