Featured posts slider ini akan otomatis mendekteksi recent posts blog bedasarkan label yang sudah kamu buat pada postingan blog kamu. Nah buat blogger yang merasa tertarik untuk Menampilkan Widget Automatic Featured Posts Slider JQuery Di Blogger kali ini, langsung saja ikuti resepnya sebagai berikut
- Silahkan login ke akun blogger sobat masing-masing
- Karena kita akan melakukan Edit HTML, untuk itu sebaiknya Backk-up dulu template blog kamu untuk mengantisifasi kesalahan dalam melakukan Edit HTML.
- Setelah template berhasil kamu amankan, sekarang silahkan masuk kehalaman Edit HTML Blogger.
- Setelah kamu berada pada halaman Edit HTML sekarang cari kode ]]></b:skin> (agar pencarian kode lebih mudah, gunakan tombol CTRL + F dan F3)
- Jika sudah menemukan kode tersebut Copas kode dibawah ini dan letakan diatas kode ]]></b:skin> tadi.
#featured{margin:0;padding:10px 10px 0}
.sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}
.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
.pagination{text-align:right;padding:15px 0 10px}
.pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}
.pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}
.featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{font-size:12px;line-height:1;margin:0}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
6.Langkah berikutnya Cari kode
</head>. setelah ketemu letakan script Jquery dibawah ini tepat diatas kode
</head> tadi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Catatan : Jika Blog anda sudah menggunakan Jquery 1.2.6 sebelumnya, sobat bisa mengabaikan langkah ini.
7.Selanjutnya Copy kode dibawah ini dan letakan diatas kode </head>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXIpWXxrG5ShBNVtb8llDqbcKHXbKaOyMyGBiYyyCXWKXxf_qUxry6iigoolvlg71qbGmLlu8IJq-MoZMuVu-nDSkwqBh-4ehgZQnwzvKvGYn0eSMDKqyFa-w0D5FZEHNaKroyuwrN8mI/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 =
6;
label1 = "
Label kamu";
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 showrecentposts1(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;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="
350" height="
270" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
Pehatikan kode yang berwana hijau dalam script diatas. Silahkan kalian sesuaikan dengan templates kamu.
8.Sekarang cari kode </body>, sudah ketemu copy kode dibawah ini dan letakan diatas kode </body> tersebut.
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[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>
9.Masih pada halaman Edit HTML, Cari lagi kode
<div id='sidebar-wrapper'> jika ingin melatekan Featured Post Slider di bagian sidebar atau cari kode
<div id='main-wrapper'> jika ingin meletakan Featured Post Slider di atas postingan. Jika sudah ketemu salah satu kode tersebut copy dan paste diatas kode tersebut.
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
10.Langkah terakhir, klik Simpan Selesai dan lihat hasilnya.
.jpg)
