Cara Memasang Auto Post Slider Carousel 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='https://cdn.jsdelivr.net/gh/Indzign/theme@master/autopostslider.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/AVvXsEhuPnzkoDZTmHuwfxIAuce_RgfihiOryo7vD-N-2OrbhTEDoTRQzEqfL6LBl0K2AMtcCZqNPoUbHgreot7kxWBUxYCo1GSwC7Q_GGkMp85YUyyvizNO3kYbw7zbceUHECtY7Piw2OJPGNo/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/AVvXsEikZQWSZX2uOIN9SIw0xjzenfHPIp0WYkaCaLkJnu0Q1GY1Z10fQtmw62wGJBWh66-wzmficYVOV4U1lCNSrA8p5t2l8S8hOaynsClNk9_HeI5v5OcmKhjKBFClqUqin_Qc5jGsFlID2ks/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 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 maka cari kode <div id='footer-wrapper'> lalu taruh kode yang ada pada point 4 tepat di atasnya.

5. Langkah terakhir Simpan template.

sumber referensi: https://www.naminakiky.com/2017/06/cara-memasang-auto-post-slider-carousel.html