Baca Juga

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly. 

SEBELUMNYA CB pernah share tentang Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasil survei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:
  1. Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
  2. Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.
Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER
Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolis baik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depan tanpa slider, silakan cek  Cara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya. 

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

Featured Post Content Slider Image

Cara Membuatnya:
1. Template > Edit HTML
2. Copas kode berikut ini 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/AVvXsEh4nqNonthoN2mq94l-8YVGtbzTs38q9X871HKOnGiipeutjQ4pC3EsPw5rdwTnp-Q-CgxjKnrdk0zecuPDLZsgsDtq3Q2qN08_hwo0ypVzqSFegUt26aY9HqjamSfJbnqlZZYnGQgb0wPy/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;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.
3. Copas kode berikut ini 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/AVvXsEj0BdGbO7fds8wAtn-hb9ixJ0Pes4-8e_uiC0YkThMIS1yH-r20uDEiQajCrzZgN-NGPOsM4XLQMsEDof3Vo8z9xLxzd78ZyPZ9xl9kEBnjt-yABhWINsnq9i2Ipw0b93M8wiSQ6N2pc-E/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>

4. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang sejenisnya.

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

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5). 

Featured Post Content Slider Image

6. Klik "Edit" dan Copas kode berikut ini ke dalam "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>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

7. Save!!! 
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

Featured Post Content Slider Image


CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.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;}  

3. Copas kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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/511211242172/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
    });
</script>

<script type='text/javascript'>
//<![CDATA[
   imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BdGbO7fds8wAtn-hb9ixJ0Pes4-8e_uiC0YkThMIS1yH-r20uDEiQajCrzZgN-NGPOsM4XLQMsEDof3Vo8z9xLxzd78ZyPZ9xl9kEBnjt-yABhWINsnq9i2Ipw0b93M8wiSQ6N2pc-E/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 20;

numposts1 = 4;

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

      for (var i = 0; i < numposts1; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';

    document.write(trtd);

    j++;
}

}

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

      for (var i = 0; i < numposts1; 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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


    var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';

    document.write(trtd);

    j++;
}

}

 //]]>
</script>

4. Cari kode <div id='main-wrapper'> atau yang sejenusnya. Copad kode berikut ini di bawahnya.

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

5. Save Template!

6. Klik "Layout". Akan Widget Baru di atas element "Blog Posts" seperti gambar di bawah ini. Jika belum muncul, Refresh dengan menekan tombol F5.

Featured Post Content Slider Image

7. Saatnya memasang posting yang akan ditampilkan. Klik "Edit" dan  Copas kode berikut ini di kolom "Content". Kolom judul biarkan kosong!

<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan di Featured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: .... feeds/posts/default?max-results ...

Demikian Cara Membuat Featured Post Content Slider Image / Slide Gambar Posting di halaman depan blog. Good Luck & Happy Blogging!