Slider adalah istilah untuk slide image yang diterapkan pada bagian-bagian tertentu dalam sebuah halaman blog. Kali ini saya coba bagikan cara menerapkan slider pada iklan/ads yang ditempatkan dalam sebuah widget sidebar untuk blog dengan tema/template AMP maupun Non AMP.
Karena banyak dari kalangan bloger saat ini yang sudah beralih pada template AMP, termasuk saya sendiri sudah pakai produk AMP template karya bang KOMPIAJAIB yang menurut saya sangat keren.
Tutorial ini saya peruntukkan bagi teman-teman yang masih menggunakan iklan Non Adsens, sama seperti saya belum memenuhi syarat untuk ikut memasarkan Adsens, karena untuk iklan Adsens sendiri tidak memperbolehkan pengiklan menempatkan iklannya dalam bentuk slide. Sedangkan untuk produk lain nampaknya masih diperbolehkan, karena dalam kasus ini saya juga menempatkan iklan slide pada blog saya yang lain.
Penempatan slide pada widget ini sangat sederhana dan tidak mengunakan script, karena penggunaan script akan berpengaruh pada halaman AMP template, langsung saja kita mulai pembahasannya berikut:
Letakkan kode CSS dibawah ini pada bagian style diatas kode </head>.
#slider {
width: 300px;
height: 250px;
overflow: hidden;
}
.slide {
width: 300px;
height: 250px;
float: left;
position: relative;
}
#slide-holder {
width: 800%;
position: relative;
left: 0;
-webkit-animation: scroller 20s infinite;
animation: scroller 20s infinite;
}
@-webkit-keyframes scroller {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
16% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
32% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
48% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
64% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
80% {
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes scroller {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
16% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
32% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
48% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
64% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
80% {
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
body {
font-family: sans-serif;
}
#slider {
margin: 0 auto;
}
.slide:nth-child(1) {
background: #D50000;
}
.slide:nth-child(2) {
background: #C51162;
}
.slide:nth-child(3) {
background: #AA00FF;
}
.slide:nth-child(4) {
background: #6200EA;
}
.slide:nth-child(5) {
background: #304FFE;
}
.slide:nth-child(6) {
background: #2962FF;
}
Ganti nilai 300 disesuaikan dengan kondisi widget.
Ganti nilai 250 disesuaikan dengan kondisi widget.
Kemudian letakkan kode berikut pada sidebar widget.
<div id="slider">
<div id="slide-holder">
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
</div>
</div>
Ganti teks Kode Iklan Anda diatas dengan kode iklan anda.
Atau bagi teman-teman yang agak kesulitan untuk meletakkan CSS/style diatas, bisa langsung copy-paste kode dibawah ini dan tempatkan dalam sebuah widget.
<style>
#slider {
width: 300px;
height: 250px;
overflow: hidden;
}
.slide {
width: 300px;
height: 250px;
float: left;
position: relative;
}
#slide-holder {
width: 800%;
position: relative;
left: 0;
-webkit-animation: scroller 20s infinite;
animation: scroller 20s infinite;
}
@-webkit-keyframes scroller {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
16% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
32% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
48% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
64% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
80% {
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes scroller {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
16% {
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
32% {
-webkit-transform: translateX(-600px);
transform: translateX(-600px);
}
48% {
-webkit-transform: translateX(-900px);
transform: translateX(-900px);
}
64% {
-webkit-transform: translateX(-1200px);
transform: translateX(-1200px);
}
80% {
-webkit-transform: translateX(-1500px);
transform: translateX(-1500px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
body {
font-family: sans-serif;
}
#slider {
margin: 0 auto;
}
.slide:nth-child(1) {
background: #D50000;
}
.slide:nth-child(2) {
background: #C51162;
}
.slide:nth-child(3) {
background: #AA00FF;
}
.slide:nth-child(4) {
background: #6200EA;
}
.slide:nth-child(5) {
background: #304FFE;
}
.slide:nth-child(6) {
background: #2962FF;
}
</style>
<div id="slider">
<div id="slide-holder">
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
<div class="slide">
Kode Iklan Anda
</div>
</div>
</div>
Demikian pembahasan sederhana cara memasang widget slider iklan pada sideber blog AMP dan Non AMP, selalu saya harapkan mudah-mudahan ada manfaat yang bisa diambil dari topik sederhana ini, terima kasih telah berkunjung.
Show Parser Hide Parser