Gedung Sekolah

SMK INFORMATIKA PESAT (Pembangunan Satu)
Dan
Lapangan Olahraga

Gedung Yayasan

PESAT (Pembangunan Satu)
Beserta
Ruang Kepala Sekolah, Guru, Rapat Dan Lain - Lain

Kegiatan Belajar Mengajar

SMK INFORMATIKA PESAT (Pembangunan Satu)
Kelas XII
Jurusan REKAYASA PERANGKAT LUNAK

Kegiatan SHALAT

Dhuha, Dilakukan pada Pagi hari dan Asmaul husna, Berdzikir, dan Berdoa

Pecinta Lingkungan Hidup

Menyirami Tanaman Di Pagi Hari, Sebelum KBM (Kegiatan Belajar Mengajar) Dimulai ...

Upacara Bendera

Dilakukan Pagi, Di Lapangan SEKOLAH

Tablig Akbar

Bersama Ust. Aripin Ilham di kampus SMK INFORMATIKA PESAT

Kegiatan BTQ

BTQ (Baca Tulis Quran), agar semua lulusan SMK INFORMATIKA PESAT bisa membaca Al Quran

Rabu, 09 Mei 2012

Cara membuat menu slide berdasarkan label

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/AVvXsEjy-HwMduBn62pOucz_73Fx41Qns8a1phjdYhcIMSV7garJ9ASQj7Zz8ZxtM63X0c-Ua5Cvh2xDJocG1qqco3TooxflxT1a79fjpAIeZRVRvymyLQU8jIkAO__VqSRnV9Zupz6cgeZHLr8/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBPaMVci3fAjUJB0Hoany44P4-_qqrPBS1yra3E_YIXUCdsi136rU8zAYc52taDuySRwzS1Z-XyFfnRVvbGvhmluTTLBwSmmf_COAECXVmIZc4Q7YgBfl6XE0L-Y0_vh8T1OXl5MX7xII/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/AVvXsEgqmfjs5nZhijFXJ1g401-RChZb4FPEXarHsNmPN8Z2rLWwoq_diissjeXccbjkFHECnY3igRClBo3K5Uf9NclaWagtVWSu101n6sc8agjwesPNoGSMFrN1uQYqpUfBnZk1UzEoyye-ND4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfU2-jCVVYH3lZrXj4Pi2apBmaCjc3bYJZX7TCZulxMjGWrEnLdClGp3vHZsjgGQko-x6ndQT64xdNZggTnZl8z-B3x8nwdExOIUiz5nlIfKZ8aFr4Zf7RRWwuly3mom6L9odOHCezpRE/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/AVvXsEi5WVdXmtri9ivaEQjJk_LLnwsZjEuLldM09dHwlVJ0z-QvXnXqs69Netch6CnYjpkzx_wXzYh-qgH2KJYO1g-HjR2dTmRUuT8P2vA-xdbDAGojgnPEZaUAPAbidjAcp92yhXkaS_GXC-E/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/AVvXsEjRgCxz6HTERPTTwRi4XkJLYRk3K1UKszaQn1hIXsp6F7HlUdyE9WV8gA3jlPu8dSBg3_YEFeWCSsi-Lwzdk7b5Pd4XYxydf3VaxonrpTCxjBrRBsj1JJKJzWkQ1RfdBrhvBanCC3prLwQ/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/AVvXsEg7wney9mJf-1DDP6Kq_phHVTQPBTYePna3cndkwV1KmhKIQ-8jBRqt-6wHg61W0XlZSwWzHuSMKwiJySapi_poNdKpzssLSO43xnmSNIw0Jn2WiypW0k2WA2nwQAH9MoxiexKkeyk0o94/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 != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?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>

7. Dan yang terakhir simpan template anda dan silahkan cek atau pratinjau. tampilan blog anda berubah menjadi menarik selamat. Selamat mencoba mudah-mudahan bermanfaat.

Read more: http://madiuncool.blogspot.com/2012/04/cara-membuat-menu-slide-berdasarkan.html#ixzz1uNNieOyF

0 komentar:

Posting Komentar