Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog

KURAZONE ~ Halo sahabat Kurazer, sudah dapat berapa dollar dari blog? hehe.. Pada kesempatan kali ini kita akan belajar mengenai Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog. Hasil jadinya bisa dilihat di akhir artikel ini.

Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog

1. Buka Akun Blogger >> Pilih Tata Letak
2. Tambahkan Gadget dibagian sidebar blog
3. Pilih Gadget yang HTML/Javascript
4. Copy kode dibawah ini :

<style>
/* Ads Kuranimation */
#ad-kuranimation{background:linear-gradient(to bottom, #123456,#007bfd);height:250px;width:300px;max-width:100%;font-weight:700;overflow:hidden;position:relative;}
#ad-kuranimation .tombol{list-style: none;overflow:hidden;margin:0;position:absolute;left:50%;top:55%;
   transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);}
#ad-kuranimation .tombol a.download{list-style:none;display:inline-block;background:#fff;color#394B5C;font-size:14px;font-weight:400;padding:8px 18px;border-radius:3px;overflow:hidden;}
#ad-kuranimation .tombol a.download:hover{background:#333;color:#fff;overflow:hidden;}
#ad-kuranimation .teks-ad{margin:0;position:absolute;left:50%;margin-right;-px;top:30%;color:#fff;font-size:2rem;
   transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);}
.circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0}
.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#123;animation:kuranimation 45s linear infinite;bottom:-150px;z-index:0}
.circles li:nth-child(1){left:25%;width:40px;height:40px;animation-delay:0s}
.circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}
.circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}
.circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s}
.circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s}
.circles li:nth-child(6){left:75%;width:30px;height:30px;animation-delay:3s}
.circles li:nth-child(7){left:35%;width:20px;height:20px;animation-delay:7s}
.circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}
.circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delas;animation-duration:35s}
.circles li:nth-child(10){left:85%;width:30px;height:30px;animation-delay:0s;animation-duration:11s}
@keyframes kuranimation{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}
</style>
<div id="ad-kuranimation">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="tombol">
<li><a class="download" href="https://www.kurazone.net/" rel="nofollow noopener" target="_blank">Pasang Iklan</a></li>
</div>
<div class="teks-ad">
300 x 250</div>
</div>

5. Simpan

Note :

Ganti URL https://www.kurazone.net/ menjadi URL Halaman Pasang Iklan kalian.
Untuk masalah warna, silakan kalian setting sesuaikan sendiri sesuai selera. Cara mengganti warnanya silakan ubah kode berikut ini : #123456, #007bfd dan #123
Jika template kalian menerapkan li:before pada bagian class post-body dan sidebar, maka tambahkan kode dibawah ini (letakkan diatas kode </style>)

li:before{display:none !important}

Hasilnya akan nampak seperti dibawah ini :

Pasang Iklan

300 x 250

Itulah informasi mengenai "Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog", selamat mencoba dan semoga bermanfaat. Goodluck!!

BACA JUGA ARTIKEL MENARIK LAINNYA: