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://www.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

background:#6E7A86 : warna background
https://www.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.

Read More

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger - Akhir-akhir ini para blogger Indonesia diramaikan dengan pewarnaan gradasi pada pada Blog. Hal ini juga menjadi trend baru saat ini, tak sedikit juga blogger Indonesia mencoba serta mengaplikasikan pewarnaan gradasi pada situs mereka, bahkan Blogger terkenal seperti Adhi Suryadi (kompiajaib.com) dan Arlina Fitriyani (arlinadzgn.com) juga mengaplikasikan efek warna gradasi pada situs mereka.

Warna gradasi sendiri merupakan corak warna yang bisa dikembangkan/dipadukan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri, dengan kata lain warna gradasi adalah perkembangan warna atau perubahan warna yang terjadi ketika dua warna atau lebih digabungkan.

Memang tampilan warna gradasi lebih terlihat bagus dibanding warna HTML yang biasa digunakan oleh para blogger, apalagi bila sobat pandai memilih paduan warnanya, tidak hanya itu sobat dapat menambahkan animasi pada warna gradasi. Keumuman blogger mengaplikasikan warna gradasi pada navigasi atau header blog, seperti Arlina Design atau Kompi ajaib. Dan saya sendiri menggunakan gradasi warna pada blog ini, dengan tambahan animasi.

Oleh karenanya pada kesempatan ini saya akan memberikan tutorial singkat Cara membuat warna gradasi pada menu navigasi blogger, berbeda pada gradasi warna yang dipakai keumuman blogger, saya akan menambahkan animasi perpindahan warnanya, seperti yang digunakan oleh Arlina Design. Saya sendiri terispirasi dari Arlina Design(www.arlinadzgn.com) yang menggunakan Gradasi warna dengan animasi.

Cara Membuat Warna Gradasi pada Menu Navigasi Blogger

Langkah Pertama
Masuk ke Blogger, lalu pilih Tema >> Edit HTML

Langkah Kedua
Kemudian tambahkan style berikut pada class menubar atau header blog, contohnya class menubar yaitu #main-wrap

#mainwrap{width:1010pxmargin:0 auto;}

Setelah ditambahkan seperti berikut

#mainwrap{width:1010pxmargin:0 auto;background:#f24a4a;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinit;display:block;}

Langkah Ketiga
Selanjutnya, menambahkan css animasi supaya animasi gradsi warna berjalan, silahkan letakan kode berikut sebelun ]]></b:skin>

/* Animation */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Langkah Keempat
Smpan Template, lihat hasilnya

Mudah bukan? Semoga tampilan blog sobat menjadi lebih menarik, selain itu dengan menggunakan warna gradasi pada blog, berarti sobat telah mengikuti trend blogger kekinian.

Baca Juga: Waktu yang Tepat Untuk Menulis di Blog

Nah demikian artikel mengenai tutorial Cara Membuat Warna Gradasi pada Menu Navigasi Blogger seperti pada blog Arlina Design, semoga dapat bermanfaat.

Read More