Membuat jQuery Ads Popout

Bismillah. Iklan pada blog bagi sebagian blogger adalah hal penting walau sebagian lagi tidak menyukainya. Terlepas dari suka dan tidak suka, kali ini Blogger Tune-Up akan memberikan artikel yang berkaitan dengan iklan. Sebenarnya telah beberapa kali Blogger Tune-Up menyuguhkan teknik menampilkan iklan, mulai dari Ads Popup^[1], Banner Rotator^[2] dan lain sebagainya. Semua artikel tersebut disuguhkan sebagai alternatif bagi para blogger untuk memilih mana tampilan yang terbaik untuk menampilkan iklan pada blognya.

Ads Popout yang akan disuguhkan sekarang sebenarnya hampir mirip dengan Ads Popup yang pernah dibahas sebelumnya hingga Ads Popup versi update^[3] yang menggunakan CSS3. Tetapi pada jenis Ads Popout akan dilibatkan jQuery dan Plugin jQuery yaitu jQuery Cookie^[4] yang digunakan untuk mengingat bahwa iklan pernah dibuka atau ditutup. Ads Popout lebih enak dilihat dan diakses karena menggunakan ruangan yang sangat sedikit dengan efek buka-tutup (slide-in-slide-out). Selain itu lebih mudah diterapkan pada blogger karena hanya melibatkan beberapa baris kode XHTML, CSS dan JavaScript. (Download terlebih dahulu file pendukung dan upload pada webhosting anda)

Demo jQuery Ads Popout

Integrasi Kode CSS Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#infout{margin:0;padding:0;position:absolute;top:250px;left:0;width:320px;height:350px;z-index:100;overflow:hidden;}
#infout a,#infout a img{text-decoration:none;border:0;outline:0}
#infout a span{display:none}
#infout #judul{width:20px;height:350px;position:relative;left:0;z-index:102}
#infout a#tutup{position:absolute;background:transparent url(http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BMNhIrXI/AAAAAAAAABQ/r4s_MBsv5GM/s800/trans_pixel.gif);top:0;left:230px;height:25px;width:65px;cursor:pointer}
#infout a#buka{cursor:pointer}
#infout #wadah{position:absolute;top:10px;left:20px;margin-left:-300px;z-index:101}

Integrasi Kode jQuery Pada Template

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script language='javascript' src='http://plugins.jquery.com/files/jquery.cookie.js.txt'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var infoOut = "#infout";
var infoBox = "#wadah";
var infoLebar = $(infoBox).width() + $("#judul").width();
var infoCookie = "infokuki";
function bukaInfo() {
$(infoOut).width(infoLebar+"px");
$(infoBox).animate({marginLeft: "0"},1200)
$.cookie(infoCookie, null);
}
function tutupInfo() {
$(infoBox).animate({marginLeft: "-"+infoLebar+"px"},1200,"linear",
function(){ $(infoOut).width($("#judul").width() + "px"); }
);
$.cookie(infoCookie,'closed',{expires: 28});
}
$("#buka").click(function() {
if(!$.cookie(infoCookie)) {
tutupInfo();
} else {      
bukaInfo();
}
return false;
});
$("#tutup").click(function() {
tutupInfo();
return false;
}); 
if(!$.cookie(infoCookie)) {
$(infoOut).animate({opacity: 1.0}, 1500, "linear", bukaInfo);
}
});
//]]></script>

Integrasi Kode XHTML Pada Template

Langkah 7
Cari kode dibawah ini

</body>

Langkah 8
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<div id='infout'>
<div id='judul'>
<a id='buka'><img src='URL/popout-cap.gif' width='20' height='350' alt='Buka Informasi'/></a>
</div>
<div id='wadah'>
<a id='tutup' title='Tutup Informasi'><span>Tutup</span></a>
<a href='http://modification-blog.blogspot.com' title='Informasi Menarik dari Sponsor' target='_blank'><img src='URL/popout-ad.png' width='300' height='330' alt=''/></a>
</div>
</div>

Langkah 9
Simpan template dan preview blog anda...

Keterangan:

• Ubahlah URL sesuai dengan alamat URL yang anda persiapkan (sesuai file yang anda upload pada webhosting)
• Ubahlah http://modification-blog.blogspot.com sesuai dengan URL iklan (alamat URL yang dituju)
• Agar tampilan jQuery Ads Popout tidak ikut bergeser saat halam digeser (tetap pada posisinya) ubah kode position:absolute; menjadi position:fixed; pada langkah 4 baris ke 1

Unduh jQuery Ads Popout

Catatan Kaki:
[1] Ads Popup
[2] Banner Rotator
[3] Ads Popup Update
[4] Klaus Hartl - jQuery Cookie
[5] Credit and Special Thanks to CSSNewbie for great tutorial

Read More

Source Code jQuery News Ticker Recent Posts

Bismillah. Kali ini Blogger Tune-Up mulai membuka kode-kode yang selama ini tidak ditampilkan ke umum. Bagi anda para penyuka coding mudah-mudahan source code kali ini dapat dikembangkan lebih bagus lagi. Dan jangan lupa untuk menyertakan sumber source code ini agar menjadi jelas asal-usulnya dan ini pula sebagai bentuk terima kasih kepada pengembangnya. Hanya ini yang bisa kami berikan kepada para pembaca setia Blogger Tune-Up.

Silahkan anda otak-atik kode jQuery News Ticker Recent Posts ini sesuai dengan keinginan dan kebutuhan anda dan jangan lupa berikan informasi kepada Blogger Tune-Up agar kami bisa mereview dan menampilkan hasil olahan anda. Selamat memodifikasi....

/******************************************************************************
Original Code jQuery News Ticker Recent Post with Thumbnail v1.0
(c) 2010 Hendriono from http://modification-blog.blogspot.com/
******************************************************************************/
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywO3Y9uiqjiBRRVbZOnwfR_DsC35hejhfG94cZO6GEjmM3dBg_gne5KpDmstOTaCuUryk6FyU4CBSeSbKBhHDdzV6-rtgK4k2rYMmSdSwd0tp-CJSPYHYaDdHwq__aDjWLsEaZtnzlTJd/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://modification-blog.blogspot.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}

Read More