Cara memasang artikel terbaru - recent post di blogspot dengan thumbnail - Artikel Luarbiasa : Kumpulan Artikel Menarik

Posting kali ini saya mau berbagi tutorial blogspot yaitu Cara memasang artikel terbaru - recent post di blogspot dengan thumbnail.Sebenarnya sudah banyak yang share tutorial ini dan bahkan plugin resmi blogspot untuk memasang recent post atau artikel terbaru ini sudah tersedia.Dan juga sudah saya posting juga sebelumnya yaitu cara memasang recent post blogger.Lalu apa bedanya sih dengan yang sudah ada?...Recent post yang saya mau share ini memiliki kelebihan antara lain

Mudah dalam memasangnya.
Ringan diload oleh browser.
Menampilkan gambar Thumbnail postingan,shg lebih menarik.

Apa pentingnya menampilkan Recent post/artikel terbaru?..
Mungkin tidak begitu wajib sih tetapi hanya sebagai tambahan navigasi saja ,jadi apabila visitor mengunjungi langsung kedalam halaman postingan maka mereka akan segera tahu apa saja postingan update Anda.Tujuannya agar visitor terdorong untuk mengunjungi juga berita terakhir blog Anda dg harapan menambah pageviews.Script cara memasang recent post untuk blogspot/blogger ini bukan buatan saya,saya cuma merekomendasikan untuk anda karena saya juga memakainya.

Baiklah,caranya sangat gampang sekali hanya tinggal copy script java berikut dan paste kedalam new widget HTML sidebar blog.



<ul>

<script language="JavaScript">

imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Djl-JNpvBcrhnN3hUP5Hbda0vBrHXG_npjuG-q_lwbrwrf4bIvCqjKDV10JmfgaTAXh2GqHsi_B6QV-z_T1K53E9DO-ITFOK-gUvdnLrytq3SQcVCG_Kfc8y1iQOoTz43bKrqgRXogY/s1600/img1.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGKxFReYIUTqKbJaGbimmichps0kko0ZhI6ogm9Eulv1XKkRmReLnwfFhkrHow6A-9q6zCfiPvQ0S9XyTxrzcj-5qVxvM4qGVu5AbyPgFxP2K_MlIBXIHNAd5GPjYo0Oo5CXwBUqtWt4/s1600/img2.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTjR148ldJCEPqxSUjcWgJrDCF8Ml1wtgihf7cc9WC_EzP0in8QMuqJFoN42TJJaTH9ECJBZqaFf6lelf-m62vryRNJMMrdxfySsw2xiI3m2328l7DgmJVdF2XQLnV4Jn6hzIsCkhe4PE/s1600/img3.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwb5wAWCHHLsIHoWOzc5X3SvasHYwr0BIaPEMqfjTNE5ilDNlRl4vnFDQphmuXakDldko17__sDOzmIUyQVCmyRZDNX3h0j0AKCIYeTdSUrIjaH-GmaN0_K5UoHU0mriA_hneZFLlcYk/s1600/img4.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJM4UKX2wTUa_RB559qiYJN7EnVyov624ApGgi0pE7dLUtXq64UHCMyG26X2_fQHThUJjLXeTcj5zFrVq-sFf2q9k6g2zMcA0Q5sAOZhy2foBZEb5bzvpnBuPwikz4NSu4qINAlECZU8g/s1600/img5.jpg";



showRandomImg = true;



tablewidth = 320; <!--mengatur lebar widget dalam px -->
cellspacing = 8;
borderColor = "#fff"; <!-- Warna garis tepi -->
bgTD = "";

imgwidth = 60;  <!-- lebar gambar thumbnail dalam px -->
imgheight = 60; <!--Tinggi gambar thumbnail dalam px -->

fntsize = 11; <!-- Ukuran huruf dalam px -->
acolor = "#006AAB"; <!-- Warna tautan judul postingan -->
aBold = true; <!-- true jika judul postingan tebal or false jika normal -->
icon = " ";

text = "";
fsize= "10"; <!-- Ukuran font untuk judul posting -->

showPostDate = true; <!-- true jika tampil tgl posting or false jika tidak -->

summaryPost = 60;  <!-- jumlah karakter untuk cuplikan artikel -->
summaryFontsize = 11; <!-- ukuran font cuplikan artikel -->
summaryColor = "#666"; <!-- warna text cuplikan artikel -->
icon2 = " ";

numposts = 8; <!--Jumlah artikel yang ingin ditampilnya  -->

home_page ="http://artikel-luarbiasa.blogspot.com/"; <!-- Ganti dg url blog anda -->

</script>

<script language="JavaScript">

function removeHtmlTag(strx,chop){

    var s = strx.split("<");

    for(var i=0;i<s.length;i++){

        if(s[i].indexOf(">")!=-1){

            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

        }

    }

    s =  s.join("");

    s = s.substring(0,chop-1);

    return s;

}



function showrecentposts(json) {

    document.write('<table width="'+tablewidth+'" border=0 bordercolor="#FF0000" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'" align="center">');

    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

    img  = new Array();



      for (var i = 0; i < numposts; i++) {

        var entry = json.feed.entry[i];

        var posttitle = entry.title.$t;

        var pcm;

        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;

              }

        }

        

        for (var k = 0; k < entry.link.length; k++) {

              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

                pcm = entry.link[k].title.split(" ")[0];

                break;

              }

        }

        

        if ("content" in entry) {

              var postcontent = entry.content.$t;}

        else

        if ("summary" in entry) {

              var postcontent = entry.summary.$t;}

        else var postcontent = "";

        

        postdate = entry.published.$t;

    

    if(j>imgr.length-1) j=0;

    img[i] = imgr[j];

    

    s = postcontent    ; 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!="")) img[i] = d;



    cmtext = (text != 'no') ? '<span style="color:'+acolor+'; font-size:'+fsize+'px;">'+pcm+' '+text+'</span>' : '';





    var month = [1,2,3,4,5,6,7,8,9,10,11,12];

    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];



    var day = postdate.split("-")[2].substring(0,2);

    var m = postdate.split("-")[1];

    var y = postdate.split("-")[0];



    for(var u2=0;u2<month.length;u2++){

        if(parseInt(m)==month[u2]) {

            m = month2[u2] ; break;

        }

    }



    var daystr = (showPostDate) ? '<span style="color:'+acolor+'; font-size:'+fsize+'px;"> - ('+day+ ' ' + m + ' ' + y + ')</span>' : "";



posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;



    var trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1DfAkfVL7RoeQGc8_9NW-SpL1mxVfDph3SfdMcSeCMjwXgS0PXcgfGUBxkHUVo4VaZtRqmCmtlht1vB4KtMgpQnKs1bD9D8_40de086iWPkK8q2QHh4X3qyoyk9RzzLRR3lsX4xPm8cT/s1600/c_bubble.png"/> ' + daystr + '<div style="color:'+summaryColor+'; margin-top:2px; border-top:1px '+borderColor+' solid; font-size:'+summaryFontsize+'px;text-align:justify;">'+icon2+removeHtmlTag(postcontent,summaryPost)+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;"></div></td></tr>';



    if(summaryPost == 0) { trtd = '<tr><td valign="top" width="'+imgwidth+'" height="'+imgheight+'" style="background:'+bgTD+'"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a></td><td style="background:'+bgTD+'" valign="top">'+icon+'<a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br /> '+cmtext+ ' ' + daystr + '</td></tr>'; }



    document.write(trtd);



    j++;

}



document.write('</table>');

}

document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

</ul>

Silahkan diatur ulang settingan sesuai dengan selera (yang berwarna merah hati)
Selamat mencoba!..
Jika Sobat blogger menginginkan Widget Recent Post dengan thumbnail ini hanya tampil dihalaman postingan saja maka ikuti langkahnya di Cara menampilkan widget HTML blogspot hanya dihalaman postingan saja

Cara memasang artikel terbaru - recent post di blogspot dengan thumbnail

Artikel Terkait Cara memasang artikel terbaru - recent post di blogspot dengan thumbnail

3 komentar