Jumat, 12 September 2014

Cara Terbaik Anti Copas

Untuk selanjutnya ikuti langkah-langkah berikut.

1. Silahkan buka akun blog anda sendiri.
2. Masuklah ke Elemen Layout atau Tata Letak
3. Pilih Add a Gadget atau Gadget Baru
4. Setelah muncul kotak baru, lalu pilih HTML/JavaScript
5. Salin / Copy lah Script di bawah ini lalu tempatkan (Paste) di Gadget yang baru anda buat.

<script> var message="Maaf,,, Untuk sementara dilarang klik kanan !!!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>
6. Apabila semua sudah beres, lalu SIMPAN Gadget Baru tersebut.
7. Selesai dan lihat hasilnya.


Sumber:http://bos-tutorial.blogspot.com/2014/01/cara-terbaik-membuat-anti-copas-dan.html

Cara Mengganti Kursor Pada Blog

Mengganti Kursor Blog dan berbagai aneka kursos dengan gambar Animasi Keren.bisa dilakukan dengan gambar sendiri dan karya penampilan sendiri, jika merasa punya tingkat daya seni yang menarik, lebih baik untuk membuat icon cursor sendiri, tentu itu adalah hal yang sangat gambang, baiklah jika merasa tertarik untuk hanya mencoba coba, coba lihat dulu yang satu ini Klik DEMO.


Oke langsug saja,, hehe
- Masuk Ke Blogger - Pilih Template - Edit HTML
- Dan Cari Code </head>
- Pilih kursor sesuai keinginanmu dibawah ini dan Paste code-nya tepart diatas code </head>
Cursor 1
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/horse-ani1.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 2
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Heart.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
 Cursor 3
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Halloween_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 4
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Fly_2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 5
 <style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/aliendance.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 6
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/apple-tmani.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 7
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bounce.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 8
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/tail2.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 9
<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/bluemultiglit.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a> 
Cursor 10

<style type="text/css">body, a:hover {cursor: url(http://justnaira-css-js.googlecode.com/svn/mouse/Arrow_02.gif), progress;}</style><a href="http://www.justnaira.com" target="_blank" title="Blogger Widgets"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN362zBpFLnNF1vwV-btlTdMOxWMmKlfLe3sLFpi9xhFkklq9vbwBKnwnTwn5G0fwRgVMSKMaYP1EFOmc0_EreK0GjR5jPP99Brg980KJ0Nep5E_UwOwhpKQkXp7bwVWO1R0Diwsqe-w/s1600/www.justnaira.com.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 11
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html" target="_blank" title="Blue Fire Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue Fire Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 12

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-10/cur949.ani), url(http://cur.cursors-4u.net/cursors/cur-10/cur949.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/26/batman-begins-help-select.html" target="_blank" title="Batman Begins - Help Select"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Batman Begins - Help Select" style="position:absolute; top: 0px; right: 0px;" /></a>
Cursor 13
<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur201.ani), url(http://cur.cursors-4u.net/cursors/cur-3/cur201.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/22/shiny-flashy-green-matrix.html" target="_blank" title="Shiny Flashy Green Matrix"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Shiny Flashy Green Matrix" style="position:absolute; top: 0px; right: 0px;" /></a>
sumber:http://azhariian.blogspot.com/2013/06/F-U-C-KY-o-u-A-L-L.html

Cara Membuat Tulisan Bergerak Di Blog


Contoh Tulisan Berjalan

Minggu lalu ada teman saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita dibawahnya (footer) bisa dikasih teks berjalan mirip kayak di berita-berita yang ada di TV ’ spontan langsung saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.

Dengan wajah lugu teman saya nanya lagi, ‘ emang gimana cara membuat tulisan berjalan di blog ? ’ nah, daripada saya jelasin cara membuat tulisan berjalan tersebut langsung lewat mulut, agak ribet juga, untuk itu saya tulis di blog ini, itung-itung nambah jumlah postingan blog.

Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, sebenarnya saya juga sedikit bingung kenapa teks berjalan disebut Marquee padahal jika diartikan kedalam bahasa indonesia, Marquee berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.

Dah, dari tadi ngoceh mulu, sekarang kita masuk pada Cara Membuat Tulisan Berjalan (Marquee) di Blog.


Contoh Tulisan Berjalan / Marquee Standar


Contoh Teks Yang Dikenai Marquee

Untuk membuat Tulisan Berjalan seperti diatas, kita membutuhkan kode html seperti dibawah ini :

<marquee>Contoh Teks Yang Dikenai Marquee</marquee>

Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit kode tersebut dapat bergerak.

Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa tambahan efek apapun pada kode html. Kita pun bisa memvariasikan kode <marquee> diatas dengan JavaScript atau HTML yang lain, agar lebih jelas kita masuk contoh saja.


Cara Menambahkan Warna Background di Tulisan Berjalan


Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam kode marquee-nya, dibawah ini adalah contoh jika kita ingin memberi warna abu-abu pada Marquee Text.

<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu</marquee>

Maka hasil dari kode HTML diatasa akan nampak seperti ini.

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu

Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga bisa mengganti warna dari Teks diatas, agar kontras dengan backgroundnya.


Cara Mengganti Warna Tulisan Berjalan


Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih agar teks tersebut mudah untuk terbaca.

Kode yang kita pakai adalah seperti ini :

<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih</marquee>

Dan Hasilnya akan nampak seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih


Cara Membuat Tulisan Berjalan Setengah Layar


Selain mengganti warna dan juga background kita juga bisa membuat Tulisan Berjalan tersebut hanya tampil dari tengah, tidak full dari kanan ke kiri.

Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya jika lebar selector Div hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).

Contoh penerapan dalam kode HTML :

<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>

Kode HTML diatas akan membuat tulisan 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya seperti contoh dibawah ini :

Contoh Teks Yang Dikenai Marquee Width 50%

Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.

Diatas kita hanya menggunakan HTML dan CSS bukan, nah sekarang kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.


Cara Membuat Tulisan Berjalan Dengan Jeda


Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita bisa menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan kode berikut.

<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>

500 disini maksudnya adalah 0,5 Detik bukan 500 Detik. Jadi kode diatas jika dijalankan akan membuat Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.

Contohnya seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Scrolldelay 500


Cara Mengatur Kecepatan Tulisan Berjalan


Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun jika Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda bisa dengan mudah mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"

Contoh penerapan dalam HTML :

<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10</marquee>

Dan kode tersebut akan menghasilkan efek seperti ini :

Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10

Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang jelas jika Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.


Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan


Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan adalah mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).

Kode HTML tambahan yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.

Contoh penggabungan :

<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>

Dan hasilnya akan menjadi seperti ini :

Contoh Tulisan Berjalan Dari Kiri ke Kanan


Cara Membuat Tulisan Berjalan Memantul


Agar Tulisan Berjalan tersebut dapat memantul, kita cukup menambahkan behavior="alternate".

Contoh penambahan ke dalam HTML :

<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>

Hasilnya setelah kita terapkan :

Contoh Tulisan Berjalan Dengan Efek Memantul


Cara Membuat Tulisan Berjalan Dari Bawah ke Atas


Sebenarnya kode untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"

Contoh penerspan :

<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>

Dan Hasilnya :

Contoh Tulisan Berjalan Dari Bawah ke Atas

Kata "up" juga bisa Anda ganti dengan down (untuk memberi efek tulisan berjalan dari atas ke bawah).


Cara Membuat Tulisan Berjalan Berhenti Ketika Disentuh Oleh Kursor Mouse


Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada kode JavaScript (JS) untuk memecahkan masalah tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" kode JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.

Contoh Penggabungan JavaScript diatas dengan kode HTML Marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>

Dan hasil dari kolaborasi JavaScript dan HTML diatas adalah seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya


Cara Memasang Kode Marquee di Dalam Artikel Cara Memasang Kode Marquee di Dalam Widget
1. Masuk ke dalam Text Editor, lalu pilih Mode HTML
2. Copy dan Paste kode Marquee Anda disini
3. Beralihlah ke Mode Compose (jika berhasil text 4. akan berjalan)
4. Untuk memastikan kode berjalan sempurna klik pada Pratinjau
1. Masuk ke dalam menu Tata Letak lalu Klik Tambahkan Gadget
2. Pilih opsi HTML/JavaScript
3. Copy dan Paste kode Marquee pada textare yang sudah disediakan
4. Klik Simpan dan silahkan dilihat hasilnya

Sebenarnya masih banyak variasi-variasi yang bisa kita lakukan dengan <marquee> ini. Kalau sempat nanti pasti artikel cara membuat tulisan berjalan ini nantinya akan saya Update, jadi jangan sungkan-sungkan untuk membookmark halaman ini untuk mendapatkan update.an terbaru tentang cara membuat tulisan berjalan, hhe

sumber:http://berguruseo.blogspot.com/2014/01/cara-membuat-tulisan-berjalan-di-blog.html

Cara Membuat Menubar Dan SubMenu Di Blog

Setelah kemarin saya membuat postingan tentang bagaimana cara membuat menubar di template klasik, kali ini saya kembali dengan judul Cara Mudah Membuat Menubar dan SubMenu di Blog. Membuat submenu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya? Langsung saja anda ikuti langkah-langkah berikut :
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#992211; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#4a4d4c; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#992211; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c; border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c} #nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav li.sfhover{position:static}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7 
<div id='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="http://istiawanblog.blogspot.com">Home</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/artikel">Artikel</a>
<ul>
<li><a href="http://istiawanblog.blogspot.com/search/label/tips%20karir">Tips Karir</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/kesehatan">Kesehatan</a></li>
</ul>
</li>
<li><a href="http://istiawanblog.blogspot.com/search/label/tutorial">Tutorial Blog</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya
Keterangan :
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya 
  • Ganti tulisan berwarna Biru dengan tulisan judul menubar tersebut, seperti: Home, Artikel, Tutorial atau lainnya
sumber: http://istiawanblog.blogspot.com/2012/08/cara-mudah-membuat-menubar-dan-submenu.html

Kumpulan Widget Animasi Untuk Blog

Cara Memasang Animasi Bergerak  Yang Lucu dan Keren Untuk Blog - 
Ternyata banyak sekali blogger – blogger yang sangat menyukaianimasi bergerak pada blognya.  Bisa terlihat ketika saya berkunjung ke beberapa blog teman. Dari animasi yang simple dengan ukuran mini sampai yang ribet dengan ukuran jumbo banyak terpasang di blog mereka. Ya itu juga karena selera masing2 orang berbeda. Memang animasi pada blog sangat membantu blog agar terlihat menarik. Jadi blog akan terlihat hidup dan tidak membosankan. Sebelumnya saya pernah juga memposting tentang animasi bergerak, tapi saya rasa pada postingan sebelumnya pilihan animasi terlalu sedikit. Sehingga saya memposting kembali mengenai animasi bergerak lagi, namun dengan pilihan yang beragam dan banyak tipe agar bagi anda yang ingin memasang animasi jadi lebih banyak referensi dan pilihan.  Berikut daftar dan cara memasangnya

Cara Memasang Widget Animasi Bergerak Di Blog

  • Login ke dasbor blog anda
  • Pilih rancangan
  • Pilih Tambah Gadget
  • Pilih Html/Java Script
  • Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
  • Pastekan kode tadi di Html/java script tadi.
  • Simpan, dan selesai


Daftar Kode Html Animasi Bergerak
1.Spongebob

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
2.Naruto

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/692/th/69207.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
3.Gaara

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53973.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
4.Labu

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://sig.graphicsfactory.com/Halloween/a.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
5.Tengkorak

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1/th/152.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
6.Ekspresi Muka

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
7. Animasi

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://i.mnpls.com/715/71510.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
8. Main Taplak

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/0/th/72.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
9. Pasangan

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/229/th/22949.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
10.Zoombie

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46602.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
11.Pigglet

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/438/th/43833.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
12.MiniMouse

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/485/th/48554.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
13. Hallo

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
14.Hai Friend

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/243/th/24365.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
15.Star

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/102/th/10221.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>
16.Gajah Loncat

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi</a></center></small></div>
17.Booring

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi</a></center></small></div>
18.Bayi ketawa

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi</a></center></small></div>
19. Dance

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi</a></center></small></div>
20.Main Bola

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi-Blog</a></center></small></div>
21.Bayi Tertawa

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget-Animasi</a></center></small></div>
22.Panda Biru

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Free-Widget-Animasi</a></center></small></div>
23. Panah

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
23. Bunga

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
24. Anjing Laut

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
25. Lumba-lumba

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
26. Kucing Tidur

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
27. Kelinci

<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
28. Dragon

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
29. Ikan

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
30. Pinguin

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">Widget Animasi</a></center></small></div>
 
sumber: http://thoriq666.blogspot.com/