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://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada template Bluesforyou 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 Carousel tampil di atas footer seperti pada template Bluesmulus maka cari kode
<div id='footer-wrapper'>
lalu taruh kode yang ada pada point 4 tepat di atasnya.5. Langkah terakhir Simpan template.
Demikian akhir dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.
Tidak ada komentar:
Posting Komentar