cara mudah membuat blog

Membuat Social Share dan Search Box

goblog.blogspot@gmail.com (go-blog) — Fri, 10 Feb 2012 14:40:00 +0700

Share box dengan seacrh box ini merupakan widget sederhana dengan tampilan menarik. Ok gan...langsung saja kita bahas trick membuat Social Share dan Search Box. Ikuti langkah berikut.

Masuk blog anda - Rancangan - Edit HTML - Masukkan kode berikut di atas kode </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Klik Simpan Template

Selanjutnya klik lagi Rancangan - Tambah Gadget - HTML/JavaScript dan masukkan kode berikut ke dalamnya

<div class="subbox"> <div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/ID-FEEDBURNER ANDA" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4RiWUoyNtxXoPWsKbJhF24lLEmnZnqo2_YeOaCt_6Rqx7XdS3zaPxf0msWAm1hmh7N1U7DErGB4T7JASk4Of29FpTBStAPsfdmLMU9tsqWuI-2o4WrvPv7p_b6wX7zC0vOQgRgmfEBJc/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/ID-FEEDBURNER ANDA" target="_blank">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=ID-FEDBURNER ANDA" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejdI0-DwT_seVQH9UqoCt5oUpcNxL4pqJhEj0k3Bro-bctLX65mO_0DF9LKnUeS9S4Jhupw5PljXopzCH2aummZ7W8lKCLzewBGRSBSyry6AbsGmKcmisIGuaW7r_ySwnosfL2JHvNq61/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=ID-FEEDBURNER ANDA" target="_blank">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME ANDA" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhbYt9IPl_T7kEnLT6fI5Mq5e7KLs7nxfwZMNiHdizO33X6C7W9UJBet6luRaGwf0L9rhcV1VusHjxXnk5NELPizj-sWFAfNGHXlRQb9oAvGgYCmOQI0-hEqW9p3iXzJd41RNsEnT520r/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME ANDA" target="_blank">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME ANDA" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGn5RAvtRovPUKqqNNvh5MuyxEeXcfmVB5OsdI8XRxWc1opB2BXy0L5vLoVUmdwNgIgFHuMMzFHO6e5LLqMACPvXaNZkZXBb6GvdPxgqPR9xF31ZYNnQuGwTyfzGdQ-MHFXOlaS0DtwEH/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME ANDA" target="_blank">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://blogspot-goblog.blogspot.com/" target="_blank">go-blog for blogspot</a></p>
</div>

Klik Simpan dan lihat Hasilnya
Selamat mencoba

"keep blogging smiley"

Membuat Daftar Isi Otomatis Dengan Thumbnail

goblog.blogspot@gmail.com (go-blog) — Thu, 17 Nov 2011 20:27:00 +0700

Cara kerjanya sama dengan daftar isi otomatis lainnya, cuma hanya ada tampilan ilustrasi gambarnya. Jadi tampilannya tambah cantik dan menarik...heheheee. Berikut cara membuat daftar isi otomatis dengan thumbnail.

Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; padding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

Masukkan kode berikut di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
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/AVvXsEh2O9YR7QF-MDhBD_bzXvVEa4IgRCNEmiReWzbIWQhccw98Kwr_0ir5AtM8umWwQt9qgzKHPGrcbEPUc9SvK9iX6pAg7WHAXwQPhontLTzpEODMsjlZr4dFeltdyTXAymhhbFWkfxoi-YkI/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><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(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Sekarang Simpan Template
Selanjutnya klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div style="width: 100%; height: 450px; overflow: auto;"><script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Klik Simpan dan lihat hasilnya
Selamat mencoba

"keep spirits and do the best"

Membuat Pembesaran Gambar

goblog.blogspot@gmail.com (go-blog) — Thu, 17 Nov 2011 19:34:00 +0700

Pembesaran gambar atau hover image merupakan sebuah trik untuk memberi tampilan aktif (bergerak) pada gambar. Tampilannya bisa membesar dari ukuran semula. Berikut cara membuat pembesaran pada gambar.

Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.hovergallery img{-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s; opacity:0.7; margin:0 10px 5px 0}
.hovergallery img:hover{-webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity:1}

Klik Simpan Template
Jika anda ingin membeikan efek pembesaran pada gambar (misalnya di dalam posting) tambahkan kode berikut pada gambarnya.

<div class="hovergallery">
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
</div>

Jika anda ingin menambahkan beberapa gambar silahkan tambahkan kode seperti di bawah ini

<div class="hovergallery">
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
<img alt="judul gambar" src="alamat gambar anda di sini" title="title posting atau jdul gambar di sini" />
dst........
</div>

Selesai dan lihat hasilnya
Selamat mencoba

"keep spirits and do the best"

Membuat Menu Horizontal Keren

goblog.blogspot@gmail.com (go-blog) — Sat, 5 Nov 2011 03:33:00 +0700

Menu ini hanya beda dalam tampilan dan dilengkapi jquery yang membuat lebih atraktif. Selebihnya gampang membuatnya dan gak membuat blog menjadi berat. Ikuti langkah berikut.

<style>
#nav1{ margin:0; padding:6px 7px 0; height:37px; background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkCXNh4lnevyfTorK4pYP5PbgSUtZjmwnr-jHQrArLCGl5bvwDvute2sYbq9a8dDgWbv5fsEGpQIN1vkxwqLLtN5pZ6ZViiHChQRWU8B9tHRSW42NefpDeM6UwB1a-H-E7yaBg_lyRDBw/s320/image1.png) repeat-x 0 -110px; line-height:100%; border-radius:3em; -webkit-border-radius:3em; -moz-border-radius:3em; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4)}
#nav1 li{ margin:0 5px; padding:0 0 8px; float:left; position:relative; list-style:none}
#nav1 a{ font-weight:bold; color:#000; text-decoration:none; display:block; padding: 8px 20px; margin:0; -webkit-border-radius:1.6em; -moz-border-radius:1.6em; text-shadow:0 1px 1px rgba(0,0,0,.3)}
#nav1 a:hover{ background:#000; color:#fff}
#nav1 .current a, #nav1 li:hover >a{ background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsLmhLk2d1C88pYxv3Wi4R2SNF1Mdsf3eQ-SOLVaUPmMFiQNgbh_pL44ox3PdsD8RIwPwvnqtorQ8p0QTRE14LAC5vzV5uoZrRd8XTdNQ3hKLQ-7KFaxakv_aZVLeCmoUhvnVpNhvr9CE/s320/image1.png) repeat-x 0 -40px; color:#444; border-top:solid 1px #f8f8f8; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(255,255,255,1)}
#nav1 ul li:hover a, #nav li:hover li a{ background:none; border:none; color:#666; -webkit-box-shadow:none; -moz-box-shadow:none}
#nav1 ul a:hover{ background:#0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsLmhLk2d1C88pYxv3Wi4R2SNF1Mdsf3eQ-SOLVaUPmMFiQNgbh_pL44ox3PdsD8RIwPwvnqtorQ8p0QTRE14LAC5vzV5uoZrRd8XTdNQ3hKLQ-7KFaxakv_aZVLeCmoUhvnVpNhvr9CE/s320/image1.png) repeat-x 0 -100px !important; color:#fff !important; -webkit-border-radius:0; -moz-border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.1)}

#nav1 li:hover >ul{ display:block}
#nav1 ul{ display:none; margin:0; padding:0; width:185px; position:absolute; top:35px; left:0; background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkCXNh4lnevyfTorK4pYP5PbgSUtZjmwnr-jHQrArLCGl5bvwDvute2sYbq9a8dDgWbv5fsEGpQIN1vkxwqLLtN5pZ6ZViiHChQRWU8B9tHRSW42NefpDeM6UwB1a-H-E7yaBg_lyRDBw/s320/image1.png) repeat-x 0 0; border:solid 1px #b4b4b4; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3); -moz-box-shadow:0 1px 3px rgba(0,0,0,.3); box-shadow:0 1px 3px rgba(0,0,0,.3)}
#nav1 ul li{ float:none; margin:0; padding:0}
#nav1 ul a{ font-weight:normal; text-shadow:0 1px 0 #fff; font-weight:bold; color:#000}
#nav1 ul ul{ left:181px; top:-3px}

#nav1 ul li:first-child >a{ -webkit-border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-right-radius:9px; -moz-border-radius-topright:9px}
#nav1 ul li:last-child >a{ -webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px}
#nav1:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
#nav1{ display:inline-block}
</style>

<ul id="nav1">
<li class="current"><a href="alamat blog anda">Home</a></li>
<li><a href="#">judul utama</a>
<ul>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 1</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 2</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 3</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 4</a></li>
</ul>
</li>

<li><a href="#">judul utama</a>
<ul>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 1</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 2</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 3</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 4</a></li>
</ul>
</li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul</a></li>
</ul>

Silahkan tulisan berwarna biri sesuai petunjuk
Ganti tulisan merah sesuai kebutuhan anda
Semua link di atas akan terbuka di jendela baru, jika anda ingin terbuka pada jendela yang sama, silahkan hilangkan kode target="_blank"

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Animasi Twitter Lucu

goblog.blogspot@gmail.com (go-blog) — Sat, 5 Nov 2011 02:09:00 +0700

Widget ini merupakan twitter share widget yang dapat berfungsi untuk mengkoneksikan blog anda dengan twitter, sekaligus untuk mempublikasikan posting anda di sana. Cara kerjanya sama dengan twitter share yang lainnya hanya saja tampilannya lucu hehehheeee...... Ok langsung aja gan...ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="159" height="159"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=your_id_here"></param><a href="http://www.dreambingo.co.uk/" title="online bingo">online bingo</a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"
type="application/x-shockwave-flash" allowscriptaccess="always" width="159" height="159" menu="false" wmode="transparent" flashvars="username=Bloggertrix"></embed></object>

Contohnya seperti tampilan di bawah ini

online bingo

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Membuat Efek Terang Gambar

goblog.blogspot@gmail.com (go-blog) — Fri, 4 Nov 2011 19:37:00 +0700

Terkadang tampilan gambar dalam sebuah blog harus di modifikasi atau di berikan efek tertentu untuk menambah cantik dan menarik. Kali ini saya akan share cara membuat efek terang pada tampilan gambar di blog kita. Anda dapat menempatkannya pada gadget atau dalam posting area. Ok gan ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Posting

Selanjutnya masukkan kode berikut ke dalamnya

<a href="http://blogspot-goblog.blogspot.com/" target="_blank">
<img src="URL" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</a>

Contohnya seperti di bawah ini

Ganti http://blogspot-goblog.blogspot.com/ dengan alamat blog anda
Ganti URL dengan alamat gambar anda
Klik Posting dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Tab Menu Vertikal

goblog.blogspot@gmail.com (go-blog) — Fri, 4 Nov 2011 10:54:00 +0700

Kali ini saya akan terangkan cara membuat tab menu pertikal. Tab menu ini hanya modifikasi dari tab menu yang biasa anda lihat. Tampilannya hampir mirip dengan accordion menu, jadi lebih atraktif dari yang lain. Widget ini juga sudah dilengkapi dengan fasilitas arsip blog, recent komentar, dan recent posts. Ok gan...gak usah terlalu banyak ngobrolnya. Silahkan ikuti langkah berikut

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'>
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css' rel='stylesheet' type='text/css'/>

Selanjutnya Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="tabs">
<ul><li>
<a href="#tabs-1">Arsip</a></li><li>
<a href="#tabs-2">Komentar</a></li><li>
<a href="#tabs-3">Entri Populer</a></li></ul>

<div id="tabs-1">
<div style="width: 100%; height: 300px; overflow: auto;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-daftarisi.js"></script>
<script src="http://blogspot-goblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div></div>

<div id="tabs-2">
<div style="width: 100%; height: 300px; overflow: auto;">
<script style=text/javascript src=http://hbhost.googlecode.com/files/recent-comments.js></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://blogspot-goblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style></div></div>

<div id="tabs-3">
<script src="http://bloekoetoek-blogonol.googlecode.com/files/recentpost.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://blogspot-goblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></div>
</div>

Keterangan: widget ini sudah menyediakan arsip blog, komentar, dan recent posts. Anda tinggal mengganti tulisan hitam dan cetak tebal {- blogspot-goblog -} dengan alamat blog anda.

Cara Edit:
Silahkan ganti kode berwarna merah (termasuk juga kode hitam dengan cetak tebal {- blogspot-goblog -} kalau anda mengganti kode merah keseluruhannya) dengan dengan kode anda
Ganti juga tulisan berwarna biru dengan judul anda
Ganti alamat blogspot-goblog dengan alamat blog anda

Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Makasih kepada blogonol dan bloggertrix atas scriptnya

"keep blogging Smiley"

Membuat Share Button Keren

goblog.blogspot@gmail.com (go-blog) — Fri, 4 Nov 2011 09:37:00 +0700

Share Button ini pada dasarnya sama dengan share button yang lain, namun hanya berbeda dalam tampilan yang lebih trendy dan unik. Kelebihannya widget ini hanya menggunakan script ringan yang tidak akan berpengaruh pada loading blog anda. Ok gan.....sekarang mari kita bahas bagaimana cara membuat share buttonnya. Ikuti Langkah berikut.

Log in ke blog anda
Klik rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<center>
<tr>
<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr><td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmW8JuXWNu0IaECWr4q5GErTsnGO8fXVAL9S3Lx7bN_k3s27Lo96o4wAo4HdwtSovfjW6mioOYgyadv5C08xwUPrSUprkgp1Ih1SMOF2KBR7FXvm64PG24FqUM_J2XlhAQBCxl0869vOk/s400/FACEBOOK.png" height="25" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://www.facebook.com/sharer.php?u=http://NAMA-BLOG-ANDA.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a></td></tr>

<tr><td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOOdp3ASelBlujM6NQ8QQKUMVa3klpNPwbKg3X8AThS-eOoYdUMOrb6LQzPQiDLT7gGQtt8WQR3rpsgxlErIHvKbQ7lHCuFEJOy3mygdFlHFUJDCPdIrEORlCn5LJCQV7G8fgsbEEEIs/s400/TWITTER.png" height="25" target="_blank" rel="nofollow"/></td>

<td height="24"><a href="http://twitthis.com/twit?url=http://NAMA-BLOG-ANDA.blogspot.com/" target="_blank" rel="nofollow">Share on Twitter</a></td></tr>

<tr><td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogLerHJhr2ERIkJSoFZmq69djqsxSWZNFUlyglp0MZC-6uVqLEp-qZnzkgLJid2PQbgOdrdVDqqsdYxMA14LGHRdU2DOo1tcOMAXEOakdvXtmrn1SW_NrphpZDu89mb3NcTdOSux39C4/s400/STUMBLE-UPON.png" height="25" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://www.stumbleupon.com/submit?url=http://NAMA-BLOG-ANDA.blogspot.com" target="_blank" rel="nofollow">Share on StumbleUpon</a></td></tr>

<tr><td height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHUPZvvOkkIu7Y5S6IyHNauAFK8k5i5JYtkJ0b6729b_e1ckqGVEejdboOJVik0Abh3cQ7nuoqu2GrLA5_H6Tv2343xWHfqa9oVDQdSIVJLNqVGNdD9Pjlpxo7sxRoNI4dg3CFh_Fw0cY/s400/DELICIOUS.png" height="25" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://del.icio.us/post?url=http://NAMA-BLOG-ANDA.blogspot.com" target="_blank" rel="nofollow">Share on Delicious </a></td></tr>
</tbody>
</table>
</td>

<td valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="222">
<tbody>
<tr><td width="28" height="30"><img border="0" width="25" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eLAjYGj0pHwWT86xcgv3oTaSkJNV1cuOfu8Y4TrRHNzKfJTdfCFCV5_Ws50ewMiruDrJAg62vwDj7PtzZB_cIb034qrbW8Vv6Wr6J1MmXC6dYM-E48TDo7GnhXqKiJkHAqlGuuqL4vA/s400/DIGG.png" height="25" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://digg.com/submit?phase=2&url=http://NAMA-BLOG-ANDA.blogspot.com" target="_blank" rel="nofollow">Share on Digg </a></td></tr>

<tr><td height="30"><img border="0" width="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjdoO3w4iRKgop7RAIG30k8w2cELTVO6Ri7uUxkqW-HH2JaDEEm6pCBQlI7ZJ8046XcsoL2Q24jnQ0USH1GmE_5b1XnzZ_rQ5ig6sxu6d_au_Bugx0RzGpOrO2_PklnIzj3OLoiOAZQGw/s400/Google-icon.jpg" height="22" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http://NAMA-BLOG-ANDA.blogspot.com" target="_blank" rel="nofollow" title="Bookmark this blog on Google">Bookmark on Google</a></td></tr>

<tr><td height="30"><img border="0" alt="Email" width="21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiGctPGQ0j0AT2cUvIHRhYDJQNptMhxZwCtstRH2_dKYrDXnBzAIWl4vBFiuFqvXv8njUPTHqLsEgHPZDWmA_exdpOLIfU2JWo3xfW4fA3w0dECPn7al5Hj1scuZT72vLgYIgOZoU8F29h/s400/Email+Orange_128.png" height="22" target="_blank" rel="nofollow"/></td>

<td height="30"><a href="http://feedburner.google.com/fb/a/mailverify?uri=ID-FEEDBURNER-ANDA&loc=en_US" target="_blank" rel="nofollow">Subscribe by Email</a></td></tr>
</tbody>
</table>
</td>
</tr>
</center>

Ganti semua tulisan merah sesuai petunjuk
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Membuat Bookmark Cantik di Blog

goblog.blogspot@gmail.com (go-blog) — Thu, 3 Nov 2011 19:25:00 +0700

Bookmarking atau widget share merupakan suatu yang harus dimiliki pada sebuah blog. Hal ini untuk membuat link publikasi blog anda sekaligus untuk aksesoris blog anda. Widget bookmark ini berbeda dengan yang lain, karena dilengkapi togeler untuk buka tutup widget, dan tampilan akan terletak di bawah bagian tengah layar monitor. Ok sekarang ikuti cara membuat bookmark cantik.

<a href="http://website.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/images/b2.gif" alt="Web Informer Button" style="border: 0" /></a>
<script src="http://s.web.informer.com/favorites-button.js?glass," type="text/javascript" charset="UTF-8"></script>

Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Blogroll Dengan HTML

goblog.blogspot@gmail.com (go-blog) — Thu, 3 Nov 2011 17:16:00 +0700

Blogroll merupakan sebuah daftar link yang dipasang pada blog kita. Ada berbagai macam cara membuat blogroll. salah satunya dengan menggunakan java script. Ok langsung saja ikuti langkah pembuatannya.
Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<select onchange="javascript:window.open(this.options[this.selectedIndex].
value);">
<option value="http://ALAMAT BLOG ANDA/#" selected />Blogroll
<option value="http://ALAMAT LINK ANDA/" target="_blank"/>Nama Link
<option value="http://ALAMAT LINK ANDA/" target="_blank"/>Nama Link
<option value="http://ALAMAT LINK ANDA/" target="_blank"/>Nama Link
</select>

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Background Tulisan di Blog

goblog.blogspot@gmail.com (go-blog) — Wed, 2 Nov 2011 02:06:00 +0700

Sekarang kita membuat background pada tulisan. Ini berfungsi untuk mempercantik tampilan posting di blog kita. Berikut langkah membuatnya.

Log in ke blog anda, jangan blog tetangga, karena pasti gak nyambung.
Pada saat anda berada pada posting area, atau ketika anda ingin memberikan background pada tulisan artikel anda, pergunakan scrip di bawah ini.

<p style="background-color:#81BEF7;width: 450px; hight:300px; border: 1px solid #5858FA; margin:10px; padding:5px">masukkan teks anda di sini</p>

Caranya: Klik Posting - klik Edit HTML pada bagian sebelah kanan atas area posting - masukkan kode di atas dan masukkan tulisan sesuai petunjuk. Edit bagian di bawah ini jika anda ingin merubah warna backgroundnya.

background-color:#81BEF7 - Warna Background;
width: 450px; - lebar kolom background
border: 1px solid #5858FA; - tebal garis tepi dan warna garis tepi
margin:10px; - jarak garis tepi dengan sisi template kiri
padding:5px; - jarak tulisan dengan garis tepi
Ganti "masukkan teks anda di sini" dengan tulisan anda

Contoh tampilan

terdengar pintu di ketuk
terjaga aku dari mimpi buruk
ku tahu kau datang dalam keadaan mabuk
ku harap...kau juga mengerti kalau aku masih ngantuk

Klik Terbitkan Entri dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Efek Refleksi Pada Gambar

goblog.blogspot@gmail.com (go-blog) — Tue, 1 Nov 2011 20:29:00 +0700

Memberikan efek tertentu pada gambar merupakan suatu dayak tarik tersendiri bagi artikel anda. Mungkin saja dengan efek gambar yang anda posting akan menjadi hidup dan atraktif, terlebih lagi bila itu berhubungan dengan promosi tertentu pada blog anda. Langsung kita bahasa bagaimana cara membuat efek refleksi pada gambar di blog anda. Ikuti langkah berikut.

Login ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-imagereflection.js' type='text/javascript'/>

Selanjutnya klik Simpan Template.
Ketika anda ingin memberikan efek refleksi pada gambar di posting anda, masuk ke posting area dan klik Edit HTML yang berada si sebalah atas kanan kotak posting anda. Kemudian berikan kode berikut pada gambar yang ingin anda berikan efek refleksi.

<img src="letakkan alamat gambar anda di sini" class="reflect"/>

Contohnya seperti di bawah ini

<img src="http://i1236.photobucket.com/albums/ff451/goblogspot/katak-goblog.jpg" class="reflect"/>

Contoh tampilannya sepertidi bawah ini

Klik Terbitkan Entri dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Tombol Save As PDF di Blog

goblog.blogspot@gmail.com (go-blog) — Tue, 1 Nov 2011 20:11:00 +0700

Singkat saja gan...terkadang kita perlu juga membuat tombol penyimpanan dalam bentuk PDF di blog. Masalah keperluan anda sendiri yang lebih mengetahuinya. Ok...ikuti langkah berikut.

<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>

Klik Simpan dan tempatkan di mana anda suka
Selesai bro...selamat mencoba dan sukses selalu

"keep blogging smiley"

Membuat Social Share Keren

goblog.blogspot@gmail.com (go-blog) — Tue, 1 Nov 2011 17:11:00 +0700

Sosial share merupakan sebuah widget untuk mempublikasikan artikel atau blog anda pada beberapa situs jejaring sosial, seperti facebook, twitter, dan lain sebagainya. Widget ini merupakan penghubung dari situs anda kepada beberapa jaringan blog pribadi dan umum untuk lebih mempopulerkan apa yang anda lakukan melaui blog. Mengenai tampilan dijamin gak kalah menarik dengan widget sharing lainnya. Ok...sekarang ikuti langkah pembuatannya.

#w2b-share ul{list-style:none; clear:none; padding:0px 0px; margin:5px 0}
#w2b-share ul li{display:inline; background:none; margin:0; padding:0}
#w2b-share ul li a{display:block; float:left; width:32px; height:32px; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg59lsQ0Wc6h3GDxArY0wmCsqHdbmb7NYt_-4xBgUJSsLonvHO-FLfrhOxYRQPjfcrCcMAhAQPPrFfFSx4gFjtOualrhGQhNmWqMyIIS6CIPDhfZ4E0z3k4kQr1PRN0o50KWxnd9n0n-ULi/'); margin-left:3px; background-repeat:no-repeat; margin-right:2px; -moz-transition:all 0.3s ease; -o-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}
#w2b-share ul li a.twitter{background-position:-0px -0px}
#w2b-share ul li a.twitter:hover{background-position:-0px -33px}
#w2b-share ul li a.facebook{background-position:-32px -0px}
#w2b-share ul li a.facebook:hover{background-position:-32px -33px}
#w2b-share ul li a.stumbleupon{background-position:-64px -0px}
#w2b-share ul li a.stumbleupon:hover{background-position:-64px -33px}
#w2b-share ul li a.digg{background-position:-192px -0px}
#w2b-share ul li a.digg:hover{background-position:-192px -33px}
#w2b-share ul li a.reddit{background-position:-160px -0px}
#w2b-share ul li a.reddit:hover{background-position:-160px -33px}
#w2b-share ul li a.google{background-position:-128px -0px}
#w2b-share ul li a.google:hover{background-position:-128px -33px}
#w2b-share ul li a.del-icio-us{background-position:-480px -0px}
#w2b-share ul li a.del-icio-us:hover{background-position:-480px -33px}
#w2b-share ul li a.mixx{background-position:-96px -0px}
#w2b-share ul li a.mixx:hover{background-position:-96px -33px}
#w2b-share ul li a.technorati{background-position:-416px -0px}
#w2b-share ul li a.technorati:hover{background-position:-416px -33px}
#w2b-share ul li a.linkin{background-position:-256px -0px}
#w2b-share ul li a.linkin:hover{background-position:-256px -33px}
#w2b-share ul li a.yahoobuzz{background-position:-448px -0px}
#w2b-share ul li a.yahoobuzz:hover{background-position:-448px -33px}
#w2b-share ul li a.myspace{background-position:-512px -0px}
#w2b-share ul li a.myspace:hover{background-position:-512px -33px}
#w2b-share ul li a.more{background-position:-576px -0px}
#w2b-share ul li a.more:hover{background-position:-576px -33px}

Selanjutnya pasang kode berikut di bawah kode <data:post.body/> atau <p><data:post.bod/></p>

<b:if cond='data:blog.pageType == "item"'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Anda dapat menyimpan kode ke dua di bawah kode <div class='post-footer-line post-footer-line-1'>. Agar letaknya di tengah letakkan kode HTML di antara tag <center>, seperti di bawah ini.

<center>kode HTML</center>

Selanjutnya klik Simpan Template dan lihat hasilnya
Selesai...selamat mencoba dan sukses selalu.

"keep blogging smiley"

Membuat Email Form di Blog

goblog.blogspot@gmail.com (go-blog) — Tue, 1 Nov 2011 03:00:00 +0700

Kali ini kita akan bahas cara membuat email form di blog. Sebenarnya ada cara lain dengan mendaftar pada layanan pengiriman email gratis, namun itu juga kurang bermanfaat. Jadi kita pasang aja widgetnya di blog biar sekalian tampil elegant. heheheheeee.....sekarang ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode di bawah ke dalamnya

<FORM action="mailto:goblog.blogspot@gmail.com" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA></TD></TR><TR><TD> </TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM>

Contohnya seperti tampilan di bawah ini

Silahkan ganti tulisan merah dengan alamat email anda
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Menu Vertikal

goblog.blogspot@gmail.com (go-blog) — Tue, 25 Oct 2011 17:41:00 +0700

Kemarin saya telah membahas cara membuat menu horizontal sederhana. Kali ini saya akan bahas cara membuat menu vertikal. Cara pembuatannya cukup mudah, namun penampilannya tidak kalah dengan menu vertikal lainnya. Saya juga akan memberikan beberapa macam menu agar anda bisa memilih sesuai keinginan anda. Silahkan ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan Kode CSS di atas kode ]]></b:skin>
Selanjutanya klik Simpan Template
Klik kembali Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode HTML ke dalamnya dan klik Simpan

Menu 1

Kode CSS
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; border: 0px solid #ccc; margin: 10px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmNi_qmY8P9GGcyf8l7HYaVt8HLhL-VvuFyj5a2mfefqxixyVqhesIGVAmJ8NASZ3jIGNQaW4r8hjkKyxyb-MxopLqF6t5Qapuzm-FvZ1_BR-Fm_HVy8KLHEPp2qyysJ53_jj2JJety4/s800/menu3.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmNi_qmY8P9GGcyf8l7HYaVt8HLhL-VvuFyj5a2mfefqxixyVqhesIGVAmJ8NASZ3jIGNQaW4r8hjkKyxyb-MxopLqF6t5Qapuzm-FvZ1_BR-Fm_HVy8KLHEPp2qyysJ53_jj2JJety4/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu1"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 2

Kode CSS
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TZm7XKdwoPAc-Jfi-MzfHXgkVkuYxpe6hAI_34hAd69VlCKdWIegTJ9NI_SZFfyri97PBwwSfI-f96rfwFJ67UHDYsz9hxULGXJNvmUfmnAcllrQ7tjD2Hn0ZDK7NjIQmaBcys9fadA/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TZm7XKdwoPAc-Jfi-MzfHXgkVkuYxpe6hAI_34hAd69VlCKdWIegTJ9NI_SZFfyri97PBwwSfI-f96rfwFJ67UHDYsz9hxULGXJNvmUfmnAcllrQ7tjD2Hn0ZDK7NjIQmaBcys9fadA/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML
<div id="menu2"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 3

Kode CSS
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdrIzxXtORUkzMrYwolYxQ2gmW_m2gNgxAv3DmZByXGTdIM3Ir3H0v4hNU-mEyn6y3ZSBPO6usuwDU9_-uBBF8OrMpBNvPoL4X2M7-sQSL8tovX__R4VCWoDpOKIjLLZMMbGsZ9qGcrU/s800/menu7.gif); padding: 8px 0 0 30px; } #menu3 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdrIzxXtORUkzMrYwolYxQ2gmW_m2gNgxAv3DmZByXGTdIM3Ir3H0v4hNU-mEyn6y3ZSBPO6usuwDU9_-uBBF8OrMpBNvPoL4X2M7-sQSL8tovX__R4VCWoDpOKIjLLZMMbGsZ9qGcrU/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu3"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 4

Kode CSS
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu4"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 5

Kode CSS
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQruznxl1_2rAfaDF5LkLwy_BnhOrh3xYxKg2nozRS7te2ZHloUNqBGxu382XUJSCtHWfoYUl8tGYT4c8CCTzDyv-xGWgOpAc_bx5USSAWWQm2sWevJgMvcE-4ioe0zl3OfCFgeoVwo4/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQruznxl1_2rAfaDF5LkLwy_BnhOrh3xYxKg2nozRS7te2ZHloUNqBGxu382XUJSCtHWfoYUl8tGYT4c8CCTzDyv-xGWgOpAc_bx5USSAWWQm2sWevJgMvcE-4ioe0zl3OfCFgeoVwo4/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<div id="menu5"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 6

Kode CSS
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Qh3uuJDjqhUFajW9ynKWhaGgY1uD_7XEEp08_a2jEUd6vYtTinEFIoY5wuVxwvpVDzN_OPr_he0PN8ztOLzdMkY155dl9cNTWL39C_PQZyPRNzGsm0kzhMmRwzzr3bQYLHusY86h5Sk/s800/menu4.gif); padding: 8px 0 0 10px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Qh3uuJDjqhUFajW9ynKWhaGgY1uD_7XEEp08_a2jEUd6vYtTinEFIoY5wuVxwvpVDzN_OPr_he0PN8ztOLzdMkY155dl9cNTWL39C_PQZyPRNzGsm0kzhMmRwzzr3bQYLHusY86h5Sk/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<div id="menu6"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 7

Kode CSS
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruuueBNdU3ZHGhBHOdN6SHumw_lBnLnhrBdHRHk8_kzudg5C_RCs1eLKntgaPh_WdKNgc4UIVJfJxjwIp2iaNEhC7sC3jo7fx0gXitU4Pus3Jwl_uZ26rUj1NGjargGnj0xSGEt0NoUw/s400/menu11.gif); padding: 8px 0 0 25px; } #menu7 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruuueBNdU3ZHGhBHOdN6SHumw_lBnLnhrBdHRHk8_kzudg5C_RCs1eLKntgaPh_WdKNgc4UIVJfJxjwIp2iaNEhC7sC3jo7fx0gXitU4Pus3Jwl_uZ26rUj1NGjargGnj0xSGEt0NoUw/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Selanjutnya klik Simpan dan lihat hasilnya. Demikian cara membuat menu vertikal. Posting selanjutnya saya akan jelaskan bagaimana memodifikasi menu vertikal ini menjadi menu navigasi dan lain sebagainya. Nantikan posting selanjutnya. Selamat mencoba dan sukses selalu.

"keep blogging smiley"

Navigasi Horizontal Sederhana

goblog.blogspot@gmail.com (go-blog) — Tue, 25 Oct 2011 11:53:00 +0700

Navigasi ini merupakan navigasi biasa, namun tampilannya cukup menarik. Saya menambahkan efek hover yang akan berfungsi ketika mouse anda diarahkan ke navigasi tersebut. Anda dapat memodifikasi sendiri mengikuti petunjuk yang saya sertakan. Saya harap anda bisa merubahnya sesuai keinginan anda. Ikuti langkah berikut.

<style type="text/css">
.goblog-hovermenu ul{font:bold 13px arial; padding-left:0; margin-left:0px; height:20px}
.goblog-hovermenu ul li{list-style:none; display:inline}
.goblog-hovermenu ul li a{padding:2px 0.5em; text-decoration:none; float:left; color:black; background-color:#FE642E; border:2px solid #BDBDBD}
.goblog-hovermenu ul li a:hover{background-color:#886A08; border-style:outset}
html>body .goblog-hovermenu ul li a:active{border-style:inset}
</style>

<div class="goblog-hovermenu">
<ul>
<li><a href="http://masukkan alamat blog anda di sini">Beranda</a></li>
<li><a href="http://www.blogger.com/profile/masukkan-id-profil-anda-di sini" rel="nofollow" target="_blank">Profile</a></li> /* caranya klik rancangan - dasbor - lihat profile, lalu ambil kode berupa angka di adress bar anda di bagian paling akhir */
<li><a href="http://masukkan alamat feed anda di sini" rel="nofollow" target="_blank">Subscribe</a></li>
<li><a href="http://twitter.com/user name twitter anda" rel="nofollow" target="_blank">Twitter</a></li> /* misalnya twitter.com/goblog */
<li><a href= "http://html-color-codes.info/" rel="nofollow" target="_blank">Kode Warna</a></li> /* silahkan ganti tulisan merah dengan link anda */
</ul>
</div>

Contohnya seperti tampilan di bawah ini.

catatan: bila anda ingin memasukkan kode di atas, sebelumnya hapus dulu /* --- tulisan --- */ karena itu hanya petunjuk adit kode yang saya berikan

Ganti tulisan merah sesuai petunjuk.
Silahkan edit bagian di bawah ini

.goblog-hovermenu ul li a{padding:2px 0.5em; text-decoration:none; float:left; color:black; background-color:#FE642E; border:2px solid #BDBDBD}

text-decoration:none: anda dapat mengganti none dengan bold = cetak tebal, italic = cetak miring, dan underline = bergaris bawah
float:left: anda dapat mengganti left dengan right = rata kanan, dan center = rata tengah
color:black: anda dapat mengganti black dengan warna lainnya seperti yellow = kuning, blue = biru, brown = coklat. Atau anda dapat menggunakan kode warna, seperti: #000000 = hitam, #8A0808 = merah, #0B2161 = biru. Kalau anda ingin mengetahui lebih banyak kode warna, silahkan klik di sini
background-color:#FE642E: Silahkan ganti #FE642E dengan warna yang anda inginkan.
border:2px solid #BDBDBD: Anda dapat mengganti ketebalan garis pinggir dengan mengganti 2px menjadi 3px, 4px, 5px dan seterusnya. Silahkan ganti solid dengan ridge, inset, outset, double, dashes, dan dotted. Sedangkan #BDBDBD adalah warna garis pinggir. Anda dapat menggantinya dengan warna anda sendiri.

.goblog-hovermenu ul li a:hover{background-color:#886A08; border-style:outset}

background-color:#886A08: Anda dapat mengganti #886A08 dengan warna anda sendiri.
border-style:outset: Ganti outset dengan ridge, inset, outset, double, dashes, dan dotted.

html>body .goblog-hovermenu ul li a:active{border-style:inset}

border-style:inset: Ganti inset dengan ridge, inset, outset, double, dashes, dan dotted.

Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Ingat bahwa widget bukan hanya satu bentuk, dan anda dapat berkreasi sesuai dengan kreatifitas anda. Terima kasih dan jangan lupa komen yaaa......yyyyuuuuhhhuuuuuuu

"keep blogging smiley"

Cara Membuat Recent Post

goblog.blogspot@gmail.com (go-blog) — Sat, 22 Oct 2011 22:04:00 +0700

Recent post sama dengan artikel terbaru atau daftar artikel yang ditampilkan pada widget. Fungsinya untuk memberi tahu pengunjung artikel apa saja yang terbaru yang telah anda posting. Ada dua cara pembuatan recent post, yaitu dengan menambahkan widget yang telah disediakan blogger dan kedua adalah dengan memasukkan script ke dalam widget. Baiklah....sekarang kita bahas cara pembuatannya. Ikuti langkah berikut.

Membuat Entri Populer cara Pertama

Log in ke blog anda
Klik Rancangan

Klik Tambah Gadget

Pilih Entri Populer

Atur Konfigurasi Entri Populer

Selanjutnya klik Simpan dan lihat hasilnya

Jika anda ingin memodifikasi entri populer di atas, caranya klik Rancangan, klik Edit HTML dan cari kode </head> dan letakkan script di bawah ini di atas kode tersebut. Jangan lupa klik Simpan dan lihat hasilnya.

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Membuat Entri Populer cara ke Dua

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript

Masukkan kode berikut ke dalamnya

<script src="http://bloekoetoek-blogonol.googlecode.com/files/recentpost.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://MASUKKAN ALAMAT BLOG ANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Catatan: angka 10 merupakan jumlah entri yang akan ditampilkan. Silahkan atur menurut keinginan anda. Biasanya di atur paling banyak 10 entri. Ganti tulisan biru dengan alamat blog anda.

Kalau anda mau berbentuk slider silahkan masukkan atau gunakan script di bawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>
<style type="text/css"media="screen">

</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://MASUKKAN ALAMAT BLOG ANDA.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
<script type='text/javascript'>
//<![CDATA[
/*
* Script dikombinasikan dari bloggerstricks.com
* spy effect dari jqueryfordesigners.com
* Oleh Abu Farhan (www.abu-farhan.com)
* Modifikasi oleh blogspot-goblog.blogspot.com
*/
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;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!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Ketrangan: Ganti tulisan biru dengan alamat blog anda.

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Terima kasih kepada blogonol dan abu farhan atas scriptnya

"keep blogging smiley"

Cara Membuat Buku Tamu

goblog.blogspot@gmail.com (go-blog) — Fri, 21 Oct 2011 19:51:00 +0700

Buku tamu adalah salah satu widget interaktif yang dapat menghubungkan antara anda dan pengunjung. Widget ini saya anggap perlu untuk anda miliki, karena terkadang ada pengunjung ingin mencolek atau sekedar say halloo kepada anda. Secara singkatnya buku tamu adalah sebagai sarana penghubungan anda dengan pengunjung. Sekarang mari kita bahas cara pembuatannya. Ikuti langkah berikut.

Kunjungi situs Cbox
Isi Formulir Registrasinya. Isi nama Cbox (Cbox name), Email anda, Password, isi lagi Password (Confirm Password), Isi alamat blog atau web anda, Pilih Bahasa Inggris, karena Bahasa Indonesia tidak ada, pilih Style sesuai keinginan anda, dan Centang term of conditions, selanjutnya klik
Selanjutnya anda akan di bawa ke halaman seperti di bawah ini

Selanjutnya buka Email anda. Buka email dari Cbox dan klik link konfirmasinya.

Nanti anda akan di bawa ke halaman selanjutnya seperti di bawah ini.

Simpan dulu di wordpad atau notepad
Sekarang saya akan jelaskan cara memasang buku tamu tersembunyi. Contohnya bisa anda lihat pada tampilan buku tamu di sebelah kanan atas blog ini. Saya akan jelaskan 2 cara memasang buku tamu dengan menjadikannya gadget dan memasukkan script dalam template anda. Kelebihan cara kedua akan ringan saat loading blog anda di banding cara pertama. Ikuti langkah berikut.

Cara Pertama Pasangan Buku Tamu Tersembunyi

Log in ke blog anda
Klik Rancangan

Klik Tambah Gadget dan pilih HTML/JavaScript

Selanjutnya masukkan kode berikut ke dalamnya. Sebelumnya perhatikan dulu script di bawah ini, karena script ini hanya kode untuk menyembunyikan buku tamu anda. Anda harus memasukkan kode buku tamu yang anda simpan tadi ke dalamnya. Perhatikan baik-baik tulisan berwarna merah di bawah ini.

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}
.gbtab{height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOdnmEXAXawcK7npYswqYSoQbklPsKNJPBfBOIBg_dYs-Ps9GcRIP0-F-prTfwU6nz3vP-TQRycw-jkuViNZ7kJSU9rU1zbT8OHqkuiydwH80Il9KHzjI-5csR6ax2huJqzbOX56mQrWv/') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px}</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN KODE BUKU TAMU ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Selanjutnya klik Simpan dan lihat hasilnya

Cara ke Dua Pemasangan Buku Tamu Tersembunyi

Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Centang Expand Template Widget

Masukkan Kode berikut di atas kode </head>

<style type="text/css">
#gb{position:fixed; top:50px; z-index:+1000}
* html #gb{position:relative}
.gbtab{height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDOdnmEXAXawcK7npYswqYSoQbklPsKNJPBfBOIBg_dYs-Ps9GcRIP0-F-prTfwU6nz3vP-TQRycw-jkuViNZ7kJSU9rU1zbT8OHqkuiydwH80Il9KHzjI-5csR6ax2huJqzbOX56mQrWv/') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px}</style>

Selanjutnya masukkan kode berikut di atas kode </body>. Anda harus memasukkan kode buku tamu yang anda simpan tadi ke dalam script di bawah ini. Ganti tulisan merah dengan kode buku tama anda.

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">



<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Cara Mempercepat Loading Blog

goblog.blogspot@gmail.com (go-blog) — Fri, 21 Oct 2011 01:37:00 +0700

Tutorial Mempercepat loading blog ini mungkin bisa membantu mengurangi lemotnya blog anda saat di loading dan ini tidak beresiko pada tampilan blog anda. Anda hanya menyimpan kode css template di penyimpanan online: google code. cara ini saya rasa cukup bagus bila anda coba. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML/ JavaScript
Centang Expand Template Widget
Copy Kode css dari #header-warapper { atau #header { sampai sebelum kode ]]></b:skin>. sebagai contoh seperti dalam template ini #header-wrapper { ............ ]]></b:skin>
Tarus kode yang di copy tadi di notepad
Lalu save as dengan file name: blogonol.css (kalau anda menyimpan file berikan kode .css setelah nama file anda), save as type: all files, encoding: unicode.
Setelah itu daftar dulu di google code. Klik di sini
Ikuti langkah di bawah ini

Lalu isilah form yang kosong untuk membuat account baru, jika sudah klik "Creating Project"
Terkadang kolom use a sparate content license tidak ada...anda langsung saja klik button create project...gak ngaruh bro

lalu anda akan masuk ke halaman google code yang baru saja kita buat. silahkan download file css yang anda simpan tadi. klik download pada bagian kiri atas.

6. Lalu klik "New Download".

7. Isi form tentang file java script yang akan kita upload. Apabila selesai, klik "Submit File".

8. File Java Script telah selesai di upload. Untuk mendapatkan alamat url java script klik saja pada nama file.

9. Lalu, akan terbuka halaman seperti berikut, dan klik kanan pada file lalu pilih Copy link address/Location.

Nanti contoh filenya seperti ini http://bloekoetoek-blogonol.googlecode.com/files/blogonol.css
Lalu jadikan kodenya seperti di bawah ini <link href='http://bloekoetoek-blogonol.googlecode.com/files/blogonol.css' rel='stylesheet' type='text/css'/>
Langkah selanjutnya masuk lagi ke Edit HTML
Letakkan kode tersebut di bawah kode ]]></b:skin> sehingga menjadi seperti di bawah ini

]]></b:skin>

Selanjutnya simpan template
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Cara Membuat Navigasi Halaman

goblog.blogspot@gmail.com (go-blog) — Fri, 21 Oct 2011 01:15:00 +0700

Navigasi halaman adalah semacam penomoran pada halaman blog. Navigasi ini berguna untuk mempermudah pengunjung untuk berpindah ke halaman selanjutnya dari blog anda. Disamping itu navigasi halaman berfungsi untuk merubah blog pager link di bawah posting anda (newer post-home-older post) agar lebih menarik. Saya akan terangkan tiga jenis navigasi halaman yang menarik dalam tampilannya. Silahkan ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Kemudian masukkan salah satu script di bawah ini

Navigasi Orange Juice Style

<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com*/
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com*/
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script>

Contohnya seperti gambar di bawah ini

Navigasi Chunky Style

<style type='text/css'>
#top_navigation{background:transparent; width:800px; height:77px; list-style:none; margin-top:7px; margin-bottom:11px; width:100%}
ul.nav{background:transparent; width:800px; height:57px; line-height:31px; list-style:none; padding:0 10px; font-size:14px}
ul.nav li{display:inline; padding:0; background:transparent}
ul.nav a{background:transparent; height:30px; font-size:16px; color:#808080; float:left; padding:11px 19px 11px 16px; text-decoration:none; border-top:1px solid #252525; border-bottom:4px solid #252525; border-left:1px solid transparent; border-right:1px solid transparent; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
ul.nav a:hover{background:#252525; border-top:1px solid #252525; border-bottom:4px solid #000; border-left:1px solid #252525; border-right:1px solid #252525; color:#FFF; padding:11px 19px 11px 16px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
</style>

Contohnya seperti gambar di bawah ini

Navigasi Blue Style

<style type="text/css">
#blog-pager{padding:5px 0 !important}
.showpageArea{font-weight:bold; margin:5px}
.showpageArea a{text-decoration:underline; color:#fff}
.showpageNum a, .showpage a{color:#fff; text-decoration:none; border:1px solid #999; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; padding:3px 5px; background:#3b679e; background:-moz-linear-gradient(top,#3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3b679e),color-stop(50%,#2b88d9),color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',endColorstr='#7db9e8',GradientType=0 )}
.showpageNum a:hover, .showpage a:hover{border:1px solid #ccc; background:#aebcbf; background:-moz-linear-gradient(top,#aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#aebcbf),color-stop(50%,#6e7774),color-stop(51%,#0a0e0a),color-stop(100%,#0a0809)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',endColorstr='#0a0809',GradientType=0 )}
.showpagePoint{color:#aaa; text-decoration:none; border:1px solid #999; -webkit-border-radius:3px; -moz-border-radius:3px; margin:0 3px; padding:3px 5px; background:#e2e2e2; background:-moz-linear-gradient(top,#e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e2e2e2),color-stop(50%,#dbdbdb),color-stop(51%,#d1d1d1),color-stop(100%,#fefefe)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',endColorstr='#fefefe',GradientType=0 )}
.showpageOf{text-decoration:none; padding:3px; margin:0 3px 0 0}
.showpageNum a:link, .showpage a:link{text-decoration:none; color:#fff}
</style>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-pagenavigation.js' type='text/javascript'></script>

Contohnya seperti gambar di bawah ini

Selanjutnya klik Simpan dan tempatkan di bawah posting area anda
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu
Special Thank to blogger tricks and toolz for the script

"keep blogging smiley"

Cara Pasang Artikel Terkait

goblog.blogspot@gmail.com (go-blog) — Fri, 14 Oct 2011 19:55:00 +0700

Artikel terkait sama halnya dengan artikel berhubungan atau yang termasuk dalam satu kategori. Misalnya dalam kategori widget, maka nanti setelah anda memasang widgetnya yang akan ditampilkan adalah artikel yang termasuk dalam kategori widget. Sekarang saya akan menerangkan cara pembuatannya. Silahkan ikuti langkah berikut.

Klik Edit HTML

Centang Expand Template Widget

Masukkan kode berikut di atas kode ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

Selanjutnya masukkan kode berikut di bawah <data:post.body/>. Kalau anda sudah pasang readmore, silahkan letakkan kode berikut di bawah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Kalau anda sudah memasang permalink sebaiknya kode di atas anda pasang di bawah kode permalink. Lihat contoh di bawah ini.

<div class='permalink'>
<center><small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> dengan url <strong><data:post.url/></strong>. Anda boleh menyebar luaskan atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi anda dan teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya. Tinggalkan komentar anda untuk perkembangan blog ini kedepannya. Terima kasih</small></center></div>
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
dan seterusnya

</div>
</b:if>

Selanjutnya klik Simpan Template dan lihat hasilnya

Selamat mencoba dan sukses selalu

"keep blogging smiley"

Cara Membuat Breadcrumb

goblog.blogspot@gmail.com (go-blog) — Sun, 9 Oct 2011 18:01:00 +0700

Breadcrumb adalah sebuah navigasi mengenai asal artikel yang di klik atau dibuka pengunjung blog kamu. Breadcrumb dapat mengindeks konten atau artikel secara otomatis seperti termasuk dalam kategori atau label apa artikel tersebut dimuat. Kelebihannya dapat memudahkan pengunjung melihat asal konten pada blog anda, indeksi otomatis, dan merupakan salah satu sarana pendukung dari optimalisasi SEO blog anda yang berhubungan dengan artikel. Silahkan ikuti cara pembuatannya.

Pemasangan breadcrumb cara pertama
Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Centang Expand Template Widget

Masukkan kode berikut di atas kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px double #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Selanjutnya masukkan kode berikut di atas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>

</b:includable>

Selanjutnya masukkan kode berikut di atas kode <b:if cond='data:post.dateHeader'>

<b:include data='post' name='breadcrumbs'/>

Selanjutnya klik simpan template
Selesai dan lihat hasilnya

bila cara pertama tidak berhasil anda bisa pilih pemasangan breadcrumb cara kedua

cara pemasangan breadcrumb kedua
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Kemudian pasang kode berikut di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

Selanjutnya klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Cara Pasang Widget Whos Amung Us

goblog.blogspot@gmail.com (go-blog) — Sun, 9 Oct 2011 11:10:00 +0700

Widget whos amung us adalah semacam penunjuk jumlah pengunjung yang online di blog kita. Contohnya seperti gambar di bawah ini.

Sekarang ikuti langkah pemasangannya.

Log in ke blog anda
Klik Rancangan

Klik Tamnbah Gadget

Pilih HTML/JavaScript

Masukkan kode berikut ke dalamnya

<script>var _wau = _wau || []; _wau.push(["tab", "g6g1jcf79jth", "c27", "left-middle"]);(function() { var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/tab.js";document.getElementsByTagName("head")[0].appendChild(s);})();</script>

Selanjutnya tempatkan di bawah posting area anda
Selesai dan lihat hasilnya

Cara lainnya adalah dengan memasukkan kode di atas dalam template anda. Berikut cara pemasangannya.

Klik Rancangan
Klik Edit HTML
Masukkan kodenya di atas kode </head>
Selanjutnya Klik Simpan Template
Ok selesai gan dan selamat mencoba...Sukses selalu

"keep blogging smiley"

Cara Pasang Google Translate

goblog.blogspot@gmail.com (go-blog) — Sun, 9 Oct 2011 10:53:00 +0700

Google Translate adalah sebuah tool penterjemah dalam beberapa bahasa. Google Translate berfungsi untuk mempermudah pengunjung blog anda untuk menterjemahkan ke dalam bahasa yang dia mengerti. Bayangkan jika yang berkunjung orang bule yang gak ngerti bahasa Indonesia, kan bisa repot bila anda gak pasang perangkat ini. Ok langsung saja kita bahas cara instalasinya. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Masukkan kode berikut ke dalamnya

<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
});
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Klik Simpan dan lihat hasilnya
Kini pada bagian paling atas web page anda sudah tersedia perangkat penterjemah dari om google
Selamat mencoba dan sukses selalu

"keep blogging smiley"

Name:
Email:
Comment: