Membuat Slideshow JQuery Modern di Blog ~ BLOG MINAN

Cara Membuat Slider.

Slider, dibuat dari beberapa baris "HTML" sederhana dan jika Anda memiliki pengetahuan dasar "CSS", maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus. jika tertarik, maka ikuti langkah-langkah berikut.

1. Masukan kode berikut diatas ]]></b:skin> atau </style> di bagian head template.

Baca Juga

CSS untuk Slider

.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. Masih di bagian head template, masukan kode Jquery berikut diatas </head>

JQuery

1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Catatan: Lewati langkah ini, jika sudah memasang Jquery dalam versi yang lain.

3. Masih di bagian head template, masukan kode JavaScript berikut diatas </head>

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>

4. Ada 2 metode untuk baris kode HTML; Manual dan Otomatis publish artikel terbaru.

Metode 1 Manual.

Masukan kode berikut di suatu bagian dalam HTML body, contoh setelah/dibawah <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris kode yang sejenis/mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

HTML

<b:if cond='data:blog.url == data:blog.homepageUrl'>

</div>

<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>

</b:if>

Warna Oranye adalah untuk link image/gambar, Biru untuk link Url posting/artikel, Pink untuk Title/Judul, dan Merah untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.

Metode 2 Otomatis Publish Artikel Terbaru

Jika anda memakai Platform Blogger, mungkin ingin update artikel secara otomatis masuk ke slider, ikuti langkah berikut:

Masukan tambahan baris kode JavaScript sebelum/diatas </head> di bagian head template, kode ini untuk menampilkan artikel terbaru secara otomatis.

Javascript Artikel Terbaru

imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX5s1jRbYqeHrpG4HrStVnVqrUgpEV3uYpGDgtYcPZBQ28T898tV4Z8SASRKOrC75-zoQner9LF8BZeu0_7x3BKwk-INSJLLBRrghYMhAnkg5Ze8fA5-YoJypaWNXKsh0lSn4Kd9qWA3k/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;

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++;}}

//]]></script>

Warna Pink 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.

HTML dan JavaScript

<b:if cond='data:blog.url == data:blog.homepageUrl'>

document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");

</script>

</div>

document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script>

</div>

</div>

</b:if>

Warna Hijau adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage.

5. Save Template, dan lihat hasilnya.

Catatan: Ingat kalo bingung, lihat saja langsung source code-nya di halaman demo, perhatikan saja kode-kodenya, simple banget.