Posting sebelumnya saya share bagaimana cara
membuat slider konten otomatis. Sekarang saya akan posting kembali
slider konten dalam bentuk berbeda. Bentuk tampilan kolom slider
kontennya memanjang yang biasa di sebut carousel slider content.
Baiklah...mari kita bahas cara membuat carousel slider konten otomatis. Ikuti langkah berikut.
Log in ke blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
Log in ke blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}Selanjutnya masukkan kode berikut di atas kode </head>
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2fIsEVq-buq25htmBAiTwctEMJtv6Ze-phG1sGNXPFF3lFHlbdzDN2Q4GpgJbH7MRJbWv0q4RtFu4OUifqB0pDMMkFqhzSIzcdGeVimWiBE_EKg1sZzlCEl4N5qlHeboAewRwTVej0HQ/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzCSPm-EB1llgWLvgzm939GFj20uWBpCh0Q7fVoKLif8zr2WPLhwUqDxp_8ZZXU_5aC8yX4z8Z8TPmvyaWYJO9o3dCXZnCa0IeHXr6loUz_9lCnByCOXvufk3qtBLC81AghXYphzDq-a0/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFi2SoRjD9dU-M0JWFHadvdmktMVzA-hvfarhAc-39ijvzCspcqzaxYeOQCUdtQyHFq1oCu0Bh38L-v7Je7d8d6JrGOPP5f8dIKy_QdSu1_3HILvmeNCH700BFQ_QViT5dPbPbcQwT6MY/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Bu0Cz6a0v5rfU7WB5gXPa7Xcun72c9sRcPnZMbYHnyOJDX1n0oGz1I9U2p2UXOs7giRl0NkEDpVrcWQ_fqzwy1UHn-bVwIZEnrOHsyQ_YS3w97W_XHyuAhhPvZwo6xWAnxfrmjEu86U/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYxYYQMoRp-Jr_C0dgNY2dAKgU3N7K0bHkI5fd9-DRzF67IAdaFUydgPanPfJ3E8c_csbX5Xr9ji74nPxtJbI_RFC_ngLCt-aE2qtccvzjR4I21dL0rXmmBlE1ni3onB3xbDeY2EGFfY/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLse9JqS2NAEdZN7gwdBCkSGBeA0Kk6tAca2dyaoGLelQ-Ol_WHZO2i9nP4LHwIL_6s-7rkKhQhyphenhyphen5rsma3229HpYRAEF2EM9QGaBSrDOTaQ6rNWxWDxw8jUj8fj73untPHlwjyI42B8KA/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDcnHWHhXwQgGOi0D_75o9G7o5SgI3joygDcPinvxaUsE74fAVLBYTd8lwsf89_nT010kuOMMCGV-Yx1-FHa1LDbLTcIBEWDVtqAOKm5UkUBpjC4jkKs94RZIBgy6HnvnU_zOFOwHRlU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "widget";
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 = ["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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
<script src='http://bloekoetoek-blogonol.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDcnHWHhXwQgGOi0D_75o9G7o5SgI3joygDcPinvxaUsE74fAVLBYTd8lwsf89_nT010kuOMMCGV-Yx1-FHa1LDbLTcIBEWDVtqAOKm5UkUBpjC4jkKs94RZIBgy6HnvnU_zOFOwHRlU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "widget";
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 = ["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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
numposts1 = 15; jumlah postingyangditampilkan pada slider konten
label1 = "widget"; label atau kategori yang akan ditampilkan pada slider konten
Selanjutnya masukkan kode berikut di bawah kode <div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
Catatan
Kalau mau mengganti tampilan slider posting berdasarkan label atau kategori menjadi default slider, ganti kode /feeds/posts/default/-/"+label1+"?max-results dengan kode feeds/posts/default?max-results
Jangan lupa Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu
Kalau mau mengganti tampilan slider posting berdasarkan label atau kategori menjadi default slider, ganti kode /feeds/posts/default/-/"+label1+"?max-results dengan kode feeds/posts/default?max-results
Jangan lupa Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu
sumber: blogonol.blogspot.com
1 comments:
Good day! Do you know if they make any plugins to
assist with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results.
If you know of any please share. Many thanks!
Also visit my blog ... discount code
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))
Post a Comment