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

---------- Forwarded message ----------
From: KUCOPAS <donotreply@rssforward.com>
Date: Tue, 02 Oct 2012 17:56:11 +0800
Subject: Cara Membuat Kategori Label Otomatis Dengan Thumbnail Gambar
Atau Foto Di Blog
To: mountain8083@gmail.com

[1]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 [2]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 [3]Demo Kucopas. Kurang lebih tampilanya seperti gambar
screenshot di bawah ini.



[4][5]

[6]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.
* Silahkan sobat >> Login/Masuk >> Ke Blog sobat.
* Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Template
>> Edit HTML >> Lanjutkan.
* Jangan lupa sobat "Centang" >> Expand Template Widget.
* Kemudian cari Kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
* 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.
* Masih dalam "Edit HTML" Template, Silahkan sobat cari Kode </head>
(Gunakan CTRL+F lagi untuk mempercepat pencarian).
* 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/AVvXsEj8RhwdoOxYLzlxpc2m4YJSktOI8aRMBYOjv1gkwRDMYsKh8gkQHqnxew8LauPG7sAaSi_DpkjBdt3EluuR-FShl_E5E4B0iBmSriuV54CHTP0JMychUgb_h8XLzJYcGLYtw2fyaH3oqAP6/';}
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.

* 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.
* 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 [7]http://kuc0pas.blogspot.com |
___


[8]

Ku Copas 15 Sep, 2012
-
Source: http://kuc0pas.blogspot.com/2012/09/cara-membuat-kategori-label-otomatis.html
--
[9]Manage subscription | Powered by [10]rssforward.com

[1] <http://kuc0pas.blogspot.com/2012/09/cara-membuat-kategori-label-otomatis.html>
[2] <http://kuc0pas.blogspot.com/2012/09/cara-membuat-dan-memasang-daftar-isi.html>
[3] <http://demokucopas.blogspot.com/>
[4] <https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZG_LOPABHQFFUi8OkFNljdy_7o0gguF7-xg-nr9Cj1I2CdhsTZ2jL2A22VhimcfD6MCo0VRbfb04kBIv7lRlMiiK4H9NEsQYhr-LY_HCX1mMWqEVpm6uGj2CH8ZTa_sXKbAwPAE4SwzR/s1600/Cara+Membuat++Label+Kategori+Otomatis+Dengan+Thumbnail+Gambar+Atau+Foto.jpg>
[5] <https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZG_LOPABHQFFUi8OkFNljdy_7o0gguF7-xg-nr9Cj1I2CdhsTZ2jL2A22VhimcfD6MCo0VRbfb04kBIv7lRlMiiK4H9NEsQYhr-LY_HCX1mMWqEVpm6uGj2CH8ZTa_sXKbAwPAE4SwzR/s320/Cara+Membuat++Label+Kategori+Otomatis+Dengan+Thumbnail+Gambar+Atau+Foto.jpg>
[6] <http://kuc0pas.blogspot.com/2012/09/cara-membuat-dan-memasang-daftar-isi.html>
[7] <http://kuc0pas.blogspot.com/>
[8] <https://blogger.googleusercontent.com/tracker/5680454114530316294-2755063435975648897?l=kuc0pas.blogspot.com>
[9] <http://rssforward.com/subscriptions/5c8c2d76323229bbba4df115743fa6d0/edit>
[10] <http://rssforward.com/?footer>