Cara Buat Slideshow Simple di Blog
 |
| Blogspot Slider |
Untuk menjaga kenyamanan pengunjung, kita harus memakai slideshow yang simple namun elegant dan sesuai dengan template yang kita pakai, agar nantinya, slideshow yang tampil pada blog kita akan padu dengan tampilan blog sebelumnya.
Pada kesempatan kali ini XDTPD Blogs ingin berbagi sedikit cara membuat slideshow yang simple dengan menggunakan Javascript dengan fungsi yang sama. Penasaran ? Lihat dulu demonya dibawah ini ya.
DEMO
Slider ini memiliki fitur menampilkan gambar, judul serta deskripsi otomatis dari sebuah artikel. Dan memiliki navigasi berupa titik dibawahnya yang berfungsi kalau diklik pada titik yang lain akan memunculkan slider yang lain.
#Langkah Membuat Slideshow Elegant di Blog
Slider ini dibuat menggunakan beberapa baris kode HTML, dan jika sobat paham dengan HTML dan CSS nya, maka akan lebih mudah bagi sobat untuk memanipulasi tampilannya agar lebih bagus lagi. Baiklah, sekarang mari kita masuk kelangkah-langkahnya :
1. Pertama, sobat masuk dulu kedashboard blogger seperti biasanya, lalu klik pada menu Theme > Edit HTML. Kemudian cari kode ]]></b:skin> atau </style> dengan cara klik ctrl+f, jika sudah ketemu, kemudian pasangkan kode dibawah ini tepat diatas kode tersebut.
.easyslider-wrapper {
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 100%;
height: 350px;
background: #eee;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {
float: left;
width: 20%;
height: 350px;
}
.paging {
background: none;
position: absolute;
bottom: 15px;
right: 20px;
padding:4px 0 2px;
z-index: 100;
display: none;
}
.paging a {
margin: 3px;
background: #fff;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
}
.paging a.active {
background: #15E3FF;
border: 1px solid #15E3FF;
}
.paging a:hover { }
.easytitledes {
width:70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background: rgba(2, 0, 51, 0.6);
padding: 10px 15px;
}
.easytitledes a {
color: #15E3FF;
font: 14px sans-serif;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#29FF00
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}
2. Selanjutnya cari kode </head> dan masukkan kode jQuery ini tepat diatas kode tersebut. Oh ya, kalau memang kode jQuery ini sudah ada diblog sobat, maka silahkan lewati saja langkah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
3. Masih dibagian yang sama, sekarang silahkan sobat masukkan kode Javascript dibawah ini tepat diatas kode </head>
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".easytitledes").stop(true,true).slideUp('slow');
$(".easytitledes").eq(
$('.paging a.active').attr("rel") - 1 ).slideDown("slow");
$(".image_reel").animate({left: -image_reelPosition}, 400 );
};
rotateSwitch = function(){
$(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first'); } rotate(); }, 4000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
clearInterval(play); }, function() { rotateSwitch();
});
$(".paging a").click(function() { $active = $(this);
clearInterval(play); rotate(); rotateSwitch(); return false;
});
});
</script>
Nah, sekarang kita akan masuk ketahap kode HTMLnya. Untuk langkah ini terdapat 2 cara, yaitu : secara manual dan secara otomatis. Jika sobat pilih dengan menggunakan manual, maka sobat harus memasukkan url gambarnya satu persatu. Demian kalau sobat memilih dengan menggunakan cara otomatis, nantinya blog sobat akan memunculkan slideshow otomatis dengan artikel-artikel terbaru diblog sobat.
#Menggunakan Slider Manual
Masukan kode berikut di bagian dalam HTML body blog Anda, contoh setelah atau dibawah kode <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris kode yang sejenis atau mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.
Karena saya menggunakan template standar dari blogspot yang terbaru, kode itu saya tempatkan dibawah kode <div class='blog-posts hfeed'>. Itu karena saya ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melakukan hal yang sama, letakkan kode berikut dibawah <div class='blog-posts hfeed'> yang pertama.
<a href="#"><img src="...image5.jpg" /></a>
</div>
<div class='descriptionslider'>
<div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>
Catatan : silahkan gantikan Url , deskripsi dan judul sesuai dengan yang ada diblog sobat. Lihat tulisan yang telah saya tandai dengan beberapa warna tersebut.
#Menggunakan Slider Otomastis
Jika Anda ingin menggunakan slider tanpa harus susah-susah mengisi link dan artikelnya secara manual, maka ikuti langkah-langkah memasang slider secara otomatis berikut ini:
Pertama-tama, tambahan kode JavaScript berikut ini sebelum atau diatas kode </head> , kode inilah yang akan untuk menampilkan artikel terbaru secara otomatis.
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcRvOQIsdX1ZD12M2wEtecobbShS5P8-RF8Eq8oMSzXZnBbb3vYfB3sNFnz0I6DYXvgFc319XIdk1OW2toK8pTrfQT5sddq90Q_ttCgurY38E4rqAs1BHsHDP4MFGIGH2Wv-90-GSbSA/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
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 = ""; var trtd = '<div class="easytitledes"><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;}; 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; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>
Catatan:
Kode warna Merah adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.
Masukan kode berikut disuatu bagian dalam body template, contoh sesudah/dibawah <div class="main-wrapper" > atau yang sejenis. Seperti diatas, saya memasang kode ini dibawah kode <div class='blog-posts hfeed'> yang pertama agar slider sejajar dengan postingan.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<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='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>
Kemudian, silahkan sobat dulu perview nya, apakah ada error saat pemasang kode tersebut. Jika ada yang error silahkan sobat tanyakan pada kolom komentar dibawah ya. Sekian tutorial kali ini, semoga bisa bermanfaat dan berguna bagi semuanya.
Refrensi : Blogooblog.com
Comments
Post a Comment