Cara Pasang Slideshow Postingan Blog Super Keren

Assalamualaikum Sobat Dumay..

Senang bisa berbagi bersama kalian semua, kali ini saya akan berbagi ulang dari blog tetangga yaitu Cara Pasang Slideshow Postingan Blog Super Keren, tentunya sudah saya modifikasi warna sedikit (ya sesuai dengan warna blog saya hehe). Oke langsung saja lihat tampilannya seperti dibawah ini (keren lo, bisa gerak2 :D ) :

Klik gambar untuk perbesar

Yuk langsung saja kita olah TKP :

1. login ke blog masing2, langsung saja edit templatenya (saya rasa sudah tau semua) :
2. Kemudian letakkan kode berikut ini diatas kode </head>

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>

3. Selanjutnya copy kode CSS berikut ini lalu letakkan di atas kode ]]></b:skin>

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #fff;background: linear-gradient(#d2ff00, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);position:relative;height:175px;margin:0 auto}

#featured{border:2px solid #fff;outline:1px solid #fff;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}

#featured ul{width:9999px}

#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}

#featured li{width:190px;display:inline-block;float:left;height:150px;background: linear-gradient(#5A8F00, #d2ff00) repeat scroll 0 0 rgba(0, 0, 0, 0);border-left:1px solid #fff;border-right:1px solid #333;}

.thumb-featured{width:175px;height:98px;margin:5px auto;overflow:hidden;border:1px solid #000}

.thumb-featured img{display:block;width:169px;height:93px;border:3px solid #fff;}

.title-featured{text-align:center;position:relative;margin-top:-15px}

.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}

.arrow{position:absolute;display:block;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibKlZZ-Bx0ie8dPWWBH_EAib6S5a7HVIHjaN2kD_AjvjXJMCvlqUuoCmti0bAygdGOp7qrSP5D304UY4RxZIPItt7Pr2wl-jWBDCCW8vmH2NtQdCYYO_-nFtnOIQtAWr5F6uRo8dmgrRM/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}

.arrow.back{background-position:-7px 50%;left:10px}

.arrow.forward{background-position:94% 50%;right:10px}

span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZhbw72An9wz9WDBcpqwpwz1KS_lRTcG2uoeedeJJm0bVKEwLs1y4zJ01iRyBua5wevCO-l0UnFt3-Tqc3HPW_bLyV2IDuiBYa_CcP8s4czhN3evsTSYCPl1qY2F9r2nbWbLVxoW8Mgs/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

4. Jika ingin Slideshownya tampil di bawah header seperti punya blog ini, maka cari kode <div id='main-wrapper'> lalu letakkan kode dibawah ini tepat di atasnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='featured-wrap'> <div id='featured'> <span class='slideloading'>Loading...</span> </div> </div> </b:if>

5. Jika ingin membuat Slideshownya tampil di atas footer (bagian kaki blog) maka cari kode<div id='footer-wrapper'> lalu letakkan kode yang ada pada point 4 tepat di atasnya.

5. Langkah terakhir Simpan template.

Gimana, berhasilkan,hehehe,,,selamat berkreasi dengan warna sesuai blog sobat,,, :D

sumber : blog mas andes

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin