Widget Recent Post per Label with 1 thumbnail

Discussion in 'Blogger' started by nawi667, Jul 13, 2013.

  1. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    Widget recent post (per label) adalah merupakan sebuah menu navigasi artikel atau postingan (yang biasanya diletakkan pada halaman homepage blog), widget ini berguna untuk menginformasikan kepada visitor atau pengunjung tentang artikel atau postingan blog yang memiliki label (kategori) sama. Widget ini sangat bermanfaat untuk mempercantik tampilan blog serta memudahkan pengunjung untuk mengakses artikel atau postingan blog yang berlabel (kategori) sama dari sekian banyak artikel-artikel yang ada dan tersedia dalam sebuah blog.

    Bila pada bagian bawah masing-masing artikel atau postingan blog (biasanya) terdapat Widget Related Post (with thumbnail), maka pada halaman homepage kita juga dapat memiliki Widget Recent Post per label sebagaimana yang akan kita bahas (cara pembuatannya) berikut ini. Dari sisi fungsi, kedua widget ini memiliki fungsi yang sama yaitu menampilan artikel-artikel dengan label yang sama, perbedaannya adalah untuk Widget Related Post (with thumbnail) biasanya hanya terfokus pada satu label saja, sedangkan untuk Widget Recent Post per label ini dapat dimodifikasi untuk menampilan keseluruhan label (artikel atau postingan) yang ada pada sebuah blog. Tentu saja kita harus menampilkan semua kategori (label) postingan yang ada, baik pada bagian side-bar ataupun pada bagian footer. Namun bisa juga kita hanya menampilkan label-label tertentu yang kita anggap paling penting untuk ditampilkan.

    Sebagai catatan, Widget Recent Post per label (1 thumbnail) yang akan kita buat ini nantinya hanya akan menampilkan satu thumbnail saja pada bagian awalnya, sedangkan artikel-artikel yang lainnya hanya akan ditampilkan judul-judul artikelnya saja.

    Semakin bingung juga rupanya, baiklah silahkan anda lihat gambar di bawah ini :

    [​IMG]

    Untuk demonya anda dapat melihatnya pada http://duniabloggerku67.blogspot.com, dan lihat pada bagian footernya.

    Bila anda tertarik untuk membuatnya, beginilah cara membuatnya :

    Login ke akun blogger anda.
    Pilih Template, lanjutkan dengan edit HTML (kalau dulu pakai centang expand template widget).
    Carilah kode
    Code:
    ]]></b:skin>
    
    gunakan Crtl F atau F3 sebagai alat bantu, kemudian copy kan rangkaian script berikut ini di atasnya.

    Selanjutnya, masih dalam posisi edit html, carilah kode
    Code:
    </head>
    
    kemudian copy kan rangkaian script berikut ini di atasnya :
    Code:
    <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>
    

    Untuk memperingan loading blog anda, rangkaian script tersebut telah aku sederhanakan dengan yang berikut ini :

    Kemudian simpan perubahan template anda tersebut, dan langkah awal telah selesai.

    Langkah berikutnya adalah, anda masuk ke Tata Letak (layout), anda pilih salah satu tempat (sidebar atau footer), tambahkan menu HTML widget, kemudian copy kan rangkaian script berikut ini ke dalamnya :
    Code:
    <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/-/OPINI?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="http://duniabloggerku67.blogspot.com/feeds/posts/summary/-/OPINI?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://duniabloggerku67.blogspot.com/search/label/OPINI" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
    

    Keterangan :
    Gantilah tulisan duniabloggerku67.blogspot.com dengan alamat url blog anda sendiri, selanjutnya ganti tulisan OPINI dengan nama label artikel blog yang ingin anda tampilkan.

    Selamat mencoba, semoga berhasil, bila masih ada masalah, silahkan hubungi aku lewat kotak komentar di bawah ini.

    Sumber asli : http://duniabloggerku67.blogspot.com/2013/01/widget-recent-post-dengan-1-thumbnail.html
     
    kaliwungu likes this.
  2. hijabcd

    hijabcd New Member

    Joined:
    Jun 23, 2013
    Messages:
    21
    Likes Received:
    0
    Trophy Points:
    6
    Itu hanya bisa bekerja di

    Itu hanya bisa bekerja di .blogspot atau bisa di wordpress juga yah ? *bingung*
     
  3. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    btw soscial media icon yg ada

    btw soscial media icon yg ada di navbar atas keren juga tuh *bagus*
     
  4. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    wphoet wrote:

    Makasih mas bro ..... *ketawa3*
     
  5. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    hijabcd wrote:

    Untuk pengaplikasiannya di wordpress belum saya coba ...., silahkan anda coba. Btw ... ini tutorial untuk blogger mas bro ...
     
  6. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,655
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    pengen oprek template tapi

    pengen oprek template tapi masih gaptek koding nya nih *kesepian*
     
  7. kaliwungu

    kaliwungu Member

    Joined:
    Jan 7, 2017
    Messages:
    152
    Likes Received:
    12
    Trophy Points:
    18
    Apakah widget recen post, tidak akan terjadi duplikat ?..
    Terimakasih jawabannya..
     
Loading...

Share This Page