Arsip pada blog (website) atau kadang disebut daftar isi pada blog (website) ini sangat diperlukan pada blog (website) yang sudah mempunyai sangat banyak postingan, dengan tujuan agar pengunjung dengan mudah mengetahui seluruh postingan lama yang pernah kita buat yang jumlahnya bisa puluhan bahkan sampai ratusan judul yang tersimpan pada blog (website) kita.
Karena postingan pada blog (website) kita telah mempunyai puluhan bahkan ratusan, maka tidak cukup jika kita hanya membuat arsip atau daftar isi saja. Oleh karena itu arsip atau daftar isi pada blog (website) yang isinya masih bercampur dengan berbagai macam kategori itu, kita perlu mengelompokkannya lagi berdasarkan masing-masing kategori yang sejenis atau kategori yang sama agar pengunjung akan jauh lebih mudah lagi mencari informasi tertentu yang mereka butuhkan. Karena blog (website) ini menggunakan hosting dari google (blogger), maka kita memanfaatkan Label untuk dijadikan sebagai Kategori.
Berikut ini langkah-langkahnya:
Langkah Pertama (ke-1):
Tempatkan script html di bawah ini tepat diatas atau sebelum kode html "]]></b:skin>" di dalam html blog (website) milikmu.
(Catatan: untuk menemukan kode html "]]></b:skin>", biar cepat, caranya: tempatkan kursor di dalam html blog (website)mu, lalu tekan Ctrl dan karakter F pada keyboard, maka akan tampil kotak pencarian diatas html, lalu masukkan kode html "]]></b:skin>" tersebut dan tekan enter, maka kamu segera menemukan lokasi kode html tersebut).
Script HTMLnya:
/*** Fitur Berdasarkan 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 (ke-2):
Tempatkan juga script html di bawah ini tepat di atas kode html "</head>". (Gunakan Ctrl+F lagi untuk mempercepat pencarian).
Script HTMLnya:
<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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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>
Lalu tekan "Simpan" template tersebut.
Langkah Ketiga (ke-3):
Silahkan menuju ke Dasboard, laku klik "Add Page" untuk membuat halaman baru.
Lalu masukkan Script HTML dibawah ini (dibagian HTML view, bukan di Compose view)
Script HTMLnya:
<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/-/Dialog%20Ketoprak?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Jika ingin dimasukkan widget (bilah), silahkan menuju ke Dasboard, lalu klik "Layout", lalu pilih dan klik "Add Gadget", lalu pilih dan klik "HTML/Javasript". Masukkan Script HTML diatas ke dalamnya, dan tekan "Save".
CATATAN :
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.
Dialog%20Ketoprak 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 spasinya.
Dan seperti inilah hasilnya:
Sekian, semoga bermanfaat!
http://kuc0pas.blogspot.com/2012/09/cara-membuat-kategori-label-otomatis.html
Comments
Post a Comment