Cara Membuat Featured Post Di Blogger

Cara Membuat Featured Post Di Blogger - kali ini saya akan membahas tentang cara membuat featured post di blog. Featured post ialah postingan dari blog yang di rekomendasikan oleh admin blog dan berada pada blog tersebut. Untuk bahasa simplenya bisa di artikan bahwa admin blog menganjurkan pemirsa blognya untuk membaca artikel khusus yang ingin dia berikan kepada pengunjung atau pemirsa yang ada di blognya.

Kegunaan Featured Post ialah untuk para penjual online, blog berita dan lainnya. karena featured post di butuhkan oleh situs jual online untuk merekomendasikan produk bisnisnya. sedangkan blog yang bermuatan berita menggunakan featured post untuk breaking news ataupun berita yang sedang marak di bicarakan atau berita yang sedang hot di kalangan netizen.

Dengan adanya fitur Featured Post, pengunjung dapat lebih mudah menemukan postingan yang sedang ia cari di blog tersebut tanpa harus menggunakan fitur search box. Maka dari itu saya merekomendasikan untuk anda menggunakan featured post untuk memudahkan pengunjung blog anda. Jika anda berminat, mari kita pelajari bersama cara dan langkah langkahnya.

Berikut adalah langkah langkah yang akan saya jelaskan dan mohon simak baik baik supaya memasang fitur ini menjadi lebih mudah.

Cara Memasang Featured Post di Blog

Pada langkah awal atau pertama, silahkan anda login ke akun google anda dan menuju www.blogger.com
lalu anda silahkan masuk ke laman Template lalu klik tombol dengan tulisan Edit HTML.

Untuk langkah selanjutnya atau langkah kedua silahkan anda mencari kode ]]></b:skin> dan jika anda telah menemukan kode tersebut dalam html template anda, silahkan anda copy script di bawah ini dan pastekan tepat di atas kode ]]></b:skin>
 

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIftolaBdkxLZNbm4yDpf2xBt5meElMkV4H0UX5mEDD_BAVQ1PPGyMj9tj3NMrE20fPDt9hcnaC0C1Pm6RatHE8FqMhd5Tl-qZ8ogZvEeEy4MNu0j4Qd78mvQX2LAfgza6RvU1vs7WqcU/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

yang bertulisan warna merah adalah ukuran lebar dan tinggi featured postnya. silahkan anda sesuaikan dengan sesuka hati anda dan sesuai dengan apa yang menurut anda cocok. jika suda cocok, kita lanjutkan tutorial kali ini.

selanjutnya, silahkan anda cari kode </head> dengan menekan CTRL + F . Jika sudah ketemu, silahkan anda copy script di bawah dan pastekan tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> // Kode ini gak perlu diikutkan jika di template Anda sudah ada, cek ada dengan Ctrl+F lalu ketik jquery dan tekanEnter

<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnLcseoU20MgLTEPpq4il2s9EHKwjCJBQXND-qjVDIsdduXIAmVFgcYUz60POaztSVtRXfoESkCAZMadnesT_6-F82oJfNLHqwanRCGAiiIM8WHz8-Fglfr8GD08TbmKloOzrTofH6gs/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

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 showrecentposts3(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    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 = day+ ' ' + m + ' ' + y ;

    var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
    document.write(trtd);


    j++;
}

}

function showrecentposts4(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts3; 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') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    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 = day+ ' ' + m + ' ' + y ;

    var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
    document.write(trtd);

    j++;
}

}

//]]>
</script>

 Jika semua sudah di lakukan, saatnya berarih ke langkah selanjutnya.

carilah kode <div id='main-wrapper'> lalu jika sudah di temukan kode tersebut, copy script di bawah ini dan pastekan tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>

jika semuanya telah anda lakukan, maka Save Template . Tapi, masih belum selesai, silahkan anda beralih ke laman layout atau Tata Letak. dan di sana akan terlihat widget baru tepat di atas Blog Post. Jika belum ada muncul, refresh page dengan cara Reload ataupun dengan cara menekan F5 pada keyboard yang tersedia.

setelah itu, klik Edit pada samping kanan bawah widget baru tersebut. lalu masukkan script di bawah ini ke kolom Content.

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Save pengaturan tersebut dan lihat blog anda dan akan tampak Featured Post pada Homepage dengan bentuk Slider.

CATATAN :
-> Featured Post ini hanya berguna untuk HomePage saja
-> Jika anda ingin Featured Post menjadi Recent Post, anda bisa menghapus kode /-/Label jadi setelah di edit kodenya akan menjadi ...feeds/post/default?max-result...

Sekian tutorial dari saya, semoga bermanfaat dan jangan lupa untuk share dan like artikel ini dan jangan lupa juga untuk like fanspage kami di facebook. Saya Hengky Okniel mohon undur diri, atas nama kerabat yang bekerja Terima Kasih. Maaf jika ada kesalahan ketik.

Hengky Okniel

Seorang remaja yang ingin membagikan sesuatu yang bermanfaat bagi orang banyak melalui tulisannya.

Share this post