Cara Membuat Iklan Teks ala AdSense Tanpa Efek Hover

Assalamu'alaikum Wr. Wb. sobat Fakhrie.

Sesuai judul, pada kesempatan kali ini saya akan membahas tentang imitasi iklan AdSense. berbeda dari sebelumnya yaitu Cara Membuat Iklan Teks ala Google AdSense dengan Efek Hover Keren 2014. Pada kesempatan kali ini saya akan memberikan tutorial Imitasi Iklan Teks AdSensenya tanpa efek hover. Saya utak-atik JQuery & JSnya karena efek hover di blog saya sering tidak muncul, mungkin masalah ini juga sering terjadi di blog sobat. akhirnya saya menemukan JSnya tanpa efek hover & hanya menampilkan 2 iklan teks saja. Nah, pada postingan ini saya akan berbagi caranya.

Penampakkannya seperti ini

Oke, langsung saja disimak baik-baik caranya :

Langkah Pertama : Masuk tab Template > Edit HTML

Langkah Kedua : Cari kode ]]></b:skin>

Langkah Ketiga : Copy kode dibawah ini

/* Iklan Teks by http://fakhrie-share.blogspot.com/
----------------------------------------------- */
#iklan-teks {
width:304px;
height:250px;
background-color:white;
position:relative;
overflow:hidden;
margin:0 auto;
}
#iklan-teks h2.iklan-header {
cursor:pointer;
background-color:white;
background-image:none;
font:normal 20px Verdana, Tahoma,Serif;
color:blue;
border-top:1px solid #d8d8d8;
padding:10px;
margin:0 0;
position:relative;
text-transform:none;
letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
border-top:none;
}
#iklan-teks h2.active {
display: none;
}
#iklan-teks h2.iklan-header:before{
content:"";
width:0;
height:0;
position:absolute;
top:20px;
right:15px;
border:5px solid transparent;
border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
height:100px;
padding:10px 70px 10px 10px;
font:normal 13px Verdana, Tahoma,Serif;
color:white;
border-top:1px solid #d8d8d8;
}
.judul {
font:normal 20px Verdana, Tahoma,Serif;
color:blue;
margin:0 0 5px 0;
}
a.judul{
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue !important;
text-decoration:none;
display:inline-block;
}
a:hover.judul {
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue;
text-decoration:underline;
}
.isi-iklan a{
font:normal 13px Verdana, Tahoma,Serif;
color:green;
text-decoration:none;
display:block;
margin-bottom:10px;
}
.isi-iklan a:hover{
color:green;
text-decoration:none;
}
.isi {
padding-top:15px;
color:#222;
text-align:left !important;
}
.panah-besar {
background: #4d90fe;
border-radius: 50%;
cursor: pointer;
height: 34px;
float: right;
margin-right: -60px;
margin-top: -40px;
width: 34px;
text-align: center;
line-height: 34px;
}
.panah-besar:hover {
background: #4472bd;
}
.info-icon {
width:15px;
height:15px;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
.info-iklan {
background:#d3d3d3;
width:100px;
height:15px;
border-bottom-left-radius:4px;
position:absolute;
top:0;
right:0;
color:#000;
font:normal 11px Arial,Sans-Serif;
text-align:left;
overflow:hidden;
padding-right:19px;
padding-left:5px;
display:none;
}

Langkah Keempat : Letakkan kode tersebut tepat diatas kode ]]></b:skin>
Langkah Kelima : Klik Simpan Template
Langkah Keenam : Masuk Tab Tata Letak
Langkah Ketujuh : Tambah Gadget HTML (lihat : Cara Menambahkan Widget HTML/JavaScript pada Blogger)

Baca Juga

Langkah Kedelapan : Copy kode dibawah ini

<div id="iklan-teks">

<div data-header="Belajar Matematika Mudah" style="border-top:none">
<span class='isi-iklan'><a class='judul' href='http://www.matematikasensasi.co.vu' target='_blank'>Belajar Matematika</a>
<a href='http://www.matematikasensasi.co.vu' target='_blank'>matematikasensasi.co.vu</a>
<span class='isi'>Belajar Matematika secara mudah, 100% gratis</span>
<a class='panah-besar' href='http://www.matematikasensasi.co.vu' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmVAIkGENIAr4C8929egm7wAE1x0kiSJKg25ZuP4jQjiVj_-d6qCUsR8QMnXsjWvKY9jN8JF_3TLipoz3Vvtyvfzi6hwurnn_nfhbKtms8MtVQdFdinLgZl9jGZIbW07kt8DW0JKZ384/s1600/icon_chevron_white.png'/></a>
</span>
</div>

<div data-header="Download Anime Naruto">
<span class='isi-iklan'><a class='judul' href='http://amaterasu-id.blogspot.com' target='_blank'>Download Naruto</a>
<a href='http://amaterasu-id.blogspot.com' target='_blank'>amaterasu-id.blogspot.com</a>
<span class='isi'>Download Anime Naruto 100% lengkap
<a class='panah-besar' href='http://amaterasu-id.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmVAIkGENIAr4C8929egm7wAE1x0kiSJKg25ZuP4jQjiVj_-d6qCUsR8QMnXsjWvKY9jN8JF_3TLipoz3Vvtyvfzi6hwurnn_nfhbKtms8MtVQdFdinLgZl9jGZIbW07kt8DW0JKZ384/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>

<span class='info-iklan'>Iklan oleh Fakhrie-Hs</span>
<span class='info-icon'><a href='#' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yBxqktxNbXg_i2L8T9sAnt7ed-Uq3Ml-G-4mgMWF7ePPs_puc3M7gmr58fn6Yd9uZmomZ89ZyhaRhyphenhyphen3hWQR8cFknHjq9TKulhr_zEpLh-ZlU2yKBfQHR8MgEAepO9_ELnUDeJMq9BCo/s1600/info-iklan.png'/></a></span>
</div>

Langkah Kesembilan : Letakkan kode tersebut pada Kolom HTML yang tersedia
Note : Ubah yang diperlukan saja
Langkah Kesepuluh : Klik Simpan.

Cara ini juga masih work 100% Lihat saja iklan di sidebar blog saya :)

Muhammad Nur Wahid Fakhrudin Seseorang yang ingin berbagi tulisan tentang blog, desain, dan geologi.