Cara Memasang SlideShow Otomatis Update di Blog

Cara Memasang SlideShow Otomatis Update di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousele k dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial Cara Memasang SlideShow Otomatis Update di Blog.

Cara Memasang SlideShow Otomatis Update 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'/>  <br>

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/AVvXsEir7AZHTt68fFIWhqM5Rj2wh35mzaDgnNkRyMgL7pmqt0kR7zQw0kQdTTt2lJZkxtLwJPb8AM-7NyCN_8Gq_P7UK6_2xVDvncB8XIur8hFM7JzMP7cfDKD6lJRarrpzoulP8ZFg2v7WsHw/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/AVvXsEiDxKmAt8Ntjvbw86nPLmIMsnwxcx8XaeQ62cPT4hC0TCdMRpA-mMgVrAhYqPxfB7Z0RRESoVkPJ5sboADChb9_F0GQKvGgoE1GBEyZZWAG-tdqY7-zKitANsoib4A4sybaww8u8VYCy6E/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

4. Selanjutnnya tempatkan dimana kamu suka SlideShow tsb , Berikut code nya :
<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>  <br> <br>

Demikian akhir dari tutorial Cara Memasang SlideShow Otomatis Update di Blog , semoga bermanfaat bagi kalian & saya juga :)

Related Post

Share this

Share on Facebook