Cara Membuat Recent Post Dengan Tampilan Per Label

RIAISY BIT| Recent post atau tampilan artikel terbaru bisa menjadi cara bagi para blogger untuk mengganti tampilan popular post atau posting paling populer disisi sebelah kanan tampilan desktop atau disisi bawah posting untuk tampilan mobile. Anda bisa menambahkannya diatas atau dibawah popular post atau menggantikan popular post. 

Mengapa popular post menurut saya tidak perlu ditampilkan dan sebagai gantinya adalah recent post ?


Salah satunya adalah menjaga agar blog tidak di copas, digandakan dan dipublish ulang oleh blog AGC . Para pelaku blog AGC juga memanfaatkan artikel yang paling banyak dikunjungi untuk menjadi korban sasaran dengan tujuan untuk mengambil artikel yang paling berpotensi mendapatkan trafik jika menggandakan artikel diblog tersebut. Sementara bagi pengunjung yang mendapatkan informasi artikel tidak berasal dari blog tetapi dari mesin pencari, tidak akn berpengaruh terhadap tampilan popular post. Bahkan bagi pemilik blog, popular post menjadi tempat monitoring kunjungan paling banyak di blog, padahal sudah tersedia lengkap monitor trafik pengunjung per artikel di dashboard blogger.




Apa manfaat recent post by label ?

 

 

Seperti yang Anda lihat pada blog ini, jika di lihat dengan versi desktop recent post akan tampil dan menurut saya cocok untuk blog gado gado karena kategori per label harus dimunculkan untuk menampilkan semua isi blog di homepage. Mengapa tidak dibody dengan tampilan kategori by label ?. Recent post by label dengan beberapa tampila artikel tetap tidak mempengaruhi kecepatan loading blog, sedangkan category by label di homepage postingan bisa memperlambat loading blog apalagi kategori yang ditampilkan lebih banyak.



Bagaimana cara membuat Recent Post dengan Tampilan per Label ?



Silahkan di simak baik baik :

1. Cari kode  ]]></b:skin>
2. Pastekan kode CSS style ini diatasnya :
 /* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }
3.Cari kode </head> atau &lt;/head&gt;
4. Pastekan kode ini diatasnya :
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="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://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";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>
5.Cari kode</body> atau &lt;/body&gt;
6. Pastekan kode ini diatasnya :
 <script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);             
</script>
7. Save . Kembali kemenu TATA LETAK di Blogger
8. Pada widget sidebar, klik Tambah Gadget dan pilih HTML/JavaScript
9.Masukkan kode ini :
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nama-label-blogmu?published&alt=json-in-script&callback=labelthumbs"></script>
 10. Ganti warna merah dengan kategori label blog Anda. SElain itu kustom tampilannya dengan mengganti jumlah var numposts, menampilkan atau menyembunyikan komentar, tanggal, summary dan lain lain dengan mengganti TRUE menjadi FALSE atau sebaliknya
11. Save .Selesai

0 Response to "Cara Membuat Recent Post Dengan Tampilan Per Label"

Posting Komentar

Disclaimer : Silahkan berkomentar dibawah dengan bijak. Komentar dengan meletakkan link aktif atau keyword p*rn* akan dihapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel