Cara Membuat Banner Ads Responsive DiBlogger | nafasmedia
Banner ads ini bisa digunakan untuk meletakkan sebuah iklan dan ini nanti hanya bisa diletakkan diatas artikel atau dibawah header.
Namun banner ini tidak boleh diletakan di dalam sidebar ya!, kenapa? karena ini bentuknya persegi panjang dan bukan persegi. jadi jika kalian letakkan didalam sidebar, maka jika dilihat bakalan tidak enak untuk dilihat. mungkin didalam template kalian sudah disediakan tempat atau gadged dibawah header. jika kalian menggunakan template Viomagz buatan nya mas sugeng, tentunya ada karena saya sendiri sudah pernah memakai template viomagz. selain itu banner ads ini juga responsive, artinya jika dilihat didalam perangkat mobile tetap akan bagus bentuknya.
Penasaran bagaimana bentuknya kalian bisa melihat di website saya yang AppsMedia atau silahkan menekan tombol Demo dibawah.
bagaimana bagus kan? jika kalian minat silahkan ikuti tutorial ini, yang perlu kalian siapkan adalah sebuah ruang kosong di website kalian, dan pastikan ruang kosong itu terletak dibawah header, jangan disidebar. oke selanjutnya adalah 1 paket kode css dan html, baiklah silahkan ikuti tutorial nya. cekidod.
TUTORIALNYA:
Yang pertama adlah silahkan copy kode css dibawah ini dan letakkan di dalam atau diatas kode </style>
/*-- Banner ads nafas --*/
.nfs-bannerad a{
margin: 25px;
padding: 10px 28px;
background: #0091da; border:1px solid;
border-radius: 100px;
font-weight: 500;
color: #fff;
text-decoration:none;
position:absolute;
}
.nfs-bannerad a:hover {
background: #fff;
color:#0091da;
border:1px solid 5b95f5}
.nfs-bannerad{
background: #ffffff;
padding: 0;
width: 100%;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border:1px solid #0091da;
border-radius: 7px;
}
.nfs-bannerad {
height: 100px;
text-align:none;
}
.nfs-bannerad a {
padding:20px 20px;
float:right;
right:1em;
margin-left:2em!important;
}
.nfs-bannerad .nfstitle970{
font-weight:500;
font-size:24px;
color:#555;
float:left;
margin-top:1em;
padding:28px
}selanjutnya kita akan letakkan kode html dibawah ini dan meletakkannya di dalam gadged/widged, nah kembali ke poin diatas tadi. apakah sudah disiapkan tempat dibawah header? jika sudah silahkan letakkan disana.
<div class="nfs-bannerad"><div class="nfstitle970">iklan anda disini</div><a href="link iklan anda" target="_blank">Buy Now</a></div>kalau ditemplate saya ada satu tempat dibawah header,untuk lengkapnya silahkan lihat ss dibawah ini.
Bagaimana apakah sudah jelas? jika sudah jelas silahkan letakkan didalam sana, jika belum tau cara pemasangannya silahkan lihat lagi ss dibawah ini.
Disana sudah saya kasih petunjuk, silahkan pasang banner berukuran kira kira 729x90. lalu isikan link yang menuju ke apa yang kalian iklankan.
PENUTUP:
Bagaimana apakah ada yang kesulitan? jika iya silahkan tanyakan dikolom kementar. mungkin itu saja yang bisa saya berikan di artikel ini, kurang lebihnya mohon maaf. sampi jumpa diartikel yang selanjutnya.