RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Membuat Slot Iklan Banner Keren Ala Riswan.net

Deni Riswana by Deni Riswana
12 November 2018
in Blogger, CSS, HTML
0 0
2
0
SHARES
8.2k
VIEWS
ShareTweetSend
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.

-6.9174639107.6191228
Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019
Cara mengetahui jumlah postingan blogger
Blogger

Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain

21 November 2018

Comments 2

  1. Luthfi Assholam says:
    2 tahun ago

    terima kasih gan artikel ini sangat bermanfaat.

    izin bertanya gan, kalau ingin merubah ukuran iklannya bagaimana? misal 728 x 90

    terima kasih, semoga dijawab.

    Balas
  2. Riswan Net says:
    2 tahun ago

    tinggal rubah kode ini mas height:250px Ubah 250 jadi 90, nanti lebarnya akan menyesuaikan

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In