BLOG CREATION

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 :

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

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 :

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

Selengkapnya

Ekspresikan Commentator Thread dengan Emoticon

Tampilkan Posting berdasarkan Katagori Plus Thumbnail

Cara Menampilkan Artikel Berdasarkan Katagori

Cara Membuat Random Post Plus Summary

BLOGBEGO CREATION

PASANG IKLAN
SUKA - SUKA DISINI

BANNER [300x300]

Dapatkan Update Terbaru
secara Gratis langsung di Email Kawan

Ekspresikan Commentator Thread dengan Emoticon

Tampilkan Posting berdasarkan Katagori Plus Thumbnail

Cara Menampilkan Artikel Berdasarkan Katagori

Cara Membuat Random Post Plus Summary

BLOGBEGO CREATION

PASANG IKLAN SUKA - SUKA DISINI

BANNER [300x300]

Dapatkan Update Terbaru secara Gratis langsung di Email Kawan

PASANG IKLAN
SUKA - SUKA DISINI

Dapatkan Update Terbaru
secara Gratis langsung di Email Kawan