Terwujud

Cara Membuat Slider Carousel Terbaik Sepanjang Masa



Jika bermanfaat, Mohon di Share ya !, jika ada unek-unek komen aja
Membuat slider carousel merupakan pekerjaan yang begitu sulit apalagi harus memahami kode css dan javascriptnya. Slider ini merupakan hasil modifikasi yang saya buat, dan slider ini dimodifikasi hanya untuk tampilan pada widget HTML saja, walaupun demikian jika anda berkeinginan untuk meletakkan kode-kode slider ini melalui template, maka silahkan dilakukan sesuai keinginan.

Mengapa saya memodifikasi slider carousel ini hanya untuk tampilan pada widget HTML tanpa harus edit template, hal tersebut bertujuan untuk memudahkan anda dalam melakukan editing kode dan penghapusan jika sewaktu-waktu anda tidak menginginkan tampilan slider ini. Berikut:

Cara Membuat Slider Carousel Terbaik Sepanjang Masa
Slider Carousel-terwujud.com

1. Log in www.blogger.com
2. Masuk ke Tata Letak
3. Tambahkan Gadget
4. Pilih HTML/Javascript
5. Copy kode di bawah ini



<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/AVvXsEh4QC3u0Knfloo2Jmcmk4w7YkcsznT_TUn13MAWS4I-lrRJIQtAnDAVon58_c24hL4YN-aIkgGA9w37E3R3-NPOCBm5uhQj6VCWy_K8EU_DREkPuR7yLHJ8DXIdvcsQM_aHUUPXXTi405I/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/AVvXsEjhTTI0UkdTyOSdyho6DVKXU0ABecNKYsyjQC2WDUzH8FrGDCJ8-DQRb1QaVDFJLXCeeT8ia4NdMpmBQJnGRHED4rJ9dAy-1B2F8BpK7w1nXaXFcQqawRxSBjySnRWGU1dP1igiKdN_0Fs/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/AVvXsEi3lPjAfdTurFfW2Z3mvyxZrh3-zW6CD8eRzVAkrTMiENX7G7p-wMAoWZl607D60VhTVLepLar0zJANyTErRI9uBUIbqyxpPagdGPwEDQM8exPvm1cKccKzVQTcN9zejdAmTk5J343ZvPg/h120/no-image.jpg",
pkBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuW4kN0RPfcInQAvD1CQXx6oRpf-1AOnYgTeNgwKsJY4Sdf-2_zx2QsERjvsTrLAe6sr4fLpQM_T1zRMlfSI_EvAu1BFpP1VM0l69bh1P15LxrysJPb42hqpxKHxiJqz8IVFBZrMqGEwA/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>

6. Paste kode di atas dan letakkan di kolom widget
7. Save dan lihat hasilnya

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

Demikian artikel Cara Membuat Slider Carousel Terbaik Sepanjang Masa, semoga bermanfaat dan jika ada saran mohon dikonfirmasi. Terima Kasih!!.


Artikelnya sudah di share, makasih ya !

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF

You Might Also Like:

Previous
Next Post »

Sudah ada 12 komentar

Saya akan sangat senang jika ada komentar yang membangun, tetapi:

*Jangan komentar SPAM
*Jangan menanam link
*Jangan ada unsur sara, Fornografi dan memojokkan

Komentar yang melanggar akan dimasukkan kedalam daftar SPAM dan tidak akan diijinkan lagi.

Klik dan Copy Icon di bawah:
:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

By: Terwujud.com
Terima Kasih!!

  1. wah saya belum tahu ni pak, yang di maksud slider carousel itu yang mana pak?

    ReplyDelete
    Replies
    1. saya juga belum pernah coba neh mas, ijin coba praktek mas..

      Delete
    2. Saya sudah menerapkannya, tetapi saya buang kembali karena loading blog menjadi berat, jadi ini bisa diterapkan jika blog bertemakan toko online atau bisnis.

      Delete
  2. Makasih pak, kapan-kapan boleh dicoba, soalnya ada keraguan loading menjadi berat.

    ReplyDelete
    Replies
    1. Ya pak ustadz, saya juga sudah dibuang slidernya, soalnya memang benar-benar berat loadingnya

      Delete
  3. gmna cara input postingan atau berita terpopuler Slider Carousel

    ReplyDelete
    Replies
    1. feeds/posts/default/-/label anda?alt=json-in kata labe-anda silahkan diganti dengan label yang mau mas letakkan, misalnya feeds/posts/default/-/desain?alt=json-in (berarti khusus untuk label desain)

      Delete
  4. tak coba enggak bisa di blog saya nih mas...

    ReplyDelete
    Replies
    1. lho kok begitu, apanya yang salah mbak dan bagaimana cara mbak menerapkannya :D

      Delete
  5. Sukses saya pasang di blog saya. Terimakasih banyak!! :D

    ReplyDelete
    Replies
    1. ooo bagus tu muallimah rosyida, salam kenal ya!

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
Copyright © 2014 Terwujud.com - All Rights Reserved