Home Blogging Tutorial blog Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label

Monday, February 18, 2013

Cara Membuat Slider Carousel Otomatis Di Blog Berdasarkan Label

Diterbitkan
Tags


Untuk membuatnya, Silahkan sobat ikuti saja langkah-langkahnya sebagai berikut di bawah ini:
1. Silahkan sobat >> "Login/Masuk" ke Blog dengan akun sobat.

2. Setelah itu pilih blog yang ingin sobat tambahkan slider ini.

3. Pilih menu atau Masuk ke "Template" >> Edit HTML, Jangan lupa Centang "expand widget templates".

4. Untuk menghindari dan berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, Backup dulu template sobat.

5. Setelah semua langkah-langkah diatas sudah sobat lakukan, Silahkan sobat cari kode ]]></b:skin>
(Gunakan CTRL+F untuk memudahkan pencarian)

6. Jika sudah ketemu, Kemudian sobat letakkan kode berikut ini, Tepat sebelum atau diatas kode ]]></b:skin>
Berikut Kodenya:

#carousel{width:1000px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltTICgajPgIWMw-bHVoijEDMR-i1SwX0zOMWfxlFmmzTSM8mFbCkR2bvFMDjnfoHxb457x4-1roCE7L5a8jIMAhY-KZdZwTQmHbzDRsXHhtYmLAbQzxcWXzgtnVCLwkP7EGUES3kKmmg/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy6FhziwK0guqjPB0RZYyWfiYNF-fFS7qf2Yykc_YJSs44opB4Z8ojL9VvsJkDZ7Mj2GTQcRvkuifgAAbzHwhloZUkHHTrP8VhIFKgNTcQHvuBtOtvwTZnpBvVW_3j9ekpRrnWqy7sPX4/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPmWfoxMBW-5oQ2t3jCPFzAZg5gusxrFr09YS64k8Bp_M3ryMhSJ_oo0a6-VhQrBjI12vrtYjmKS-KwRXaPDA_0ASMHScygRPEbVgR0xqUPl297gm78q5UQBoBYcbHkPcWOgM0rERhShU/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuRO-CyQe61EaHQaO4vo_v-ViJ2s-r8VLGGDvdToTo0nwsLorB_PnpabmWKqM1d0SVphnYqhzClyUK7TYZ1WZ7HX3CnHkqYB1dEbLyKIk90LEXMYfffgL9VEkvDfKYlR3bs0zb5MAb0Q/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWnmtxoEWNyj_HYezapigr2UAzv8KoyFGzxA1A0iKY4dos5sP_QtHNJdawqDrKtIyGodd7XK7wrLQB2c2JKRxVW2bBQv-cEam9yS-GD_03LBUxJIn1_GTXr3juPZECTk5OUa2ReFXbNx8/s1600/next.png) center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpjeNBtpUz1kD7Nf1qe-G4GPM6vnDIn_D7h0VY5mEu9G10290c6hbst-fAXSV9vlFWnhKuqEXL3ZPy6vM_5XOORMDZZUh_7v3iMqw9htBcch4gFOAkQrP-jBxCfGbIOfubK1D_-GFUb4/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}

Keterangan:
  • 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.
7. Langkah selanjutnya masih pada posisi "Edit HTML", Silahkan sobat cari kode </head>
(Gunakan CTRL+F untuk mempercepat pencarian)

8. Jika sudah ketemu, Silahkan sobat masukkan kode berikut ini, Tepat diatas atau sebelum kode </head>
Berikut Kodenya:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script src='http://ikingasaaf-js.googlecode.com/files/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO0ft9Cv-5khKZDM8KzHx87XKXZ9P9bRcSAzZ5wemza2Rw2ZKUVl9jjUCkS7Z4G549nG1ZvJCQEajj0SslGa0VTzWjq52HlnP_BsFYoLOPVFAlOrxN2jvciWIoasnAn8ua5UT70Hb0l38/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>


Keterangan:
  • numposts1 = 10; adalah jumlah slider yang akan ditampilkan, Silahkan sobat ganti nilainya pada angka warna BIRU sesuai dengan keinginan sobat.
  • label1 = "sport"; adalah 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 tahu, besar kecil huruf harus sama dengan label yang sudah sobat buat. Contoh label yang menggunakan spasi, tutorial blog penulisanya jadi tutorial%20blog
9. 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'>
Berikut Kodenya:

 <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:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
-
-
</b:if>
  • Kode warna HIJAU di atas adalah Kode yang hanya menampilkan Widget pada Home Page (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 Tampilan Home Page Berbeda Dengan Tampilan Isi Blog , pada postingan saya yang sudah saya share sebelumnya. Klik DISINI untuk melihat kodenya.
  • Kode 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.
10. Setelah semua langkah-langkah diatas sudah sobat terapkan, Maka silahkan sobat klik >> "Preview/Pratinjau" Demi untuk menghindari kesalahan waktu EDIT TEMPLATE.
11. Langkah yang terakhir, Jika hasil dari "Preview/Pratinjau" sudah seperti yang sobat inginkan, Maka silahkan sobat klik >> "save templates" dan nikmati hasilnya.
Sekian Dan Terimah Kasih

Unknown

Next Post
Previous Post
Subscribe to: Post Comments (Atom)