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 :
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>
Langkah 2 : Silahkan anda cari kode </head> Dan Masukkan diatas Kode tersebut.
Ada 2 Cara Dalam Pemasang Slider / Slideshow
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>
- 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.
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>
- 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("<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>
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 :
comment 0 comments
more_vert