July 5, 2016

Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog

July 5, 2016

Cara Menampilkan Posting Terbaru dengan Label Tertentu di Sidebar Blog

ADA dua cara memasang, memunculkan, atau menampilkan widget posting terbaru dengan Label atau Kategori Tertentu di Sidebar Blog. Pertama, menggunakan gadget Feed bawaan blogger. Kedua, menggunakan kode HTML/Javascript.

Posting Terbaru Label Tertentu di Sidebar

#1 - Cara Memasang Posting Terbaru dengan Feed
Feed adalah widget bawaan blogger yang memungkinkan kita memasang daftar posting dari blog kita sendiri maupun blog lain. 

Kita bisa manfaatkan widget Feed ini untuk memasang posting terbaru label tertentu, maupun semua label.

1. Tata Letal > Tambah Gadget > pilih Feed
2. Masukkan URL blog Anda:

- Untuk label tertentu: http://namablogAnda.blogspot.com/feeds/posts/default/-/nama label
- Untuk Semua Label: http://namablogAnda.blogspot.com/feeds/posts/default

3. Klik Continue
4. Ubah Judul Widget dengan Posting Terbaru
5. Save!


#2 - Cara Memasang Posting Terbaru dengan Kode Script
Jika cara di atas gagal, biasanya karena ada kode yang mengapit kode </body> di dalam template seperti ini: &lt;!--</body>--&gt;&lt;/body&gt; maka gunakan kode script. 

Bisa juga dengan menghapus kode &lt;!--</body>--&gt;&lt;/body&gt; tersebut dan ganti dengan kode </body> saja.

Ini cara memasang widget posting terbadu di sidebar blog dengan kode:

1. Pilih Tata Letak > Tambah Gadget > HTML/JavaScript
2. Isi Judul dengan Posting Terbaru
3. Copy Paste kode berikut ini ke kolom Content:

Kode Untuk Kategori Tertentu:
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="/feeds/posts/default/-/nama label?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>

Kode untuk Posting Terbaru Semua Label:

<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
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 == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<ul><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script> </ul>


PAKE GAMBAR/FOTO THUMBNAIL?
Bagaimana jika posting terbarunya ingin menggunakan foto atau gambar? Baca ini: Pasang Posting Terbaru plus Gambar Thumbnail di Sidebar Blog.

Ini kodenya:

<style>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {min-height: 80px;background:none;padding:5px 0;background:none;}.recent_posts_with_thumbs a {text-decoration:none;font-weight:700;font-size: 12px;}.recent_posts_with_thumbs strong {font-size:10px;}i {font-style: normal;font-weight: 400;font-size: 11px;}
</style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

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">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');
}
</script>
<script>
var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 90;
</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Untuk posting kategeri tertentu, UBAH saja /feeds/posts/default?orderby menjadi /feeds/posts/default/-/Label?orderby

Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Cara Menampilkan Posting Terbaru Label Tertentu di Sidebar Blog

  1. Terima kasih...
    Sangat bermanfaat...

    ReplyDelete
  2. bagai mana caranya menampilkan 2 label gimana kodenya menampilkan 2 label sekaligus pada bagian ini /posts/default/-/Label?orderby

    ReplyDelete
  3. Untuk bikin random bisa tidak ya mas ?

    ReplyDelete
    Replies
    1. Bisa banget! Itu kan kodenya buat random, lalu bisa buat per label juga. Simak lagi kodenya ya.

      Delete

Contact Form

Name

Email *

Message *