Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
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..!!!

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>
<script src='http://dinhquanghuy.110mb.com/template/contentslider.js' type='text/javascript'/>
<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>
4. Selanjutnya copy lagi kode dibawah ini, dan letakkan sebelum kode ]]></b:skin> :
#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..

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

7 Response to "Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)"

  1. yang seperti recent post itu yah bos!!! nih yg ada dipinggir blog ente nih yah...hehehhe full stylish lah ...Replay

     

  2. yg dibawah ini yah...wekekekekke topik hangat yah...heuheuheuh
    mantap euy ...Replay

     

  3. Kian Coi Said,

    @Beben Koben : yoi kang, thank's da berkunjung..!! ...Replay

     

  4. Its Dita Said,

    "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

     

  5. Rizky2009 Said,

    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

     

  6. daffy Said,

    ngak jalan..
    apa yg slah ya..?? ...Replay

     

  7. Kian Coi Said,

    @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

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |