Jika pada
sebelumnya saya sudah membagikan tutorial cara membuat recent post (ganti dengan link post recent post) untuk blog, kali ini saya akan
membagikan tutorial recent post per label. Recent post adalah postingan terbaru
secara keseluruhan didalam blog anda, sementara recent post per label adalah
postingan terbaru dalam blog anda yang dikolompokkan berdasarkan label atau
kategori tertentu di blog anda.
Biasanya
widget recent post per label ini banyak sekali digunakan dalam sebuah blog
dengan niche (topic) berita atau magazine. Fungsi dari widget ini tentunya
untuk memudahkan para pembaca untuk mengeksplorasi tiap label dalam dalam blog
agar lebih ringkas didalam template anda. Sebelumnya, sudah banyak sekali yang
sudah membagikan tutorial ini di luar sana, namun apa salahnya jika saya
berbagi. Tak main – main disini saya akan membagikan 3 style recent post per
label yang pastinya keren - keren, bagaimana tutorialnya, langsung saja simak
tutorial berikut ini.
Customisasi Recent Post Per Label
Sebelum
memasang widget recent post per label di blog anda, terlebih dahulu anda harus
mengkostumisasi template blog anda agar nyambung dengan widgetnya. Ini dia cara
mengkostumisasinya
Pertama, yang
anda masuk ke dashboard blogger anda masing – masing.
Kedua, masuk
ke “Template”, jangan lupa unuk berjaga – jaga back up terlebih dahulu template
anda. Jika sudah klik “Edit HTML”.
Ketiga, cari
kode berikut ]]></b:skin> gunakan Ctrl + F atau tekan F3 untuk
mempermudah pencarian. Jika sudah ketemu, letakkan kode berikut ini di atas
kode tersebut
img.label_thumb{float:left;border:1px
solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0
5px 2px 0}
ul.label_with_thumbs
li{min-height:65px;margin:2px 0;padding:4px 0}
*Catatan :
kode yang bewarn biru dalam kode terdebut
adalah kode untuk mengetur lebar dan tinggi gambar nantinya.
Keempat, jika
sudah, cari kode </head> dan letakkan kode berikut ini di atasnya.
<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/AVvXsEjbBSJssD7D6J1NQcx2vl5LFJ6jF46T_G0cH-BqPBdaZDaoiHRSu2V8wdGfj9TWzBmBXTrEM1uhlAIC_aZwhkj7J4m7HbKrJ-Rr2Cgi1XH9m9Wv2f0yzWlu-xpOqaba_CWfGwijCTXMVKVf/';}
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>
Mungkin kode
tersebut terlalu panjang, jika anda ingin yang lebih pendek silahkan letakkan
masukkan saja kode berikut ini tepat diatas kode </head> tadi.
<script
src='http://yourjavascript.com/425111422721/label.js'
type='text/javascript'/>
Kelima, tekan
tombol “Save” atau “Simpan” untuk menyimpan template anda.
Menambahkan widget Recent Post Per Label di Blog
Jika langkah
kostumisasi diatas sudah selesai saatnya anda menambahkan widget recent post
per label di dalam template anda, caranya
Pertama, masuk
ke “Layout” atau “Tata letak”
Kedua,
tambahkan widget Javascript/HTML dengan cara menekan tombol + yang berada
disebelah kanan.
Ketiga,
letakkan salah satu kode berikut ini sesuai dengan yang anda sukai
Recent post per label no image
<script
src="http://bloggergubug.googlecode.com/files/recentpost.js"
type="text/javascript"></script><script
type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars =
100;var standardstyling = true;</script><script src="http://www.ismayayuli.com/feeds/posts/default/-/Label_anda?orderby=published&alt=json-in-script&callback=showrecentposts"
type="text/javascript"></script>
Recent post per label with image
<script
type='text/javascript'>
var numposts =
5;
var
showpostthumbnails = true;
var
displaymore = false;
var
displayseparator = true;
var
showcommentnum = true;
var
showpostdate = true;
var
showpostsummary = false;
var numchars =
100;
</script>
<script
type="text/javascript" src="http://www.namabloganda.blogspot.com/feeds/posts/default/-/nama_label_anda?published&alt=json-in-script&callback=labelthumbs"></script>
Recent post per label one image
<script type='text/javascript'>var numposts =
1;var showpostthumbnails = true;var displaymore = false;var displayseparator =
false;var showcommentnum = false;var showpostdate = false;var showpostsummary =
true;var numchars = 60;</script>
<script type="text/javascript"
src="/feeds/posts/default/-/label_anda?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1;
i < json.feed.entry.length; i++)
{
for (var j =
1; j < json.feed.entry[i].link.length; j++) {
if
(json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" +
json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a
href="+ entryUrl + '" target="_blank">' + entryTitle +
"</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="namabloganda.blogspot.com/feeds/posts/summary/-/
Label_anda?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="namabloganda.blogspot.com/search/label/label_anda "
style="float:right;font:normal 11px Arial;padding:5px 0;">More on
this category »</a>
*Catatan :
1. kode yang
bewarna hijau adalah berapa banyak post yang
akan anda tampilkan di widget, ganti sesuai dengan keinginan anda.
2. kode yang
bewarna merah adalah alamat blog anda, ganti
dengan alamat blog anda.
3. kode yang
bewarna biru adalah label yang akan anda
tampilkan pada widget, ganti dengan nama label yang akan anda tampilkan di
widget.
4. penulisan
label harus sama persis, misal labenya “Blog”,
maka tidak boleh ditulis “blog”.
5. jika nama
label lebih dari satu kata, maka untuk pengganti spasi ditulis dengan kode %20, misal nama label “Tutorial Blog” maka penulisannya “Tutorial%20Blog”
Nah, itulah tutorial cara membuat widget recent post per label
di blog anda. Jika anda masih belum paham dengan tutorial diatas silahkan
tanyakan saja di kolom komentar. Sekain tutorial kali ini, semoga bermanfaat.
1 komentar:
rumit juga ya gan
Posting Komentar