Membuat Slider yg Elegan Dan Simple Di Blogspot

Slider atau yg juga sering disebut slideshow ialah informasi yg berjalan atau sliding di blog atau website. Slider intinya untuk menampilkan informasi utama yg tertuang dalam sebuah konten blog.

Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan mustahil bakal merusak estetika sebuah website. Olehnya, diharapkan tema slider yg sesuai dengan template yg digunakan.

Pada tutorial kali ini, bloGoooblok bakal memaparkan trik membuat slider yg elegan dan simple untuk blogspot. Lihat contohnya pada demo dibawah ini:

• Lihat Demo

Slideshow ini Memakai JavaScript yg merupakan Keliru satu trik terbaik untuk menampilkan banyak informasi halaman Maknakel dalam ruang yg relatif kecil dengan menambahkan fungsi yg bagus.

(Baca Juga: Membuat Popular Post di Blogspot Lebih Ramping)

Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga memiliki navigasi Memakai persegi / titik untuk menawarkan pada pengunjung semoga sanggup menentukan konten lebih Mudah dengan melompat pribadi untuk setiap slide.

Slider Geser bakal berhenti setrik otomatis Saat mouse hkelewat / over dan ini dikonfigurasi dalam isyarat Script.

Caranya Membuat Slider yg Elegan dan Simple di Blogspot

Slider ini dibentuk dari beberapa baris HTML sederhana dan Jika Anda memiliki pengetahuan dasar CSS, maka Anda sanggup menyesuaikan atau memodifikasi ibarat yg Anda inginkan, dan memang benar-benar sanggup dimodifikasi sehingga terlihat lebih bagus.

Jika tertarik untuk membuatnya, maka ikuti langkah-langkah berikut ini:

• Pertama-tama masuk ke dasboard blogspot Anda, kemudian pilih Template, Edit HTML. Cari isyarat ]]></b:skin> atau </style>  di bab head template. Setelah ketemu (gunakan Ctrl F) copy kemudian paste script berikut sempurna diatasnya.

.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    kelewat / 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:hkelewat / over { }
.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:hkelewat / over { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

• Masih disekitar head, masukan isyarat Jquery berikut ini sempurna diatas </head>. Namun Jika template Anda sudah pernah memasang Jquery dalam versi yg lain, baik itu versi lama, lupakan saja langkah ini. Langsung ke langkah selanjutnya

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

• Masih tetap di bab head,  masukan isyarat JavaScript berikut 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").hkelewat / over(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
</script>

• Untuk memasang isyarat HTML slider, ada trik yg sanggup ditempuh. Setrik manual atau otomatis. Manual Maknanya, isi slider nantinya bakal diisi sendiri, sedangkan setrik manual, isi slider bakal ikut menurut postingan terbaru.

(Baca Juga: Caranya Membuat dan Memasang Google Custom Search Engine)

• Memakai Slider Setrik Manual

Masukan isyarat berikut di bab dalam HTML body blog Anda, pola setelah atau dibawah isyarat <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris isyarat yg sejenis atau mirip, alasannya ialah struktur setiap Blog memiliki nama yg berbeda-beda.

Karena aku Memakai template standar dari blogspot yg terbaru, isyarat itu aku tempatkan dibawah isyarat <div class='blog-posts hfeed'>. Itu alasannya ialah aku ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melaksanakan hal yg sama, letakkan isyarat berikut dibawah  <div class='blog-posts hfeed'> yg pertama.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="...image1.jpg" /></a>
<a href="#"><img src="...image2.jpg" /></a>
<a href="#"><img src="...image3.jpg" /></a>
<a href="#"><img src="...image4.jpg" /></a>
<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: 
Kode berwarna merah ialah untuk link image atau gambar, Biru untuk link Url posting atau Maknakel, Wanah hijau untuk Title atau Judul, dan Orange untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris isyarat HTML.

• Memakai Slider dengan Otomatis Publish Maknakel Terbaru

Jika Anda ingin Memakai slider tanpa Musti susah-susah mengisi link dan Maknakelnya setrik manual, maka ikuti langkah-langkah memasang slider setrik otomatis berikut ini:

Pertama-tama, pelengkap isyarat JavaScript berikut ini sebelum atau diatas isyarat </head> , isyarat inilah yg bakal untuk menampilkan Maknakel terbaru setrik otomatis.

<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 ialah link image/gambar yg tampil Jika dalam suatu Maknakel tidak ada gambarnya, sebaiknya anda Mengubah link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.

Masukan isyarat berikut disuatu bab dalam body template, pola Setelah/dibawah <div class="main-wrapper" > atau yg sejenis. Seperti diatas, aku memasang isyarat ini dibawah isyarat <div class='blog-posts hfeed'> yg pertama semoga slider sejajar dengan postingan.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
   </div>
   <div class='descriptionslider'>
<script>         
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</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 yg diberi warna merah ialah baris isyarat pembuka dan epilog untuk menampilkan slider hanya di homepage saja. Makara slider tidak bakal tampil disemua halaman blog. Hanya Saat seseorang melihat homepage atau beranda, slider ini tampil

• Setelah yakin dengan alhasil (preview terlebih dahulu) selanjutnya, Simpan Template.

(Baca Juga: Mengenal dan Caranya Membuat Layanan Subscribe)

Jika semua berjalan baik dan lancar maka, Saat ini blog Anda sudah memiliki slider sederhana nan elegan. Praktis bukan!. Jika masih ada yg perlu ditanyakan, silahkan mengisi kolom komentar dibawah ini. Terima kasih, semoga bermanfaat.

Tweet