» » Cara membuat Slider Horizontal Corosoul Pada Blogspot
Edit

Cara membuat Slider Horizontal Corosoul Pada Blogspot

Slider Horizontal Corosoul sering kali kita temukan pada website yang biasanya di letakkan di bawah header di atas body atau postingan. Nah, biasanya untuk membuat slider jenis ini kita harus membongkar template dulu dan menyisipkan code-code script disana. Namun kali ini ada cara yang lebih mudah yang tidak perlu membuka template kita. Cukup menggunakan perintah HTML yang bisa ditambahkan dari Tata Letak Dasbor Blogger kita.

Lanjut ---- caranya begini.
  1. Buka Dasbor Blogger Sobat
  2. Pilih Tata Letak
  3. Pilih tempat dimana anda ingin meletakkan slider ini lalu pilih tambah gadget
  4. Pilih HTML/ Java Script lalu tempelkan kode di bawah ini
  5. Save dan lihat hasilnya
<style>
#featured-wrap{border-bottom:1px solid #3C3A3D;box-shadow: 4px 4px 12px 0px #1A1818; background:#690889;position:relative;height:175px;margin:0 auto}
#featured{border:3px solid #FFFFFF;outline:0px solid #107919;position:relative;width:88%;height:150px;overflow:hidden;top:13px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#FFFF00;box-shadow: -4px 4px 35px 0px #1A1818;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #545157}
.thumb-featured img{display:block;width:154px;height:98px;border:3px solid #fff;}
.title-featured{text-align:center;position:none;margin-top:7px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#4B006F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlyojk_HRv08U0Gj6PajhA_Kk9FUSmcq3MQZDgJNkpeJbMPSkIuUfN-YTjyz57bDLPavPlM_oFWhY9YuWVHg0weTC_I5MYrktXd1Edu2tIaiq0riK3NeN0iPTkOvCPluP4vNWvZmhaiw/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:70px;top:50px;text-indent:-9999px;border:1px solid #58545F;box-shadow: -2px 4px 13px 0px #1A1818}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJRw1bSoty-ABZcmPLofSk4Bfc8YyipZr4A4jENuM6qrYMoKwhw86IsaRHUb4b5gb8x6xzfbyHhGIWfuBVi5X38a40yNV10Am-uf6mjTnxB77qvDyBvNgyyHElA6IRtBO2V-WKzjTZ0A/h42/loading.gif") #000000;background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}
</style>

<script>
var numpostx = 15,
thumbSize = 110,
contjumlah = 0,
cmtext = "Comments",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6wLsWwO8bQMR_x-OCWDsxv2sycjC0h2tDPeYJgk9Ph9Bjoh0b1sHf-o68mo_8wQSBi5jo8F1yIfa1tzextKW5vPX0qcezF9XESsz6OruDm4sGdZTF3m_3pOTuU_teVsw-QE7xa5PLww/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTB3blz1CuEkbdjjGmFgxB2_aTLkZYuWpdMEl0wZ6yaVM1Y62fvPudUJVDGJUcIkuX_znXhNVkk5XLa1IIKGghsiFc6d_whbaqs7RURmd8fhMe0ZiPRR0gF7qVMini8XZw2u-EfLvNT50/h120/no-avatar.jpg",
numcomment = 5,
thumbcsize = 70,
cmsumm = 800;
$(document).ready(function(){$.ajax({url:"/feeds/posts/default/-/label anda?alt=json-in-script&max-results="+numpostx+"",type:"get",dataType:"jsonp",success:function(g){var k,n,b,m,h,d="",o=g.feed.entry;if(o!==undefined){d="<ul>";for(var f=0;f<o.length;f++){for(var e=0;e<o[f].link.length;e++){if(o[f].link[e].rel=="alternate"){k=o[f].link[e].href;break}}for(var c=0;c<o[f].link.length;c++){if(o[f].link[c].rel=="replies"&&o[f].link[c].type=="text/html"){h=o[f].link[c].title.split(" ")[0];break}}if("content" in o[f]){n=o[f].content.$t}else{if("summary" in o[f]){n=o[f].summary.$t}else{n=""}}if("media$thumbnail" in o[f]){postimg=o[f].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+thumbSize+"-c")}else{postimg=pBlank}var p=/<\S[^>]*>/g;n=n.replace(p,"");if(n.length>contjumlah){n=n.substring(0,contjumlah)}b=o[f].title.$t;m=o[f].published.$t.substring(0,10),m=m.replace(/-/g,"/");d+='<li><div class="thumb-featured"><a href="'+k+'" target="_blank"><span><img alt="'+b+'"src="'+postimg+'"title="'+b+'" /></span></a></div><div class="title-featured"><h4><a href="'+k+'" title="'+b+'" target="_blank">'+b+'</a></h4><div class="datex"><span class="dt">'+m+'</span><span class="cm">'+h+" "+cmtext+'</span></div></div><div class="contxisi">'+n+"</div></li>"}d+="</ul>";$("#featured").html(d);(function(){$.fn.infiniteCarousel=function(){function i(j,l){return new Array(l+1).join(j)}return this.each(function(){var q=$("> div",this).css("overflow","hidden"),r=q.find("> ul").width(9999),s=r.find("> li"),j=s.filter(":first");singleWidth=j.outerWidth(),visible=Math.ceil(q.innerWidth()/singleWidth),currentPage=1,pages=Math.ceil(s.length/visible);if(s.length%visible!=0){r.append(i('<li class="empty" />',visible-(s.length%visible)));s=r.find("> li")}s.filter(":first").before(s.slice(-visible).clone().addClass("cloned"));s.filter(":last").after(s.slice(0,visible).clone().addClass("cloned"));s=r.find("> li");q.scrollLeft(singleWidth*visible);function l(u){var t=u<currentPage?-1:1,w=Math.abs(currentPage-u),v=singleWidth*t*visible*w;q.filter(":not(:animated)").animate({scrollLeft:"+="+v},3000,function(){if(u>pages){q.scrollLeft(singleWidth*visible);u=1}else{if(u==0){u=pages;q.scrollLeft(singleWidth*visible*pages)}}currentPage=u})}q.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');$("a.back",this).click(function(){l(currentPage-1);return false});$("a.forward",this).click(function(){l(currentPage+1);return false});$(this).bind("goto",function(t,u){l(u)});$(this).bind("next",function(){l(currentPage+1)})})}})(jQuery);var a=true;$("#featured-wrap").infiniteCarousel().mouseover(function(){a=false}).mouseout(function(){a=true});setInterval(function(){if(a){$("#featured-wrap").trigger("next")}},8000)}else{$("#featured").html("<span>No result!</span>")}},error:function(){$("#featured").html("<strong>Error Loading Feed!</strong>")}});$.ajax({url:"/feeds/comments/default?alt=json-in-script&max-results="+numcomment+"",type:"get",dataType:"jsonp",success:function(n){var f,a,c,m,g,h,b="",j=n.feed.entry;if(j!==undefined){b="<ul>";for(var e=0;e<j.length;e++){for(var d=0;d<j[e].link.length;d++){if(j[e].link[d].rel=="alternate"){m=j[e].link[d].href;break}}if("content" in j[e]){f=j[e].content.$t}else{if("summary" in j[e]){f=j[e].summary.$t}else{f=""}}if(j[e].author[0].gd$image.src=="http://img1.blogblog.com/img/blank.gif"){a=pkBlank}else{a=j[e].author[0].gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+thumbcsize+"$1")}var l=/<\S[^>]*>/g;c=(j[e].author[0].uri)?j[e].author[0].uri.$t:"#nope";g=j[e].author[0].name.$t;f=f.replace(l,"");if(f.length>cmsumm){f=f.substring(0,cmsumm)+"..."}h=j[e].gd$extendedProperty[1].value;b+='<li><div class="kmtimg"><a rel="nofollow" href="'+m+'"><span><img src="'+a+'" title="'+g+'" alt="'+g+'"/></span></a></div><div class="ketkomt"><a rel="nofollow" href="'+m+'" title="'+g+'" class="tooltip">'+g+"</a><span>"+h+'</span></div><div class="komtsum">'+f+"</div></li>"}b+="</ul>";$("#rcentcomnets").html(b)}else{$("#rcentcomnets").html("<span>No result!</span>")}},error:function(){$("#rcentcomnets").html("<strong>Error Loading Feed!</strong>")}})});
</script>

<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>loading....</span>
</div>
</div>
Keterangan

  1. .title-featured{text-align:center;position:none;margin-top:7px} (Ganti Position menjadi Relative bila tampilan title slider error).
  2. var numpostx = 15 (silahkan ganti sesuai keinginan)
  3. Silahkan edit sendiri kode css untuk memodifikasi warna, ukuran dal lainnya

0 Response to "Cara membuat Slider Horizontal Corosoul Pada Blogspot"

Posting Komentar

Langganan: Posting Komentar (Atom)