Headlines News :
Home » » Cara membuat slider Carousel automatic berdasarkan label

Cara membuat slider Carousel automatic berdasarkan label

Written By Azzahida on Sunday, 24 November 2013 | 05:22


Sebenarnya sudah lama saya di minta cara membuat slider Carousel seperti blog blog yang belakangan ini menggunakan konten ini...
Namun saya tidak bisa membuatnya secara langsung artinya saya tidak bisa bikin tutorialnya karna saya bukan master blog.
Yang ke dua saya juga bukan orang yang selalu fokus pada blog namun saya juga masih punya tugas yang lebih bermanfaat tentunya.
Cara ini pernah di minta sahabat blogger saya dari surabaya Namanya Muhammad mustofa 
Dan baru pada kesempatan kali ini saya bisa tuliskan caranya lewat kutipan maskolis, Creating website.
Jangan banyak cerita nanti kalian malah jadi ngantuk ...mending langsung saja ke topics pembahasan.

Hasilnya akan seperti di atas jika anda mengikuti dengan benar tutorial ini
Demonya anda bisa lihat di Sini 
Langkah pembuatannya seperti ini.
1 Login ke blog anda masing masing
2 Masuk ke template/ Edit HTML
3 Untuk berjaga jaga anda backup dulu template anda
5 Setelah semua anda patuhi dengan benar cara di atas anda cari kode  ]]></b:skin>
Letakan kode berikut di atas atau sebelum kode ]]></b:skin> 

 #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}



Perhatikan kode warna biru di atas 980 adalah lebar bacground slider dan 125 adalah tinggi background aturlah sesuai lebar aturlah sesuai lebar blog anda.
Note: jika konten menjorok ke sebelah kanan biasanya yang harus anda atur adalah kode warna merah 100000  dan 212 
06.  Masih di edit Html silahkan anda cari kode </head> Lalu masukan kode berikut di atas kode </head>





 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

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('<ul>');
for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>




Kode warna merah adalah kode  jQuery.min.js jika di blog anda sudah ada kode jQury anda tidak perlu memasukan kode tersebut jadi bagian kode ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>



Tidak perlu di di masukan ..!!

7. Selanjutnya anda cari kode 
<div id='main-wrapper'> 
Letakan kode berikut di atasnya...!!


 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

Terahir save template! jika anda ingin menaruh slider ini di bagian atas fotter langkah nya adalah pada bagian  ke 7 anda cari kode <div id='footer-wrapper'> Letakan langkah ke 7 di atas kode <div id='footer-wrapper'> 
Selamat mencoba semoga berhasil terima kasih wassalam.



Sumber : maskholis creating website
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Creating Website | Johny Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. Kids Indonesia - All Rights Reserved
Original Design by Creating Website Modified by Adiknya