Kali ini BLOGGINGPASURUAN kembali dengan tutorial membuat featured posts slider dengan JQuery, featured posts
slider kali ini akan di buat 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.
Untuk membuat atau menambahkan featured posts slider otomatis
ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:
1.Login ke
akun Blogger
anda
2.Pada Dasbor
>>
masuk menu Template
>>
klik edit
HTML
3.Cari kode ]]></b:skin>
dan letakkan kode CSS berikut sebelum kode ]]></b:skin>
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 bisa anda modifikasi kembali,
seperti merubah lebar featured posts, ukuran font ataupun warna agar sesuai
dengan desain blog anda. Untuk referensi kode warna silahkan gunakan tool tabel
kode warna disini
4. Kemudian
letakkan script JQuery berikut diatas kode </head>
HTML
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'
type='text/javascript'/>
Catatan: Jika sudah menambahkan script JQuery
kedalam template blognya, maka langkah no
4 diatas diabaikan saja.
5. Kemudian
tambahkan script berikut dibawah script Jquery
CSS
<script
src='https://www.google.com/jsapi?key=ABQIAAAA2hx9d_4eShgrICEQXtat9RTVScYuS-PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ'
type='text/javascript'/>
<script>
//<![CDATA[
/* Script
from:http://www.bloggingpasuruan.blogspot.com/ */
imgr = new
Array();
imgr[0] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4RWFuEvCe_X-nal6KlSdIf5E1_lyHUZ_7wjSX1e1XIKApZiBRsPsPTKEt-MxF3uo0mk4X6aBqBadce1XjMrIT_AKYJybmXoDMgkBlOPoTS2t_himtUhkHb1jIWYovSCnZLDdY7Qgjlsg/s1600/no+image.jpg";
showRandomImg
= true;
aBold = true;
summaryPost =
100;
numposts1 = 6;
label1 =
"Tutorian";
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.bloggingpasuruan.blogspot.com/ */
Catatan: Tulisan berwarna MERAH
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>
CSS
<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.
HTML
<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. Simpan dan
Selesai dan lihat hasilnya diblog anda!
Demikian
tutorial cara membuat featured posts slider otomatis pada blog, semoga
bermanfaat.
Anda bisa
melihat tutorial membuat featured posts slider lainnya pada blog ini dengan
label featured posts slider.
Mantab bang , ngak bisa
ReplyDeletedemo nya ada gan? kalo pakai demo tutorialnya lebih mantap gan...
ReplyDelete