Cara Membuat Slider Otomatis dengan Gambar sesuai Label

Tweet

Membuat Slider adalah sesuatu yg membuat tampilan blog lo lebih keren dan efisien bro, disini akan menampilkan slide berjalan sesuai label yang lo ingin bro dan berapa banyak yang keluar secara otomatis, jadi bagi lo yang berminat bro silahkan simak untaian berikut ya bro :

 

1. Login ke Blog Lo bro.

2. Pilih Rancangan > EDIT HTML > Centang Expand Template Widget bro > Antisipasi Kesalahan bro,

    silahkan BACKUP dulu data template lo bro ok.

3. Cari kode ]]></b:skin> bro

     setelah ketemu bro, letakan kode diBawah ini bro tepat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifFRJ9BhYh6birMpliZFzC9CKTC7BkBSiIfOJHPuSL73w0LeYdrCSmSCeA7DlA5I5bjovYf6nO6Fx4lLwrJSs9p3A-VEM0_AOzKM5S_PFXISwg1C01sjwvm9BNDV6U7o8kSGGYLHmvsS8/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFzEm9WhIQgXQatQXlJJR-Wio_PoeJbBxm2iYspBBL-Izyfptjj0yPKz75FBsy0VS6kXb7tEs_bIBQgJGXWxhmxJa5ST_z9ZS1YW2eMdBZ33HTuegOOvpMyvaVlQTeDTBxSWYLiGXspYc/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/AVvXsEgY4Fh9fVVOWOAOfwgNSTF406RxLKRo_9r40hnEr2XgMK9UZwYpYUQ9VAU5TLqaaHizwsstL87J1JVDGzDQ_D_ri66fBlaNjXige_baeemyAUcw24hqeVXF1J42LF3v-XwpStRo8nlfGwU/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4n2SqypFrQRML-GnmQNH8uTrdVsQuUkQ4qs3y-iYpmwwL9FU4FnsLPVXh7sqbZkZ7U6WQbwOhUyV6shKlKeaobw3GaIe6h-mWMKwbG3Wngt8ufSgEUUi93SyyXUPjvYabzrcdCoQeUfs/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/AVvXsEh_VqCEIiP3hyphenhyphenak68ftc4OaBEcmUEWyVzVUzFDRvRq-sXQHXfknLO8u4g0NwWt1NZGkDpUfEnx2fTQogwuIB6ixXsRyoSYhI11HyW5NhxLt8CY9IRgbkZO7H4rU6oCCVBBMsWQPDG_5frw/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/AVvXsEhOLakQVIfuZjqeRnMMSyEe9KGqRPLuUEANfsDkLSQpMubpQpCQqf_Xn0SiU7xTU7DSSfggwCGDMOSXly0haHL7Q84wo7Er-x221c8iuCIrveuTtUKIuB4W7LK4z-oW-uMm9K1ieUG_Rmw/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}

Ket :

•        Silahkan Atur Bro Lebar dan Panjangnya sesuai Tulisan yg berwarna MERAH ya bro

4. Carilah bro kode </head>

    Setelah ketemu bro, Letakkan Kode diBawah tepat diAtas Kode </head> ya bro

<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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYAgsDqXufFiaNCxPTOgn8HgSQGkbT6wD07B0HD0F9KohVfjfCKp0ZCldJHiuuy-SIwFfmOuNWTdjAUWZyG4u3T9fuAof-x8XSN6CgFtT5VmZH5dX9mhFajZheZWATzLU1o5xIV0S9OeQ/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 140;

summaryTitle = 25;

numposts1 = 20;

label1 = "Games";

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>

Ket :

•       Tulisan yg Berwarna MERAH bro silahkan ganti sesuai Berapa banyak posting yg ingin lo tampilkan bro ok .
•       Tulisan yg Berwarna HIJAU bro tidak usah diganti jika di template blog lo nanti ada bro.
•       Tulisan yg berwarna KUNING silahkan lo ganti bro sesuai dengan Label yg lo inginkan bro. 

5. Terakhir bro cari kode <div id='content-wrapper'>

    jika sudah ketemu bro, letakan bro kode diBawah ini tepat diBawah 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>

6. Tinggal Save Template dan Lihat deh Hasilnya bro .

Selamat mencoba ya bro  . . .

Judul: Cara Membuat Slider Otomatis dengan Gambar sesuai Label
Rating: 100% based on 999998 ratings. 57 user reviews.
Ditulis Oleh Maha Putra Rusydinal

Lo Sedang Membaca Artikel Bro Tentang Cara Membuat Slider Otomatis dengan Gambar sesuai Label
Jika Lo Suka Artikel RaxterBlog bro, Silahkan Masukkan E-mail lo dibawah ini bro untuk Berlangganan Gratis Via E-mail, Dengan begitu lo akan mendapat kiriman artikel baru dari RaxterBlog bro.
Terima Kasih bro Telah Berkunjung
Salam Blogging ya bro ! ! !