Home » , » Cara Membuat Slider Carousel Di Blog

Cara Membuat Slider Carousel Di Blog

Written By Ku Copas on Friday, 24 August 2012 | 8/24/2012 07:33:00 am

KUCOPAS - Cara Membuat Slider Carousel Di Blog. Slider adalah content yang bersifat slide atau berjalan secara slide berurutan, trik membuat Slider Carousel diblog ini saya dapat dari Maskolis dan akan saya share untuk sobat semua. Slider Carousel yang saya kuak ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

Fungsi kerja dari slider carousel ini akan menampilkan artikel terbaru atau juga bisa di setting menurut (berdasarkan) label/kategori blog yang berjalan slide, jika pilihan diklik, maka akan terbuka artikel selengkapnya. Fungsi sebenarnya hampir sama seperti pada artikel Cara Membuat Foto Slide Show Di Blog yang sudah pernah saya posting sebelumnya. Sobat bisa membacanya lagi biar menjadi lebih jelas.

Berikut contoh gambar screenshoot Slider Carousel diblog yang akan saya kasih trik tutorialnya.

Cara Membuat Slider Carousel Di Blog

Cara Membuat Dan Memasang Slider Carousel Di Blog

1. Silahkan sobat >> Login/Masuk ke Blogger.com dengan akun sobat.

2. Pada dasbor pilih menu >> Template >> Edit HTML.

3. Cari kode ]]></b:skin> (Gunakan CTRL+F untuk memudahkan pencarian).

4. Jika sudah ketemu, sobat letakkan kode berikut ini tepat sebelum atau diatas 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}
Catatan:
  • width:950px; adalah Lebar ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuaikan dengan lebar template blog sobat.
  • height:185px; adalah Tinggi ukuran slider keseluruhan, silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
5. Langkah selanjutnya masih pada posisi Edit HTML, silahkan sobat cari kode </head> (Gunakan CTRL+F untuk mempercepat pencarian).

6. Jika sudah ketemu, silahkan sobat masukkan kode berikut ini tepat diatas atau sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kucopas-js.googlecode.com/files/carousellite.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 = 10;
label1 = "sport";
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>
Catatan:
  • numposts1 = 10; adalah jumlah slider yang akan ditampilkan, silahkan sobat ganti nilainya pada angka warna BIRU sesuai dengan keinginan sobat.
  • label1 = sport; adalah daftar label yang ditampilkan pada slider, silahkan sobat ganti tulisan warna PINK sesuai dengan label pada blog sobat. Jika ada space (spasi) pada label, silahkan sobat ganti spasi dengan %20. Perlu sobat ketahui, besar kecil huruf harus sama dengan label pada blog yang sudah sobat buat. Contoh label yang menggunakan spasi, tutorial blog penulisanya jadi tutorial%20blog
  • Apabila sobat ingin menampilkan Slider Carousel untuk daftar postingan Artikel Terbaru, maka hapus saja kode /-/sport sehinga menjadi seperti ini document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results
7. Langkah selanjutnya adalah memanggil slider tersebut agar mau muncul di blog kita. Silahkan sobat cari kode <div id='main-wrapper'> (Gunakan CTRL+F untuk memprcepat pencarian), kemudian letakkan kode berikut ini tepat diatas kode <div id='main-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>
Catatan:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
-
-
</b:if>
  • Kode warna HIJAU di atas adalah Kode yang hanya menampilkan Widget pada Homepage (Halaman utama) blog saja. Jika sobat ingin menampilkan pada semua halaman blog, silahkan di hapus kode yang berwarna HIJAU, atau sobat juga bisa menggantinya dengan kode pada postingan saya yang sudah saya share sebelumnya. Yaitu tentang Cara Menampilkan Dan Menyembunyikan Widget Tertentu Di Blog.
  • Kode Slider Carousel diatas bisa juga sobat letakkan di bawah atau di atas navigasi menu blog sobat atau bisa juga diletakkan di atas footer blog sobat. Silahkan berexperiment sendiri untuk mengaturnya sesuai dengan keinginan sobat.
8. Setelah semua langkah-langkah diatas sudah sobat terapkan, maka silahkan sobat klik >> Preview/Pratinjau, demi untuk menghindari kesalahan waktu Edit HTML dalam Template.

9. Langkah yang terakhir, jika hasil dari Preview/Pratinjau sudah seperti yang sobat inginkan, maka silahkan sobat klik >> Save/Simpan Template dan lihat hasilnya.

Jika sobat sudah berhasil, jangan lupa Follow, Like, atau jika ada pertanyaan seputar tutorial Cara Membuat Slider Carousel Di Blog di atas, silahkan kirim komentarnya pada Form Comment yang tersedia dibawah. Semoga artikel posting yang saya share ini bisa sangat bermanfaat untuk sobat KUCOPAS semua.

Artikel Terkait:

thumbnail Title: Cara Membuat Slider Carousel Di Blog
Posted by:Ku Copas
Published :2012-08-24T07:33:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Slider Carousel Di Blog
Comments
9 Comments

9 comments:

  1. gan lagi lagi ga jalan nih slideshow nya, :(

    ReplyDelete
  2. @ Galaxy >>> Kode nya sudah saya perbarui gan...
    sudah saya tes dan berhasil.
    silahkan di praktekkan lagi.

    ReplyDelete
  3. Bagaimana cara merubah letak left arrow?
    Thanks

    ReplyDelete
    Replies
    1. ingin di rubah letaknya di mana sob...
      kode #previous_button{position adalah kode letak left arrow.
      silahkan di edit sob posisinya...

      Delete
  4. gan java script yang https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js posting aja gan,soalnya setip yg bekunjung ke blog ane keluar pop up terus yang isi'a suruh isi username & password, mana sekarang ga jalan slide'a gan,waktu pertama dipake sih jalan.. :(

    untuk mengetahui informasi seputar otomotif khususnya kendaraan roda empat (Mobil) dapat mengunjungi ===> http://r-automotif.blogspot.com/

    ReplyDelete
    Replies
    1. Ganti dengan yang baru sob...
      http://kucopas-js.googlecode.com/files/carousellite.js
      Agar lebih enteng saat di akses, Silahkan di upload kembali ke code.google.com menggunakan akun sobat.

      Delete
  5. kak punya saya kok muncul slaidya aja tapi gambarya tidak ada,, gimana caranya kak ya cara munculkan gambar bennerya

    ReplyDelete
    Replies
    1. 1. Pastikan kode yang pertama di isi dengan label blog kamu sob...
      besar kecil huruf label harus sama yang ada di blog kamu.
      label1 = "sport";
      ganti "sport" dengan label blog kamu
      jika label sobat ada spasi nya, ganti spasinya dengan %20
      contoh label
      "tutorial blog" penulisannya jadi "tutorial%20blog"

      2. Periksa kode (http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js) di dalam template.
      jika ada dua kode atau lebih, maka akan jadi blank. Cukup pasang satu kode saja. karena fungsinya sama.

      Delete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger