Cara membuat Slider di blog

 안녕하세요 친구들✌(✿◠‿◠)....

Ada beberapa cara untuk membuat slide di blog :

Cara Membuat Slide Pada Blog

1.  Login dengan akun blogger anda.

2.  Pilih Rancangan

3.  Pilih Edit HTML

4. Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatasnya.

/* SLIDESHOW <br /> * ---------- */<br />#slider-wrapper {<br />background:#fefefe;<br />border: 1px solid #eeeeee;<br />margin:2px 0 15px;<br />padding:10px<br />}<br />#slider {<br />position:relative;<br />width:473px;<br />height:250px;<br />overflow:hidden<br />}<br /><br />/* The Nivo Slider styles */<br />.nivoSlider {<br />position:relative<br />}<br />.nivoSlider img {<br />position:absolute;<br />top:0;<br />left:0<br />}<br /><br />/* If an image is wrapped in a link */<br />.nivoSlider a.nivo-imageLink {<br />position:absolute;<br />top:0;<br />left:0;<br />width:100%;<br />height:100%;<br />border:0;<br />z-index:6;<br />display:none;<br />margin:0;<br />padding:0<br />}<br /><br />/* The slices and boxes in the Slider */<br />.nivo-slice {<br />display:block;<br />position:absolute;<br />z-index:5;<br />height:100%<br />}<br />.nivo-box {<br />display:block;<br />position:absolute;<br />z-index:5<br />}<br /><br />/* Caption styles */<br />.nivo-caption {<br />position:absolute;<br />left:10px;<br />bottom:10px;<br />background:#000;<br />color:#fff;<br />z-index:8;<br />display:inline-block;<br />width:60%<br />}<br />.nivo-caption h1 {<br />margin-bottom:2px;<br />line-height:100%;<br />}<br />.nivo-caption h1 a {<br />font-size:18px;<br />}<br />.nivo-caption p {<br />margin:0;<br />padding:10px<br />}<br />.nivo-caption p p {<br />font-size:12px;<br />padding:0<br />}<br />.nivo-caption a,.nivo-caption a:hover {<br />color:#fff<br />}<br />.nivo-html-caption {<br />display:none<br />}<br /><br />/* Control nav styles (e.g. 1,2,3...) */<br />.nivo-controlNav {<br />position:absolute;<br />right:15px;<br />bottom:15px;<br />font-size:12px<br />}<br />.nivo-controlNav a {<br />position:relative;<br />z-index:9;<br />cursor:pointer;<br />background-color:#000;<br />color:#fff;<br />opacity:0.67;<br />padding:4px 8px<br />}<br />.nivo-controlNav a.active {<br />background-color:#fff;<br />color:#000;<br />text-decoration:none<br />}<br />

5. Kemudian cari kode </head> lalu copas kode berikut tepat diatasnya.

<script src='http://blogtemplate4u.com/javascript-themes/jquery.min.js' type='text/javascript'/><script src='http://blogtemplate4u.com/javascript-themes/jquery.nivo.slider.pack.js?ver=3.2.1' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 5000, pauseOnHover: 1, manualAdvance: 0, captionOpacity: 0.67, directionNav: false, controlNav: true }); }); //]]></script><br />

7. Kemudian cari kode <div id='main-wrapper'> lalu copas kode berikut tepat dibawahya.

<b:if cond='data:blog.url == data:blog.homepageUrl'><br /><div id='slider-wrapper'> <div id='slider'> <a href='#'><br /><img alt='' src='http://i1162.photobucket.com/albums/q540/sheilahmd/6436-1.jpg' title='#slide-caption-one'/> <br /></a><br /><br /><a href='#'><br /><img alt='' src='http://i1162.photobucket.com/albums/q540/sheilahmd/-26-1.jpg' title='#slide-caption-two'/> <br /></a><br /><br /><a href='#'><br /><img alt='' src='http://i1162.photobucket.com/albums/q540/sheilahmd/30-1.jpg' title='#slide-caption-three'/> <br /></a><br /></div> <div class='nivo-html-caption' id='slide-caption-one'> <h1> <a href='#' rel='bookmark' title='Slide Title 1'>Slide Title 1</a></h1> <p> 슈퍼 주니어는 내 우상이에요.</p> </div> <div class='nivo-html-caption' id='slide-caption-two'> <h1> <a href='#' rel='bookmark' title='Slide Title 2'>Slide Title 2</a></h1> <p> 나는 슈퍼 주니어를 정말 좋아해.그러나, 난 최시원 너무 너무 사랑 해요.</p> </div> <div class='nivo-html-caption' id='slide-caption-three'> <h1> <a href='#' rel='bookmark' title='Slide Title 3'>Slide Title 3</a></h1> <p> 한국어 Boyband의 연인에게 좋은 소식이있다. 다음 캘린더 2012 슈퍼 주니어.</p> </div> </div>




8. selesai...

Cara Membuat Slider/Slide Gambar Bergerak Otomatis Pada Blog

1.  Login dengan akun blogger anda.


2.  Pilih Rancangan


3.  Pilih Edit HTML


4. Cari kode ]]></b:skin> lalu copas kode CSS berikut tepat diatasnya.

   

/* CSS easySlider */ #containerSlider { width:175px; height:120px; margin:0 0px; padding:0; position:relative; } #prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; padding:0; text-indent:-8000px; } #slider ul, #slider li { list-style:none; margin:0; padding:0; text-indent:0; } #slider, #slider li { overflow:hidden; width:175px; height:120px; margin:0 auto; } #slider { margin-left:0; background:#ccc; border:1px solid #999; } #prevBtn, #nextBtn { display:block; height:34px; left:-20px; position:absolute; top:38px; width:31px; } #nextBtn { left:200px; } #prevBtn a, #nextBtn a { background:transparent url() no-repeat scroll 0 0; display:block; height:34px; width:31px; } #nextBtn a { background:transparent url() no-repeat scroll 0 0; } #slider img { background:#ccc; padding:0px; width:175px; height:120px; }

*Perhatikan untuk teks yang berwarna merah dapat anda ganti ukurannya 

      sesuai kebutuhan anda

5. Kemudian cari kode </head> lalu copas kode berikut tepat diatasnya.

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script>

6. Klik SAVE

7. Selanjutnya buatlah widget baru dengan cara klik Page Element lalu Add Widget baru dan


    pilih HTML/Javascript dan masukkan  kode berikut:

<div id="contentSlider"> <div id="slider"> <ul> <li><a href="#" target=_blank"><img alt="1" src="url gambar 1" /></a></li> <li><a href="#" target=_blank"><img alt="1" src="url gambar 2" /></a></li> <li><a href="#" target=_blank"><img alt="1" src="url gambar 3" /></a></li> <li><a href="#" target=_blank"><img alt="1" src="url gambar 4" /></a></li> <li><a href="#" target=_blank"><img alt="1" src="url gambar 5 dst" /></a></li> </ul> </div> </div>



8. Untuk Url dapat ditambah sesuai keinginan.


    Selesai..

Cara membuat Slider

Contoh 1  Gambar slider seperti ini :

Contoh 2  Gambar slider seperti ini :

LIHAT DEMO CONTOH 1

LIHAT DEMo CONTOH 2

Bila anda berminat, silahkan anda ikuti langkah-langkah berikut ini :

1. Login ke blogger

2. Klik Rancangan dan pilih edit html

3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.

4. Silahkan anda cari kode </head>

5. Copy kode dibawah ini, dan paste diatas kode </head>

Untuk slider contoh 1 :

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script><br /><br /><script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script><br /><br /><script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script><br /><br /><script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script><br /><br /><style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 850px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQl8C7ZwaUE7lU7fRrT5M85umU_EqRESZXm_Y8xihBVzeL-MJ1bTZ1WCRXTq2ET8iDgqx03l5nyGMl-yBDj2UE6rjIHOFF9capKzh11CFA7m4BsuCddCPq8H9mOHVGW0CIV5jH8Ho4jvP/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQl8C7ZwaUE7lU7fRrT5M85umU_EqRESZXm_Y8xihBVzeL-MJ1bTZ1WCRXTq2ET8iDgqx03l5nyGMl-yBDj2UE6rjIHOFF9capKzh11CFA7m4BsuCddCPq8H9mOHVGW0CIV5jH8Ho4jvP/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:254px;width:250px;} </style><br />



Untuk slider contoh 2 :  

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script><br /><br /><script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script><br /><br /><script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script><br /><br /><script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script><br /><br /><style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 850px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQl8C7ZwaUE7lU7fRrT5M85umU_EqRESZXm_Y8xihBVzeL-MJ1bTZ1WCRXTq2ET8iDgqx03l5nyGMl-yBDj2UE6rjIHOFF9capKzh11CFA7m4BsuCddCPq8H9mOHVGW0CIV5jH8Ho4jvP/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQl8C7ZwaUE7lU7fRrT5M85umU_EqRESZXm_Y8xihBVzeL-MJ1bTZ1WCRXTq2ET8iDgqx03l5nyGMl-yBDj2UE6rjIHOFF9capKzh11CFA7m4BsuCddCPq8H9mOHVGW0CIV5jH8Ho4jvP/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:254px;width:250px;} </style><br />

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.



Langkah selanjutnya :

4. Simpan  template.

5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.

6. Silahkan tambah Gadget'.

7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

<div id='news-slider'>

<ul class='jcarousel-skin-tango' id='mycarousel'>

<li><a href='Ulr dokumen 1'><img src='Ulr gambar 1'/></a></li>

<li><a href='Ulr dokumen 2'><img src='Ulr gambar 2'/></a></li>

<li><a href='Ulr dokumen 3'><img src='Ulr gambar 3'/></a></li>

<li><a href='Ulr dokumen 4'><img src='Ulr gambar 4'/></a></li>

<li><a href='Ulr dokumen 5'><img src='Ulr gambar 5'/></a></li>

</ul>

</div>

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

<div id='news-slider'>

<ul class='jcarousel-skin-tango' id='mycarousel'>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOvw9iemhgmT2LbwwMA6IApBuJG6qy7ODyfFKFi7gpoLDhEiGo5__VyjdhkQsBSYkp4_PCrVT4ie6KCIW7U2JvrYw6sHiWOefPRC3Wxp7CLtxuCcXoaQmyXvxE2P4ET4zi73vdnlLAuxv1/s1600/Business+Company+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqWFuR-2oVjI1FEDK_kILMpbUH8_DlxurrAJIZMyvgjgADuWQ2LOt-6dPVKq_At76YvgsuPTOLKtafwNThF3aBcfotFARcq4WKqKlN0Ho7KG3L-1dd0cYGyZJrKN7R6_qNzGLUKQG8u4Lc/s1600/Incorporate+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CtRYrbKkX0DgUOt4IAj6cy_VTfWlkGS2JNprtXTE0KOyZ3kE7itDvhZuc7OPA1N330jrZyQhATqiMauUqujaQtcmRnUwQGA6qMRTB2um1Dwy4dkW5t0uM1MObLMfJBjyOIqq5MjwgdyL/s1600/Business+Style+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimI2L1FZqoOW8UGKci6V_gWihtoV2hDASynkBxlODvhcgNCc_mx6pDmfLrpZzPYX9gL_s9NE8ngfpB3qBBFS7JQ-l_yEW2pKyK_5DrpaPWoUm0-WIY5g0RXE2q5bphcC0c-usOwtuJee4I/s1600/Dominate+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFmpSREMPg75T87NeOkaYdrE32V7g-ziOj8gABgxVPItGujjY5hf0mkqZK525vXJU95apruHTjl6mZ6jRqnnmROWfWgD6ZSQjVrF7z3jNQjBGh_l0pmsRPHlzagk0C58SMrX6luxoJYyI/s1600/Business+Corp+Blogger+Template-1.jpg'/></a></li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPiMi3_m48wlShE96aQ7KSpzQ1uGhL7FNOubj2uDcr-jCq6TQqNsbH_kxQDg48dpKEEfyPJSqXe_v91l2mGuznnPkvMKQhWwC5vTepV3TOErnbUba0L5fJvzaMYclgp3Xh6Pr9EDjoxODv/s1600/Business+View+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8RJxbZkFXJyiHZiTdyGkVQYK-qQigsmtMH2qpttl4cIMVSpKkuZZFMjXRa_Rtcf50Ryw5YUiQFkWO5eh8tS3SkExjDhX3ZmiR7Kr9zj9WFo0W7N1sDrlhElzTJfR__mrBUd5Y9bp0ujq/s1600/Glorius+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ0G7UeJ0odwwo0LoCIt2F9TYsTDEXmwBDazmzz4Ml5ZCMwcAYKLQW3hDNmvegKYutK32xFOCh7VoOfHCXkN-yNdNeysCKV7iNNYSaJM4yKJxDBMOX8v1RUabsZLcOmq7wsVtkbhj4167n/s1600/iFinance+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkXTv34PjJ52QoohnsdS7uZW8wNzCwCagj5z3xyli7_29sLkptiPM_cqjfb_DOA68OC_IpQqcUtaT9fBe8iRmwipbaFVaFPOMChZQGpiyiBCazEz-91tVqonl0Yg_0JRgkznKCUXh-KEB/s1600/Company+Style+Blogger+Template-1.jpg'/></a>

</li>

<li>

<a href='#'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaDOfKaW7f9QXUz-Pm_fijljNifUlOihtQYgLi6wXpULRjuGGtbIOSN7QtlOI9uiXJ1Dh_0V6bsUfZKN2RZLpyja4lcC2ODRNxZBj012aMNsOjkwoNRyTJ98XR5Gs7IGyN3mlX5vfSZzf/s1600/Business+Top+Blogger+Template-1.jpg'/></a>

</li>

</ul>

</div>

 

8. Simpan.

Cara Membuat Slideshow/Featured Content di blog 

Edit HTML.

2. Kemudian, cari kode </head>.

3. Copy kode di bawah ini dan paste SEBELUM kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><br /><br /><script type='text/javascript'>//<![CDATA[ $(document).ready(function() { //Execute the slideShow, set 6 seconds for each images slideShow(3000); }); function slideShow(speed) { //append a LI item to the UL list for displaying caption $('ul.slideshow').append(' <li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"> <h3> </h3> </div> </li> '); //Set the opacity of all images to 0 $('ul.slideshow li').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('ul.slideshow li:first').css({opacity: 1.0}); //Get the caption of the first image from REL attribute and display it $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); //Display the caption $('#slideshow-caption').css({opacity: 0.7, bottom:0}); //Call the gallery function to run the slideshow var timer = setInterval('gallery()',speed); //pause the slideshow on mouse over $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); //Get next image caption var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); //Hide the caption first, and then set and display the caption $('#slideshow-caption').animate({bottom:-70}, 300, function () { //Display the content $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); //Hide the current image current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]></script><br /><br /><style type="text/css">ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style><br /><br />

4. Simpan template.



5. Setelah itu klik Layout --> Page Elements. 

6. Klik 'Add a Gadget'

7. Pilih 'HTML/Javascript'. Kemudian, tambahkan kode di bawah ini:

<ul class="slideshow"> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvfz_O31uG2kFamyQstZ8wsyQRSXMfsrliuZxLb1poKSkfpi1ShLzi6w_IyVZseLTvhmPLVZpdmPMxN4_mlVMYtZz7ApTpTkocmwkdGqpDJXzNy51bLNXV6Kl-lbzH-mnOeI6engBIgY/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajWfqQi66Zpmpn0OFzAXrERGIPhPsi07qM3Ob4SDKrsh7gb7Li_rUR-vdfHOGSAR5umdGyaNCrCh6oOI9cSk0mZtCkZxTG51bG4E22XUsu4AjRkD33nAu-ylc1NVoQ5iDd3FIH1tQtFk/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLA-aCuWRGTCfmh-kXVHKSmOCTlVYGUH-R-s8YFn4qyCta3LRb2U5D1Es1iRmmb967GP_QnF46XbAyw3GQaedm2zR8TawhuO29GlIUdCjfiVuecsZs2FgZ9-Qu0uL6sNJ_BB0nCh_cFmg/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li> <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMaChrMREommOasuTOM7KiNxlSwt3GVC3kWE6of_SGhrNwiarYMSrTHanfIFmRxWjH1tYGIVLe3KnwzvvSJbMMMGrQ9JY5iJvWhvpZV41ij_FJbzqQ0q5K0SXveiHoEEVRKAQBEb1Ekw/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li> </ul>

Anda bisa menambahkan slide sesuka Anda.

Links

ricdetop carabuatwebgratis pandaanku