Beranda > Blogger > Cara Membuat Slot Iklan Banner Keren Ala Riswan.net

Cara Membuat Slot Iklan Banner Keren Ala Riswan.net

Cara Membuat Slot Iklan Banner Keren Ala Riswan.net

RISWAN.NET – Cara Membuat Slot Iklan Banner Keren Ala Riswan.net, Halo sobat Riswan, kali ini saya akan berbagi bagaimana cara membuat slot iklan banner keren seperti yang digunakan Riswan.net.

Terlihat keren karena dipadukan dengan animasi simpel yang dapat dilihat di background slot iklan. Membuat slot banner iklan ini cukup menggunakan CSS dan HTML, jadi cukup ringan untuk dimuat. Sebelum menuju triknya sobat bisa lihat terlebih dahulu demo tampilannya di bawah ini.

See the Pen Slot Iklan Keren Ala Riswan.net by Riswan Net (@deniriswana) on CodePen.

Bagaimana, tertarik untuk mencoba memasang slot iklan banner ala Riswan.net di blog sobat? Bila tertarik yuk simak tutorialnya di bawah ini.

Membuat Slot Iklan Banner Keren Dengan CSS

Pertama silahkan Login ke Blogger kalian, kemudian masuk ke menu Tata Letak, Selanjutnya klik Tambahkan Gadget.

Kemudian pilih HTML/Javascript, lalu tempelkan kode berikut ini di dalamnya

<style>
/* Iklan Sidebar by www.riswan.net*/
#iklan-sidebar {background:#6E7A86;height:250px;width:auto;max-width:100%;font-weight:700;overflow:hidden;position:relative;}
#iklan-sidebar .buttton{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%);}
#iklan-sidebar .buttton 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;}
#iklan-sidebar .buttton a.download:hover{background:#f03c29;color:#fff;overflow:hidden;}
#iklan-sidebar .visible{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:rgba(255,255,255,0.07);animation:animate 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 animate{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='iklan-sidebar'>
<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="buttton">
<li><a class="download" href="https://riswan.net/p/pasang-iklan.html" rel="nofollow noopener" target="_blank">Advertise Now</a></li>
</div>
<div class='visible'>
<p>
300 x 250
</p>
</div>
</div>

Silahkan rubah value yang saya tandai sesuai keinginan sobat

Baca Juga:  Cara Submit URL di Google Webmaster Yang Baru

background:#6E7A86 : warna background
https://riswan.net/p/pasang-iklan.html : link tujuan

Terakhir Simpan Widget, selesai.

Bagaimana mudah bukan membuat slot iklan keren ala Riswan.net, sobat dapat mengubah ukuran dan warna background dari slot iklan tersebut, jangan lupa juga untuk merubah link tujuannya.

Baca Juga: Cara Agra Artikel Tidak Bisa Dicopy Paste Kecuali Bagian Tertentu

Demikianlah artikel mengenai Cara Membuat Slot Iklan Banner Keren Ala Riswan.net, semoga tutorial singkat ini dapat bermanfaat bagi kawan-kawan blogger semua.

Riswan

Seorang professional pada dunia digital, memiliki keahlian pada pengembangan teknologi. Aktif memagikan konten edukatif dan informatif pada bidang blockchain, website dan digital marketing.

4 pemikiran pada “Cara Membuat Slot Iklan Banner Keren Ala Riswan.net”

  1. kaka maaf mau tanya jika ingin merubah tampilan bacgroundnya menjadi theme apakah bisa dan bagaimana cara nya ya kaka..
    semoga di balas
    trimakasih kaka mohon bantuannya

    Balas

Tinggalkan komentar