Membuat konten slider artikel terbaru

Kehidupan blogger memang tidak pernah lepas dari yang namanya sharing informasi, entah berita, artikel, tips trik menarik dan banyak hal lain yang bisa kita dapatkan selama berblogger ria. Pada kesempatan kali ini, Balaghy akan sharing tips blogger membuat konten slider artikel terbaru. Sebenarnya fungsi dari artikel ini sama halnya dengan recent post slide show. Hanya saja, trik yang satu ini adalah trik recent post dengan model slide yang lebih menarik lagi. So, tujuannya tidak lebih agar membuat mata para visitor betah untuk berlama-lama nongkrong di blog kita dengan sajian widget menarik. Penasaran, seperti apa langkahnya? Langsung aja yuk

Demo

1. Hal pertama tentu login. Meski sudah lazim, tapi balaghy akan tetap menginformasikan. Penikmat dunia blog kan bukan yang advance aja, banyak yang masih newbie, Santri balaghy salah satunya.

2. Langkah selanjutnya adalah pilih menu Template => Edit Html

3. Setelah memasuki ruang Editing Html, cari kode ]]></b:skin>

4. Setelah ketemu kode di atas, masukkan CSS di bawah ini tepat di atas kode tersebut.

#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/AVvXsEiLSb-iK8hocYDErdb156A9IdjhbozpUb6_oPZh62qxwBUx0L5xO63hZJgkxNRBG4cVQ7IO9eUkkUzpCa9GTK_K6vp6TVFxLhc7CMqqsoSYHfbhTKNBYr3iC5vspKQS3aX6_qfMJws3CfQX/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}

5. Langkah selanjutnya adalah cari kode </head> kemudian masukkan kode di bawah ini tepat di atasnya.

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();

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>

6. Selanjutnya save template kemudian masuk ke menu Tata letak => Html Javascript lalu masukkan kode ini.

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default?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?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>

7. Langkah terakhir yaitu save dan lihat hasilnya.

Sekian tips trik menarik membuat konten slider artikel terbaru, semoga bermanfaat.

Selamat mencoba,
Salam Santri Balaghy!

Sumber: Maskolis

balaghy

Post Top Ad

Monday 30 September 2013

Membuat konten slider artikel terbaru

No comments:

Post a Comment

Post Bottom Ad

Author Details

Facebook

Recent

Popular

Comments

Sponsor

Connect With us

About Me

Contact Form

Pages