March 5, 2016

Menampilkan Featured Posts Image Horizontal dari Posting Terbaru Per Label

March 5, 2016

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:

Featured Posts Horizontal Posting Terbaru Per Label

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;

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Menampilkan Featured Posts Image Horizontal dari Posting Terbaru Per Label

  1. makasih tutorialnya
    saya coba ya

    ReplyDelete
  2. gan tampil nih tapi kalo nambah lagi kok numpuk gak pisah? caranya gimana biar misahnya

    ReplyDelete

Contact Form

Name

Email *

Message *