JavaScript ini bagus juga untuk membuat menu atau sekedar galeri foto, bisa diletakkan di kolom pinggir atau dimana saja, asalkan jangan di kolom ikan.
Demo :
- Panduan Blogger
Panduan dasar-dasar tentang Blogger. Cara membuat blogspot, posting, settings, dan bagi anda yang keriting. - SEO
Tutorial mengoptimalkan Blogspot di Mesin Pencarian (Search Engine), seperti Memasang Meta Tags Description dan Keyword yang dikhususkan untuk para robot. - Template
Download gratis template Blogspot karya Nano Yulianto. - Google Font
Jenis huruf-huruf menarik yang dipersembahkan dari Google dan Tutorial memasangnya di Blogspot. - Tutorial Kode
Tutorial dasar-dasar kode HTML, XHTML, dan CSS. Menyelesaikan tutorial ini, dengan mudah anda bisa merubah template anda sesuai dengan keinginan, atau menjadi para pembuat template Blogspot. - JavaScript Blogger
Mempercantik, menghias, atau memperindah tampilan Blogspot dengan JavaScript. - Profile Blogger
Ini bertujuan agar mempererat tali silahturahmi para Blogger Indonesia. Untuk memicu semangat berkreasi terus dan terus. - Update Status
Hanya sekedar obrolan biasa dan gak jelas.
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.sagscroller{
overflow:hidden;
position:relative;
}
.sagscroller ul{
position:absolute;
margin:0;
padding:0;
list-style:none;
width: 100%;
}
.sagscroller ul li{
display:block;
}
.sagscroller ul li .rsscontent{}
.sagscroller ul li .rsslabel{
margin-top:5px;
background: #eee;
font-size:12px;
clear: both;
}
/*demo 1*/
#StopBerhenti{
width:95%; /* agar pas dimana saja */
height:250px;
background:white;
color:black;
margin:0 auto;
border:7px solid #000;
}
#StopBerhenti ul li{
padding:5px;
margin-bottom:5px;
}
/* demo 2 */
#StopBerhenti2{
width: 250px; /*lebar untuk gambar harus dipaskan*/
height:300px;
margin:0 auto;
border:7px solid #000;
}
#StopBerhenti2 ul li img{
width: 250px; /*harus sama dengan lebar diatas, untuk menghindari gambar kebesaran*/
border:none;
display:block;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" />
<script src="http://pagenano.googlecode.com/files/Stop%20dan%20Berhenti.js" />
<script type='text/javascript'>
//<![CDATA[
//demo 1:
var sagscroller1=new sagscroller({
id:'StopBerhenti',
mode: 'manual' //isinya bisa 'manual' atau 'auto'
})
//demo 2:
var sagscroller2=new sagscroller({
id:'StopBerhenti2',
mode: 'auto', //isinya bisa 'manual' atau 'auto'
pause: 2500,
animatespeed: 400
})
//]]<
</script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id="StopBerhenti" class="sagscroller">
<ul>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/panduan-blogger-pemula.html'>Panduan Blogger</a><br/>
Panduan dasar-dasar tentang Blogger. Cara membuat blogspot, posting, settings, dan bagi anda yang keriting.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/seo-di-blogger.html'>SEO</a><br/>
Tutorial mengoptimalkan Blogspot di Mesin Pencarian (Search Engine), seperti Memasang Meta Tags Description dan Keyword yang dikhususkan untuk para robot.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/free-template-blogger.html'>Template</a><br/>
Download gratis template Blogspot karya Nano Yulianto.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/tutorial-memasang-google-font.html'>Google Font</a><br/>
Jenis huruf-huruf menarik yang dipersembahkan dari Google dan Tutorial memasangnya di Blogspot.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/tutorial-kode.html'>Tutorial Kode</a><br/>
Tutorial dasar-dasar kode HTML, XHTML, dan CSS. Menyelesaikan tutorial ini, dengan mudah anda bisa merubah template anda sesuai dengan keinginan, atau menjadi para pembuat template Blogspot.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html'>JavaScript Blogger</a><br/>
Mempercantik, menghias, atau memperindah tampilan Blogspot dengan JavaScript.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/01/profile-blogger.html'>Profile Blogger</a><br/>
Ini bertujuan agar mempererat tali silahturahmi para Blogger Indonesia. Untuk memicu semangat berkreasi terus dan terus.
</li>
<li><a href='http://nanoyulianto.blogspot.com/2011/02/update-status.html'>Update Status</a><br/>
Hanya sekedar obrolan biasa dan gak jelas.
</li>
</ul>
</div>
<br />
<div id="StopBerhenti2" class="sagscroller">
<ul>
<li><a href="http://nanoyulianto.blogspot.com/2011/03/vania-christi-setiawan.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpKt3IYE6V6k6JJ0-bUpmUbK8fb7pXxP9D5UBCVaA1HDwCXMVFaDoj-TGltz7NtrdZvBGJxbcwyHjNNm_M52eEQ6F2I9QljpCNoiSZtguBZrTi5_a96Q-GiQsD4onEfmjWnITeCNkbVds/s220/11241_1245408179343_1353565950_30798182_99_n.jpg" /></a></li>
<li><a href="http://nanoyulianto.blogspot.com/2011/03/hanna-omar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhba6Q64zH_p8IYaxKx4kKIzMKVxZ4dQzHNQa17BF9jD3prVEkGStOvppcGuKcC8gcXzfpx3-0_3pn7yjIWe61Gb_LmHXGMPCIllrtTEIt5yzVAToV9Tc8OcRNp5OQHLxXikU5nv6gJTNvU/s220/12%C3%B8_m%E2%82%ACr%C3%87%23%C3%A1%C3%B1t.jpg" /></a></li>
<li><a href="http://nanoyulianto.blogspot.com/2011/03/retno-handayani.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5EKGO9DKrtCwj1d-LLB0mwDVf_Dw7aI0jUKQNFdJyik8LYSO39KTevHF51hilWBEi8N6x3RGNDbwcfSFUcfZI2g-LtOOCM34N10oBDLyocG40Yp6CxrifnUfi6mL90RRtKfo_-9d9Cw/s220/180676_185726368134904_100000926257357_444298_8347123_n.jpg" /></a></li>
<li><a href="http://nanoyulianto.blogspot.com/2011/03/jihan-basta.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsAShIFJ5ShquTkk9D-EsCt2HTWPCjG06Rb17ZvF0RxIX8ykBDlrTWcANdyZjzBWtYVVICMkCfgG3QAuZ240al4IusF4sxBIg4acz14TZJaMUEdFeSbymnxHSmk0ssgSXtlFZGQ4wldGVB/s220/jihan.jpg" /></a></li>
</ul>
</div>
Credit : Dynamic Drive
Alhamdulillah
3 comments:
maaf nih, sy ngga bisa caranya gmn toh?
hehehe... jelasinnya gimana ya???, saya juga bingung... kurang terperinci tanya-nya... diatas sudah saya buat tutorialnya secara lengkap...
mungkin kalau masalah penempatan kode bisa baca disini untuk lebih jelas :
Penempatan Kode CSS, JavaScript, dan HTML
kalau masih kurang jelas tanya lagi... :)
bagus banget ni tutorialnya.. :) sangat bermanfaat !!
Posting Komentar