KianHome - Slide post biasa kita temui pada situs online warta berita macam Yahoo, okezone, Detik.com, dll. Dimana kegunaan dari slider itu sendiri adalah untuk menarik minat dari para pembaca dan biasanya menjadi tampilan unik untuk menjaring pengunjung disamping mempercantik tampilan blog atau web.
Dewasa ini banyak format slider yang dibuat berdasarkan cara manual yaitu : kita selaku admin blog yang memasukkkan konten yang kita pilih, mulai dari judul, link hingga gambar yang sesuai dengan konten tersebut, dan hal ini perlu diupdate setiap ada konten atau artikel baru yang kita buat. Sekarang bagaimana kalau dibuat secara otomatis..?? jawabannya tentu bisa..!!!
Dewasa ini banyak format slider yang dibuat berdasarkan cara manual yaitu : kita selaku admin blog yang memasukkkan konten yang kita pilih, mulai dari judul, link hingga gambar yang sesuai dengan konten tersebut, dan hal ini perlu diupdate setiap ada konten atau artikel baru yang kita buat. Sekarang bagaimana kalau dibuat secara otomatis..?? jawabannya tentu bisa..!!!
Untuk D.E.M.O bisa kamu lihat pada sidebar disamping..-->>>
Kalau kamu sudah paham dengan yang k'ian maksud maka kita akan masuk pada tutorialnya :
1. Klik menu "Rancangan", lalu klik lagi menu Edit HTML..
2. Beri tana ceklist pada kotak "Expand widget Template"
3. Copy kode dibawah ini dan letakkan sebelum kode </head>
5. Setelah itu simpan,..
6. Klik menu Element Halaman, kemudian klik lagi menu "add Gadget" di sidebar blog kamu -->> pilih "HTML/Javascript dan selanjutnya bisa kamu pindahkan kebagian atas post wrapper.
7. Copy kode dibawah ini dan pastekan didalamnya :
8. SImpan dan lihat hasilnya..
nb : document.write("<script src=\"/feeds/posts/default/-/Yourlabel?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
Tulisan yang berwarna orange bisa kamu ganti dengan label yang kamu inginkan..
1. Klik menu "Rancangan", lalu klik lagi menu Edit HTML..
2. Beri tana ceklist pada kotak "Expand widget Template"
3. Copy kode dibawah ini dan letakkan sebelum kode </head>
<script src='http://dinhquanghuy.110mb.com/template/contentslider.js' type='text/javascript'/>4. Selanjutnya copy lagi kode dibawah ini, dan letakkan sebelum kode ]]></b:skin> :
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts8= 6;
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 showrecentposts8(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts8 ; 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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="341" height="256" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2></div></div><div class="featuredPost lastPost"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><span class="featuredPostMeta">'+daystr+' / <a href="'+posturl+'">'+pcm+' Comments</a> / <a href="'+posturl+'">Read More »</a></span></div></div>';
document.write(trtd);
j++;
}
}
//]]>
</script>
#featuredContent {
float:left;
padding:7px 7px 5px;
width:342px;
display:inline;
background:#efefef;
}
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 342px; /*Lebar dari area slide, jika ingin disesuaikan kamu bisa ubah ukurannya mengikuti ukuran sidebar kamu*/
height: 352px;
}
#featured-slider img {
display:block;
min-height:256px;
height:auto !important;
height:256px;
}
#featured-slider .sliderPostPhoto { /* tampilan foto dan judul, bisa kamu ubah sendiri */
position:relative;
height:256px;
width:342px;
overflow:hidden;
}
#featured-slider .sliderPostInfo { /* Judul posting yang jika diaktifkan untuk fitur slidenya */
position:absolute;
bottom:0;
width:332px;
min-height:30px;
color:#fff;
padding:5px;
background: url(http://img233.imageshack.us/img233/8492/bgtransparent.png);
height:auto !important;
height:30px;
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
}
#paginate-featured-slider { /* do not change the name of class - used to wrap thumbnails for featured area */
display:block;
margin-bottom:5px;
font:bold 12px arial, verdana, sans-serif;
}
#paginate-featured-slider a { /* do not change the name of class - used to style links over featured slider */
color:#000;
padding:2px 6px;
background:#ddd;
}
#paginate-featured-slider a:hover {
text-decoration:none;
color:#cd1713;
}
#paginate-featured-slider a.selected {
color:#fff;
text-decoration:none;
background:#cd1713;
}
h2.featuredTitle {
font:14px "trebuchet ms", arial, sans-serif;
font-weight:normal;text-align:left;
display:block;
}
h2.featuredTitle a {
color:#fff;
display:block;
padding:3px;
}
h2.featuredTitle a:hover {
text-decoration:none;color:red;
}
5. Setelah itu simpan,..
6. Klik menu Element Halaman, kemudian klik lagi menu "add Gadget" di sidebar blog kamu -->> pilih "HTML/Javascript dan selanjutnya bisa kamu pindahkan kebagian atas post wrapper.
7. Copy kode dibawah ini dan pastekan didalamnya :
<div id='paginate-featured-slider'>
<a class='prev' href='#prev'>Prev</a>
<a class='toc' href='#1' rel='1'>1</a>
<a class='toc' href='#2' rel='2'>2</a>
<a class='toc' href='#3' rel='3'>3</a>
<a class='toc' href='#4' rel='4'>4</a>
<a class='toc' href='#5' rel='5'>5</a>
<a class='toc' href='#6' rel='6'>6</a>
<a class='next' href='#next'>Next</a>
</div>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Yourlabel?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
</script>
</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: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Prev", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //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>
8. SImpan dan lihat hasilnya..
nb : document.write("<script src=\"/feeds/posts/default/-/Yourlabel?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
Tulisan yang berwarna orange bisa kamu ganti dengan label yang kamu inginkan..
yang seperti recent post itu yah bos!!! nih yg ada dipinggir blog ente nih yah...hehehhe full stylish lah ...Replay
yg dibawah ini yah...wekekekekke topik hangat yah...heuheuheuh
mantap euy ...Replay
@Beben Koben : yoi kang, thank's da berkunjung..!! ...Replay
"Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)":
huhu kebetulan banget g perlu nih, aku punya shopping blog nie bisa kali yee buat pasang foto2 baju gitu..mau di coba nanti kl bingung aku tanya2 boleh ea maklum bukan web designer tapi ingin bisa!^^
Thank you for sharing and feeding my brain!^-* ...Replay
gile bnere panjang bgt scriptnya, boleh di coba nih buat blogger yang suka menghias blognya dengan banyak pernak pernik, tp kalau blognya sekedar personal saya kayaknya kurang cocok dipasang tambahan ini ...Replay
ngak jalan..
apa yg slah ya..?? ...Replay
@daffy : sob beberapa script java pada tutorial ini ada yang tidak bisa dicompres atau diatur jaraknya...!!! jadi coba dilakukan paste code sesuai dengan yang sudah k'ian kasih..
Thank's atas koreksinya..!!! ...Replay