Memasang Slider (Slide Show) di blogspot/Blog sebenarnya Hanya merupakan opsional saja, yang artinya boleh Anda pasang dan Juga tidak. Jika masih memiliki banyak ruang di blog anda, Itu tidak ada salahnya Jika Kalian ingin memasang fitur-futur Berikut ini, agar tampilan blog (blogspot) menjadi Lebih menarik.
Tetapi Anda harus mempertimbangkan juga faktor kecepatan loading blog kalian. Jika kecepatan loading Blog masih memadai Tidak Ada kendala, silahkan saja Anda dapat memasang fitur slider (Slide show) di blog anda.
Untuk Pemasangan slider (slideshow) biasanya digunakan hanya untuk menampilkan beberapa postingan artikel terbaru, seperti artikel-artikel pilihan Yang ingin Anda tampilkan, atau artikel-artikel Yang Menarik untuk Anda tampilkan, Dan Juga Artikel Artikel tertentu berdasarkan kategori yang Anda pilih.
Dengan desain gambar Yang bergerak, artikel-artikel tersebut Yang Anda tampilkan pun akan ditampilkan secara bergantian tergantung pengaturan yang Anda pilih Dan diinginkan.
Cukup Menarik Dan Memang tampilan blog akan terlihat lebih Cantik Dan elegan, Bahkan akan menjadi ramai dan lebih berwarna Jika dipasangi fitur slider (slideshow) ini. Tampilan Yang menarik ini tentunya akan lebih Menarik perhatian pengunjung Dan membuat pengunjung semakin tertarik dan penasaran untuk Melihat Dan membaca artikel-artikel yang sekilas Pada tampilan Di slider tersebut.
Mungkin bukan Disini Saja, Bahkan Ada banyak Yang Berbagi Tutorial Tips Dan Trik mengenai cara memasang slider (slide show) yang dibagikan blogger blogger di luar sana.
Namun Masing-masing slider memiliki kelebihan dan kekurangan dari beberapa tampilan yang dibagikan. Ada slider gambar ditampilkan sejajar Di Setiap Kolom Yang kemudian bergerak menggeser secara bergantian. Bahkan ada juga Yang gambar slider ditampilkan secara bergantian dalam satu kotak gambar.
Mungkin Akan Sedikit membingungkan untuk cara pemasangan slider ini, Yang memang biasanya cukup rumit bagi yang tidak terbiasa mengutak-atik kode Script HTML di dalam Tema atau template html.
Agar tampilan Slider Ini berfungsi seperti yang diinginkan, ada beberapa kode script yang memang Harus dipasang di tempat-tempat tertentu terlebih dulu, Dengan mencari beberapa kode Di Html seperti kode </style>, </head>, atau kode </body>. Tentunya ini akan cukup memakan waktu sehingga sebagian Blogger malas melakukannya. Dan Tidak jarang, mereka pun akhirnya memutuskan tidak Ingin memasang slider (slideshow) di blog mereka.
Tetapi jika anda tertarik untuk Memasang Slide di Blog Anda, silahkan Anda Ikuti Langkah Langkahnya Berikut Ini.
Karena kali ini, saya akan membagikan cara untuk memasang slider keren di blog, Dan tanpa harus susah susah mengedit html Di Template Blog, atau mencari kode Kode Script di html template. cukup dalam satu langkah anda kini sudah Dapat memasang Slider gambar bergerak Yang bergantian (slide show) keren di blog anda Di menu layout atau tata letak Dan mengubah Atau tambah gedget di dashbord blogger anda.
Kode script Atau Fitur slider ini dapat anda atur fungsinya menjadi seperti widget recent posts atau Hanya menampilkan artikel-artikel tertentu sesuai kategori pilihan anda Yang Ingin anda tampilkan. Fitur slider ini juga tentu Sangat responsive sehingga tampilannya akan Sangat menyesuaikan dengan ukuran layar penggunanya. Saat di buka Dari Apapun pengguna Pengunjung Blog Anda.
Membuat Slider di Blog Dan cara Memasang Slider otomatis Di Blogger.
Silahkan Anda copy Script Berikut Ini:
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list
li{margin:0;padding:0;list-style:none;position:relative}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block;line-height:0}
ul.featured-widget-list img{border:0;width:100%;height:auto}
background-position:0% 100%;
background-repeat:repeat-x}
ul.featured-widget-list .featuredbg:hover{opacity:.1}
ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform:capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font:
600 16px 'Abel',sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel',sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all
0.3s;}ul.featured-widget-list li:hover
.featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius:
50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px
7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
featuredNum:5,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var
h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRoZlmdtVLNyVnH1o7eFNAFQ3qJ6CBoIXS2DgEhO2FGgXZe9JUSaDPqjz67vA8NhlBvHlTdmWV6SII_n7zbosGMHonM4cuBnphO9x1xQ578yxSqw-PYKlMITSqIKU1xO2uRaUnHgz0xzs/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var
g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div
class="featslider"><ul
class="featured-widget-list"></ul><div
class="feat-buttons"><a href="#"
class="feat-prev">Prev</a><a href="#"
class="feat-next">Next</a></div></div>');var
f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var
o=0;o<s.length;o++){for(var
n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"
in
s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a
href="'+q+'"><div class="featuredbg"></div><img
class="featuredthumb"
src="'+u+'"/><h5>'+k+'</h5></a><div
class="featured-meta"><span class="fdate"><span
class="fday">'+t+'</span> <span
class="fmonth">'+v+'</span> <span
class="fyear">'+x+'</span></span> - <span
class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var
c=function(){e(h.featuredID+" .feat-next").click()};var
b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+"
.feat-prev").click(function(){e(h.featuredID+" .featslider
li:first").before(e(h.featuredID+" .featslider li:last"));return
false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+"
.featslider li:last").after(e(h.featuredID+" .featslider
li:first"));return false});if(h.autoplay){var i=h.interval;var
j=setInterval(c,i);e(h.featuredID+" .featslider
li:first").before(e(h.featuredID+" .featslider
li:last"));e(h.featuredID+"
.featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
Lantas Bagaimana Cara memasang slider Di blog?. Berikut langkah-langkahnya Cara membuat slideshow di blog.
- Buka akun blogger anda Di HP Atau komputer.
- Pilih menu layout Atau (tataletak).
- Lihat di bagian atas element Blog Post Anda, dan silahkan klik tambahkan gadget Baru (add a gadget) .
- Berikutnya pilih html/javascript dan masukkan kode Script berikut ini Di Bagian gedget Yang tersedia untuk memasang slider:
Baca Keterangannya:
- Silahkan Anda ganti tulisan berwarna merah dengan Url alamat blog kalian.
- Pengaturan seperti di atas berfungsi Di widget Recent Posts. Jika Anda ingin menampilkan artikel-artikel yang berdasarkan label tertentu yang ingin anda tampilkan, anda dapat mengganti kode false Yang (ditandai warna hijau) dengan label (kategori) pilihan di postingan blog anda. Contoh: tagName:"otomotif"
Terakhir. Jika sudah diatur semuanya, Jangan Lupa untuk simpan dan silahkan lihat hasilnya.
