Salam
blogging….. Saya akan berbagi Tips Cara membuat Fetured posts slider. Fetured
posts slider yang akan kita buat kali ini agak berbeda kalau versi yang umum kita harus
menambahkan images, link dan deskripsi posts secara manual maka
featured posts slider kali ini akan otomatis mendekteksi recent posts blog (
postingan atau artikel terbaru blog ) bedasarkan label. Tentunya untuk bisa
berfungsi seperti yang telah disebutkan tadi maka script yang digunakan selain
script JQuery juga menggunakan script modifikasi dari recent posts.
Tampilan
dari featured posts slider ini seperti screenshoot diatas.
Anda tertarik untuk membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tutorial pembuatannya :
>>> 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>
#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 menurut
selera, seperti merubah lebar featured posts, ukuran font ataupun warna agar
sesuai dengan desain blog anda.
>>> 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'/>
Catatan : Bagi anda yang telah menambahkan
script JQuery kedalam template blognya, maka langkah no 4 diatas diabaikan
saja.
5.
Selanjutnya tambahkan script berikut dibawah script Jquery
<script
src='https://www.google.com/jsapi?key=ABQIAAAA2hx9d_4eShgrICEQXtat9RTVScYuS-PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ'
type='text/javascript'/>
<script>
//<![CDATA[
/* Script
from:http://www.akusharekan.blogspot.com/ */
imgr = new
Array();
imgr[0] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwqFgp-iH12Eu7T1IAohl2f0U13LAog-imyR7lUTLDtTXFZ9JF1NXv6VqFS13BqWOjfg_tBaNjDQ6qIcxsCH_JwNmFRsYgr3Bb6wPBb0UReb5dcIAxgQYFcYjKLArolJ9HbpGAdgX-GI0/s1600/no+image.jpg";
showRandomImg
= true;
aBold = true;
summaryPost =
100;
numposts1 =
6;
label1 =
"Software";
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.akusharekan.blogspot.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.
EmoticonEmoticon