2 Cara Memasang Widget Iklan Sponsor (Sponsored Ads) di Blog

Agar tampilan blog ini tidak begitu "kesepian", saya iseng menambahkan atau menampilkan widget iklan selayaknya template blogger demo yang dibagikan secara gratis maupun berbayar (premium).

Coba lihat gambar di atas. Menarik, kan?

Sebenarnya iseng, yak! 😁 Sengaja saya tulis di blog ini sebagai bahan dokumentasi, mana tahu, suatu saat nanti diperlukan.

1. Pada langkah pertama, tambahkan kode CSS di bawah ini, di atas kode ]]></b:skin>

#iklansponsor{
   margin: 15px 0
}
.post_body .ad_box{
   background-color: transparent
}
.ad_box{
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content:center;
    color: #5f6368;
    border: 1px solid;
    border-color: #dadce0;
    border-radius: 8px;
    height: 200px
}

2. Selanjutnya, tambahkan kode HTML berikut ini pada widget HTML yang ada di pengaturan tata letak (layout) blog.

<div id='iklansponsor'>
     <div class="ad_box">Ads</div>
</div>

Ya, sudah. Sesederhana itu, kok!

Yang perlu diperhatikan yakni ketinggian kotak iklan sponsor, tepatnya pada kode height: 200px. Kalian bisa menyetelnya ke ukuran 250px atau 90px.

Kalau mau pasang penempatan widget iklan sponsor berbentuk billboards seperti gambar di atas, kalian cuma perlu kode berikut:

<div style="width:100%;height:90px;background:#fff;border:1px solid rgba(0,0,0,0.05);margin:0 auto;position:relative;">
<div id="content1">
<div style="text-align: center;">
<ul class="button">
<li><a class="buttonDownload" href="#" rel="nofollow noopener" target="_blank">Advertiser</a></li>
</ul>
<div>
<div class="visible">
Ads 970 x 250
</div>
</div>
</div>
<style scoped type="text/css">
#content1{position:absolute;color:rgba(0,0,0,0.15);font-weight:700;overflow:hidden;width:100%;height:90px;z-index:1;clear:both;position:relative;overflow:hidden}
#content1 .button{margin:0;position:absolute;left:5%;top:35%;list-style:none}
#content1 .button a.buttonDownload{display:inline-block;font-size:14px;font-weight:400;padding:8px 18px;border-radius:3px}
#content1 .button a.buttonDownload:hover{background:#fff;color:#ea1e63}
#content1 .visible{position:absolute;right:5%;line-height:90px;color:rgba(0,0,0,0.1);font-size:3rem}
@media screen and (max-width:768px){
#content1 .button{left:20px;right:20px}
#content1 .button a.buttonDownload{display:block}
#content1 .visible{display:none}}
</style></div></div>

Kode di atas ditempatkan di HTML/JavaScript pada tata letak (layout blog). Jangan lupa, perhatikan kode-kode yang sudah ditandai.

Labels: Blogger,

Kalian baru saja membaca artikel 2 Cara Memasang Widget Iklan Sponsor (Sponsored Ads) di Blog. Bila dirasa bermanfaat, mohon bagikan artikelnya. Jazakumullah khairan.