Berhenti dan Berjalan

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.

  • Vania Christi Setiawan
  • Hanna Omar
  • Retno Handayani
  • Jihan Basta



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:


  1. maaf nih, sy ngga bisa caranya gmn toh?

  2. 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... :)

  3. bagus banget ni tutorialnya.. :) sangat bermanfaat !!

Posting Komentar


Creative Commons License
Berhenti dan Berjalan by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/03/berhenti-dan-berjalan.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.