Friday, December 17, 2010

Bismillah. Kata "melindungi" menunjukan adanya kelemahan, dan seandainya dijabarkan lebih jauh maka sesuatu hal yang dilindungi tetap memiliki celah keamanan yang bisa saja digunakan untuk mengeksploitasi. Kata seorang pakar jaringan melindungi itu memiliki tingkat kekuatan sekitar 99% terhadap exploitasi dari luar. Begitu pula dengan tips trik jQuery kali ini, tujuannya untuk melindungi gambar yang kita upload pada halaman blog agar tidak mudah untuk diambil dan disebarkan lagi oleh orang lain. Tetapi bukan berarti gambar benar-benar aman dari pencurian karena masih banyak cara untuk bisa mengambil gambar dari suatu situs walau gambarnya dilindungi. Plugin jQuery Image Protector ini buat oleh David Walsh[1].
jQuery Image Protector

Kenapa gambar perlu di lindungi?

  • Menjaga keaslian sumber, seandainya kita adalah pemilik atau pembuat gambar
  • Menjaga gambar dari olahan citra digital tangan-tangan jahil, jika gambar tersebut merupakan hasil photo shoot sendiri atau keluarga
  • Menghindari hotlinking[2] yang bisa mengakibatkan hosting pribadi kita kehilangan banyak bandwidth. Hotlinking sangat merugikan bagi blogger yang menggunakan hosting sendiri, bagi pengguna blogspot jangan takut dengan hotlinking.

Apa hotlinking?

Hotlinking atau sering disebut juga inline linking, leeching, piggy-backing, direct linking, offsite image grabs, bandwidth theft adalah suatu cara pengambilan gambar dari suatu situs untuk kemudian ditampilkan kembali pada situs lainnya dengan menggunakan link dan file gambar yang sama. Sederhananya; orang lain mengambil gambar dari situs kita secara langsung menggunakan link dari hosting yang sama tanpa menguploadnya lagi. Lebih sederhananya; "SALIME" artinya SAtu LInk gaMbar rame-ramE. Hal ini merugikan bagi penyewa hosting karena mereka akan kehilangan banyak bandwidth bahkan bisa over quota sedangkan yang membayar adalah penyewa hosting. Sedangkan penyedia layanan hosting tidak bisa melakukan apapun pada mereka para hotlingking. Lebih lengkapnya tentang Hot-Linking silahkah baca disini[3] tapi anda harus banyak makan roti dulu biar lancar bahasa Inggris (hahaha...)

Integrasi jQuery Image Protector pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'http://lh3.ggpht.com/_xcD4JK_dIjU/TQukGToihnI/AAAAAAAAEqo/58_UsBfwHdo/s800/blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('body')
});
};
$(window).bind('load', function() {
$('img.protect').protectImage().parents('a').removeAttr('href');
});
</script>
Langkah 5
Simpan template dan baca langkah selanjutnya...

Memasukan kode jQuery Image Protector pada gambar

Setelah plugin jQuery Image Protector di integrasikan dengan template, maka langkah selanjutnya memasang kode protector pada gambar yang akan dilindungi.
Langkah 6
Upload suatu gambar pada artikel atau pada blog anda dan pindahkah mode editor ke mode "Edit HTML"
Langkah 7
Sisipkan kode dibawah ini:
class="protect"
Pada kode gambar seperti dibawah ini:
<img src="1.jpg"/>
Sehingga menjadi:
<img class="protect" src="1.jpg"/>
Misal:
Sebelum disisipkan kode:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Setelah disisipkan kode:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img class="protect" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Langkah 8
Terbitkan artikel anda dan silahkan cek dengan klik kanan "View Image", klik kanan "Save Image as..." atau klik gambar lalu drag pada tab baru...
Keterangan:
  • Jika anda pernah memasang perpustakan jQuery maka kode pada langkah 4 baris 1 tidak perlu diikut sertakan, baca disini
Referensi:
[1] David Walsh
[2] Simple Wikipedia : Hot-Lingking
[3] Wikipedia : Inline Linking

Thursday, December 16, 2010

Bismillah. Gambar merupakan salah satu perlengkapan pada blog yang berfungsi sebagai penegas, pemanis, iklan, atau bahkan sebagai pengampai suatu kalimat singkat yang terkadang sulit untuk disampaikan dengan tulisan. Gambar mampu mewakili kalimat panjang yang digunakan untuk menuangkan ekspresi seseorang dan banyak lagi fungsi dari gambar. Bagi blogger yang suka mengupload gambar sebagai pelengkap suatu artikel harus lebih berhati-hati dengan hosting yang digunakan, karena bisa saja gambar-gambar yang sudah kita upload dikemudian hari akan dihapus oleh pemilik hosting. Hal ini akan merusak tampilan artikel yang sudah ditulis. Jika jumlah gambar sedikit kita bisa saja dengan mudah untuk menggantinya, bagaimana jika gambar yang sudah kita sertakan berjumlah ratusan? Pusiiiiing...
jQuery Automatic Remove Broken Image
Link gambar yang rusak atau hilang (broken image) sangat menggangu tampilan dari blog, dari pada kita harus mengecek satu-persatu gambar pada blog kita dan kemudian membuangnya, lebih baik kita menambahkan sedikit script jQuery untuk membuangnya secara otomatis link gambar yang rusak (broken image).

Kode jQuery Untuk Membuang Link Gambar Yang Rusak

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'>
$('img').error(function() {
$(this).remove();
});
</script>
Langkah 5
Simpan template dan preview blog anda...

Happy Blogging... :)
Bismillah. Telah banyak yang membahas tentang cara membedakan komentar penulis dengan komentar pengunjung, bahkan jika kita mencari di mesin pencari dengan kata kunci tersebut maka kita akan menemukan ribuan blogger membahas hal tersebut, dari master sampai newbie. Tips trik blogger hack kali ini tidak akan menggunakan teknik yang sama (yang pernah dibahas kebanyakan blogger dengan menggunakan XHTML) tetapi kali ini akan melibatkan jQuery sebagai styler-nya (baca; pemberi sentuhan). Dengan beberapa keunggulan tentunya, diantaranya; lebih sederhana kode yang digunakan; lebih mudah di modifikasi; dan silahkan temukan sendiri kelebihan lainnya.

Persyaratan Untuk Memodifikasi Komentar

Dibawah ini beberapa hal yang harus diterapkan sebelum memodifikasi komentar, diantaranya:
  • Blogger anda harus memiliki widget profile/tentang/about bawaan blogger (wajib hukumnya)
  • Template anda harus sudah terpasang perpustakaan jQuery[1] (wajib hukumnya)

Kode jQuery Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan perpustakaan jQuery dibawah ini diatas kode pada langkah 4:
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
Langkah 6
Cari kode dibawah ini (kode dibawah ini tersedia jika blogger anda memiliki widget profile):
<b:widget id='Profile1' locked='false' title='xxx' type='Profile'>
Masukan (copy paste) kode pada langkah 7 disini (yang di blok "xxx" sesuai penamaan yang anda berikan)
<b:else/> <!-- normal blog profile -->
Langkah 7
Masukan (copy paste) kode jQuery dibawah ini diantara kode pada langkah 6:
<script type='text/javascript'>
$().ready(function() {
$('dl#comments-block dt a').each(function(i) {
if($(this).attr('href') == '<data:userUrl/>') {
$(this).parent('dt').addClass('author-comment').next('dd.comment-body').addClass('author-comment').next('dd.comment-footer').addClass('author-comment');
}
});
});
</script>
Langkah 8
Simpan Template dan lanjutkan ke langkah berikutnya...

Kode CSS Komentar

Langkah 9
Cari kode dibawah ini:
]]></b:skin>
Langkah 10
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 9:
dl#comments-block dt.author-comment {
background-image: none;
background-color: #EDE5BE;
margin-bottom: 0px;
padding: 6px 0 6px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid #FFF7CF;
}
dl#comments-block dd.comment-body.author-comment {
color: #593622;
background-color: #EDE5BE;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px;
border: 1px solid#ccc;
border-top: 1px solid #CBC4AC;
}
dl#comments-block dd.comment-footer.author-comment {
background-color: #CBC39C;
padding: 3px;
margin-top: 0px;
border: 1px solid #ccc;
border-top: none;
}
Langkah 11
Simpan Template dan preview blog anda...

Keterangan:
  • Jika setelah dilakukan modifikasi ini komentar tidak mengalami perubahan ada kemungkinan kode CSS standar blogger sudah di rubah oleh pembuat template
  • Dan atau terjadi konflik (tambrakan) kode jQuery yang digunakan dengan kode jQuery lainnya
  • Lihat Demonya disini

Penjelasan tentang kode jQuery dan kode CSS akan dibahas dalam kesempatan mendatang dan itu juga jika sedang semangat untuk menulis... Happy blogging... :)

Friday, December 3, 2010

STP For Blogger - Memelihara Sebuah Blog

Posted by dav On 9:38 PM
Bismillah. Apa sih maksudnya? jQuery apa lagi? Mungkin itu yang terlintas dibenak sahabat blogger dengan judul artikel kali ini. Judul artikelnya menggunakan bahasa Inggris bukan karena ingin di sebut "Nginggris" tapi memang agak sulit untuk kemudian menterjemahkannya kedalam bahasa Indonesia. Ide-nya muncul dari selembar kertas bungkus jajanan gorengan dikantin hari ini. Saat perut lapar kemudian masuk kekantin untuk membeli beberapa lembar goreng-gorengan dengan harga kurang dari Rp. 5000,- kemudian di bungkus dengan secarik kertas yang sudah digunting rapih hingga sebagian artikel hilang. Sambil makan gorengan aku baca-baca artikel bungkus gorengan tersebut dengan judul cukup membuat penasaran "Memelihara Sebuah Merk". Dengan santainya aku baca artikel tersebut tanpa keseriusan, bahkan sambil berkelakar dengan teman. Hingga akhirnya bacaan dalam hati ini terhenti pada satu singkatan pendek "STP" dalam kurungnya (segmentation, targeting dan positioning). Terpancinglah otak blogger-ku untuk mengimplementasikan STP pada blog.
STP For Blogger - Memelihara Sebuah Blog

Segmentation

Jika anda adalah blogger dan kemudian berencana ingin menciptakan agar blog kita menjadi terkenal dengan jumlah pengunjung jutaan sehari maka hal yang terpenting adalah menentukan tema artikel utama blog kita untuk para pengunjung. Tema disini dimaksudkan agar pengunjung blog kita menjadi fanatik dengan artikel-artikel yang kita buat karena mereka yang berkunjung adalah orang-orang tertentu/khusus. Misal tema tentang JavaScript, jQuery, Mootools, XHTML, CSS, Elektronik, Otomotif, atau yang sesuai dengan keahlian anda didunia maya atau dunia nyata. Hindari membuat tema yang berisi informasi tak karuan, acak-acakan dan tak jelas target pembacanya. Segmentation adalah menentukan tema utama blog dengan segmen (cakupan target pembaca) pada jenis atau kategori tertentu.
Salah satu kesalahan blogger Indonesia adalah masalah tema blog yang topiknya tidak menentu dan tidak jelas cakupan target pembacanya, sehingga menggunakan trik yang cukup "jorok" untuk memancing (baca: memaksa) pembaca agar berkunjung ke blog miliknya. Blogwalking adalah salah satu cara yang paling banyak digunakan oleh para Blogger Indonesia untuk mengajak blogger lain berkunjung. Pada mulanya blogwalking dilakukan untuk mencari dan menemukan informasi menarik yang digunakan untuk memicu ide-ide segar dalam otak kita. Atau ada juga yang menyebutkan bahwa blogwalking dilakukan untuk memberikan apresiasi terhadap artikel sahabat blogger lain. Tapi kemudian kegiatan blogwalking dilakukan hanya untuk memancing (baca; memaksa) blogger lain agar berkunjung ke blog kita, sehingga komentar-komentar yang ditinggalkan pada blog kita hanya sebagai suatu balasan tanpa maksud dan tidak terencana setelah melihat dan membaca artikel-artikel yang dibuat kurang begitu bermutu dan tanpa arah.

Targeting

Targeting adalah menentukan jumlah pengunjung untuk blog kita pada periode tertentu. Hal ini penting agar kita dapat mengetahui seberapa populer dan penting blog kita dimata para pengunjung. Buatlah target jumlah pengunjung para periode tertentu, hal ini digunakan sebagai salah satu instrumen bahan evaluasi pada blog kita, sehingga pada periode tertentu kita dapat menemukan kekurang-kekurangan yang harus diperbaiki pada blog kita, baik itu dari sisi mutu artikel maupun dari sisi layout. Perhatikan para pengunjung blog kita apakah berasal dari satu alamat ataukah dari berbagai alamat yang silih berganti dan berubah-ubah dalam periode tertentu. Jika para pengunjung yang datang kebanyakan berasal dari satu alamat tertentu dan tidak berubah-ubah pada periode tertentu maka ini salah satu instrumen bahwa blog kita bermanfaat dan penting bagi mereka. Tapi jika para pengunjung berasal dari berbagai alamat yang berubah-ubah pada periode tertentu maka hati-hatilah karena ini merupakan indikasi bahwa blog kita kurang bermanfaat dan tidak penting bagi para pengunjung walaupun bisa saja jumlah pengunjung dalam jumlah banyak setiap harinya. Segera lakukan evaluasi pada blog kita dengan berbagai pertanyaan "mengapa", jika kita mau terus berusaha mengevaluasi maka suatu hari blog anda akan masuk dalam kategori profesional saat kita sendiri sebagai pemilik tidak/belum menyadarinya.

Positioning

Positioning adalah memperhatikan posisi blog kita saat ini baik dimata pengunjung ataupun dimata mesin pencari. Hal ini juga penting secara internal maupun eksternal agar kita dapat dengan mudah mengevaluasi kekurangan blog kita. Jika posisi blog kita saat ini bagus dari sisi jumlah kunjungan maupun dari sisi mesin pencari maka itu menandakan bahwa blog kita cukup unik dan khusus. Secara internal positioning sangat berpengaruh terhadap semangat pemilik blog untuk terus menulis artikel dan memperbaiki kualitas artikelnya. Secara eksternal positioning juga berpengaruh terhadap jumlah kunjungan karena para pengunjung akan merasa menemukan suatu blog yang unik dan khusus yang sangat cocok bagi mereka.
Terus pantau posisi blog kita agar kita dapat terus meningkatkan kualitas blog kita serta bandingkan (compare) posisi blog kita dengan blog-blog yang sejenis agar kita dapat menemukan keunikan yang harus di tonjolkan pada blog kita. Untuk melakukan perbandingan antara blog kita dengan blog kompetitor bisa menggunakan situs-situs penyedia layanan compare seperti Google dan Alexa.

Jika kita mampu merumuskan STP dengan baik bukan tidak mungkin blog kita akan menjadi blog yang profesional dan berujung dengan penghasilan yang bukan saja lumayan tapi muantaaap! Karena STP adalah salah satu faktor marketing yang bertujuan untuk mempopulerkan blog kita dan memposisikan blog kita sebagai blog yang profesional. Mari terus belajar untuk menggunakan tips dan trik yang bersih. Blog kita adalah rumah kita dan produk kita, memperhatikan dan merawatnya berarti juga memperbaiki kehidupan kita. Insya Allah...

Happy Blogging :)

Thursday, November 25, 2010

Membuat jQuery Ads Popout

Posted by dav On 7:53 AM
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)

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

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

Wednesday, November 17, 2010

Source Code jQuery News Ticker Recent Posts

Posted by dav On 9:36 AM
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.
Source Code jQuery News Ticker Recent Posts Plus Thumbnail
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")
}

Monday, October 25, 2010

Bismillah. Satu bulan penuh Blogger Tune-Up tidak di update. Selain karena kekesalan masalah Account Google Code yang di suspend kemudian dilanjutkan Account Twitter yang juga ikut-ikutan di suspend, membuat saya secara pribadi menjadi malas untuk menulis. Sekarang Blogger Tune-Up kembali sibuk dengan dunia nyata, berbagai inovasi dicurahkan didunia nyata, mulai dari Microcontroller, CNC Machine dan hal-hal lain yang berbau elektronik. Tapi setelah ditelaah baik-baik sangatlah tidak adil jika Blogger Tune-Up kemudian "diam", toh Google tidak akan peduli dengan aksi diam.
Mulai hari ini saya mencoba untuk membangkitkan kembali semangat yang hilang maka terbitlah artikel ini yang mudah-mudahan bermanfaat bagi teman-teman blogger. Tidak lupa ucapan terima kasih atas dukungan teman-teman blogger yang terus memberikan semangat kepada saya hingga mampu kembali ke dunia maya.
Semakin hari teknologi web 2.0 semakin berkembang hingga kemudahan demi kemudahan dapat kita rasakan. Salah satunya adalah hubungan antar website yang semakin mudah, dan sekarang kita akan mencoba menggabungkan dua buah website yang bisa saling mendukung satu sama lain. Facebook sebagai salah satu website jejaring sosial dapat kita manfaatkan sebagai salah satu media menulis artikel untuk diterbitkan pada blog kita. Sekarang hal ini menjadi mungkin ketika Indonesia sebagai salah satu negara yang menduduki peringkat 3 dunia dalam hal jumlah pengguna aktif maka dapat dipastikan seorang blogger minimal memiliki satu akun Facebook. Sambil update status dan memberi komentar tidak ada salahnya kita menuliskan artikel untuk blog kita.
Pihak ketiga yaitu TypePad membuat kemudahan bagi para pengguna Facebook untuk menulis dan menerbitkan artikel blog langsung dari Facebook yang kemudian aplikasi ini diberi nama Blog It TypePad. Dan dibawah ini adalah Platform yang didukung oleh Aplikasi Blog It TypePad:

Integrasi Blogger dengan Facebook

Langkah 1
Pastikan anda dalam keadaan login ke Facebook dan ke Blog anda
Langkah 2
Klik link Blog It TypePad
Langkah 3
Halaman permintaan mengikuti "BLOG IT by TypePad" akan terbuka kemudian klik tombol "Izinkan" atau "Allow"
Langkah 4
Halaman "Add Account" akan terbuka, pilih platform blog anda kemudian klik tombol "Add Account"
Langkah 5
Halaman otorisasi akan terbuka kemudian klik tombol "Authorize Blogger Account"
Langkah 6
Kita akan dibawa ke halaman Google Accounts untuk melakukan permintaan otorisasi, jika anda dalam keadaan login ke Google Accounts kemudian klik "Berikan akses" atau "Grant Access"
Langkah 7
Setelah itu kita akan dibawa kembali ke halaman "Edit Blogger account", kemudian pilihlah salah satu blog kita (ini jika memiliki blog lebih dari satu blog pada satu akun) dan klik tombol "Save Changes"
Langkah 8
Anda berhasil mengintegrasikan Blog anda dengan Facebook Blog It TypePad

Membuat dan Menerbitkan Artikel Blog dari Facebook

Setelah kita berhasil menggabungkan antara Blogger dengan Facebook mari kita buat dan terbitkan artikel pada blog kita melalui Facebook.
Langkah 1
Klik Tab "Post to blog"
Langkah 2
Pilih blog yang kita tuju, isilah kotak "Title" dengan judul artikel dan isilah kotak "Entry" dengan isi dari artikel kita
Langkah 3
Klik tombol "Post" untuk menerbitkannya pada Blog kita
Langkah 4
Tunggu status hingga tanda "cheklist" keluar pada blog yang kita tuju kemudian check blog kita. Artikel baru telah ditulis dan diterbitkan...
Keterangan:
  • Simpanlah pada Bookmark halaman Blog It TypePad agar mudah untuk mengaksesnya
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Monday, September 27, 2010

Kaget campur heran Blogger Tune-Up dibuatnya, karena beberapa hari ini tidak buka internet. Hari ini Senin, 27 September 2010 Blogger Tune-Up membuka blog dan ternyata seluruh script Blogger Tune-Up yang ada di Hosting Project Google Code tidak dapat di akses. Setelah di cek ke link http://hensblog.googlecode.com/ link tersebut tidak dapat di akses. Entah kenapa hal ini terjadi...

Access Not Allowed
What happened?
You are not allowed to access this service.
Please contact us if you believe that you should be able to access this service.
Your options:
  • Participate in the open source community through other websites.
  • Sign out and access this site as an anonymous user.
  • Contact us for further assistance.

Pihak Google tidak memberitahukan sebelumnya dan tidak pula menjelaskan secara rinci mengenai penutup Account Blogger Tune-Up pada Google Code. Mungkin ada diantara para teman Blogger yang pernah punya pengalaman seperti ini mohon di bantu. Dan bagi sahabat Blogger Tune-Up yang menggunakan script dari blog ini, saya Hendriono secara pribadi mohon ma'af yang sebesar-besarnya karena hal ini diluar kemampuan saya. Saya berharap bantuan teman-teman untuk mengembalikan account Blogger Tune-Up di Google Code dengan mengirimkan email ke admin Google Code:
google-code-hosting@googlegroups.com
Akhir kata, seandainya account Google Code dapat diaktifkan kembali maka sebagai ucapan terima kasih Blogger Tune-Up akan membuka semua script code yang Blogger Tune-Up tulis untuk seluruh teman-teman blogger yang sudah membantu. Terima kasih sebelumnya untuk seluruh sahabat blogger yang sudah ikut berpartisipasi untuk mengembalikan account Blogger Tune-Up pada Hosting Project Google Code.

Banjarsari, 28 September 2010
Admin Blogger Tune-Up,


Hendriono

Friday, September 24, 2010

Menambahkan Tombol Berbagi Jejaring Sosial

Posted by dav On 2:08 AM
Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia[1]. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari. Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka.
Share Button to Social Networking

Dua Cara Integrasi Tombol Berbagi Jejaring Sosial Pada Blog

1). Tombol Berbagi Terintegrasi pada Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan klik "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.sharesoc {
display:inline-block;
float:right;
height:125px;
margin:5px 0;
width:60px;
}
Langkah 5
Cari kode dibawah ini:
<data:post.body/>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
Langkah 7
Simpan template dan preview blog anda...

2). Tombol Berbagi Terapung pada Pinggir Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "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:
#sharehal {position:fixed; bottom:20%; margin-left:185px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharehal .tblshare {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}
Langkah 5
Cari kode dibawah ini:
</body>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
Langkah 7
Simpan template dan preview blog anda...

3). Pekerjaan Rumah
Kedua cara di atas akan menampilkan tombol berbagi jejaring sosial pada berbagai halaman (baik halaman utama ataupun halaman artikel). Nah tugas anda adalah mengintegrasikan kedua cara menambahkan tombol jejaring sosial di atas kemudian mengatur tampilannya, jika kita buka halaman utama maka tombol jejaring sosial yang tampil adalah dari cara pertama (Tombol Berbagi Terintegrasi pada Artikel) dan jika kita buka halaman artikel maka tombol jejaring sosial yang tampil adalah dari cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel). Cara mengatur tampilan tombol berbagi adalah artikel sebelumnya yang membahas Conditonal Tag.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div style='float: right; margin: 8px 0px 0pt 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</a>
</div>
</div>
</b:if>
Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :
  • bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
  • margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
  • float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
  • background-color:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan kaki:
[1] Top 1000 Sites - August 2010, Google AdPlanner. Diakses 20 September 2010

Monday, September 20, 2010

Memahami Conditional Tag

Posted by dav On 1:18 AM
Terinspirasi dari sahabat Blogger yang mengingatkan Blogger TuneUp tentang conditional tag tidak ada salahnya sekalian dibuat artikelnya supaya semua teman-teman bisa memahami berbagai conditional tag dalam template Blogger. Sebelum mempelajari conditional tag mari kita sepakati dulu bahwa semua bagian dalam sebuah halaman blog terdiri dari kumpulan gadget/widget termasuk halaman artikel, sidebar, header, footer dan lain sebagainya. Conditional Tag atau tag kondisional adalah tag yang digunakan untuk mengatur suatu gadget/widget atau suatu elemen tertentu untuk ditampilkan atau tidak ditampilkan dalam halaman spesifik. Misal; pada halaman utama kita ingin menampilkan sidebar tetapi ketika pengunjung membuka halaman demi halaman artikel maka sidebar tersebut tidak ditampilkan. Nah, untuk mengatur sidebar tersebut tampil dan tidak tampil maka digunakanlah Conditional Tag.

Syntax Conditional Tag

Secara umum conditional tag dituliskan seperti dibawah ini:
<b:if cond='[KONDISI]'>
...
</b:if>
Conditional tag selalu diawali dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian tag <b:if diikuti dengan atribut cond. Atribut cond diartikan sebagai condition atau kondisi yang digunakan sebagai subjek suatu kondisi, dan [KONDISI] adalah atribut objek atau yang menjelaskan maksud dari kondisi/condition.

Kumpulan Conditional Tag

Dibawah ini kumpulan kondisional tag yang umum digunakan untuk menyesuaikan halaman spesifik.
1. Halaman Index
<b:if cond='data:blog.pageType == &quot;index&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman index. Halaman index (index page) didalamnya termasuk halaman depan (homepage), halaman label/kategori dan halaman arsip. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan index' maka kode yang ada diantara conditional tag akan ditampilkan".

2. Halaman Artikel (item)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman item. Halaman item (item page)adalah halaman artikel per artikel dan bukan keseluruhan kumpulan artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman artikel (item)' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman artikel (item) menggunakan URL yang terkandung hurup bulan, tahun, dan judul artikel diantaranya, misal; http://namablog.blogspot.com/2010/09/judul_artikel.html.

3. Halaman Statis (static)
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis. Halaman statis (static page) adalah halaman lain artikel atau halaman yang berdiri sendiri dan isinya tidak mengambil dari database artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman statis' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman statis menggunakan URL yang terkandung hurup "p" diantaranya, misal; http://namablog.blogspot.com/p/halaman_statis.html.

4. Halaman Arsip (archive)
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip. Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan artikel yang diambil database blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman arsip' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman arsip menggunakan URL yang terkandung bulan dan tahun diantaranya, misal; http://namablog.blogspot.com/2010_01_01_archive.html.

5. Halaman Depan (Homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
atau :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan URL halaman depan. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan URL halaman depan' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman depan merupakan halaman utama dari blog kita dan URL yang digunakan adalah URL utama blog kita, misal; http://namablog.blogspot.com/.

6. Halaman URL Tertentu
<b:if cond='data:blog.url == "[URL]"'>
...
</b:if>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog sama dengan URL halaman blog (yang kita maksud atau kita masukan dalam [URL]' maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini digunakan jika kita ingin mengatur suatu gadget/widget atau elemen yang hanya akan ditampilkan atau tidak ditampilkan pada halaman yang lebih spesifik (artikel tertentu). misal; kita akan menampilkan banner iklan di-sidebar hanya pada halaman blogroll (kumpulan link teman). Maka penggunaan conditional tag-nya seperti dibawah ini:
<b:if cond='data:blog.url == "http://namablog.blogspot.com/2010/09/blogroll.html"'>
[disini kode gadget atau elemen yang akan ditampilkan]
</b:if>

7. Halaman 404 Not Found
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
...
</b:if>
Conditional tag ini digunakan untuk mengecek/membandingkan kondisi URL 404 Not Found atau tidak tersedianya suatu halaman. Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog tidak tersedia (error_page), maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini biasanya digunakan saat menjaga kemungkinan halaman yang dihapus namun masih terindex oleh mesin pencari. Ketika pengunjung membuka halaman tersebut maka pemberitahuan ketidaktersediaan halaman (404 Not Found) akan ditampilkan. Biasanya halaman ini disertai dengan link yang menuju ke halaman utama, halaman arsip atau about.

8. Meta Description
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
...
</b:if>
Conditional tag ini sebenarnya tidak tampak pada broswer tapi sangat bermanfaat seiring perubahan kebijakan mesin pencari yang menghapuskan meta keyword. Conditional tag ini digunakan untuk mengecek/membandingkan kondisi data blog, jika deskripsi meta blog tidak kosong (artinya memiliki meta description) maka yang ada diantara tag akan ditampilkan.

Penggunaan Conditional Tag

Dibawah ini adalah penjelasan sederhana untuk menggunakan conditional tag didalam template blogger dan penempatan kode gadget atau elemen, lebih lanjutnya silahkan implementasikan sendiri. sederhananya untuk menempatkan kode gadget atau elemen dalam conditional tag seperti contoh dibawah ini:

1). Penggunaan Conditional Tag Satu Gadget atau Elemen
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
</b:if>
Gadget atau Elemen yang terletak diantara conditional tag akan ditampilkan jika hasil pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType == "item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu item (misal; http://namablog.blogspot.com/2010/09/artikelku.html) maka Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan jika tidak maka Gadget atau Elemen tidak akan ditampilkan.

2). Penggunaan Conditional Tag Dua Gadget atau Elemen
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...
Misal; saya memiliki dua buah "laptop" yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi pesanan editing gambar yang mengharuskan saya menggunakan software "digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun menggunakan laptop merk B dalam mengerjakan pesanan editing gambar tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:
<b:if cond='Laptop == &quot;Digital Imaging&quot;'>
Merk A
<b:else/>
Merk B
</b:if>
Laptop merk A tidak digunakan karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan laptop merk A (tidak ada software digital imaging) atau hasil pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan karena hasil perbandingan/pengecekan cond bernilai salah (false). (Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung memberikan contoh, ada ide?)
Peranan tag <b:else/> digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan bernilai salah (false) dan kita ingin menampilkan suatu gadget atau elemen jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil perbandingan bernilai benar (true) maka gadget atau elemen setelah tag <b:else> tidak akan ditampikan.

3). Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget atau Elemen
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]
<b:else/>
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]
</b:if>
</b:if>
Waduh makin rumit saja... Ini sih bukan hanya putar otak tapi sampai tekan tombol power... hehehe... Mau mencoba menjelaskan? Silahkan tinggalkan pada kotak komentar....

Operator Conditional Tag

Operator conditional tag merupakan alat khusus untuk membandingkan dua buah nilai. Operator conditional tag terdiri dari 2 jenis yaitu:
1. Operator "sama dengan"
==
atau dalam bahasa script-nya dibaca "is equal to"

Contoh Kasus 1
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:
<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
</b:if>
Jawabannya : maka saya diberi uang Rp. 10.000,-

Contoh Kasus 2
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai berikut:
<b:if cond='10 telur == 10 telur'>
Saya diberi uang Rp. 10.000,-
<b:else/>
Saya membayar Rp. 10.000,-
</b:if>
Jawabannya : maka saya membayar Rp. 10.000,-

2. Operator "tidak sama dengan"
!=
atau dalam bahasa script-nya dibaca "is not equal to"
Ini adalah operator kebalikan dari "sama dengan" dan sepertinya tidak harus dijelaskan lagi. (Atau mau ikut menjelaskan? Silahkan tinggalkan pada kotak komentar)

Akhirnya selesai... Selamat berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, rokok [bagi yang suka rokok], kopi dan obat sakit kepala). Happy Blogging :)

Saturday, September 18, 2010

Informasi penulis/author sangat bermanfaat bagi para pengunjung blog kita, karena mereka dengan mudah dapat mengenali siapa penulis artikel pada blog tersebut. Walaupun bagi sebagian blogger hal ini tidaklah penting tetapi tidak ada salahnya kita menambahkan gadget info penulis ini sebagai bentuk keseriusan kita dalam mengelola blog tersebut. Mungkin jika mewakili kata-kata maka gadget informasi penulis/author ini berbicara "Hai dunia! Inilah blog saya, aku buat, aku tulis, aku pelihara, silahkan baca, silahkan ambil tapi ingat aturan mainnya karena blog juga karya cipta".
Menambahkan Informasi Penulis/Author pada Artikel

Integrasi Gadget Informasi Penulis/Author pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Copy paste kode CSS dibawah ini diatas kode pada langkah 4:
/************************************************
* Author Information *
************************************************/
#authorinfo{margin:0 0 5px;padding: 4px;background: #eee;background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));border: 1px solid #fff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-webkit-box-shadow: #600 0 2px 12px;-moz-box-shadow: #600 0 2px 7px;width:auto;text-shadow:0 1px 0 #FFFFFF;}
#authorinfo .informasi{line-height: 16px;margin:0;padding:2px;height:80px;}
#authorinfo .informasi a {text-decoration:none !important;}
#authorinfo img {float:left;margin: 2px 8px 2px 2px;padding:0;width:72px;height:72px;border:2px solid #999;}
#authorinfo .informasi ul, #authorinfo .informasi ul li {margin:0;padding:0;list-style-type:none;}
Langkah 6
Cari kode dibawah ini:
<data:post.body/>
Langkah 7
Copy paste kode (X)HTML dibawah ini diatas kode (jika info ingin diatas artikel) pada langkah 6:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='authorinfo'>
<div class='informasi'>
<a href='[link profil]'><img src='[gambar profil]'/></a>
<ul>
<li>Artikel ini ditulis oleh <a href='[link profil]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Diterbitkan pada hari : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></li>
<li>Telah dibaca sebanyak <a expr:href='data:blog.homepageUrl'><script src='http://abu-farhan.co.cc/counter/counter.php' type='text/javascript'/></a> kali, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> meninggalkan komentar</li>
<li>Berlangganan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='[link feed rss]' target='_blank' title='Berlangganan Artikel via RSS Feed'>RSS Feed</a> atau <a href='[link feed email]' target='_blank' title='Berlangganan Artikel via Email'>Email</a></li>
</ul>
</div>
</div>
</b:if>
Langkah 8
Ubah link (baca keterangan) dan simpan template kemudian preview blog anda...

Keterangan :
1). Ubahlah link [link profil] sesuai dengan link profil anda (temukan pada bagian dashboard)
2). Ubahlah link [gambar profil] sesuai dengan link gambar profile anda (temukan pada halaman profil)
3). Ubahlah link [link feed rss] sesuai dengan link Feed RSS anda
4). Ubahlah link [link feed email] sesuai dengan link Feed Email anda
5). Jika ingin menempatkan Gadget Informasi Penulis/Author pada bagian akhir artikel:
A. (Menggantikan langkah 6) cari kode dibawah ini:
<div class='post-footer-line post-footer-line-3'>
<!-- Disini kode gadget informasi penulis/author -->
</div>
B. Masukan (copy paste) kode (pada langkah 7) diantara kode pada langkah A
6) Terima kasih kepada Abu Farhan untuk script counter jumlah pembaca
Selamat mencoba dan semoga berhasil. Happy Blogging :)

Sunday, September 12, 2010

Beberapa pertanyaan masuk ke inbox dan komentar yang menanyakan tentang plugin Facebox. (Ma'af untuk yang belum mendapat tanggapan bukan berarti tidak ditanggapi tapi belum tertanggapi atau belum ditemukan jalan keluarnya. Mohon bersabar ya?). Plugin Facebox selain digunakan sebagai container/wadah gambar sebenarnya bisa digunakan sebagai container hal lain, seperti ajax, html, dan hal lainnya.
jQuery Facebox AutoLoad - Facebox Otomatis Tampil
Dapat pula difungsikan sebagai alert (pemberitahuan)/warning (perhatian)/ads popup (iklan popup) yang tampil secara otomatis ketika pengunjung masuk kedalam halaman blog kita. Sebenarnya teknik penggunaan plugin Facebox hampir sama saja dengan artikel yang pernah di bahas disini. Sedangkan sekarang kita akan mencoba melakukan modifikasi pada script Facebox agar mampu autoload/autoshow tanpa klik ketika pengunjung membuka halaman blog kita.

Integrasi Plugin Facebox pada template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "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:
#facebox .b{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDcQb9PsI/AAAAAAAAD10/tlsyech1rKQ/d/b.png)}
#facebox .tl{background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDwX017ZI/AAAAAAAAD2Y/9YvW1nyo3rE/d/tl.png)}
#facebox .tr{background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/S4QD_EwzYDI/AAAAAAAAD2c/3y21OtLBoVQ/d/tr.png)}
#facebox .bl{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDcq5SDlI/AAAAAAAAD14/aMQ2Ep-Br8w/d/bl.png)}
#facebox .br{background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDc2QNzQI/AAAAAAAAD18/5N4GZspRmRY/d/br.png)}
#facebox {position: absolute;top: 0;left: 0;z-index: 99999999;text-align: left;}
#facebox .popup {position: relative;}
#facebox table {border-collapse: collapse;}
#facebox td {border-bottom: 0;padding: 0;text-align:justify;}
#facebox .body {padding: 10px;background: #fff;width: 370px;}
#facebox .loading {text-align: center;}
#facebox .image {text-align: center;}
#facebox img {border: 0;margin: 0;}
#facebox .footer {border-top: 1px solid #DDDDDD;padding-top: 5px;margin-top: 10px;text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px;width: 10px;overflow: hidden;padding: 0;}
#facebox_overlay {position: fixed;top: 0px;left: 0px;height:100%;width:100%;}
.facebox_hide {z-index:-100;}
.facebox_overlayBG {background-color: #000;z-index: 99;}
* html #facebox_overlay { /* ie6 hack */position: absolute;height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 5:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://henscripts.googlecode.com/svn/trunk/jquery.facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox();
$.facebox('#informasi','facebox',true);
});
</script>
Bagi yang sudah memasang framework jQuery maka tidak perlu memasangnya lagi
Langkah 7
Simpan template...

Membuat Alert/Warning/Ads Popup dengan Facebox

Setelah integrasi plugin Facebox pada template Blogger selesai, lanjutkan membuat alert/warning/ads popup seperti dibawah ini:
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<div id="informasi" style="display:none;">
<!-- Masukan isi pemberitahuan/pengumuman/perhatian/kode iklan disini -->
</div>
Langkah 10
Simpan template dan preview blog anda...
Sedangkan untuk settingan Facebox pada gambar silahkan baca artikel "Pratinjau Gambar dengan Efek jQuery Facebox" pada bagian "Setting Efek jQuery Facebox pada Artikel". Selamat mencoba dan semoga berhasil. Happy Blogging :)

Friday, September 10, 2010

Sudah mencoba artikel "Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)"? Nah, artikel ini merupakan update dari artikel sebelumnya yang tentunya dengan tampilan baru dan lebih segar. Walaupun masih menggunakan script yang sama tapi sekarang Blogger TuneUp menggunakan sentuhan yang lebih bagus pada kode CSS versi 3. Penasaran?
Ads Popup - Iklan Yang Muncul Tiba-tiba

Menambahkan Ads Popup - Iklan Yang Muncul Tiba-tiba pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih type "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten
<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan-->
</div>
<a style="text-decoration: none; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://modification-blog.blogspot.com/2010/09/ads-popup-iklan-yang-muncul-tiba-tiba.html" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blogger</span> <span style="color: #f00;">TuneUp</span></a>
</div>
Langkah 5
Klik tombol simpan dan preview blog anda... (Hmm... Baguskan?)
Keterangan:
Untuk setting JavaScript silahkan baca pada artikel sebelumnya disini
Sedangkan untuk mengatur kode CSS yang baru, baca penjelasan dibawah ini.
Perhatikan kode dibawah ini (lihat langkah 4):
#topbar .isi_iklan {
background-color:#FFFFFF; Untuk mengubah warna latar (background)
margin:0;
padding:4px;
width: 468px; Untuk mengatur lebar wadah iklan, ini disesuaikan dengan lebar iklan yang akan digunakan
border: 1px solid #999; untuk untuk mengatur garis tepi wadah iklan
}
Kode pada artikel ini berbeda dengan artikel sebelumnya tetapi masih tetap menggunakan JavaScript yang sama.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Saturday, September 4, 2010

Membuat jQuery BreadCrumb

Posted by dav On 5:41 AM
Bismillah... Pada artikel sebelumnya Blogger TuneUp pernah membahas "Membuat Breadcrumbs - Navigasi Blogger". Sekarang kita akan memberikannya sentuhan efek jQuery yang dibantu plugin jQuery UI yang membuat BreadCrumb kali ini menjadi lebih indah dengan efek slidelong (slide memanjang) dan slideshort (slide memendek). Ketika link-link yang tampil pada breadcrumb terlalu panjang maka jQuery akan mengatur panjang total breadcrumb dengan memendekan beberapa link. Dan ketika kita mengarahkan pointer mouse pada salah satu link BreadCrumb maka jQuery akan menampilkan link tersebut. jQuery BreadCrumb ini akan membuat navigasi menjadi lebih rapi dan indah dari pada harus membuat BreadCrumb menjadi dua baris.
jQuery BreadCrumb

Integrasi jQuery BreadCrumb pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
.module:after{clear:both;content:".";display:block;height:0;visibility:hidden}
* html .module{height:1%;overflow:visible}
* + html .module{min-height:1%}
.breadCrumbHolder{font-size:12px;line-height:21px;color:#444;font-family:Arial, Helvetica, sans-serif;font-style:normal;font-variant:normal;font-weight:400;margin:15px 0 5px}
.breadCrumbHolder a{color:#0E82C7;font-size:inherit;font-weight:inherit;text-decoration:none}
.breadCrumb{float:left;display:block;height:21px;overflow:hidden;width:508px;border:solid 1px #dedede;background:#fff;margin:0;padding:5px}
.breadCrumb ul{height:21px;display:block;margin:0;padding:0}
.breadCrumb ul li{display:block;float:left;position:relative;height:21px;overflow:hidden;line-height:21px;font-size:.9167em;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OE19eRfI/AAAAAAAAEeI/oQSb_A5WIGY/s800/Chevron.gif) no-repeat 100% 0;margin:0 6px 0 0;padding:0 10px 0 0}
.breadCrumb ul li div.chevronOverlay{position:absolute;right:0;top:0;z-index:2}
.breadCrumb ul li span{display:block;overflow:hidden}
.breadCrumb ul li a{display:block;position:relative;height:21px;line-height:21px;overflow:hidden;float:left}
.breadCrumb ul li.first a{height:16px!important;text-indent:-1000em;width:16px;margin-top:2px;overflow:hidden;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OFFVF1kI/AAAAAAAAEeQ/Dr3dADHxd6M/s800/IconHome.gif) no-repeat 0 0;padding:0}
.breadCrumb ul li.first a:hover{background-position:0 -16px}
.breadCrumb ul li.last{background:none;margin-right:0;padding-right:0}
.chevronOverlay{display:none;background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/TH5OFOpTroI/AAAAAAAAEeM/GxOgEVpiMPY/s800/ChevronOverlay.png) no-repeat 100% 0;width:13px;height:20px}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://plugins.jquery.com/files/jquery.easing.1.2.js.txt' type='text/javascript'/>
<script src='URL_ANDA/jquery.jBreadCrumb.1.1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery("#breadCrumb").jBreadCrumb();
});
//]]>
</script>
Langkah 8
Cari kode dibawah ini:
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<li><data:post.title/></li>
</b:if>
</b:loop>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Arsip untuk <data:blog.pageName/></li>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Seluruh Artikel</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Artikel Pada Kategori <data:blog.pageName/></li>
</b:if>
</ul>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Langkah 10
Sisipkan kode dibawah ini pada kode langkah 8:
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
sehingga kode menjadi seperti dibawah ini:
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
Langkah 11
Simpan template dan preview blog anda...
Keterangan:
Untuk mengatur BreadCrumb perhatikan kode dibawah ini (lihat langkah 5):
.breadCrumb{ float:left; display:block; height:21px; overflow:hidden; width:508px; border:solid 1px #dedede; background:#fff; margin:0; padding:5px; }
1. width:508px; ubah nilai 508 untuk mengatur lebar BreadCrumb
2. background:#fff; ubah nilai #fff untuk mengatur warna latar
3. border:solid 1px #dedede; ubah nilai #dedede untuk mengatur warna border

Update 16 September 2010

Untuk menampilkan semua kategori/label pada jQuery Breadcrumb, cari kode dibawah ini (lihat langkah 9 baris 11, 12 dan 13):
Buanglah kode pada baris 1 dan 3 (sisakan yang di blok):
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
Sehingga yang tersisa hanya kode dibawah ini:
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
Secara total kode yang digunakan seperti dibawah ini (sebagai pengganti kode pada langkah 9):
<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:loop>
<li><data:post.title/></li>
</b:if>
</b:loop>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Arsip untuk <data:blog.pageName/></li>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Seluruh Artikel</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Artikel Pada Kategori <data:blog.pageName/></li>
</b:if>
</ul>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Selamat mencoba dan semoga berhasil. Happy Blogging :)
Special thanks to CompareNetworks.com