Rabu, 25 April 2012

Cara Membuat Slider Gambar Otomatis Berdasarkan Label


By on 17.07

Cara Membuat Slider Gambar Otomatis Berdasarkan Label - Slider Gambar Otomatis ini sangat bermanfaat jika kamu pasang di blog kamu, selain menambah keren blog kamu, kamu juga bisa menampilkan posting berdasarkan label dengan efek slider dan yang tampil hanya gambar dan judul posting nya saja, silahkan sobat lihat dulu DEMO gambar nya atau langsung melihat DEMO nyata nya.



Gimana tertarik, jika tertarik saya akan menjelaskan bagaimana cara membuatnya.

1. Login ke Blog kamu.
2. Pilih Rancangan > EDIT HTML > Download Template Lengkap terlebih dahulu.
3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
Atur kode yang berwarna merah width (Lebar) heiight (tinggi) sesuai selera kamu.

4. Cari kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "news";
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
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;
//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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
Keterangan : kode yang berwarna ungu jika kamu sudah memasang nya di blog kamu tidak usah dimasukan lagi, jika belum masukan, kode yang berwarna merah jumlah posting yang ingin di tampilkan , kode yang berwarna biru ganti dengan Label nya ingat besar kecil hurup nya harus sesuai.


Sekarang cari kode <div id='content-wrapper'> jika sudah ketemu letakan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>
</b:if>
Keterangan : kode <div id='content-wrapper'> adalah kode bagian bawah header.

Klik dulu Pertinjauan apakah berhasil jika berhasil klik Simpan Template.

Script By : http://creatingwebsite-maskolis.blogspot.com/

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

11 komentar:

  1. Tolong dong kasih sumber penulisnya..
    Creatingwebsite-maskolis.blogspot.com

    Atau nanti saya laporkan ke Bang Maskolis

    BalasHapus
  2. Ok gan sudah maaf yah, waktu itu aku lagi buru-buru

    BalasHapus
  3. mas, saya bisa minta tolong mas, ajari bagaimana caranya masang halaman posting agar terlihat dengan punya mas, kotak kotak seperti itu.

    BalasHapus
  4. KOtak=kotak gimana, mungkin maksud agan memberi garis pinggir pada posting gitu atau apa?

    BalasHapus
  5. Mas, kode yg nomor 4 itu, ditaruh diatas atau dibawah ?

    BalasHapus
  6. Kode div id content wrapper nya kok nggak ada ya?

    BalasHapus
  7. @Anissa: untuk kode nomor 4 letakan diatas.
    dan untuk kode div id content wrapper tidak ada, anisa juga bisa meletakan nya, pada
    Add Gadget, HTML Java Script, dan letakan di bawah header.

    BalasHapus
  8. java script untuk kaumannya harus update kayaknya
    thanks share

    BalasHapus
  9. boz, udah saya coba. tapi postingan slide show nya gak jalan,... harap bntuaan nya bozzz

    BalasHapus
  10. itu kok banyak yang gagal, gimana?

    BalasHapus
  11. mantab sob, sangat menarik.. terimakasih banyak

    BalasHapus