Tutorial blog kali ini bagi sobat para blogger yang ingin memasang slider carousel otomatis berdasarkan label pada blognya. Jika masih bingung apa itu slider carousel, lihat gambar dibawah ini, seperti itulah tampilan dari slider carousel otomatis. Intinya, slider carousel ini akan menampilkan gambar dan judul postingan sesuai dengan label yang kita masukkan.
Berikut Tutorialnya:
- Login seperti biasa ke akun blog sobat.
- Klik ke menu "Template" -> "Edit HTML" -> centang kotak kecil expand widget templates.
- Sebaiknya sobat backup terlebih dahulu template sobat untuk berjaga-jaga jika terjadi kesalahan pengeditan.
- Pada kotak Edit HTML, carilah kode ]]></b:skin>, kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> tadi.
Kode Script:
#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/AVvXsEikn99C69i4eWRpEt1vzngl_TNqQk-f7tQjjmx2BhJCBeqRWuMAm9PY3D0nGELviPJT4trhr2fmlvap7LZL32rrYkUkMicMe_bswiB9JpPukHqYJ7zXWt08rhHHdsAfu0W5_I_6alAFEhg/s1600/scroller-bg.png)
repeat center} #carousel
#previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTKJnd-InFzkBW-rG-TahPSXr8p4pEontkKMeoQuunY5YJAOn6oVWti-T-ZklOOITC6kF0gP1Y3e_pM6tWLwVJuJOTA71n-qbUiwuhCUmxTAJoYPF6vv3W4bYChpkLEkaQ4xtBL5dVyyw/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/AVvXsEjOO6GZzFqfJH6jmpepfn3rCxnFoSE3k22isJrrGg46Y-rR0lVBr00q41ckBnqgdbRUglG3Ok3N6ujXTPiUP2PCZis-tkS_OPOb3Hf9Q6KVfHmKlhSSqtvj9GyuxqGUN_x2X20eiuuyNyw/s1600/prev.png)
center} #carousel
#next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tZ5yG51XdahefugyjrpTnpzYSHp-T2fVtj4Xoh6VzQwC1_gEbj8ZR5uyimBsQSH6Yrn5_q4ltveMBqYX_iA_d1byLR30a_A6lt8BWUxv-O0DSaLN9zByr_1T6VackIwyaUwSa2-EcA8/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/AVvXsEjAxYwVIP0_QbJmRDTjXby9QmEn0aU7YvCP9paGvhfTuFy6UXs5I8CPE2CfmBI5-JumX-YDOVY1bnIZtChWTOb1WSXsozolWZCNaz1O15Cg4dUAAIqL1rsgg4sOz2FHxqdGqA3GmdOgC78/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/AVvXsEgviZecIhBLNbzu3eS1ew5q_UX8r-YLK6dHhwp1hi1GGvxLzokWIDHxIB35ZiyUinwcg0A2DcqcRHaUx5Zguyovr18WNa88cilcVWOu03POqKbCshyaXi5Axzr2K_9C22kJFkmBHQ9qu0Q/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}
- Selanjutnya, carilah kode </head>, kemudian copy dan pastekan kode script dibawah ini tepat diatas </head> tadi.
Kode Script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type='text/javascript'/> <script
src='http://mabro-javascript.googlecode.com/files/carousel-slide-mabro.js'
type='text/javascript'/> <script type='text/javascript'>
//<![CDATA[ imgr = new Array(); imgr[0] =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCizegOodgpkcG85DgmoyfUE8OJ-dsoGlPtf-tCrRvbQgk-RWmKCq0Q9etSeP98-Z2RFtMveXHOTLvQdN5KS3ry4BRsdiIYdtx5mNEv0J3GkH8TXVKQuuCmHW2rXVS5UBZSYL6c_fFSaU/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>
- Kode berwarna orange15 adalah jumlah tampilan pada slider. Dan "News" adalah label yang akan ditampilkan pada slider. Gantilah label news dengan label yang akan sobat pakai pada slider.
- Langkah selanjutnya, carilah kode <div id='main-wrapper'> dan letakkan kode script dibawah ini tepat diatasnya.
- Untuk membuat slider carousel menampilkan seluruh kategori label,
ubah script yang bercetak tebal miring dengan script dibawah ini:
("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
- Kemudian save template sobat atau dilihat dulu dengan menekan tombol preview untuk melihat langsung hasilnya sebelum disimpan.
Kode Script:
<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>
Thanks juga buat masbro maskolis.com yang udah kasih tau caranya
Semoga berguna dan bermamfaat
0 komentar:
Posting Komentar