<p>Your browser does not support iframes.</p>
Cara membuat
menu slide berdasarkan label,
Disini kita akan membahas bagaimana caranya membuat menu slide
berdasarkan label, Dahulu saya juga pernah memposting juga membuat menu
slide dengan
cara mengubah menu entri populer menjadi menu slide bagi anda yang suka mengedit template mungkin cara ini patut dicoba. untuk contoh hasilnya bisa anda lihat di
blog template. Untuk caranya sebagai berikut.
1. Login blog anda kemudian menuju menu edit HTML
2. Untuk tampilan blogger yang baru agar mudah mencari menu edit HTML klik
disini caranya
3. Beri tanda centang pada Expand widget template
4. Cari kode
]]></b:skin> dengan menekan F3 atau CTRL+F
dan letakan kode berikut diatasnya.
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel
.container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7hr5aO7weHns1EIALN9DK0jwavPKmu4KunPy2YtmZI5-sERMnFEOIHg4o6MHHKRzVIsQqnjaAR0aJZPkkdlxJV0aWf6LzDdCatS7LinzVpClclmFoV38YeS0tPHywAqC3f4Xg0Vhnrc/s1600/scroller-bg.png)
repeat center}
#carousel
#previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DdcfeMsiOKvrwGoHtvNPkonut4cKf147tq7Buw8xCY60adsObq0IK1Dv4iWFU9FMVpsvJexFIcrDA6a8Ut-sAprAszpTZXach0rhJ7l4Ko3cLUxsm_8LMy8cRqh3oa1XAuQAJPThcXw/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/AVvXsEjIN8nmnM5yvYBfh2KPTlLw5uSCiCwtAAAjikJEHe34SGINn_98iUBdPlU3VVGKcth49iegxSDabrqcjVoKvaPsKpQvd6Hm6gOMWOBUFxzQgQmXo_OaADT4t0eLfbf6-djRdb4_wnKGx0Q/s1600/prev.png)
center}
#carousel
#next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEL7hRr86_YyhY3LGAFfID3h5cjCDKA0wDi7soEzg5a-iCv0kn2kmg4-fCyFZWa1NPNrrpLijPkgYWn7iv41z7oZ5c6GIJDzYLYUkkjSDOgo0jsMlxp0PUTutGaXkQkmxP0EpYgk5h50k/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/AVvXsEgb0t3w1uVZsC-058rJJnMNNGQYSzM8t0iRF_QpmhwsLB3XQ4nmvN-gMm4X3cy9aE9RNBCkrDED5MtkqFXi24_F8RprZXKVvp5oQpf6Cl_-SrmOQbIz7QCGBkU3c0JvpgS5Ycmtozr0_h4/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/AVvXsEg9Hx8cwIJKVpLxypfmBq2PAeRbaf4tOhlRWlwrBzsXy3htArRvZZTuE-vqD7iOaRlZ7LLknSRfAfLoRR02h5_fimh_pIykI8VEgBy6tc4iRbaUoi1GIxoLd67fhz3rbbwDVkAQ4ixhiak/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}
5
. Kemudian cari kode
</head>
dan letakan kode berikut diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://madiuncool.googlecode.com/files/labelslide.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCJ8e_YqPy6j3nRZsYw4bkSvTw0nf1mgcZS2_lgU_fMNAfGAnRfJ5TTZoEnSuc0YXXccE4Dx5WYNnrHE3vtEULE4Td-6Yi-EOJk5nOp440rKtAdvPHFL6GxYMWlSiy9ypG-i38ffterg/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "Unik";
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>
Ganti teks unik dengan nama label yang anda inginkan.
6. Sekarang cari kode
<div id="main-wrapper">
dan letakan kode berikut diatasnya
<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>
7. Dan yang terakhir simpan template anda dan silahkan cek atau pratinjau.
tampilan blog anda berubah menjadi menarik selamat. Selamat mencoba mudah-mudahan bermanfaat.
Cara membuat menu slide berdasarkan label,
Disini kita akan membahas bagaimana caranya membuat menu slide
berdasarkan label, Dahulu saya juga pernah memposting juga membuat menu
slide dengan cara mengubah menu entri populer menjadi menu slide bagi anda yang suka mengedit template mungkin cara ini patut dicoba. untuk contoh hasilnya bisa anda lihat di blog template. Untuk caranya sebagai berikut.
Tidak ada komentar:
Posting Komentar