Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog

Pilihan Editor :

Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog
Penulis Bagus Surochman
3
Modus malam
AAA



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 :

300 x 250

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

Cara Membuat Slot Iklan 300x250 Keren di Sidebar Blog

3 komentar:

  1. Perlu dipraktekkan ini bro.
    Thanks
    Mampir ke https://heffrihutape.blogspot.com

    BalasHapus
  2. thanks infonya gan, jgn lupa komentar balik

    https://changeofchange.blogspot.com/

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.