Seocips-Cara memasang slider Otomatis keren di template Blog-Memasang slider otomatis di Blogger- Slider otomatis di Blog. Untuk mempercantik tamplian blog sanggup juga dengan memasang slider di template blog. Slider ada banyak sekali macam jenis dan bentukanya dan kedua slider akan saya contohkan bagaimana cara memasangnya di template blog anda.
Keunggulan dari Slider berikut ialah slider otomatis dimana artikel terbaru kita otomatis masuk kedalam slider untuk di tunjukan contohnya di halaman homepage. Kaprikornus anda tidak perlu memasukan link dan gambar secara manual ibarat Slider-slider yang lain. tinggal memasangnya maka screnshot postingan anda akan di tunjukan dengan slider ini
Berikut ialah cara memasang slider di template blog anda.
Masuk ke template >> Edit HTML, lalu centang expand widget templates
Untuk berjaga-jaga jikalau terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan instruksi berikut ini diatas instruksi ]]></b:skin> :
/*Slider http://dapasun.blogspot.com */
#featuredSlider {background:#fff;float:left;margin:0; padding:0 0 10px;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px #c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px #c3c3c3;box-shadow:1px 1px 5px #c3c3c3;border:1px solid #fff; width:99%; position:relative;color:#666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:266px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:15px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCXOcOd1OIbrtIzlDU9pRvAx1dnefyeVOCEOU0Cqo4RfougzUt_2SFyDMmjHQ_vbbmk-VF4hdO8kLErKB59_uBsXd4JzG7yqMYgP3FBB27GKO_eDcd3c_jjVd4i5Ggo2WyycX0i93q84o/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuA_kI593lU1E8gRt-atpy8CVQI97_4u2hkH-slkyhUKEyPq7dq9VGofGz3RpYWcW9WGT_RVukO87mnR3Y44piLKmjnRdG7zfubkEz9WwZAf0zfpVrDqpEA3mfwSGWtQgKJ4MBhShmiDQ/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}
keterangan : Kode yang di kasih warna di atas ialah lebar dan tinggi slider otomatis ini silahkan sesuaikan dengan template anda dan width:99% itu karna saya memasangnya di template responsive jadi saya mengganti kodenya dengan width:99% semoga slidernya jadi responsive, jikalau anda menggunakan template biasa maka anda sanggup mengganti kodenya dengan width:640px; ( angka 640 anda sanggup menggantinya sesuai dengan lebar post di template anda.
Langkah selanjutnya, masukkan instruksi berikut ini diatas instruksi </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IIJB7eqGEE8sLMTh0U8Pe1urpm1iupGZLanlkkd8NiZLDAQEUSZ6qYmzeHOEFHsWMfZz1-wJ065ESPL1sV87s-HpPNpVha2W7hwaSf6J1ZdUPX7sfVMN_wfYxGTJDhfrozcdQpNd52c/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts = 7;
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; 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 = "";
postdate = entry.published.$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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="350" height="262" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>';
document.write(trtd);
j++;
}
document.write('</div>')
}
//]]>
</script>
Keterangan :
Perhatikan URL script warna biru diatas, itu ialah instruksi script jQuery.min.js . Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, instruksi warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau sanggup versi yang terbaru.
Kode warna biru angka 350 dan 262 ialah panjang dan lebar image yang ada di slider.
Langkah selanjutnya ialah memanggil slider tersebut semoga muncul di blog kita. Cari instruksi <div id='main-wrapper'>, lalu letakkan instruksi berikut ini dibawahnya :
<b:if cond='data:blog.pageType != "item"'><div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div> </div> <!--end .container-->
</div>
</b:if>
Sekarang tinggal Save tamplate anda dan lihat hasilnya.
Sekian mengenai tutorial Cara Memasang atau cara pasang Slider Otomatis Keren di Blog atau tmplate blog blogger. Semoga tutorial di atas gampang untuk di kerjakan dan berhasil dalam pemasangannya.
