Cara Memasang Auto Post Slider di Blog

Cara Memasang Auto Post Slider di Blog –  Selamat pagi sob, pada kesempatan ini saya mau post nih tentang Cara Memasang Auto Post Slider di Blog. Slider ini merupakan slider yang menurut saya lebih keren di banding slider lainya sob, karna hampir setiap kali saya ganti template, dan slider ini selalu saya terapkan di blog saya, Slider yang akan saya bahas ini merupakan slider yang bergaya horizontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Untuk lebih jelasnya, langsung aja yuk kita bahas tutorial Cara Memasang Auto Post Slider di Blog.

1. Pada Dashboard blog masuk ke Edit HTML template.
2. Kemudian taruh 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 taruh di atas kode ]]></b:skin>

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}
#featured{border:2px solid #444;outline:1px solid #000;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:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}
.title-featured{text-align:center;position:relative;margin-top:-20px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUfYUjjjaRZtm8jsvQCiyGWK2Xq5qBU1tmJml98NyZfDhkNOG3rfhQgaOppWgTOT4riU5Y6NB1RklXLwMOYFwAzNS8pe7JmBiKgticW1g-YY_Ghrfh4ushd8fNJVj2EWjZOMMbkB_LwU/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:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYS5qR1WKZUlaWn00G7ixXHdhpi3PD4-xzXGPeIrrBgoPs1RgK1N-xtwM-m3RbgzkH9K2pAIa-NaWtVC_GTwgcbx7lFdc8tpXiSF51GpHRGAyfPdbY0CJBfBvkpWzhUCsSmXYQb536w1Q/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

4. Kalo pengen buat Slider-nya tampil di bawah header maka cari kode <div id='main-wrapper'> lalu taruh kode berikut 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>

Jika ingin membuat Slider-nya tampil di atas footer maka cari kode <div id='footer-wrapper'> lalu taruh kode yang ada pada point 4 tepat di atasnya.

5. Langkah terakhir Klik pratinjau template, kalau sudah cocok ama yang kita inginkan baru deh di save template
Ooke deh sob, saya kira cukup sekian dulu ya dari saya dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, semoga postingan saya kali ini dapat membantu dan bermanfaat untuk sobat semua apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.Trimakasih