Selamat malam, udah lihat hasil undian babak 8 besar UEFA Champions League ? Baguslah kalau sudah hehehe. mumpung lagi ada waktu saya akan membagikan sebuah tutorial yang berjudul "Cara Membuat Iklan Teks Ala Google Adsense Dengan Efek Smooth". Apa maksud dari efek smooth tersebut, ya efek smooth ini ketika di hover ke salah satu iklannya, maka muncul isi dari iklan dengan cara smooth (halus), efek ini sangat nyaman dilihat dan javascriptnya ringan.
Berikut Tutorialnya :
- Masuk Ke Dasbor Blog Sobat,
- Klik Menu Template,
- Klik Menu Edit Template,
- Masukan Kode CSS Dibawah Ini Diatas kode
</style>
.iklan-teks { position:relative; margin:0; padding:10px; max-height:300px; overflow:hidden; }
.iklan-teks div { position:relative; background:#FFF; height:120px; padding:8px 0; margin:0; z-index:1; color:#555; }
.iklan-teks h2.iklan-header { position:relative; background:#FFF; font-size:18px; color:#0f7dc8; border-top:1px solid #d8d8d8; border-radius:0; padding:8px 0; margin:0; text-transform:none; cursor:pointer; }
.iklan-teks h2.iklan-header:first-child { border-top:0; }
.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; cursor:pointer; }
.isi-iklan span.judul-iklan { font-family:'Oswald',Tahoma,Sans-serif; font-size:18px; color:#0f7dc8; display:inline-block; cursor:pointer; }
.isi-iklan span.url-iklan { font-size:12px; color:#0f7dc8; display:block; margin:8px 0; cursor:pointer; }
.isi-iklan span.url-iklan:before { content:"\f0c0"; font-family:FontAwesome; margin:0 10px 0 0; }
.isi-iklan span.panah-besar { color:#000; background:#0f7dc8; border-radius:50%; height:34px; float:right; width:34px; text-align:center; line-height:34px; cursor:pointer; }
.isi-iklan span.panah-besar:before { content:"\f0a9"; font-family:FontAwesome; margin:0; font-size:26px; }
.isi-iklan span.panah-besar:hover { background:#2c343e; color:#FFF; }
.isi-iklan p.isi { padding:0; margin:0 40px 0 0; color:#555; font-size:12px; text-align:left; }
- Kemudian Masukan Javascript Ini diatas
</head>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>
- Jika sudah, klik save template
- Kemudian, Klik Menu Tata letak > Tambahkan Widget > Pilih Widget HTML/Javascript
- Lalu masukan kode
Html/javascript ini kedalam widget tersebut
<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
<!-- iklan ke 1 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Website Anda Disini</p></span></div>
<!-- iklan ke 2 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Website Anda Disini</p></span></div>
<!-- iklan ke 3 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Website Anda Disini</p></span></div>
<!-- iklan ke 4 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Website Anda Disini</p></span></div>
<!-- iklan ke 5 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Website Anda Disini</p></span></div></div>
- Jika sudah, klik save widget dan lihat hasilnya
Note : Kata-kata diatas sobat bisa ganti sesuai selera ^_^
Semoga Bermanfaat
^_^
