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 != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src="/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src="/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
6. Tinggal Save Template dan Lihat deh Hasilnya bro .
Selamat mencoba ya bro . . .
Tidak ada komentar:
Posting Komentar