Cara Membuat Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog

 Cara Membuat Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog - Kali ini saya akan share artikel yang masih berhubungan dengan trik blog. Yaitu tentang label atau kategori blog yang otomatis dengan thumbnail gambar atau foto.

 Fitur kategori label otomatis dengan thumbnail sebenarnya merupakan pengembangan dari trik sebelumnya mengenai Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog. Namun bedanya fitur ini bisa menampillkan kategori berdasarkan nama kategori atau label tertentu yang disertai dengan gambar thumbnail atau foto dan juga sedikit ringkasan atau potongan artikel dari isi setiap masing-msing postingan blog.

 Contoh tampilan dan penerapan dari fitur Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog, Bisa sobat lihat demonya pada Blog Demo Kucopas. Kurang lebih tampilanya seperti gambar screenshot di bawah ini.

DEMO

 Fungsi dari fitur Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto Di Blog adalah untuk mempermudah pengunjung blog kita agar menemukan artikel yang di cari, Karena tampilannya yang di sertai dengan thumbnail gambar atau foto, Maka pengunjung pun akan lebih tertarik untuk melihat isi dari artikel postingan tersebut secara lengkapnya.

 Jika sobat tertarik untuk membuat dan memasangnya di blog sobat, Silahkan ikuti langkah-langkahnya sebagai berikut:

• Langkah pertama.

1. Silahkan sobat >> Login/Masuk >> Ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian cari Kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
5. Setelah ketemu, Silahkan sobat Taruh semua Kode berikut tepat sebelum atau di atas Kode ]]></b:skin>

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

• Langkah Kedua.

1. Masih dalam "Edit HTML" Template, Silahkan sobat cari Kode </head> (Gunakan CTRL+F lagi untuk mempercepat pencarian).
2. Jika sudah ketemu, Silahkan sobat Taruh semua Kode berikut tepat Sebelum atau di atas Kode </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1kC4Wa4W9T2F74m3zPJiRaDN9OSmgmsB79cwaS2wgEiklWJKiXtdtuYe8m9r0x46DzE1D8mL6pHPUWyXkJtefdofvrVrAl7SBWo1ehKKy0yI2H4Sq-0a-yrfGtvayB5NOidk6mSCMHC7/';}
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>

4. Demi untuk menghindari kesalahan saat Edit HTML dalam Template, Silahkan sobat klik >> Preview/Pratinjau, Jika tidak terjadi eror, Silahkan sobat klik >> Simpan Template.

Langkah Terakhir.

1. Silahkan sobat menuju ke Dashboard, Pada tampilan blog baru pilih dan klik Menu >> Tata Letak >> kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik >> HTML/JavaScript.
2. Langkah yang berikutnya, Silahkan sobat Masukkah semua kode berikut kedalam kotak HTML/JavaScript.

<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script>

<script type="text/javascript" src="/feeds/posts/default/-/TUTORIAL%2OBLOG?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

3. Silahkan sobat klik >> Simpan dan lihat hasilnya pada blog sobat akan ada widget Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto.

Keterangan:

• var numposts = 5 adalah Jumlah daftar isi label atau kategori yang di tampilkan. Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.

• var numchars = 50 adalah Jumlah karakter ringkasan isi posting yang di tampilkan. Silahkan sobat ganti nilainya seperti keinginan sobat.

• true adalah Kode perintah untuk di tampilkan.

• false adalah Kode perintah untuk tidak di tampilkan.

• TUTORIAL%2OBLOG adalah Label yang isinya akan di tampilkan. Silahkan sobat ganti dengan label atau kategori blog sobat yang ingin isinya di tampilkan. (Besar kecil huruf harus sama dengan label atau kategori blog sobat, Gunakan %20 jika label atau kategori sobat ada space atau spaci-nya).

 Sampai disini pastinya sobat sudah bisa memasang Kategori Label Otomatis Dengan Thumbnail Gambar Atau Foto di blog sobat semua. Jika sobat masih menemui kesulitan, Silahkan bertanya pada kolom kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat. Semoga artikel ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Terus berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog

 Cara Membuat Dan Memasang Daftar Isi Perlabel Di Blog - Halo sobat kita ketemu lagi, Pada kesempatan kali ini saya akan share artikel tentang cara membuat daftar isi diblog, Namun daftar isi yang akan kita buat kali ini berdasarkan label atau kategori. Jadi daftar isi ini hanya akan menampilkan daftar isi dari label atau kategori tertentu saja.

 Fungsi dari daftar isi perlabel atau kategori ini adalah untuk memudahkan visitor atau pengunjung blog kita agar dapat dengan cepat menemukan apa yang dicari dalam blog kita. Sobat bisa menaruh daftar isi ini di sidebar maupun dimana saja posisinya seperti yang sobat inginkan. Tampilannya pun menarik dan rapi tidak amburadul, Jadi bisa juga untuk mempercantik blog kita biar terkesan profesional.

 Pada artikel sebelumnya yang sudah pernah saya share yaitu cara membuat daftar isi Jquery Accordion di blog, Daftar isi itu akan menampilkan daftar isi keseluruhan posting pada blog dengan sentuhan Jquery Accordion. Jadi tampilanya akan mirip seperti menu drop down, Bedanya yang di tampilkan adalah daftar isi dari semua judul posting pada blog.

 Kembali lagi pada pokok bahasan, Daftar isi perlabel ini sudah saya modifikasi, Otomatis menggunakan scroll box. Jadi sobat jangan khawatir, Daftar isi ini tidak akan memakan banyak tempat di template blog sobat. Untuk melihat contohnya seperti apa tampilannya daftar isi perlabel ini, Sobat bisa melihat contoh screenshoot gambarnya di bawah ini.

 Gimana? Sobat tertarik untuk membuatnya?
Jika sobat tertarik untuk membuat dan memasangnya di blog sobat, Ikuti saja langkah-langkahnya jangan sampai ada yang terlewatkan.

Cara Memasang Daftar Isi Perlabel di Blog

1. Silahkan sobat >> Masuk/Login pada Blog sobat.
2. Kemudian pada Menu Blogger yang baru, Pilih >> Tata Letak.
3. Langkah selanjutnya sobat pilih dimana kira-kira daftar isi perlabel ini akan sobat letakkan, Caranya sobat klik tab >> Tambahkan Gadget.
4. Lalu sobat pilih >> HTML/JavaScript.
5. Kemudian silahkan sobat masukkan semua kode script dibawah ini:

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<ul><script>
var numposts = 100;
var standardstyling = true;
</script> </ul>
<script src="http://kang-onk.googlecode.com/files/label-post.js" type="text/javascript"></script>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>

Keterangan:

• Warna pink adalah kode scroll box (kotak scroll). Ukuran lebar akan otomatis sesuai dengan tempat dimana daftar isi ini akan di letakkan.
• height: 200px; adalah ukuran tinggi scroll box (kotak scroll), Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
• Ganti http://kuc0pas.blogspot.com dengan URL blog sobat.
• Ganti TUTORIAL%20BLOG dengan label sobat yang ingin ditampilkan pada daftar isi. Ingat sobat, Label harus sesuai dengan besar kecil huruf label pada blog sobat.
• Gunakan %20 jika label sobat ada space (spasi) nya.
• max-results=999" adalah banyaknya judul posting dalam daftar isi yang akan di tampilkan, Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.

6. Langkah yang terakhir, Silahkan sobat klik >> Simpan, Selesai dan lihat hasilnya.

 Saya yakin sobat pasti bisa memasangnya pada blog sobat, Karena caranya sangat mudah. Namun bila sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang telah tersedia. Jangan lupa di Like, Bila sobat sudah berhasil memasangnya di blog sobat.

 Berikut contoh Daftar isi berdasarkan label atau kategori yang sudah saya buat:

TUTORIAL BLOG

 Semoga artikel ringan tentang Cara Membuat Dan Memasang Daftar Isi Berdasarkan Label Di Blog ini, Bisa sangat bermanfaat untuk sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---