Nah jika anda tertarik untuk
membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:
- Silahkan login ke akun blogger anda
- Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
- Cari kode ]]></b:skin> dan letakkan kode CSS berikut sebelum kode ]]></b:skin>
Code CSS
#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}
Catatan:
Kode CSS diatas masih dapat anda modifikasi kembali, seperti merubah
lebar featured posts, ukuran font ataupun warna agar sesuai dengan desain blog anda
4. Kemudian letakkan script JQuery berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
5. Selanjutnya tambahkan script berikut dibawah script JQuery
PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ' type='text/javascript'/>
<script>
//<![CDATA[
/* Script from:http://www.tipstrikblogging.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ6NQONZeolKC8HW6rcUNHA2QOWjljTEdCboAH1woJhtrXVAYcKyJ2lZaFVBpXcGE7tkn58sCrfxZiFTp0_AOh_EQE1WzRSJdnccTh9BZRqZrrG0PjhsLO-EkqtNpDBcwP362TUq96CGM/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 =
6;
label1 = "
Agama Islam";
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>
/* Script from:http://www.tipstrikblogging.com/ */
Catatan: Tulisan berwarna biru diatas adalah jumlah posting yang akan ditampilkan dan
label yang dipilih anda sesuaikan dengan label pada blog anda!
6. Tambahkan pula script berikut diatas kode </body>
<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>
7.
Langkah terakhir, tambahkan kode HTML berikut diatas <div
id='main-wrapper'> jika anda ingin meletakkannya diatas kolom posting
atau diatas <div id='sidebar-wrapper'> jika anda ingin
meletakkannya diatas sidebar blog
<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>
8. Selesai dan lihat hasilnya diblog anda!
Demikian
tutorial cara membuat featured posts slider otomatis pada blog, semoga bermanfaat.
Sumber : http://www.tipstrikblogging.com
