Berbeda dengan slider yang ditampilkan oleh kompas.com dan antaranews.com, widget slider kali ini nantinya berbentuk vertikal atau memanjang, jadi widget ini akan lebih "cocok" jika diletakkan di sidebar blog anda, karena ukuranya tadi yang sudah saya terangkan yaitu memanjang, jadi lebih baik width atau lebarnya jangan ditambahkan terlalu banyak karena ini adalah slider vertikal, tapi semua keputusan itu ada di tangan anda, jika anda ingin memodifikasinya menjadi slider horizontal (seperti kompas.com) malah lebih baik (kreatif), tinggal disesuaikan dengan kebutuhan dan minat anda.
Bisa dilihat pada gambar diatas, gambar tersebut adalah contoh screenshot yang saya ambil dari salah satu blog kerabat saya maskolis yang mana pula slider ini adalah karya beliau, jika kita memperhatikan slider pada gambar diatas, rasanya widget ini sangat cocok sekali untuk berada di blog anda yang bertemakan minimalistic, tapi tergantung selera anda juga sih, hehe. Well, bagi anda yang berminat, Check itu Out!
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML > Lanjutkan.
4. Centang box "Expand Template Widget".
5. Cari kode ]]></b:skin> (gunakan CTRL+F) lalu letakkan kode di berikut ini tepat diatasnya.
/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:450px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8Be4K6Gfbc-SymU4KfVJvRVfeXBPwn3iI3KXVcX3UALNjxtmM_fDFrS_j7RoZDIot4cJayepw_2u5HCpgwY-k3xcCEHyLz7V2xDsqNmmCPKSq698JY3yU-MabbX68HDOvmNhAwFg6kE/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXf8Nzyy7u6oGHkSqs7Y5FgfKgUm-J6-AkOrxyvGRRiSWWSyHE2eDEURdNJRDipnjSIDlbBKUrVrPMw2xxRej4t-4VgEzx5fkZbQOfVCjzPz9_5S4tUTq_W8onlXej65QlVgs8syMLTtY/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgZ4FVj-9T2pauaxrtpxZhjhGMk24r6W7uM9Bz2zd8NSt5TueLInrhdAa1hyXam07hoaz1Vn0wyrRmAzvwnhMB-cLPvJ10GzBedV_T-T1lBtnRw-1yfwP5TSSNilxzD8Q7dBBHlguT2raf/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}
Keterangan:
- Kode Merah : Lebar Slider artikel
- Kode Biru : Tinggi Slider artikel
6. Masih di Edit HTML, cari kode </head>, lalu letakkan kode berikut ini tepat diatasnya.
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$(".crott").stop(true,true).slideUp('slow');
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjgz9PpETDreynMo4V6aelie-dfimtkYG_kC6lyvNFXSwYFtRo63lDARpv_LBtVwJZozeFQGuG5eRmdYh07TNhsNNzVP-Ed3GCH9_tzQNfWceB9CSVUoPWaViWQOYQ_3KqvxTM70psZAQ/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;
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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 = m+ ' ' + day + ' ' + y ;
var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);
j++;
}
}
//]]>
</script>
Keterangan:
- Jika pada template anda sudah ada kode seperti yang bercetak tebal diatas, maka kode yang bercetak tebal diatas dihapus saja.
6. Terakhir, Cari kode <div id='sidebar-wrapper'>, lalu letakkan kode berikut ini tepat diatasnya.
<b:if cond='data:blog.pageType == "item"'><div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>
Keterangan:
- Tampilan slider diatas ini hanya akan muncul pada halaman postingan atau artikel, bila anda menginginkanya untuk muncul pada homepage atau halaman awal, anda bisa menghapus kode yang berwarna biru pada kode diatas.
Untuk Live Demo dari slider yang barusan kita bahas, bisa anda lihat disini. Demikian tutorial blog tentang cara membuat slider otomatis gambar vertikal, semoga bermanfaat, dan selamat mencoba. Blogging Is My Addiction...