» » ✔ Menciptakan Slider Yang Elegan Dan Simple Di Blogspot

✔ Menciptakan Slider Yang Elegan Dan Simple Di Blogspot

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

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

Pada tutorial kali ini, bloGoooblok akan memaparkan cara menciptakan slider yang elegan dan simple untuk blogspot. Lihat misalnya pada demo dibawah ini:


Slideshow ini memakai JavaScript yang merupakan salah satu cara terbaik untuk menampilkan banyak informasi halaman artikel dalam ruang yang relatif kecil dengan menambahkan fungsi yang bagus.

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

Slider ini mempunyai fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga mempunyai navigasi memakai persegi / titik untuk memperlihatkan pada pengunjung supaya sanggup menentukan konten lebih gampang dengan melompat eksklusif untuk setiap slide.

Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam instruksi Script.

Cara Membuat Slider yang Elegan dan Simple di Blogspot

Slider ini dibentuk dari beberapa baris HTML sederhana dan kalau Anda mempunyai pengetahuan dasar CSS, maka Anda sanggup menyesuaikan atau memodifikasi ibarat yang 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 instruksi ]]></b:skin> atau </style>  di kepingan 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 { 
    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; 
    }
  • Masih disekitar head, masukan instruksi Jquery berikut ini sempurna diatas </head>. Namun kalau template Anda sudah pernah memasang Jquery dalam versi yang 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/j4vascript'/>
  • Masih tetap di kepingan head,  masukan instruksi JavaScript berikut diatas </head>.
<script type="text/j4vascript">
$(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>
  • Untuk memasang instruksi HTML slider, ada cara yang sanggup ditempuh. Secara manual atau otomatis. Manual artinya, isi slider nantinya akan diisi sendiri, sedangkan secara manual, isi slider akan ikut menurut postingan terbaru.
    • Menggunakan Slider Secara Manual
Masukan instruksi berikut di kepingan dalam HTML body blog Anda, referensi setelah atau dibawah instruksi <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris instruksi yang sejenis atau mirip, sebab struktur setiap Blog mempunyai nama yang berbeda-beda.

Karena aku memakai template standar dari blogspot yang terbaru, instruksi itu aku tempatkan dibawah instruksi <div class='blog-posts hfeed'>. Itu sebab aku ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melaksanakan hal yang sama, letakkan instruksi berikut dibawah  <div class='blog-posts hfeed'> yang 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 yakni untuk link image atau gambar, Biru untuk link Url posting atau artikel, Wanah hijau untuk Title atau Judul, dan Orange untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris instruksi HTML.
    • Menggunakan Slider dengan Otomatis Publish Artikel Terbaru
Jika Anda ingin memakai slider tanpa harus susah-susah mengisi link dan artikelnya secara manual, maka ikuti langkah-langkah memasang slider secara otomatis berikut ini:

Pertama-tama, pelengkap instruksi JavaScript berikut ini sebelum atau diatas instruksi </head> , instruksi inilah yang akan untuk menampilkan artikel terbaru secara otomatis.

<script type='text/j4vascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZuaO7ZhCSgQjJvgwS8oJQhvg_ZNKzcouHto4J1joQsL5MDCQFRZaqz6L_EEAWrU8V8FIyJNYS5Xf0dzO2XP_83a8GTYShoyYEUd_cO2oNxRWF2iIrvxPB49XAtRsqDCCocfr-DAgN7o/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 yakni link image/gambar yang tampil kalau 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 instruksi berikut disuatu kepingan dalam body template, referensi sesudah/dibawah <div class="main-wrapper" > atau yang sejenis. Seperti diatas, aku memasang instruksi ini dibawah instruksi <div class='blog-posts hfeed'> yang pertama supaya 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 yang diberi warna merah yakni baris instruksi pembuka dan epilog untuk menampilkan slider hanya di homepage saja. Kaprikornus slider tidak akan tampil disemua halaman blog. Hanya ketika seseorang melihat homepage atau beranda, slider ini tampil

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

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


Sumber http://www.blogooblok.com

Berlangganan Informasi Terbaru:

0 Response to "✔ Menciptakan Slider Yang Elegan Dan Simple Di Blogspot"

Posting Komentar

Langganan: Posting Komentar (Atom)