Membuat Iklan Baris Link Shopee Affiliate di Blogger Dengan Kode CSS dan HTML

Salahsatu cara mempromosikan link Affiliate Shopee/Tokopedia/Lazada adalah melalui blog, yaitu dengan menaruh link di halaman artikel maupun di widget.

Nah, ini saya nemu (lupa lagi dari mana) kode CSS dan kode HTML untuk menampilkan iklan baris berupa link Affiliate Shopee di widget blogspot.

Contoh penampakannya di desktop seperti ini.. kalau via HP akan berbaris kebawah sebanyak 8 baris.

Berikut kode CSS dan HTML-nya:

Kode CSS

Kode CSS ini dimasukan di widget "Custom CSS" di menu Blogger > Layout. Tapi tergantung template masing-masing. Kalau saya pake template Linkmagz yang sudah ada widget untuk menempatkan kode CSS-nya. 

/*Iklan Link untuk Shopee Affiliate*/
.link-btn{width:100%;position:relative;padding-top:15px}
.link-btn:after{clear:both;content:"";display:block}
.label-link-btn{font-size:12px;color:#333;position:absolute;top:0;left:0;line-height:1}
.label-link-btn svg{width:15px;height:15px;vertical-align:-3px}
.label-link-btn svg path{fill:#00aecd}
.link-btn-left,.link-btn-right{width:calc(50% - 10px);float:left}
.link-btn-left{margin-right:10px}
.link-btn-right{margin-left:10px}
.tombol-link{width:100%;height:41px;display:block;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;text-align:center;line-height:41px;box-shadow:0 1px 1px rgba(255,255,255,0.35) inset,0px 1px 1px rgba(0,0,0,0.3);align-items:center;justify-content:center;background-color:#ee5233;border:1px solid #ffffff;border-radius:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:#ffffff;font-weight:normal;font-family:arial,sans-serif;font-size:16px;margin:5px auto}
.tombol-link:hover{background-color:#fff;color:#333}
@media screen and (max-width:640px){.link-btn-left,.link-btn-right{width:100%;float:none;margin:0 auto}}

Kode HTML

Kode HTML ini dipasang di widget HTML yang biasanya sudah disediakan di template blogger sebagai tempat iklan semisal Adsense.

Silahkan taruh di widget Ads yang Kamu suka. Namun, saya sarankan jangan ditempatkan di dalam artikel karena dikhawatirkan bisa berdampak negatif pada SEO artikelnya.

Kode dibawah ini adalah contoh. Silahkan ganti link dan judul link dengan milik Kamu.

<div class="link-btn">
<div class="link-btn-left">
<a class="tombol-link" href="https://shope.ee/6zmQd12Xmz" target="_blank" rel="nofollow">HP Xiaomi dan Charger</a>
<a class="tombol-link" href="https://shope.ee/1q4KSvxIMk" target="_blank" rel="nofollow">HP Samsung  dan Acc</a>
<a class="tombol-link" href="https://shope.ee/408kNyItHt" target="_blank" rel="nofollow">HP OPPO Terbaru</a>
<a class="tombol-link" href="https://shope.ee/4KnNw1fukr" target="_blank" rel="nofollow">HP Vivo Terbaru</a>
</div>
<div class="link-btn-right">
<a class="tombol-link" href="https://shope.ee/4phswLwjCg" target="_blank" rel="nofollow">Sparepart HP dan LCD</a>
<a class="tombol-link" href="https://shope.ee/7pO2OaLJm4" target="_blank" rel="nofollow">APPLE iPhone iBox Resmi</a>
<a class="tombol-link" href="https://shope.ee/1fj9xv96Y4" target="_blank" rel="nofollow">Baterai HP Rakkipanda</a>
<a class="tombol-link" href="https://shope.ee/30G3YVZjGQ" target="_blank" rel="nofollow">Alat Servis HP</a>
</div>
<a href="https://shope.ee/9zO6LDKHi7" target="_blank" rel="nofollow" title="Iklan Shopee">
<div class="label-link-btn">
<svg x="0px">
<path d="M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z">
</path></svg>
Sponsored by Shopee
</div></a>
</div>

Terakhir, sebagai catatan. Apakah hal ini dapat mempengaruhi/berdampak buruk terhadap SEO blog dan performa blog atau tidak? saya pribadi kurang tau. Saya pribadi hanya menerapkan ini di blog sekunder yang tidak ada Adsense-nya.