Stroom Featured 125x125 Auto Change Ads

Hari ni teringin pula nak kongsikan satu widget khas buat blogger-blogger / penulis blog yang gila meletakkan banner iklan 125x125 di dalam blog. Buat pengetahuan anda, widget ini boleh memuatkan 10 banner iklan bersaiz 125x125 dan ianya dibahagikan kepada 2 bahagian. Bahagian / barisan pertama (5 banner pertama) akan bertukar dengan bahagian / barisan ke 2 ( 5 lagi banner) selang beberapa saat. Proses ini akan berulang tanpa henti, melainkan anda menutup tab browser internet anda.

Widget ini hanya akan terpapar pada "Home Page" sahaja. Jika anda membaca artikel di dalam blog ataupun anda mengklik "Read More". Widget ini akan tersembunyi & tidak akan terpapar ketika anda membaca artikel. Kiranya widget ini tidak akan mengganggu proses loading blog bila anda klik "Read More" ataupun jika anda ingin membaca artikel lain di blog yang sama.

Jika anda tidak percaya. Anda boleh lihat DEMO di sini.

Mari kita teruskan dengan langkah-langkah seterusnya:

1. Anda perlulah "LOG IN" ke dashboard anda.
2. Sila klik anak panah kecil yang berada betul-betul ditengah-tengah di antara ikon kertas & "View Blog". Kemudian sila pilih "Template", diikuti oleh "Edit HTML" dan klik "Proceed".
3. Selepas itu anda harus klik pada bahagian "Expand Widget Templates".
4. Gunakan button "Ctrl + F" pada keyboard anda untuk mencari code ]]></b:skin>.

CODE CSS

CSS Code dibawah ini perlu di letakkan di atas / sebelum code ]]></b:skin>

#featured { height:200px;
background-color:#4a4a4a;
background-image:url(http://www.opendrive.com/files/6874645_tAhQA/featured_bg.gif);
background-position:top center;
margin:0 auto;
margin-top:0px;
position:relative;
overflow:hidden;
}
.featured_one_wrapper {
padding:20px;
padding-top:28px;
text-align:center;
}
.featured_one_wrapper img.fthumbnail {
position:relative;
padding:6px;
background-color:#f9f9f9;
width:125px;
height:125px;
margin-left:20px;
margin-right:20px;
}
.featured_one_wrapper img.fthumbnail:hover {
background-color:#f0f0f0;
}

JavaScript Part

Sila copy & paste JavaScript ini sebelum / atas code </html>

<script src='http://www.opendrive.com/files/6874743_qk00w/tabber.js' type='text/javascript'/>
<script src='http://www.opendrive.com/files/6874746_Ix8qA/zenverse_gallery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

HTML Part

Okay, part yang ini agak sukar sedikit. Kerana anda perlu meletakkan code ini dimana-mana bahagian yang anda mahukan. Tapi di sini saya telah meletakkan code ini selepas code "header" & diatas code "Navigation Menu". Saya nak terangkan lebih detail pun, saya tak pasti bagaimana saya harus menerangkannya. Ini kerana setiap code html header & navigation menu adalah berbeza bagi setiap template. Code yang berwarna merah itu anda perlu tukar dengan target url yang anda kehendaki. Samada url blog ataupun iklan. Manakala yang berwarna hijau itu anda perlu tukar dengan url image banner 125x125.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- begin featured content -->

<div id='featured'>

<div class='onethousand_wrap' style='margin-top:3px;overflow:hidden;'>

<!-- begin featured content #1 -->

<div class='featured_one_wrapper' id='zv_img1'>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<div class='clear'/>

</div><!--/featured_one_wrapper-->

<!-- end featured content #1 -->

<!-- begin featured content #2 -->

<div class='featured_one_wrapper' id='zv_img2' style='visibility:hidden;'>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<a href='target-url' title='ads-title'><img alt='' class='fthumbnail' src='125x125-Banner-Url'/></a>

<div class='clear'/>

</div><!--/featured_one_wrapper-->

<!-- end featured content #2 -->

</div>

</div><!--/featured-->

<!-- end featured content -->

</b:if>

Jika anda ingin menggunakan tutorial ini pada blog anda dan anda tidak pasti dimana anda ingin masukkan code HTML berkenaan. Anda bolehlah tinggalkan komen dibawah. Jangan masukkan link anda di ruangan komen. Anda hanya perlu komen dengan menggunakan ID Blog anda, dan saya akan menjejaki anda kembali. Ini kerana ruangan komen ini adalah "DoFollow". Ataupun anda boleh hubungi saya dibahagian "Contact Us". Sekian, Terima Kasih.

Picture Credit: N/A
Source: Sembang Cyber