Terwujud
KomTer,Komik Online
Smartphone Mainbitcoin

Cara Membuat Slider Carousel Terbaik Sepanjang Masa


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://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/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://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/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://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg",
pkBlank = "https://lh6.googleusercontent.com/-UZxZHJ71o1A/Uo95CAOG-7I/AAAAAAAAGoI/8hk05V-amCo/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!!.

Mau Artikel Gratis! Silahkan Tulis Email Anda.
Print PDF
Next
« Prev Post
Previous
Next Post »

12 komentar

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

Balas

saya juga belum pernah coba neh mas, ijin coba praktek mas..

Balas

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

Balas

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

Balas

Ya pak ustadz, saya juga sudah dibuang slidernya, soalnya memang benar-benar berat loadingnya

Balas

gmna cara input postingan atau berita terpopuler Slider Carousel

Balas

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)

Balas

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

Balas

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

Balas

lho kok begitu, apanya yang salah mbak dan bagaimana cara mbak menerapkannya :D

Balas

ooo bagus tu muallimah rosyida, salam kenal ya!

Balas
This comment has been removed by a blog administrator.

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.

Icon:
:) ^_^ :D =D (smile dan tertawa)
:( =( (marah dan Bingung)
:-bd :-d (oke)
|o| (tepuk tangan)

By: Terwujud.com
Terima Kasih!!

Copyright © 2014. Terwujud.com | Sumber Informasi Terpercaya - All Rights Reserved | Template Created by Kompi Ajaib | Modified by Ibrahim Lubis