BLOG CREATION

Ekspresikan Commentator Thread dengan Emoticon

noreply@blogger.com (Putu BlogBego) — Fri, 11 May 2012 18:17:00 +0700

Setelah selesai saya berkreasi pada Komentar, baik Komentar lama maupun Komentar terbaru dari Google yang ngetrend disebut Thread Comments, yang pada akhirnya kurang lengkap rasanya tanpa diisi Emoticon sebagai bentuk mengekspresikan diri bagi si Komentator :q

Banyak para Blogger yang sudah menampilkan Emoticon untuk Komentator Thread di Blognya ada yang berisi image, youtube/video dan filenya ada yang pakai Js maupun Css biasa, tinggal kawan memilih mau pakai yang mana :z

Pada Kesempatan ini saya akan mencoba berbagi dengan kawan yang ringan dan gampang di ingat Kodenya disamping biar sama dengan Editor-smiley Blog saya ini :i promosi nih ye :x
Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template
Pada Template pilih Edit HTML - Lanjutkan
Cari </body> yang pada Template Designer letaknya paling bawah
Copas Script berikut tepat diatas </body>

<script src='https://sites.google.com/site/blogrenovasi/java-script/Editor_Smyle.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

function replaceText(){if(!document.getElementById){return;}

bodyText = document.getElementById("comment-holder");

theText = bodyText.innerHTML;

theText = theText.replace(/:a/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");

theText = theText.replace(/:b/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");

theText = theText.replace(/:c/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");

theText = theText.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");

theText = theText.replace(/:e/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");

theText = theText.replace(/:f/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");

theText = theText.replace(/:g/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");

theText = theText.replace(/:h/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");

theText = theText.replace(/:i/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");

theText = theText.replace(/:j/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");

theText = theText.replace(/:k/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");

theText = theText.replace(/:l/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");

theText = theText.replace(/:m/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");

theText = theText.replace(/:n/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");

theText = theText.replace(/:o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");

theText = theText.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");

theText = theText.replace(/:q/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");

theText = theText.replace(/:r/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");

theText = theText.replace(/:s/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");

theText = theText.replace(/:t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");

theText = theText.replace(/:u/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");

theText = theText.replace(/:v/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");

theText = theText.replace(/:w/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");

theText = theText.replace(/:x/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbEY-TLa-P1cd2DH-iy2HaBsu6877ecx3zpq8sgibNFv22X2iq3joUSL2wHkFXbsIba-GhiLKkzlvQq5zhmnZwUL8DpWsLgh48L0E66ZzUgVWk2kKNvtqZsbcNjarUlvoo_K3cD_cBp0/s1600/buatD.gif'/>");

theText = theText.replace(/:y/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0QDW_kvKYBcknq70H6PLRBPDgevWW9gU1v8HEbUcwHdoCm5Sx4BZSTP6vmdPG1KMgKUyHLFZOGhD6B20Ty_KWuGif4yWZvRSiC38LFFJNwPBB_xAv_N2aColmzW8ZI8bHzKMsT4fm_E/s1600/joget.gif'/>");

theText = theText.replace(/:z/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rl4gyuCttx35wMj__hdpFd5STUKgsndzTqh6Et3vAFCg0sGPixaGoGsE1MLVEHc8nYsTBSd2VoXJ0JGef5s3ui93PV_iU_PMCD7NPd2cezDbAODNkCvA2803bIlSeiHiY24xIL0DMhM/s1600/xKopi.gif'/>");

bodyText.innerHTML = theText;

}replaceText();

//]]>

</script>

Simpan Template kawan

Penjelasan :

Script Js yang saya beri warna merah khusus dipergunakan pada Editor Post
Kalau kawan ingin mengganti image Emoticon smiley atau mengganti Kodenya [dari alfabet] menjadi angka silahkan asal kawan simpan kembali Scriptnya di tempat kawan menyimpan file, karena script tersebut saya simpan menyatu dengan Script Js diatas.

Bagaimana cara menampilkan Kodenya di Blog, agar pengunjung yang memberikan Komentar bisa mengetahuinya ? :y - :r

Terus terang ini yang agak ribet sedikit, tapi kawan jangan berkecil hati, karena saya kasi tahu caranya, yaitu mencoba-coba karena struktur Template pada umumnya berbeda-beda, tapi pada prinsip dasarnya yang kawan cari adalah kode seperti ini <p><data:blogCommentMessage/></p> [ini pada Template jumlahnya berbeda, ada 3, atau 4] :w

Okey langsung saja :

Posisi kawan masih tetap pada Template - Edit HTML
Beri tanda cek disamping Expand Template Widget
Cari <p><data:blogCommentMessage/></p> yang dibawahnya ada <data:blogTeamBlogMessage/>
Simpan Script berikut diantaranya

<div style='overflow:hidden;width:420px;height: auto; padding:10px; margin-left:8px;border:1px solid #000;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;text-align: left; line-height: 20px; font-size: 14px; font-family: Arial bold; color:#000; background:#95CAFF;'>

<span style='color: rgb(0, 0, 255); padding:5px; font-size:16px; font-family: Arial bold;'><center><blink>BERIKAN KOMENTAR SESUAI TOPIK <br/> BUKAN SPAM - PORNO MAUPUN SARA </blink> <br/><br/>

EKSPRESIKAN KOMENTAR KAWAN DENGAN EMOTICON : </center></span>

<br/><br/><center>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> :a

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> :b

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/> :c

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :d

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :e

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :f

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :g

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> :h

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> :i

<br/>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> :j

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> :k

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> :l

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :m

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> :n

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/> :o

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :p

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :q

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> :r

<br/>

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> :s

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/> :t

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :u

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/> :v

<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/> :w

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbEY-TLa-P1cd2DH-iy2HaBsu6877ecx3zpq8sgibNFv22X2iq3joUSL2wHkFXbsIba-GhiLKkzlvQq5zhmnZwUL8DpWsLgh48L0E66ZzUgVWk2kKNvtqZsbcNjarUlvoo_K3cD_cBp0/s1600/buatD.gif'/> :x

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0QDW_kvKYBcknq70H6PLRBPDgevWW9gU1v8HEbUcwHdoCm5Sx4BZSTP6vmdPG1KMgKUyHLFZOGhD6B20Ty_KWuGif4yWZvRSiC38LFFJNwPBB_xAv_N2aColmzW8ZI8bHzKMsT4fm_E/s1600/joget.gif'/> :y

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0rl4gyuCttx35wMj__hdpFd5STUKgsndzTqh6Et3vAFCg0sGPixaGoGsE1MLVEHc8nYsTBSd2VoXJ0JGef5s3ui93PV_iU_PMCD7NPd2cezDbAODNkCvA2803bIlSeiHiY24xIL0DMhM/s1600/xKopi.gif'/> :z

</center>

</div>

Width : 420px; silahkan kawan menyesesuaikan dengan lebar Kotak Komentar kawan
Hasilnya seperti

Tampilkan Posting berdasarkan Katagori Plus Thumbnail

noreply@blogger.com (Putu BlogBego) — Fri, 13 Apr 2012 06:30:00 +0700

Melanjutkan Artikel saya sebelumnya tentang Cara Menampilkan Artikel berdasarkan Label / Katagori di Blog serta jawaban untuk kawan kita Junius Librando bertanya pada kotak Komentar yang isinya seperti berikut : "Gimana Ya Bro Kalau Untuk Membuat Daftar Isi Berdasarkan Label Dan Ber-Thumbnail, Tlng Scriptnya Ya?", terus terang saya juga bingung Daftar isi berdasarkan Label dan ber-Thumbnail, Kalau Daftar Isi plus Thumbnail sudah saya posting, atau mungkin yang dimaksud Label / Katagori Khusus sesuai namanya berisi Thumbnail :O script ini saya temukan pada salah satu Template ciptaan senior kita siapa lagi kalau bukan Kang Rohman :r

Caranya sebagai berikut :
Tahap Pertama

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari kode ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

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

height:40px; width:40px; adalah lebar dan tinggi image [thumbnail] bisa disesuaikan
Selanjutnya cari </head>
Copas kode berikut diatasnya

<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/AVvXsEhSWK5F2cTaPXzYDnKY87ZHU8MrCcng6HTyj-wAcnOeLwfIwRqjW75FhTg4l5ljczL2hUkYXkofP8h-wWys41OlrkSrecaMk1f_M6oWVHMiAC9ZGQJS5SEhQhurFtpdb1rhBg0ONoEjQQ6y/';} 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>

Simpan Template kawan

Pada tahap kedua

Pada Tata Letak pilih Tambah Gadget
Pilih tanda + pada HTML / JavaScript
Copas kode berikut kedalamnya

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = false;
var numchars = 80;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/tips%20trik?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

contoh Hasilnya

Catatan :

Silahkan kawan mengadakan edit ulang terutama true / false dan angka yang ada sesuai keperluan Blog kawan
Ganti tulisan yang berwarna merah [tips%20trik] dengan Nama Label / Katagori Blog kawan yang akan ditampilkan

Cara Menampilkan Artikel Berdasarkan Katagori

noreply@blogger.com (Putu BlogBego) — Wed, 11 Apr 2012 21:09:00 +0700

Sekarang saya akan mencoba berbagi dengan kawan Cara Membuat dan menampilkan Artikel berdasarkan Katagori / Label Blog, :r secara tahap demi tahap, baik itu secara default maupun dengan JavaScript :#

Cara default yang disediakan oleh Google :

Masuk ke Account Blogger dengan ID kawan
Pada Tata Letak pilih Tambah Gadget
Selanjutnya pilih Feed
Pada Url kawan Isi Url Blog kawan

[contoh : http://blog-renovasi.blogspot.com/feeds/posts/default/]

Bagaimana mudah bukan ?!

Nah sekarang bagaimana kalau Label / Katagori yang akan kita tampilkan khusus sesuai Nama Label [misalnya : tips trik, tutorial dll] ! :z

Kawan cukup menambahkan Nama Label / Katagori yang ingin ditampilkan, tapi ingat ini sangat sensitif dengan huruf yang dipakai [huruf besar / kecil] harus sesuai dengan Label / Katagori, dan seandainya Label memakai 2 suku kata [tips trik] penulisan untuk spasi [%20] maka tulisannya menjadi tips%20trik

contoh : http://blog-renovasi.blogspot.com/feeds/posts/default/-/tips%20trik

maka Label yang ditampilkan khusus tips trik saja

Dengan JavaScript :

Script ini saya dapatkan pada Blogger Tun-Up caranya

Pada tata letak pilih Tambah Gadget
Pilih tanda + pada HTML / JavaScript
Copas Script berikut ke dalamnya

<script src="https://sites.google.com/site/blogrenovasi/java-script/kategori.js"></script>
<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary =false;
var numchars = 125;
</script>
<script src="http://blog-renovasi.blogspot.com/feeds/posts/default/-/tips%20trik?orderby=published&alt=json-in-script&callback=rp">
</script>
<br/><a href="http://blog-renovasi.blogspot.com/search/label/tips%20trik"><strong>Artikel Lain dari Tips Trik...</strong></a>

Hasilnya seperti berikut :

Sedikit Penjelasan Kode-kode tersebut :

Silahkan ganti Url Blog saya dengan Url Blog kawan
true artinya ditampilkan
false artinya tidak ditampilkan
var showpostsummary =false; dan var numchars = 125; ini berhubungan, showpostsummary adalah isi artikel seperti Read more sedangkan 125 adalah jumlah karakter huruf bukan suku kata

Cara Membuat Random Post Plus Summary

noreply@blogger.com (Putu BlogBego) — Tue, 20 Mar 2012 07:35:00 +0700

Sebelumnya saya memposting Cara Membuat Random Post, yang kelihatan hanya Judulnya saja, sekarang saya akan mencoba berbagi lagi dengan kawan Cara Membuat Random Post yang berisi Summary [Cuplikan beberapa kata] tampilannyapun sama dengan Random Post sebelumnya selalu berubah-ubah bila Blog di muat ulang [Refres] :r
Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada tata letak Pilih Tambah Gadget
Pilih tanda [+] pada HTML / JavaSript
Copas kode berikut kedalamnya

<script type="text/javascript">
var randarray=new Array();
var l=0;
var flag;
var numofpost=5;
var wordnumber=15;
</script>
<script style="text/javascript" src="https://sites.google.com/site/blogrenovasi/java-script/randomposts.js"></script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> <a href='http://blog-renovasi.blogspot.com'><img style='border: 0px;padding:0;background:none;' src='http://img1.blogblog.com/img/blank.gif'/></a>

Angka 5 menunjukkan jumlah Judul File
Angka 15 adalah jumlah kata masing-masing Judul, bukan suku kata dan jangan dihilangkan
Ingat jangan lupa simpam Blog kawan

Cara Membuat Random Post

noreply@blogger.com (Putu BlogBego) — Sun, 18 Mar 2012 11:08:00 +0700

Semua kawan Blogger saya rasa sudah tahu apa itu Random Post ! :z

Tapi tak ada salahnya saya sampaikan untuk kawan Blogger Pemula seperti saya ini, akan mencoba berbagi dengan kawan tentang Random Post yang artinya kurang lebih seperti Daftar Isi Blog yang selalu berubah-ubah bila Blog di muat ulang [Refres] :O

Sebagai Demonya kawan bisa lihat di bawah posting Blog saya ini, yang sebelumnya disana ada Artikel Terkait sekarang saya ganti dengan Random Post :#

Untuk ceritanya cukup sekian dulu, sekarang mari kita kembali ke Topik yang Cara Membuat Random Post Blog :

Masuk Account Blogger dengan ID kawan
Pada Tata Letak pilih Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas Script berikut kedalamnya

<script type="text/javascript">
var randarray=new Array();
var l=0;
var flag;
var numofpost=10;
function randomposts(json){var total=parseInt(json.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){flag=1}}if(flag==0&&l!=0){randarray[i++]=l}}document.write('<ul>');for(n in randarray){var p=randarray[n];var entry=json.feed.entry[p-1];for(k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){var item="<li>"+"<a href="+entry.link[k].href+">"+entry.title.$t+"</a></li>";document.write(item)}}}document.write('</ul>')}</script><script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts"type="text/javascript"></script><a href='http://blog-renovasi.blogspot.com'><img style='border: 0px;padding:0;background:none;' src='http://img1.blogblog.com/img/blank.gif'/></a>

Angka 10; adalah jumlah yang akan ditampilkan
Simpan Blog kawan
Kalau kawan ingin menaruhnya pada Template [sebagai Artikel Terkait seperti di Blog saya ini] silahkan Script tersebut di-Parse dulu

Cara Membuat Total Post dan Comment

noreply@blogger.com (Putu BlogBego) — Fri, 16 Mar 2012 08:30:00 +0700

Sekarang saya akan berbagi dengan kawan Cara Membuat Total Post dan Comment di Blog, :r

Apa itu Total Post dan Comment, mungkin semua Blogger sudah tahu apa yang saya maksud, tapi tak ada salahnya saya memberikan gambaran untuk kawan yang kurang memahami Apa itu Total Post dan Comments disini yang menurut pemahaman saya adalah Jumlah Artikel yang sudah kita Publish dan Jumlah Komentar yang ada pada Blog kita :O

Langsung saja ke Topik Cara Membuat Total Post dan Comments di Blog :

Masuk Account Blogger dengan ID kawan
Pada Tata Letak pilih Tambah Gadget
Copas Script berikut kedalamnya

<script type="text/javascript">
function blogcreationposts(json) {document.write('Total Posts : ' + json.feed.openSearch$totalResults.$t + '<br/>');}
function blogcreationcomments(json) {document.write('Total Comments : ' + json.feed.openSearch$totalResults.$t );}
</script>
<script src="http://blog-renovasi.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=blogcreationposts"></script>
<script src="http://blog-renovasi.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=blogcreationcomments"></script>

Simpan Blog kawan

Script tersebut bisa juga disimpan pada Template Blog kawan, tapi sebelumnya silahkan di Parse dulu disini

Caranya :

Pada Perancang Template pilih Edit HTML
Tentukan penempatannya [diatas Header] - [dibawah Posting] - [bawah Blog]
Simpan Template kawan

Script yang sudah di Parse

<script type="text/javascript">
function blogcreationposts(json) {document.write('Total Posts : ' + json.feed.openSearch$totalResults.$t + '<br/>');}
function blogcreationcomments(json) {document.write('Total Comments : ' + json.feed.openSearch$totalResults.$t );}
</script>
<script src="http://blog-renovasi.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=blogcreationposts"></script>
<script src="http://blog-renovasi.blogspot.com/feeds/comments/summary?alt=json-in-script&callback=blogcreationcomments"></script>

Cara Membuat Kumpulan Komentar Plus Avatar

noreply@blogger.com (Putu BlogBego) — Wed, 14 Mar 2012 21:44:00 +0700

Sebelumnya saya berbagi dengan kawan Cara Membuat Kumpulan Komentar, rasanya masih kurang lengkap Kumpulan Komentar tersebut kalau tanpa Avatar, seperti Kumpulan Komentar Blog saya ini :O

Bagaimana, apa kawan tertarik hehehe ?!

Baiklah sekarang saya akan berbagi dengan kawan Cara Membuat Kumpulan Komentar Plus Avatar yang saya dapatkan pada Blogger Harish saat Blogwalking

OK langsung saja ke caranya :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Tambah Gadget - HTML / JavaScript
Copas kode berikut kedalamnya

<style type="text/css">
ul.w2b_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.w2b_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
}
.w2b_recent_comments li .avatarImage{
padding:3px;
background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;
}

Screenshot Komentar

.w2b_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.w2b_recent_comments li span{
margin-top:4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
            numComments= 5,
            showAvatar     = true,
            avatarSize        = 40,
            roundAvatar    = true,
            characters        = 80,
            showMorelink = false,
            moreLinktext = "More »",
            defaultAvatar = "URL No Avatar",
            hideCredits     = false;
//]]>
</script>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>

<script type="text/javascript" src="http://blog-renovasi.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=25"></script>

Sedikit Penjelasan untuk kawan, sedangkan yang lainnya kawan bisa mengadakan setting ulang sesuai selera kawan :

-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; adalah background border Avatar yang berbentuk bulat, yang ditunjukkan dengan nilai 100px, kalau dikecilkan / dihilangkan akan menjadi border segi empat.
URL No Avatar adalah Komentar tanpa Avatar, yang akan kelihatan hanya warna putih bulat, silahkan diganti dengan URL Avatar kawan, bisa juga dipakai Avatar Animasi
Silahkan ganti http://blog-renovasi.blogspot.com dengan URL Blog kawan
Sedangkan yang lainnya silahkan kawan mengadakan setting tambahan sesuai selera kawan
Jangan lupa Simpan Template kawan

Cara Membuat Kumpulan Komentar Versi lainnya

noreply@blogger.com (Putu BlogBego) — Tue, 13 Mar 2012 20:30:00 +0700

Kawan masih ingat dengan Artikel saya tentang Cara Membuat Kumpulan Komentar, sekarang saya akan berbagi lagi Cara Membuat Kumpulan Komentar Versi yang lainnya, :D

Kalau kawan ada yang bertanya mengapa harus dibuat Kumpulan Komentator, jawaban saya mungkin sama dengan para Blogger yang menampilkan Kumpulan Komentar Blog diantaranya :

Secara tak langsung kita mengetahui siapa saja yang memberikan Komentar
Blogger yang memberikan Komentar akan merasa malu kalau memberikan Komentar yang kurang etis, kurang sopan dan lain sebagainya, karena semuanya kelihatan pada Home Page
Sebagai Admin [si pemilik Blog] tidak perlu lagi mensortir Komentar diluar Deteksi SPAM Otomatis

screenshot kumpulan komentar

Cara Membuatnya :

Masuk Account Blogger dengaa ID kawan
Pada Perancang Template pilih Tambah Gadget - HTML / JavaScript
Copas Kode berikut kedalamnya

<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentcommentswidgetv1.js"></script>

<script style="text/javascript">

var a_rc=6;

var m_rc=true;

var n_rc=true;

var o_rc=100;

</script><script src="http://blog-renovasi.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=6&callback=showrecentcomments"></script>

Sedikit Penjelasan :

Silahkan ganti teks yang berwarna merah URL Blog saya dengan URL Blog kawan
Silahkan diadakan edit tambahan seperti :

1. var a_rc=6; adalah jumlah Komentar yang ditampilkan
2. var o_rc=100; adalah jumlah huruf komentar
3. dllnya sesuai kebutuhan kawan

Simpan Blog kawan

Cara Membuat Hosting Gratis di Blogspot

noreply@blogger.com (Putu BlogBego) — Sun, 4 Mar 2012 00:04:00 +0700

Salah satu cara untuk mempercepat Loading Blog adalah dengan milik Blog Pribadi khususnya untuk penyimpanan File baik itu JavaScript, CSS, HTML, Image atau Gambar maupun File yang lainnya :#

Nah sekarang saya akan mencoba berbagi dengan kawan Cara membuat Brankas untuk Menyimpan harta Blog yang lazim disebut Hosting di Blogspot secara Gratis

Pada postingan ini saya akan menampilkannya hanya Gambar - gambar saja dengan penjelasan seperlunya :@

1. Masuk ke Account Blogger dengan ID kawan

2. Pada Dasbor pilih Setelan Akun

3. Pilih Sites pada Akun Profil

4. Pilih Create

5. Pilih Blank template dan isikan Data pada Form yang ada

6. Site Hosting Kawan sudah tercipta,
7. Selanjutnya Membuat Folder / Halaman

8. Folder / Halaman sudah tercipta

9. Nama - nama diatas silahkan kawan mengganti sesuai kebutuhan

10. Untuk mulai penyimpanan sangat gampang, kawan cukup meng-klik +Add File [Gambar No. 8] maka File yang ada di Komputer kawan akan tersimpan di Site Hosting Gratis

11. Untuk mempergunakan / pemanggilan File tersebut, kawan Klik kanan pada Nama Filenya dan Copy Alamat Linknya :z

Salam Blogger Indonesia

Modifikasi ke-2 Css Thread Comments

noreply@blogger.com (Putu BlogBego) — Thu, 1 Mar 2012 20:36:00 +0700

Setelah sebelumnya saya memposting tentang Thread Comment Seperti Komentar Gaya FB dan Cara Memodifikasi Css Thread Comment, begitu juga dengan Cara Praktis Tampilkan Thread Comment, yang tampilannya masih standar, karena Css yang akan dimodifikasi tersebut sekarang sudah tidak ada lagi di Template Blog, dan karena ada beberapa Komentar menanyakan masalah ini, sayapun tak bisa menjawabnya hehehe :z

Kawan tahu apa sebabnya ? karena Thread Comment datang tanpa diundang dan hilangpun tanpa permisi hihihi memangnya Jaelangkung :O

Okey cukup sekian intermesonya, karena sekarang saya akan mencoba berbagi dengan kawan Cara Memodifikasi Thread Comment yang hasilnya seperti Gambar disamping atau pada Komentar Blog ini :D

Caranya :
Masuk ke Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTMl - Lanjutkan
Beri tanda cek pada disamping Expand Template Widget
Cari <b:include data='post' name='comments'/> yang biasanya ada 4 pada 2 tempat, seandainya ada 3 tambahkan biar menjadi 4.
Ganti semuanya dengan :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Selanjutnya Copas Script berikut diatas ]]></b:skin>

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding: 5px 5px 0 0;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -2px;
margin-left: 36px;
width: 501px;
}
.comments .comments-content .comment {
margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
padding-top:1px;
}
.comments .comments-content .comment:last-child {
border-bottom: 0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0;
}
.comments .comments-content .datetime {
float: right;
margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin: 0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: transparent;
cursor: pointer;
text-align: center;
}
.comments .continue a {
display: block;
padding: 0.5em;
margin: 0 340px 0 48px;
font-weight: bold;
background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#7CA9C0');background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;
border: 1px solid #ccc;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
color: #FFF;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: inline-block;
}
.comments .thread-toggle {
background: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006400');background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;
border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
display: inline-block;
padding: 3px 0;
width: 80px;
height: 20px;
text-align: center;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 0;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
background: rgb(99,147,193) none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(99,147,193)', endColorstr='rgb(207,231,250)');background:-moz-radial-gradient(top, rgb(99,147,193), rgb(207,231,250));background:-webkit-gradient(linear, left top, left bottom, from(rgb(99,147,193)), to( rgb(207,231,250))) no-repeat left top;
border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;
margin-left: 48px;
padding: 5px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

Jangan lupa simpan Template kawan
Text yang berwarna merah adalah lebar kotak Komentar, silahkan disesuaikan

Tambahan Penjelasan :

Komentar Blog lama yang ada akan kelihatan sejajar dipinggir kiri
Untuk mendapatkan hasil yang sesuai dengan Gambar diatas silahkan kawan mencoba memberikan Komentar dengan Account lain [Anonim] yang selanjutnya kawan balas dengan Nama Admin Blog :r
Selamat memcoba dan berkreasi

Modifikasi ke-2 Kotak Komentar Blog

noreply@blogger.com (Putu BlogBego) — Sat, 25 Feb 2012 18:26:00 +0700

Kawan masih ingat dengan Artikel saya tentang "Modifikasi Kotak Komentar mirip Thread Comments" yang hasilnya kurang lebih seperti Gambar berikut :D

Sekarang saya akan mencoba Memodikasi lagi biar kelihatan lebih jelas sebagai Admin dan Kotak Komentarnyapun terbalik dengan dulu, coba perhatikan gambar berikut dan khususnya tanda petunjuk yang berwarna putih garis merah

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Cari Kode Css Comment yang scriptnya kurang lebih seperti berikut :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-weight:normal;
line-height:1.3em;
background: #000;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 525px;
background: transparent;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:465px;
background: #95CAFF;
color: #00F;
font-size:12px;
margin:0 5px;
padding:0;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display:none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw5RRyFsEp1j4pbEFODbqZUg7XEk-jlYYjlzjN2LlJsNiI19EV4dn3xyzcboMwF6K1eA73Tr_oVvAB4PP85MzX-sQvMwUOfIdfYfsQP1TUk41FVu3OYn7tjSFT_8nvnZ16w-Q31Uxjg/s1600/no-avatar.png);
}
.comment-form{
width:450px!important;
max-width:450px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 1px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Hapus semua script tersebut dan ganti dengan :

#comments{
clear:both;
float:left;
width:555px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
background: -moz-linear-gradient(top, rgb(99,147,193) 100%, rgb(207,231,250) 0%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgb(99,147,193)), color-stop(0%,rgb(207,231,250)));
background: -webkit-linear-gradient(top, rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: -o-linear-gradient(top, rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: -ms-linear-gradient(top, rgb(99,147,193) 100%,rgb(207,231,250) 0%);
background: linear-gradient(top, rgb(99,147,193) 100%,rgb(207,231,250) 0%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6393c1', endColorstr='#cfe7fa',GradientType=0 );
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-family: Arial Narrow;
font-weight:normal;
line-height:1.2em;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 485px;
background: #95CAFF;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:545px;
background: #D4E3EA;
color: #00F;
font-size:12px;
margin: 0;
padding:0 5px;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display: none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw5RRyFsEp1j4pbEFODbqZUg7XEk-jlYYjlzjN2LlJsNiI19EV4dn3xyzcboMwF6K1eA73Tr_oVvAB4PP85MzX-sQvMwUOfIdfYfsQP1TUk41FVu3OYn7tjSFT_8nvnZ16w-Q31Uxjg/s1600/no-avatar.png);
}
.comment-form{
width:480px!important;
max-width:480px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 0px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Simpan Template kawan
Saya ingatkan kawan bahwa modifikasi ini merupakan lanjutan modifikasi sebelumhnya
Lebar Kotak Komentar Blog kawan silahkan disesuaikan

Cara Membuat dan Menampilkan Kalender di Blog

noreply@blogger.com (Putu BlogBego) — Sun, 19 Feb 2012 16:27:00 +0700

Pernahkah kawan menikmati makanan tanpa garam.......?! akan terasa hambar bukan ?, begitu juga dengan Web site atau Blog tampilannya akan terasa kurang lengkap tanpa diisi pernak-pernik seperti Jam, Kalender maupun yang lainnya :z

Sudah banyak para Blogger memasang pernak-pernik tersebut di Blognya, dan banyak pula yang tidak memasangnya, yang kemungkinan disebabkan terlalu banyak memerlukan tempat pemasangan, atau mungkin dianggap memperlambat loading atau kawan ingin memasangnya tapi belum menemukan Kalender yang simple [karena pada umumnya Kalender seperti gambar disamping :r

Sekarang saya akan berbagi dengan kawan Cara Membuat dan Menampilkan Kalender di Blog

Untuk Demonya kawan bisa lihat Kalender / Tanggal di bawah Header Blog ini atau dibagian bawah post Artikel ini :O

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Cari kode <body>
Copas script berikut dibawahnya

<div id='Kalender'>

<script src='https://sites.google.com/site/blogrenovasi/java-script/Tanggal.js' type='text/javascript'/>

</div>

Penjelasan Tambahan :
Kawan bisa menempatkan dibawah kode <body> maksudnya bisa dipindah-pindah sesuai dengan keinginan kawan
Selamat berkreasi

Cara Membuat Share Melayang

noreply@blogger.com (Putu BlogBego) — Sun, 12 Feb 2012 18:46:00 +0700

Pada umumnya Jejaring Sosial yang lazim dipakai untuk berbagi / Share [FaceBook, Twitter dan lain sebagainya] biasanya ditampilkan pada Blog diatas posting maupun dibawah posting, bagaimana kalau sekarang mencoba membuat Melayang :r

Cara pemasangannya :

Silahkan masuk ke Account Blogger dengan ID kawan
Pada Design / Perancang Template pilih tambah gadget
Tambah HTML / JavaScript
Copas kode script berikut kedalamnya

<style>
#pageshare {position:fixed; bottom:35%; margin-left:-111px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {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;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from tips blogbego.blogspot.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://tips-blogbego.blogspot.com/">widget</a></div>
</div>

Text yang berwarna merah adalah untuk posisi tampilan silahkan menyesesuaikan begitu juga dengan yang akan ditampilkan agar sesuai dengan Blog kawan

Cara Praktis Tampilkan Thread Comments

noreply@blogger.com (Putu BlogBego) — Mon, 6 Feb 2012 22:45:00 +0700

Sebelumnya saya sudah berbagi dengan kawan tentang Thread Comments yaitu : Thread Comments seperti Gaya PB dan Cara Modifikasi CSS Thread Comments yang selanjutnya khusus pada Css Thread Comment sepertinya sudah tidak ada lagi pada Template
Blogspot, makanya kalau ingin memodifikasi Cssnya saya pribadi sekarang mengalami kesulitan, tapi diluar dugaan saya mendapatkan Cara Praktis Tampilkan Thread Comments :r
Tapi sebelumnya saya sampaikan dulu sebagai gambaran kawan pada perubahan Komentar Blog

Komentar Lama

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Sebaiknya Unduh Template Lengkap dulu, siapa tahu kawan ingin kembali ke Template sebelum perubahan.
Pada Edit HTML scroll ke bawah » Klik Kembalikan template widget ke default terus OK [Perhatikan gambar disamping]
Simpan Template kawan dan lihat Artikel yang ada Komentarnya

Kenapa Komentar Blog tidak seperti Gambar dibawah, Komentar Reply agak sedikit masuk kedalam, sudah pasti kawan ada yang bertanya demikian, itu wajar kawan karena semua Komentar sebelum perubahan [lama] akan tampil lurus di pinggir kiri :z

Sekarang coba kawan berikan Komentar dengan Klik Reply pada salah satu Komentar yang ada, hasilnya pasti akan kelihatan seperti gambar dibawah :#

Catatan Tambahan :
Background Thread Comments keseluruhan adalah warna Putih, kalau kawan ingin memberikan warna background keseluruhan caranya cari Kode Css Comment yang letaknya sebelum ]]></b:skin> atau biasanya sesudah Post Content atau main wrapper
contohnya :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: #95CAFF; » warna background Biru
}
#comments h4{ » Judul Komentar
color:#FF0;

Okey kawan jangan lupa simpan Template kawan
dan Selamat Berkreasi :@

Modifikasi Kotak Komentar mirip Thread Comments

noreply@blogger.com (Putu BlogBego) — Wed, 1 Feb 2012 21:16:00 +0700

Sebelumnya saya sudah berbagi dengan kawan tentang Reply Komentar atau Thread Comments : Thread Comments seperti Gaya PB dan Cara Modifikasi CSS Thread Comments
Sekarang saya akan mencoba berbagi lagi tentang Tampilan Komentar yang hampir mirip
dengan Thread Comments, cuma bedanya tidak bisa balas membalas berkelanjutan [Perhatikan Image diatas] untuk Demonya silahkan lihat Komentar Blog ini :r
Cara Modifikasinya :

Masuk ke Account Blogger dengan ID kawan
Pada Designer / Perancang Template pilih Edit HTML
Beri tanda centang pada disamping Expand Template Widget
Untuk jaga-jaga download / simpan dulu template kawan
Cari Kode Css #comments [letaknya sebelum ]]></b:skin>]

Contohnya :

#comments h4 {
color:#000;
font-weight:bold;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
Background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjGMIQxIgpOYoesoFQHopwYD7TgXPgh4MxkXlQKoVvobtpBV7RKd2q50zBJcQKwRD67eOFYbFw2IZPExqaS5cvsO_tB7Ndc9kUn3oXlUuCzLPE76Xjy754LYj2tmSGK5LNlvfyPr2pQEY/s1600/x.jpg);
border:1px solid #00f;
font-size:15px;
font-weight:normal;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#95B4BB none repeat scroll 0 0;
border-color:#95B4BB;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
background:#FFF;
color:#000;
border-left:1px solid #00f;
border-right:1px solid #00f;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
background:#95B4BB;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
border-right:1px solid #00f;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}

Kalau sudah ketemu, selanjutnya Hapus semua kode tersebut dan ganti dengan kode berikut :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-weight:normal;
line-height:1.3em;
background: #000;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 525px;
background: transparent;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:465px;
background: #95CAFF;
color: #00F;
font-size:12px;
margin:0 5px;
padding:0;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display:none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw5RRyFsEp1j4pbEFODbqZUg7XEk-jlYYjlzjN2LlJsNiI19EV4dn3xyzcboMwF6K1eA73Tr_oVvAB4PP85MzX-sQvMwUOfIdfYfsQP1TUk41FVu3OYn7tjSFT_8nvnZ16w-Q31Uxjg/s1600/no-avatar.png);
}
.comment-form{
width:450px!important;
max-width:450px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 1px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Teks yang berwarna merah silahkan disesuaikan dengan lebar Blog kawan
Simpan dulu Template kawan sebelum lanjut ke tahap kedua :D

Selanjutnya cari kode seperti ini :

</b:includable>

<b:includable id='comments' var='post'> beri tanda [ Perhatikan gambar dibawah]

Terus scroll kebawah dan cari kode seperti ini : <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><data:postCommentMsg/></a> dan beri tanda juga untuk gampangnya kawan mencari batas atas dan bawah [Perhatikan gambar dibawah],

yang selengkapnya seperti berikut

<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Hapus semua kode tersebut sampai </b:if> dan ganti dengan kode berikut :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> : “<data:post.title/>”
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<ol class='commentlist-destacado'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'><b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
<b:else/>
<ol class='commentlist'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'> <b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/></p>
<span class='interaction-iframe-guide'/>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=4600536250166325978&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><span style='color: rgb(255, 0, 0); font-size:14px; font-weight:normal;float:left;padding-right:10px;'><blink>» Reply </blink></span></a>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
</b:if>
</b:loop>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Jangan lupa ganti teks yang berwarna merah dengan latar hijau [4600536250166325978] dengan ID Blog kawan :O
Jangan lupa hapus kembali tanda batas yang dibuat tadi
Simpan Template kawan
Mudah-mudahan kawan tidak menemukan masalah :#

Ini semua tidaklah mutlak harus begini, dan apa yang saya sampaikan ini hanyalah contoh sebagai gambaran saja, disamping keterbatasan dan kekurangan-kekurangan saya sangatlah banyak untuk itu dengan senang hati saya menerima saran pendapat dari kawan seandainya kawan mempunyai solusi lain yang lebih praktis untuk menambah wawasan saya sebelumnya saya ucapkan banyak terima kasih :@

Cara Modifikasi CSS Thread Comment

noreply@blogger.com (Putu BlogBego) — Tue, 24 Jan 2012 22:34:00 +0700

Artikel saya sebelumnya tentang Thread Comment Seperti Komentar FB, yang tampilannya masih polos atau tanpa warna background artinya warna latar Komentar adalah transparan disamping jarak antara Komentar sedikit agak longgar, bagi saya pribadi sangat perlu di adakan perubahan

Tampilan Thread Comment aslinya :

Tanpa warna latar belakang [background]
Komentar Admin [Replies dan Reply] dipinggir kanan agak masuk ke kiri seperti pinggir kiri Komentar

Cara Memodifikasi Thread Comment :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda ceklist disamping Expand Template Widget
Sebaiknya Simpan dulu Template kawan
Cari kode <b:includable id='threaded_comment_css'>

Kalau sudah ketemu mulai

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
sampai dengan ...............
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Hapus dan Ganti dengan

Hasil Modifikasi Blog Creation

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding: 5px 5px 0 0;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -2px;
margin-left: 36px;
width: 501px;}
.comments .comments-content .comment {
margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
padding-top:1px;
}
.comments .comments-content .comment:last-child {
border-bottom: 0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0;
}
.comments .comments-content .datetime {
float: right;
margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin: 0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: transparent;
cursor: pointer;
text-align: right;
}
.comments .continue a {
display: block;
padding: 0.5em;
margin-left: 48px;
font-weight: bold;
background: #95cafF;
color: #F00;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: inline-block;
}
.comments .thread-toggle {
background: #95CAFF;
display: inline-block;
padding: 3px 0;
width: 100%
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 0;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
background: #95CAFF;
margin-left: 48px;
padding: 5px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Khusus untuk width: 501px; adalah lebar untuk Replies dan Reply silahkan disesuaikan dengan lebar Komentar Blog kawan atau bisa dihilangkan
Jangan lupa simpan Template kawan

Thread Comment seperti Komentar Gaya FB

noreply@blogger.com (Putu BlogBego) — Thu, 19 Jan 2012 06:36:00 +0700

Sekarang ini Google - Blogger lagi gencar-gencarnya mengadakan perubahan dan yang terakhir adalah Thread Comment yang bentuknya sangat mirip seperti Komentar FaceBook [FB] :z

Thread Comment secara otomatis disisipkan dan ditampilkan pada Template Blog kalau di Negaranya Mbah Google, sedangkan untuk kita yang berada di Indonesia, kalau ingin menampilkan Thread Comment diperlukan sedikit Pengaturan [Edit] seperti yang dirilis oleh Google lewat Blogger Buzz :#

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Setelan » Lainnya » Bolehkan Umpan Blog ?

Perhatikan Gambar

Tetap pada Setelan » Pos dan Komentar » Lokasi Komentar ?

Perhatikan Gambar

Simpan Setelan Blog kawan dan sekarang kita akan meng-Edit Template

Caranya :

Pada Perancang Template pilih Edit HTML
Beri tanda disamping Expand Template Widget
Simpan dulu Template kawan untuk jaga-jaga
Cari kode » <b:include data='post' name='comments'/> selengkapnya seperti berikut

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

<b:include data='post' name='comments'/> tersebut ada 4 pada 2 tempat
Ganti semua script tersebut dengan :

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/></b:if></b:if>

Simpan Template kawan

Cara Membuat Kumpulan Komentar

noreply@blogger.com (Putu BlogBego) — Fri, 13 Jan 2012 10:29:00 +0700

Setiap Blogger sudah pasti menginginkan postingan / Artikel yang sudah dipublish agar dibaca oleh pengunjung Blog dan juga mengharapkan pengunjung tersebut memberikan Komentar, Saran, Kritikan dan lain sebagainya yang membangun tentunya. :r

Berbicara masalah Komentar apa itu perlu ?!, bagi saya pribadi hal tersebut sangat perlu, karena dari sini kita bisa mengetahui seumpama pengunjung Blog kita memberikan komentar berupa saran, kritikan dan yang tak kalah penting untuk mengetahui selera pengunjung [bukan sekedar Komentar] :z
Disamping pada dasarnya sebagai seorang Blogger yang baik sudah sepantasnya dan wajib mengadakan kunjungan balik pada Blog si pengunjung Blog kita.

Cara membuat "Kumpulan Komentar" :

Masuk ke account Blogger dengan ID kawan.
Pada laman Perancang template pilih tambah gadget
Klik tanda (+) pada HTML/JavaScript
Copas (copy-paste) kode berikut ke dalamnya

<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;">

<script style="text/javascript" src="https://sites.google.com/site/tipsblogbegoku/arsip/showrecentcomments.js">
</script><script style="text/javascript">
var numcomments = 25;
var displaymore = true;
var showcommentdate = true;
var showposttitle = true;
var numchars = 150;
var standardstyling = true;</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Keterangan :

Teks yang berwarna Hijau adalah tambahan saya untuk membatasi tempat yang diperlukan untuk tampilan
Silahkan ganti Nama Blog Kawan yang berwarna merah dengan URL / Link Blog kawan
Angka 25 menunjukkan jumlah komentar yang akan kawan tampilkan disesuaikan]
Angka 150 menunjukkan jumlah kata atau isi komentar [disesuaikan]

Kalau semuanya sudah disesuaikan, silahkan simpan dan lihat hasilnya

Cara Membuat Tulisan Berjalan di Sidebar

noreply@blogger.com (Putu BlogBego) — Sat, 7 Jan 2012 22:04:00 +0700

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Title Bar Maker yang keberadaannya pada Tab Bar Blog, :# sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang bisa ditempatkan pada Gadget / Sidebar. :r

Caranya :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang Template pilih tambah Gadget
Pada HTML / JavaScript pilih tanda (+)
Copas (copy paste) script berikut kedalamnya

<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
</script></div></div>

Ganti tulisan warna merah sesuai dengan selera kawan
Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya

About me

noreply@blogger.com (Putu BlogBego) — Sun, 1 Jan 2012 16:38:00 +0700

Putu BlogBego yang lebih dikenal dengan panggilan BlogBego mulai mengenal Dunia Maya [baca : Blog] kurang lebih sejak tahun 2009, waktu itu saya mencoba membuat Blog di WordPress yang cara-caranya diajari oleh keponakan sendiri yang sedikit tahu Bahasanya Mbah Google, karena saya ingin tampil beda, makanya hampir setiap hari mencari dan mendowload Thema WordPress, yang pada akhirnya rasa bosan menyinggahi saya disebabkan kebodohan yang tak bisa menyalurkan keinginan agar Blog bisa tampil beda

Saat kekecewaan itu saya nyasar di Blognya Kang Rohman, yang pada umumnya [khusus] membicarakan Blogspot, disini saya menemukan Cara Membuat Blog di Blogspot lengkap, sayapun tertarik dan mencoba membuat Blog di Blogspot, karena keasyikan saya melupakan Blog di WordPress dan saya Fokuskan di Blogspot sampai saat ini.

Setelah Blog pertama dibuat menyusul Blog berikutnya dengan Domain co.cc gratisan yang saya buat dengan nama Alambali.co.cc dan Balaitimbang.co.cc, yang selanjutnya dalam perjalanan Balaitimbang.co.cc hilang alias tak bisa kebuka atau kemungkinan yang lainnya.

Itulah sekelumit dongeng sebelum tidur About Putu BlogBego yang selalu ingin belajar, mencoba dan mengganti Template walau beresiko dan Blog sangat jelek dimata Search Engine maupun SEO [ini jangan ditiru ya........!!!] kwek kwek kwek

Cara Membuat Title Bar Maker yang lain

noreply@blogger.com (Putu BlogBego) — Sun, 1 Jan 2012 03:00:00 +0700

Selamat Tahun Baru 2012, sebelumnya saya sudah berbagi dengan kawan Cara Membuat Title Bar Maker dan sekarang saya akan mencoba berbagi lagi dengan kawan Cara Membuat Title Bar Maker dengan cara yang berbeda :r

Caranya :

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor / Rancangan pilih tambah gadget
Pilih tanda (+) pada HTML / JavaScript
Copas (copy-paste) script berikut kedalamnya atau bisa digabung pada Gadget yang ada

<script language="JavaScript">
var txt="SELAMAT DATANG DI BLOG RENOVASI.BLOGSPOT.COM - SEMOGA KAWAN NYAMAN DAN PUAS - TERIMA KASIH - ";
var blogcreation=170;
var fress=null;function judulbloggerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
fress=setTimeout("judulbloggerak()",blogcreation);}judulbloggerak();
</script>

Ganti Tulisan yang berwarna hijau sesuai dengan selera kawan.
Kalimat / Tulisan akan berjalan pada Bar dari kanan ke kiri
Script ini bisa juga ditempatkan pada :

Edit HTML Template, yaitu tepat diatas kode </body>
Post Editor pada posisi Edit HTML

Cara Membuat Title Bar Maker

noreply@blogger.com (Putu BlogBego) — Sat, 24 Dec 2011 20:30:00 +0700

Kawan mungkin semua sudah tahu apa itu Title Bar Maker, yaitu Tulisan atau kalimat yang bergerak/berjalan secara otomatis di Bar Blog.

Cara pembuatannya kawan tak perlu bersusah payah karena sudah ada situs penyedia cara membuatnya, kawan cukup memasukan Kalimat yang akan dibuat dan memilih model effectnya misalnya bergerak kekiri, kekanan, banner dan lain sebagainya, dan sebelum kawan mendapatkan kodenya, sebaiknya dicoba dulu [Preview], perhatikan gambar disamping

Situs penyedianya » disini

contoh : saya membuat kalimat SELAMAT DATANG DI BLOG CREATION, KUNJUNGAN DAN KOMENTAR KAWAN DITUNGGU dengan Effect Message Scroller, maka scriptnya sebagai berikut

<script type="text/javascript">
//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)
function tb8_makeArray(n){

this.length = n;
return this.length;

}
tb8_messages = new tb8_makeArray(1);
tb8_messages[0] = "SELAMAT DATANG DI BLOG CREATION, TERIMA KASIH KUNJUNGAN DAN KOMENTAR KAWAN DITUNGGU...!!!";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}
tb8_pisi()
</script>

Kalimat yang saya buat tadi tidak akan mungkin kelihatan seluruhnya, karena kepanjangan dan cara mengatasi biar kelihatan semua kalimat tadi, caranya kita potong-potong menjadi seperti berikut :

tb8_messages = new tb8_makeArray(5);

tb8_messages[0] = "SELAMAT DATANG !!!";

tb8_messages[1] = "DI BLOG CREATION";

tb8_messages[2] = "KUNJUNGAN DAN";

tb8_messages[3] = "KOMENTAR KAWAN";

tb8_messages[4] = "DITUNGGU....!!!";

makeArray(5) menyesuaikan banyaknya baris kalimat pada tb8_messages[0] maka script tersebut setelah saya modif menjadi :

<script type="text/javascript">
//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)
function tb8_makeArray(n){

this.length = n;
return this.length;

}
tb8_messages = new tb8_makeArray(5);
tb8_messages[0] = "SELAMAT DATANG !!!";
tb8_messages[1] = "DI BLOG CREATION";
tb8_messages[2] = "KUNJUNGAN DAN";
tb8_messages[3] = "KOMENTAR KAWAN";
tb8_messages[4] = "DITUNGGU....!!!";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 100;
tb8_delay = 2000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}
tb8_pisi()
</script>

Penempatan script tersebut pada elemen / gadget dimana saja boleh,

Caranya sebagai berikut :

Masuk ke Account Blogger dengan ID kawan
Pada Design/Perancang Template pilih Tambah Gadget
Tekan tanda [+] pada HTML / JavaScript
Copas script tersebut kedalamnya

Cara Membuat Klik Label yang tampil Judul Artikel saja

noreply@blogger.com (Putu BlogBego) — Mon, 19 Dec 2011 23:11:00 +0700

Apa itu Label / Katagori atau nama lainnya yang serumpun, biasanya kalau di buka [Klik] oleh pengunjung akan tampil Judul dan isinya, seumpama
Artikel tersebut tanpa Readmore coba kawan bayangkan, bagaimana panjangnya untuk scroll ke bawah, :z Untuk membuatnya biar simple [yang tampil hanya Judulnya saja], inilah yang akan saya coba berbagi dengan kawan sekarang
Caranya :

Masuk ke Account Blogger dengan ID kawan.
Pada Dasbor cari Rancangan terus Edit HTML.
Backup / simpam template kawan dulu.
Beri tanda centang disamping “Expand Widget Template”
Cari Kode script : <b:include data='post' name='post'/>
Kalau sudah ketemu Hapus / ganti dengan Kode Script berikut :

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

<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>

<data:post.title/></a><br/><br/>

<b:else/>

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

</b:if>

<b:else/>

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

</b:if>

Simpan template kawan :r
Untuk melihat hasilnya, silahkan buka [Klik] salah satu Label Blog kawan

Tampilan Home Page Full Hidden

noreply@blogger.com (Putu BlogBego) — Wed, 14 Dec 2011 12:43:00 +0700

Pada postingan saya sebelumnya tentang Tampilan Home Page tanpa Postingan pada Demonya saya pakai Template tanpa Sidebar :z alias hanya satu kolom postingan saja, yang tujuannya biar kelihatan di tengah Blog, sedangkan Blog pada umumnya sudah pasti ada Header, Sidebar [kiri maupun kanan], Post Artikel [Content] dan Footer dan lainnya.

Yang akan saya bahas sekarang masih tetap pada Home Page cuma yang sekarang ini betul-betul Full Hidden [contoh Gambar disamping masih kelihatan Headernya], bagaimana apa kawan tertarik membuatnya. :r » ini Lanjutan Artikel saya sebelumnya

Okey langsung saja ke cara membuat Tampilan Home Page Full Hidden :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang / Design Template pilih Edit HTML
Cari kode ]]></b:skin>
Copas kode berikut persis dibawahnya

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#SIMPAN DISINI {display:none}
</b:if>
</style>

Catatan :

Teks SIMPAN DISINI ganti dengan :
#Header1, #menu, #footer, #Sidebar, #Follower1, #HTML?

Contoh :

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#Header1, #menu, #footer, #Sidebar, #Follower1, #HTML?{display:none}
</b:if>
</style>

HTML? maksud saya tanda tanya [?] diganti angka riil pada HTML Template
Cara mengetahui angka riil HTML Template :

Pada Edit HTML scroll ke bawah sampai akhir
Dari sini naikkan mouse keatas perlahan - lahan dan perhatikan teks HTML [lihat image disamping]
Simpan Template kawan

Selamat Berkreasi semoga Sukses selalu :@

Tampilan Home Page tanpa Postingan

noreply@blogger.com (Putu BlogBego) — Fri, 9 Dec 2011 15:35:00 +0700

Tampilan Home Page

Sekarang saya mencoba berbagi dengan kawan cara membuat Tampilan Blog pada Home Page Bergaya tanpa Postingan, yang saya maksud disini adalah tampilan Blog pada Home Page suka-suka kita dan yang utama postingan / Artikel kita sembunyikan pada Home Page, untuk Demonya kawan bisa lihat » disini
Bagaimana Keren kan ?!

Okey langsung ke cara membuatnya :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang Template pilih Pengaturan - Format - Tampilkan sebanyak mungkin : ganti jumlahnya menjadi 0 (Nol) posting di halaman utama - Simpan Setelan.
Pilih Edit HTML - Simpan / Download Template kawan dulu
Beri tanda centang pada radio disamping tulisan Expand Template Widget.
Cari kode berikut .comment-link{

Kalau sudah ketemu Hapus / Ganti kode tersebut dengan kode dibawah ini

.comment-link{float:right; overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:2px 5px 0px 0px;}

Selanjutnya cari kode <b:include data='post' name='post'/>
Hapus atau ganti kode tersebut dengan kode berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <div style='float:center; padding:4px;margin:5px;border:2px solid #00F; -moz-border-radius:10px;-webkit-border-radius:10px; background:#50A9F0; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'><data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

Teks yang saya beri warna hijau adalah warna background judul Artikel, silahkan disesuaikan

Selanjutnya cari kode : <b:includable id='status-message'> yang kode lengkapnya kurang lebih sebagai berikut

Tampilan Home Page II

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>

Hapus atau Ganti Kode tersebut dengan :

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

<a href='http://blog-renovasi.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke BLOG CREATION...'>

<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq6hEJcioclOEjaIOtCi8Yp_aA-jjiw9F3d0-uRMqZS2VdwG9R_ldIgHiRyrzxuZ0jt17zF6g-dMbKVIoCUZp5dPo1tj4r9VaXzs067yYzYgLUk3LL9Mqt58mN6EeaPbncpRXiL4fLTvU/s320/anjing+menggonggong.jpg' width='200'/><br/><br/><span style='color: rgb(255, 255, 0); font-size:34px; font-weight:bold;'> »<blink> Masuk </blink></span>

</a>

</div>

<div class='status-msg-hidden'>

<a href='http://blog-renovasi.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke BLOG CREATION...'>

<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq6hEJcioclOEjaIOtCi8Yp_aA-jjiw9F3d0-uRMqZS2VdwG9R_ldIgHiRyrzxuZ0jt17zF6g-dMbKVIoCUZp5dPo1tj4r9VaXzs067yYzYgLUk3LL9Mqt58mN6EeaPbncpRXiL4fLTvU/s320/anjing+menggonggong.jpg' width='200'/><br/><br/><span style='color: rgb(255, 255, 0); font-size:34px; font-weight:bold;'> »<blink> Masuk </blink></span></a>

</div>

</div>

<div style='clear: both;'/>

</b:if>

</b:includable>

Catatan :

Silahkan ganti URL Blog saya dengan URL kawan
Ganti URL image / gambar tersebut dengan yang kawan punya
Simpan Template dan lihat hasilnya