Слайдер контента на блогспот(blogspot)

Слайдер для контента для блога на blogger

1.Войдите вашей панели инструментов Blogger ----> макета ---> Изменить HTML

2.Scroll туда, где вы видите </ HEAD> тег.

3.Copy ниже код и вставьте его непосредственно перед </ head> тег.

<style type='text/css'>
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5B_oQNT5CBYOOfDIYJy2MI6bYjeM4L42_kFPlS0ooVkztTPs1lm8kcMQqx2j289wCB3y7z6GbsfYpg4C_m2kCu9JCkwurwd3a6yXsE82Z3svzTwNsSU78NgIrYE07shts9M7araPJC62/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Zvtyqv5XetdMZMH13PexUtw5gLjM8cG-1kZqIAu_YF1cxrK9Jbg8fo_fgiY3B5F41GMND9oCDEC4puVK0_Sb8fn3IRridsREUcMFVxSuZ1MWLIKiEA8UQvH1VU1FJ2FJkUe2kqYnFoDp/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hu-N35UdtIESbP7C0eHkkwwwyGIRgM1lBWV3onbtEyWH8YpGyoCG-qIadzlt_y_2NaAseETJ3GtdRycU872sD3KKi5-gQgbP9iNLytdD3GBcK_cAxHeMdbszRc4Q_t9mdlqdyCzt1_2E/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76Y9sVoSs8TXRCU1CPQr8QIeVvYgybzjcZtrGVNBUn8c0BJga8lkG_Et-88Mh7uPEt9-OE97RCAfyjL7CF4twQGuSD-bhJ-oyD-yBUKgqoJ2vmgBgJuyfrUbArJmv6_wEh88wKOAuZsU2/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmegW_ytvj_v-bBf0GYnWlm8W94J_ZzUYqAVl10TFyQXDs7_KaUVOv_D5e2pWAcPh8vW-CHK0ven0PS5HHiWESUuiEV8R-QImQyp5TlNJdJQ6V9JSZEs4bhyr9aUxVAXFpPm0-RNhru4KK/) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>

4.Now снова Прокрутите вниз, туда, где вы видите </ body> тег.

5.Copy ниже код и вставьте его непосредственно перед </ body> тег.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://keerthiset2.110mb.com/excellent%20slideshow/compressed.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=&quot;linkhover&quot;;
slideshow.info=&quot;information&quot;;
slideshow.thumbs=&quot;slider&quot;;
slideshow.left=&quot;slideleft&quot;;
slideshow.right=&quot;slideright&quot;;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>

Важно! : Скачать compressed.js и 5 изображений в виде архива, andhost compressed.js и изображения самостоятельно.

6.Now сохранить шаблон.

7.Go в Layout -> Элементы страницы и нажмите на кнопку "Добавить гаджет".

8.Select "HTML / Java Script" и добавьте приведенный ниже код и нажмите кнопку Сохранить.

<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8pJA_r63nowxXKmvp8wLQ-paV6ZBlQXG_eOei2xe9d3r_cp7u3KVey8a5WFd79a8GkPYkshqo_EwkwmFwuwdU2XpjGIZO0LmO7DmEyQrhNLy_vDAi_SWEkvu3dSzV7JCr6QmIfOpyv-uT/+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANQlX31MX1PbwFAX3qYNbxww7MYTvlzpOKRdSZMQXDmfB2DlAGq0apLhew3bnBwygxSmSwsZY61avS98BdOq2AWdoSzhnnegQSTVenr527ni99rIjq9wkauTrNs94pYlQaSnMbvA3O2vF/+1+small.jpg" alt="Bionic" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtI9MvpTLYu2DkGgtw76BdCsvNfmyU18wooiFAfDj7_Xglr7g2Ica09V212cXW2ElQNANrfzfpyoaDiU55ia1sVXW9KbXM8Q2DTe786F18bdOEAp-agh-I1BrfgsO5jnLugMNGVu8-GDq/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhP97Azv5LnDNGjt_kr8GxdpICK0i5hL8cFATXgzdCfyuMwiAg8iiNieSFCoGKTs43w-9kGD8Let4Wu66kXz-1gtkVZXFVLwp_TNHz4CDvrhms5h3kv0M83YawZqlycv3q6MgTR3T3F3V/+2+small.jpg" alt="MOH" />
</li>


<li>
<h3>Enter Title 3 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2WxszzKePpHsCzEA8SzutUkJAMAIo2v-vINdZwItIVrHp74YrEuvVbOLJVpjQ3fFP6Zc20vZ4wchzYIVrZPhDh5rGmK7TgHcT1ecF4Awe9mQOV53R8Qj4-IDNl6_XFzxhBZ5FapaattZ/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKozkD4WlonZ5mfCBp_lYMQKJuDv3EWsP9BGCCUFEvj96LQk90GLbpfbOGU8HZoXYYUISP7875IRyJILWNGfXn7SsBJAb3dhs1o-5TwgU3MA1zqq7rKc7QRcXX9cIZReit-Hg9Q82wrgyg/+3+small.jpg" alt="Fear" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-A3nwvsNjD_6PMdgznd9wtzIIctAeYfR-ShUg-7em3pblvGimlZI9P6GP5dDHIu6e383Mg1yWAA64_bzPkkOdtpFdlUT4wE35IHssInCL29fGs3XiK3Hm2k7Q8SBwBV7WCLQL5d0vQqBU/+4+big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzJ7QLQs7ZdTUSQvRXjCPIF47xeEbygJS4f2jgmkH65gZ0ajlNYrihes_M3bsC6kfA7EmhSm5MXKBuNIOksAmOh9PBPxbPh5D6K-W9LjhAQpvp1mdtRLwAKa5jRLZrqE03Dbsxombp6Ow/+4+small.jpg" alt="Farcry" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgu2wvaIyEvZpje3b-TZcAVHphcZUAxnG9FDB83Cg4A9_l6S9Fsv3QCo4wmqz9NU5uQse5cb3ncvP0Yc2pwp7_s1XFxOS2tZrOSFspc-ZXV3iFFlYufkP0C3WCr3k1vE9vXCrP4hK6TajX/+5+big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxSg8gpoz-QNdnYfrgzH3pS3asp82CNQf4-OHwxs0ZqHBZc1lThP5HqkoF3bIbSfbUwiK1H2o-ZZHz_WuKiiUIVkfeenQgR7m5g58AFScI_JBIRI1XSFw2XSD12RnF3yfncSmkXj9gVM2/+5+small.jpg" alt="Farcry 2" />
</li>


<li>
<h3>Enter Title 6 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPawqTSHIP2oDQ8HcLJOU6kwGr8_zJJysKKmpsAVDxqPEMULG_4Ik13F6CLflRYuDriAYNPa8e5QHf7qNaprm8yFlyYsPIkXlIRNu2CNxDy7JbejJMoSYJQRO2HNcxw6BedfG2TDEdiMg/+6+big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYemztjk5jNO9njNyPE4vkiUDraCWKuozqE_rnkjg1n24UUU4Y35xlNouIn1u-yQQSyfD2oAYr2VhyZOr8iKlgSeTht3Ox3bnfp3LZjx_wBMj_kbT98kJkCShtEb-HkWrVnZJPUO7uuzqf/+6+small.jpg" alt="Crysis" /></a>
</li>


<li>
<h3>Enter Title 7 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRM8DJt4bz23VUSyWhZsW5ybhB1S25-kFxvHqP8-v2nHRV9kgmUR9hDulWklqDLPKjPf4Cbsjy9u1IwbK_oJPLg2Wg8onB7M34NbO22PK1F6C64PCoYCjWrwDzQJbQLJsj9vAibg-qi26/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDMS8FuKjc7mgTGD4qzc1g26lE7jbeBHIlJV1R_kmzLr_dugBaOGujkrK6SRAkGx0cb9P8Jgd6PDQLTMvLFprLOOqOW9j-17Lvl13XkHf-H_BgyV7suJyQVU3hyqs3Jure4NLLJMBV9y5g/+7+small.jpg" alt="Tomb Raider" /></a>
</li>


<li>
<h3>Enter Title 8 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9eSKBA7NgjKDFzzxpcstN5fk4Zb3cUjqNiYIijkK2SG9lylFmeAfoNCZ7qcGJZrwxd9-8_SRB5IbbTHSnyFNcrK-uffRPu7pVP_eszINv3oh6jwbPzcNddnJGy-Fr8cN89rDegTd4ZuO_/+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSLi88lyh__4giS7hdmWg1nEtHghaByuWNxYqlr5FyZsatEWM0NFNfGNWOcdNa-4SW2v1uD91jUMo7jP79byrWjSeBMUnhUO_PaVFSN0AgEXh9g9x1L02VDPmv9F1729QiOU7EAao0APp8/+8+small.jpg" alt="Game" /></a>
</li>


<li>
<h3>Enter Title 9 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeqt1qyvLEAcqbPkgduV8Cwo8X99_uaC-1zXe-jYzzq9pSyUMUy77lHVdwfQ-bylJBsW46n4kqUlF1XMXZq6n2yu2QygOdm4pwuHDD2hg-Gizm0_uwhSi6deQeKraR18RQi-E2M9Jp_uR/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4SPLB-zRAx8pVlhiDlHKyUYlSsuHG5Ec7xc1vwxb49kPjQYlmjzjQoXrq1kFQzrZS0VHmUBhDKJjoGwNJFTvDNkSji0hx5q8QP8qsAMbDFk_pH4sGoIlJ3phgUTqRemuY03OzmvYjPIL/+9+small.jpg" alt="Medal of honor" /></a>
</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>

Now click Save






................................................................................................
................................................................................................
................................................................................................