Membuat Iklan Teks ala Google AdSense
Iklan Teks ala Google AdSense - Setelah modifikasi template, saya mencoba membuat iklan teks yang menyerupai GA. Ternyata banyak sahabat yang nanya cara pembuatannya. Bahkan ada sebagian yang maling kode diam2 :P 
Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam2 mending saya bagiin deh tutorialnya.
Penampakannya kurang lebih seperti gambar ini :

Langkah 1 : Simpan kode ini di atas
Langkah 2 : Simpan kode CSS ini di atas
Langkah 3 : Simpan kode ini pada Widget HTML / JavaScript
Silahkan edit judul dan link.

Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam2 mending saya bagiin deh tutorialnya.
Penampakannya kurang lebih seperti gambar ini :

Langkah 1 : Simpan kode ini di atas
</head>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>
Langkah 2 : Simpan kode CSS ini di atas
]]></b:skin>
atau </style>
/* 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 3 : Simpan kode ini pada Widget HTML / JavaScript
<div id="iklan-teks">
<!-- iklan ke 1 -->
<div data-header="Blogger Tutorial" style="border-top:none">
<span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
<a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
<span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
<a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a>
</span>
</div>
<!-- iklan ke 2 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 3 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 4 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- info -->
<span class='info-iklan'>Iklan oleh Kang Ismet</span>
<span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>
</div>
Silahkan edit judul dan link.
196 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
|o|
http://masrud.blogspot.com/
Udah tak cobak di blog saya, :-)
Moga aja blogku bisa keren kayak punya e kang ismet :-D
Aamin
Komentari balik blogku kang : on3tutorial
tapi kalau pake gambar gimana kang? udah dicoba pake gambar, tapi gambar keluar nya sepotong..
mungkin ukuran nya ditambahin deui meren nya kang ismet? hihi dicoba ah..
Mohon bantuannya kang :)
Terima kasih sebelumnya. :)
ga ngerti code" an.. :)
thanks kang
coba periksain dong kang ..
padahal saya udah ikuti langkah2nya dengan benar ..
Maaf nih masih takut :)
By http://templasa.blogspot.com/
Sudah saya test di google chrome sama di IE hasilnya bagus, cuman di firefox ko gak jalan.
Apa memang gak support firefox?
Keren kang manipulasina, abdi ge katipu manawi teh GA :).
- salam damai!
- Rio Us
sangat berguna sekali.
oh ya kang, monggo di cek gmail nya ya..
- salam damai!
Maaf oot, kang gimana mengatur style dari gambar posting agar "clear: both;" menjadi "clear: left;" secara otomatis, soalnya harus edit satu persatu
$('.post-body img').css('clear', 'left');
izin ikut ah, izin nyomot juga ya kang notifikasi commentnya... ehehee
bingung cari2 tutor nya gak nemu juga.. :'(
http://3.bp.blogspot.com/-RWZdH43c-Qo/Unsp1kmTk5I/AAAAAAAAJN0/kBc245dGpmg/s1600/Kang+Ismet.jpg
Ini juga terjadi pada NOTIFIKASI blog aku kak, mohon pencerahannya ?
bikin periklanan sendiri wae kang.. :v
settings = jQuery.extend({
active: 1,
sUpSpeed: 40,
sDownSpeed: 40,
sUpEasing: null,
sDownEasing: null
}, settings);
saya menemukan kejanggalan pada jera waktu yang begitu cepat setelah cursor poin disentuh. mungkinkah terjadi disini sUpSpeed: 40 dan sDownSpeed: 40
pengen dong kang
hihih
#berharapdiapprove :)
barangkali suatu saat ada perlunya. tinggal
terapin di blog saya. terima kasih Kang Ismet
taruh aja trik ini ke dalam blog... wkwkwkwk
kunbal ya kang.
makasih udah share!
- salam damai
[ tread komennya mirip ama dora the explorder @@,
Kang Ruly tos nyobian script ieu acan?
SS : http://prntscr.com/229mbg
mohon di cek dimana salahnya http://id.wispop.com
dengan scriptnya Kang Ismet. mumpung belum
Di tutup hhhh salam humor...
keren mas :D
emang hebat Kang Ismet
buat di pasang di blog saya xD
Oya gan cara buat notif bisa di share gan??
Thanks sebelemnya
gak Ngeh kemarin2nya ni wkwkwkw....baru nyadar
Keren kang...bakalan banyak yang ketipu tuh wkwkwkwk