Ekspresikan Commentator Thread dengan Emoticon

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

Selengkapnya

Tampilkan Posting berdasarkan Katagori Plus Thumbnail

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


Selengkapnya

Cara Menampilkan Artikel Berdasarkan Katagori

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 :

  1. Masuk ke Account Blogger dengan ID kawan 
  2. Pada Tata Letak pilih Tambah Gadget
  3. Selanjutnya pilih Feed
  4. 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




Selengkapnya

Cara Membuat Random Post Plus Summary

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 :


  1. Masuk Account Blogger dengan ID kawan 
  2. Pada tata letak Pilih Tambah Gadget
  3. Pilih tanda [+] pada HTML / JavaSript
  4. 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 

Selengkapnya