Cara Membuat Fitur Slider Elegan dan Simple di Blog

Fitur Slider Simple di Blog

Fitur Slider Simple di Blog

Ariefchrome - Hallo sahabat Ariefchrome pada kesempatan kali ini saya ingin berbagi artikel mengenai bagaimana membuat Fitur Slider Simple di Blog. Pengertian lain dari istilah Slider ialah  juga sering disebut sebagai Slideshow yang cara kerjanya sebagai sliding di sebuah halaman wesite atau blog.

Fitur Slider Simple di Blog nantinya juga akan memberi informasi lebih bagi para pengunjung untuk mengenal lebih banyak dari isi website atau blog anda. dalam pemasangan Slider atau slideshow ini temntunya tidak boleh sembarangan dikarnakan jika tidak kesesuaian dalam pemasangan pada website maupun blog anda akan merusak pemandangan blog anda.

Pada Tips cara membuat Fitur Slider Simple di Blog kali ini Ariefchrome, akan memaparkan bagaimana tentang pembuatan Fitur Slider Simple di Blog. Lihat Contoh dibawah :

DEMO

Fitur Slider Simple di Blog. Dalam pembuatan Slider ini saya menggunakan Javascript dan merupakan satu dari cara yang terbaik untuk menampilkan banyak tentang informasi artikel kita dalam ruang yang cukup relatif kecil dengan cara menambahkan fungsi yang bagus.

Fitur Slider Simple di Blog. Pada Slideshow atau Slider ini memiliki fitur untuk menampilkan sebuah gambar dari artikel secara otomatis dengan adanya efek geser dan menjadikan pengunjung semakin mudah dalam pencarian sebuah artikel pada website atau blog kita.

Fitur Slider Simple di Blog Ketika Mouse diarahkan ke Slide maka Dengan otomatis Hover Slider akan berhenti sampai Mouse tidak diarahkan ke Slider.

Fitur Slider Simple di Blog

Berikut Cara Membuat Fitur Slider Elegan dan Simple di Blog :

Slider berikut dibuat dari beberapa baris kode HTML , Namun Untuk anda yang merasa mempunyai skill dalam CSS yang mumpuni  silahkan nanti anda bisa mengeditnya sesuai keinginannya. 

Dalam Pembuataannya maka silahkan anda perhatikan langkah - langkah di bawah ini :

Langkah 1 : Pertama Masuklah ke dashboard blogger anda, kemudian pilih template, Edit HTML  dan carilah kode  ]]></b:skin> atau anda juga bisa cari kode </Style> 

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

Langkah 2 : Silahkan anda cari kode </head> Dan Masukkan diatas Kode tersebut.

Ada 2 Cara Dalam Pemasang Slider / Slideshow

Cara yang Pertama adalah dengan Cara Manual Cara yang Kedua adalah Otomatis

Setting Fitur Slider simple di blog Manual

Carilah Kode <div class='blog-posts hfeed'> dan letakkan dibawahnya :

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

Perhatian!!!
- Kode Warna merah untuk link image atau gambar
- Biru untuk link URL Posting / Artikel
- Hijau untuk Title
- Orange untuk Deskripsi
Masukkanlah Satu persatu dalam baris pada kode HTML.

Setting Slider simple di blog Otomatis

Jika tidak ingin susah mengisi link gunakan saja yang otomatis. 

Pertama tambahkan kode Javascript tepat diatas kode </head> 
dan kode ini akan menampilkan artikel terbaru secara otomatis.

<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiWlhnm_oVUOJS4MmxblGLouOtxjLa06-TY5SA_wSLxHZ0Rs9V0TLo2G9ZsIbUU74345GP7cC-r7frVJzHno66eQ-HNXMwn0mzqhDJfRJCDRzlQMlo1bqIm9SJaZJA8oTuswSjAhTMJY/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>

Perhatian!!!
- Kode Warna merah untuk link image atau gambar
- jika tidak muncul gambarnya, isikan link gambar nya
Dan letakkan dibawak kodeHTML berikut <div class='blog-posts hfeed'> Agar posisinya sejajar dengan artikel.

<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>
Untuk Kode yang berwarna Merah merupakan baris perintah kode pembuka dan juga sebagai baris kode Penutup dan hanya kan menmpilkan di Homepage saja. dan Slider ini tidak akan tampil disemua halaman namun cukup di halaman utama saja.

Kemudian Simpan Template anda dan Coba lihat perubahanya.

PENUTUP
Ariefchrome - Sekian artikel saya mengenain cara membuat Fitur Slider Simple di Blog semoga dapat bermanfaat bagi anda

Share This :