 |
| Slide Show Feature |
Skylibkac, Salah hangat untuk kita semua sahabat blogger. Kali ini kita akan membahas bagaimana cara membuat fitur slideshow untuk blog kita agar terlihat lebih menarik dan makin profesional. Tips ini sangat bermanfaat bagi mereka untuk para web developer agar web teman - teman tampil lebih menarik lagi sekaligus dapat meningkatkan interaksi bagi para penggunjung/ visitor. Kenapa demikian? karena fitur ini disediakan otomatis publish artikel yang telah kita atau teman - teman buat langsung tampil dislideshow. Berikut cara/ tips untuk membuat fitur slideshow diblog.
- CSS untuk Slider
Copy dan pastekan kode CSS ini tepat diatas ]]></b:skin> atau </style> pada templete kalian.
.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;
}
- JQUERY
Berikutnya masukkan kode jquery ini tepat diatas </head> pada templete teman - teman.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
- JavaScript
Masih pada bagian yang sama pada templete teman - teman, masukkan kode JavaScript dibawah ini tepat diatas </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>
- Otomatis Publish Artikel Slideshow
Berikut kode inilah yang membuat postingan artikel kita bisa langsung tampil dislideshow yang telah kita/ teman - teman rancang barusan. Copy dan pastekan kode dibawah ini
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPYHxeFu93VSSfFhH4W-ip6ctxF1n-6H2F-bNPTaGM5WhmrM-gKh6qKi9GJaoM4FzRmFUzZj9VB4DIgBdqFxXNJHHcTC4YLam2DMXcJfSN7HPRjZYNLLouB9oASEFa84mL7YzfYYu1lU/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>
- HTML dan JavaScript
Lalu tambahkan kode dibawah ini tepat diawah <div class ="main-wrapper"> atau yang serupa.
<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>
Kode yang diblock merupakan koding agar foto slideshow kita hanya tampil pada homepage saja.
kode diblock merupakan trik cara menyembunyikan atau menampilkan elemen pada halaman tertentu dynamic. Setelah itu save templete anda maka sudah jadilah cara membuat fitur slideshow agar tampilan lebih profesional. Untuk Demo bisa diklik saja.
Summary: Cara agar web tampil lebih profesional dengan kapasitas yang ringan sehingga tidak mengganggu performance loading dari blog dengan beberapa penambahan koding CSS, HTML, JQUERY dan JavaScript.
