Menampilkan Featured Posts Image Horizontal dari Posting Terbaru Per Label

Baca Juga

Cara Menampilkan Featured Posts Horizontal dari Posting Terbaru Per Label berupa Gambar - Mirip Carousel Image.

FEATURED post berikut ini menampilkan posting terbaru dari label tertentu berupa image thumbnail (gambar). Widget ini cocok buat blog foto, video, atau toko online.

Widget Horizontal Featured Posts untuk Blogger ini bisa ditampilkan di atas atau di bawah widget posting terbaru. Kita bisa pilih posting mana atau label apa saja yang akan dimunculkan. Ini penampakannya:

Cara Menampilkan Featured Posts Image Horizontal 

1. Login ke Blogger (Dashboard).

2. Klik Layout (Tata Letak)
3. Klik Add a Gadget > pilih HTML/JavaScript 

4. Copy & Paste kode berikut ini di kolom Content

<center><div id='bp_recent'></div><div class='bp_footer'>

<script style='text/javascript'>

//Featured Posts Script by crounji.org 

var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;

var    main;

var float_clear=false;

var flag = 0;

function bprecentpostswiththumbnails(json) {

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

if (i == json.feed.entry.length) break;

var s;

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

    var postTitle = entry.title.$t;

    postTitleOriginal = postTitle;

    if (isNaN(titleLength) || titleLength == 0) {

        postTitle = '';

    }

    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";

    var postUrl="";

    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;

        }

    }

    if (showThumbs == true) {

        var thumbUrl = "";

        try {

            thumbUrl = entry.media$thumbnail.url;

            thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");

        } catch (error) {

            if ("content" in entry) s = entry.content.$t; else s="";

            if (thumbUrl == "" && mediaThumbsOnly == false) {

                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;

                videoIds = s.match(regex);

                if (videoIds != null) {

                    videoId = videoIds[4];

                }

                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"

            }

            if (thumbUrl == "" && mediaThumbsOnly == false) {

                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;

            }

        }

        if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");

        thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}

        if (thumbUrl == "" && showNoImage == true) 

        {

        thumbUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4KCnepHKpR0z0XnLo8OYkhXyBvU64H2Zdgn8YwpfO1cTxHNqw9jFZuQpcysGF0uZLIMm-MVq_NZAoAl3NKdB_c9YptnAO-uvd1efDLkTwnFDlhV0ETA6x9IMoeNLaZgwzTWj20FRZVXNd/s1600/default.png";

        try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}

        thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");

        }

    } 

    if (showPostDate == true) {

        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";

    } 

    code = "";

        main = document.getElementById('bp_recent');

        myDiv = document.createElement('div');

        myDiv.setAttribute("class", "bp_item_title");

        myLink = createLink(postUrl,"_top",postTitleOriginal)

        if(main.innerHTML!=""){

        mySeparator = createDiv("bp_recent_separator");

        main.appendChild(mySeparator)

        }

        if(postTitle != ''){myDiv.appendChild(myLink);}

        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;

    if (showThumbs == true && thumbUrl != "") {

        myImage = document.createElement('img');

        myImage.setAttribute("src", thumbUrl);

        if(imgFloat!="none")

        {

        float_clear=true;

        myImage.style.cssFloat=imgFloat;

        myImage.style.styleFloat=imgFloat;

        }

      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}

        myImage.setAttribute("alt", postTitleOriginal);

        myImage.setAttribute("width", imgDim);

        myImage.setAttribute("height", imgDim);

        myLink = document.createElement('a');

        myLink.setAttribute("href", postUrl+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent");

        myLink.setAttribute("target", "_top");

        myLink.setAttribute("title", postTitleOriginal);

        myLink.appendChild(myImage);

        myDiv = document.createElement('div');

        myDiv.setAttribute("class", "bp_item_thumb");

        myDiv.appendChild(myLink);

        main.appendChild(myDiv);

    }

 try {

        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 (showSummary == true) {

            myDiv = createDiv("bp_item_summary");

                if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}

            else {

                postContent = postContent.substring(0, summaryLength);

                var quoteEnd = postContent.lastIndexOf(" ");

                postContent = postContent.substring(0, quoteEnd);

                myDiv.appendChild(document.createTextNode(postContent + '...'));

            }

            main.appendChild(myDiv);

        }

    } //end try

    catch (error) {}

    myDiv =  createDiv("bp_item_meta");

    myDiv.style.clear="both";

    myDiv.style.marginBottom="4px";

    if (showPostDate == true) {

        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));

        flag = 1;

    }

    if (showCommentCount == true) {

        if (flag == 1) {

            myDiv.appendChild(document.createTextNode(" | "));

        }

        if (commentText == '1 Comments') commentText = '1 Comment';

        if (commentText == '0 Comments') commentText = 'No Comments';

        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)

        myDiv.appendChild(myLink);

        myLink.innerHTML=commentText;

        flag = 1;;

    }

    if (showReadMore == true) {

        if (flag == 1) {

            myDiv.appendChild(document.createTextNode(" | "));

        }

        var myLink = createLink(postUrl,"_top",postTitleOriginal)

        myDiv.appendChild(myLink);

        myLink.innerHTML = readMore+" &raquo;";

        flag = 1;;

    }

    if (flag == 1) main.appendChild(myDiv);

}

if(float_clear==true && imgFloat!="none")

{

myDiv = createDiv("bp_clear_float");

myDiv.style.clear=imgFloat;

main.appendChild(myDiv);

}

document.getElementById("bp_recent_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dQ14HljoAjTmSBn42h9YgjQU2Xgkjwsuq6foCUS6bIou_iO8PUBPaiJeqYiBGVavsNPKI6RH_cr7L7QmQaLlxotR7nGZkXBfu_ZwCQi6rH6t3_D8b-MSpzgsfFTpNrcOTZceElc6OZsR/s1600/blogger-widgets.png')";

document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";

try{

if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";

} catch(error){}

}

function createDiv(className)

{

var myDiv = document.createElement('div');

myDiv.setAttribute("class", className);

return myDiv;

}

function createLink(href,target,title)

{

var myLink = document.createElement('a');

        if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent"+"#comment-form";myLink.setAttribute("href", href);}

        else myLink.setAttribute("href", href+"?utm_source=BP_recent&utm-medium=gadget&utm_campaign=bp_recent");

        myLink.setAttribute("target", target);

        myLink.setAttribute("title", title);

        return myLink;

}

</script>

<script style='text/javascript'>

 var numberOfPosts = 5;

 var showPostDate = false;

 var showSummary = false;

 var titleLength = 0;

 var showCommentCount = false;

 var showThumbs = true;

 var showNoImage = true;

 var imgDim = 125;

 var imgFloat = 'left';

 var myMargin = 5;

 var mediaThumbsOnly = true;

 var showReadMore = false;

</script>

<script src='http://www.contohblog.com/feeds/posts/default/-/Label?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'>

</script></div></center>

5. Ubah alamat blog dan nama label
6. Save!
7. Pindahkan widget ke atas atau ke bawah kotak widget "Blog Post".
8. Save Arrangement!

Beres!

Modifikasi Featured Post Gambar Thumbnail:

- Mengubah jumlah posting: 

var numberOfPosts = 5;

dan

<script src='http://www.contohblog.com/feeds/posts/default/-/Label?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'>

</script></div></center>

- Mengubah ukuran gambar: 

var imgDim = 125;

Sumber