Cara Membuat Iklan Teks ala Google AdSense dengan Efek Hover Keren

Assalamu'alaikum Wr. Wb. Sobat Fakhrie.

Maaf, saya baru update postingan karena saya sedang sibuk dengan urusan didunia nyata. Tapi saya sempatkan untuk mempublish sebuah artikel pada malam ini.

Pasti Sobat blogger sudah merasakan bagaimana susahnya daftar pada sebuah program iklan terkenal & terpercaya yang dicetuskan oleh Perusahaan Google yang notabennya merupakan Search Engine nomor 1 didunia. Yapp, sebuah program iklan tsb. adalah Google AdSense.

Daripada frustasi karena selalu gagal diApprove oleh GA, maka saya akan memberikan alternativenya. model iklan ini hanyalah sebuah imitasi dari tampilan iklan teks GA. Tampilannya sangat persis seperti Iklan Teks GA.

Penampakannya kira-kira seperti ini :

Bagi yang ingin blognya terhiasi oleh iklan seperti GA seperti saya, silahkan disimak baik-baik caranya :

Langkah pertama : masuk tab Template
Langkah kedua : klik edit HTML
Langkah ketiga : cari kode </head>
Langkah keempat : Copy kode dibawah ini ;

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

Langkah kelima : letakkan kode yang sudah dicopy tadi tepat diatas kode </head>
Langkah keenam : cari kode ]]></b:skin>
Langkah ketujuh : copy semua kode dibawah ini ;

Baca Juga

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
width:304px;
height:259px;
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 kedelapan : Letakkan kode yang sudah dicopy tadi tepat diatas kode ]]></b:skin>
Langkah kesembilan : Klik Simpan Template
Langkah kesepuluh : Masuk tab Tata Letak
Langkah kesebelas : Klik "Tambah gadget"
Langkah keduabelas : pilih HTML/JavaScript
Langkah ketigabelas : Copy kode dibawah ini dan letakkan di kolom konten HTML/JavaScript yang tersedia

<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>

<div data-header="Download Anime Kekkaishi">
<span class='isi-iklan'><a class='judul' href='http://kekkaishi-id.blogspot.com' target='_blank'>Download Kekkaishi</a>
<a href='http://kekkaishi-id.blogspot.com' target='_blank'>kekkaishi-id.blogspot.com</a>
<span class='isi'>Download Anime Kekkaishi 100% Lengkap
<a class='panah-besar' href='http://kekkaishi-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>

<div data-header="Blogger Tutorial & SEO">
<span class='isi-iklan'><a class='judul' href='http://fakhrie-share.blogspot.com' target='_blank'>Tutorial & SEO</a>
<a href='http://fakhrie-share.blogspot.com' target='_blank'>fakhrie-share.blogspot.com</a>
<span class='isi'>Menyajikan Tutorial Blog & Trik SEO
<a class='panah-besar' href='http://fakhrie-share.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 keempatbelas : Simpan

silahkan rubah judul dan linknya ^_^
Sebenarnya Cara ini sudah pernah diShare oleh Kang Ismet. Cara ini juga masih work 100% Lihat saja iklan di bawah postingan blog saya :)

Note : Template Blog akan berperan penting dalam hasilnya, karena didalam template ada beberapa JQuery yang akan bentrok dengan JQuery iklan mirip GA ini yang akan menghasilkan efek & hasil yang berbeda. Saya rekomendasikan agan memakai template Evo Magz

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