Membuat slideshow di blogger

Metode seperti biasa sangat mudah untuk dilaksanakan. berikut,

1. Go To Blogger > Design
2. Choose Add a Page Element
3. Then choose HTML/JavaScript widget
4. Inside the widget paste the code below, 
   

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <style> #slider { position:relative; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqGNOXWbFzoJBhMSEhQkFK3BM-hSv3sdjXlrbN-Q6GQusloTHiTYe89LLgG0ZSt4QqZmwXzOuK0LC8d8Cl6Yb-9BdFZ3V9nsEQwkTxy8R98UH7zwCfDHk4jyK3wfuKTsV5KWQsZuXc28I/s400/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGZwuc14SGd21NwqxQLMpmO5z2uKcwrmDP7c0SuuW7oATCnDfLgeqo_0xy73egoNZcpYFL-LKoMYGjU_8c509llkUMQgPZDHFHaeKO0jLzmtTLoGiWwY-wt-BGGed9m_Ex0pQPdYdTbPo/s400/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; font-size:16px; padding: 10px 0px; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } .clear { clear:both; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.7; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } </style> <div id="slider"> <img src="URL Of Image" alt="" title="Description Goes Here" /> <img src="URL Of Image" alt="" title="Description Goes Here" /> <img src="URL Of Image" alt="" title="Description Goes Here" /> <img src="URL Of Image" alt="" title="Description Goes Here" /> <img src="URL Of Image" alt="" title="#htmlcaption" /> </div> <!—Write Descriptoon With Links In this Part—> <div id="htmlcaption" class="nivo-html-caption"> Cool na? :) Now Learn How to create one by <a href="http://wwww.mybloggertricks.com">Clicking here</a> </div> <br/> <br/>

Catatan: Harap diketahui bahwa Anda akan perlu menggunakan Gambar dengan ukuran sama. Ukuran default untuk semua gambar yang digunakan dalam tutorial ini adalah 618 x 270.

<img src="URL Of Image" alt="" title="Description Goes Here" />

 yang berwarna biru ganti engan url gambar milik anda. warna deskripsi...save