Cara Membuat Efek Meteor Jatuh Pada Blogspot

Cara Membuat Efek Meteor Jatuh Pada Blogspot - Meteor Jatuh Pada Blog memang kedengarannya agak mustahil terjadi, tapi inilah kenyataannya. Bagaimana tidak ? Efek Meteor Jatuh ini mengingatkan kita kembali kepada Jaman Dinosaurus yang dahulu kala terkena Jatuhan Meteor. Penasaran bukan ? lihat demonya :

Efek Meteor Jatuh

Jika sudah dilihat langsung menuju ke Page Element
Klik Add Widget + Html/Javascript + Copas kode berikut :

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js">
</script>

Kemudian Save dech.

Semoga Cara Membuat Efek Meteor Jatuh Pada Blogspot berguna dan bermanfaat.

Tutorial membuat menu Touch down

Mungkin yang di maksud adalah menu Touch Down (mendarat), sesuai dengan namanya 'mendarat' yakni menu ini akan bekerja ketika pointer mouse melintas diatas link tersebut. Yang menampilkan daftar-daftar link yang lain ke bawah.Tutorial ini kelanjutan dari cara membuat sub menu link yang erat kaitannya dg tutorial ini, karena menu touch down biasanya di letakan pada sub menu. Manfaat menu touch down ini yakni untuk menghemat ruang pada blog, sama halnya menu multi kolom yang di ciptakan untuk menghemat ruang pada blog, namun sayang menu touch down dan menu multi kolom hanya bekerja ketika di akses lewat komputer, jika di akses lewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba bolehlah, silahkan ikuti tutorial berikut.

• Pertama login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Backup template lengkap dulu dg mendownload template lengkap.
  
• Tandai kotak kecil pada Expand Widget Template
  
• Kemudian tempatkan kode CSS berikut di atas kode ]]></b:skin>
  

• #subnavbar { margin: 0; padding: 0; }
  #subnavbar ul { float: center; list-style: none; margin: 0; padding: 0; }
  #subnavbar li { list-style: none; margin: 0; padding: 0; }
  #subnavbar li a, #subnavbar li a:link, #subnavbar li a:visited { color: #bb0000; display: block; font-size: 16px; font-family: Arial, Tahoma, Verdana; font-weight: bold; text-transform: uppercase; margin: 0; padding: 4px 10px 4px; }
  #subnavbar li a:hover, #subnavbar li a:active { background: #222222; color: #FFF; margin: 0; padding: 4px 10px 4px; text-decoration: none; }
  #subnavbar li li a, #subnavbar li li a:link, #subnavbar li li a:visited { background: #222222; color: #FFF; font-size: 14px; font-family: verdana,sans-serif; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 4px 10px; border: 1px solid #ddd; }
  #subnavbar li li a:hover, #subnavbar li li a:active { background: #222222; color: #FFF; padding: 4px 10px; }
  #touch li { float: center; padding: 0; }
  #touch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin:0; padding: 0; }
  #touch li ul a {}
  #touch li ul ul { margin: 0;}
  #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul { left: -999em; }
  #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul { left: auto; }
  #touch li:hover, #touch li.sfhover { position: static; }

• Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'>
  

• <div id='subnavbar'>
  <ul id='touch'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.blogtegal.com/link-menu-1'>Menu-1</a>
  <ul>
  <li><a href='http://www.blogtegal.com/link-submmenu-1.a'>Submenu-1.a</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-1.b'>Submenu-1.b</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-1.c'>Submenu-1.c</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-1.d'>Submenu-1.d</a></li>
  </ul></li>
  <li><a href='http://www.blogtegal.com/link-menu-2'>Menu-2</a>
  <ul>
  <li><a href='http://www.blogtegal.com/link-submmenu-2.a'>Submenu-2.a</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-2.b'>Submenu-2.b</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-2.c'>Submenu-2.c</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-2.d'>Submenu-2.d</a></li>
  </ul></li>
  <li><a href='http://www.blogtegal.com/link-menu -3'>Menu-3</a>
  <ul>
  <li><a href='http://www.blogtegal.com/link-submmenu-3.a'>Submenu-3.a</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-3.b'>Submenu-3.b</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-3.c'>Submenu-3.c</a></li>
  <li><a href='http://www.blogtegal.com/link-submmenu-3.d'>Submenu-3.d</a></li>
  </ul></li>
  </ul></div>

• Terakhir SAVE TEMPLATE

Keterangan:

1. Untuk teks yang berwarna ungu merupakan alamat link, sesuaikan dg punyamu.
   
2. Untuk teks yang berwarna hijau akan di jadikan sebagai daftar menu yg akan di tampilkan.
   
3. Untuk teks yang berwarna biru yang akan di jadikan sebagai daftar sub menu /menu touch down.

Silahkan berexperimen sendiri untuk tampilan dan bentuk warna bisa di sesuaikan seleramu. Selamat berpusing ria .

Cara mempercantik tampilan Title Bar

Membuat TITLE BAR berjalan pada blog. Kali ini blogtegal akan sharing tentang cara mempercantik tampilan TITLE BAR berjalan. Ya ini digunakan untuk variasi aja gak terlalu penting sebenernya, lagi pula TITLE BAR juga gak terlalu terlihat karna berada dibagian paling atas. Untuk melihat contohnya silahkan lihat disini , Okelah langsung mawon.
Langkah membuat TITLE BAR berjalan.

• login ke dashbord blog kamu.
  
• pilih ''RANCANGAN / DESIGN''
  
• pada halaman ''Element laman'' klik 'Tambah Gadget'
  
• pilih widget ''HTML/Javascript'' dan tempatkan script berikut didalamnya.
  
• terakhir klik SIMPAN

Script yang di copy:

<script> function tb8_makeArray(n){ this.length = n; return this.length; } tb8_messages = new tb8_makeArray(3); tb8_messages[0] = "WELCOME TO OUR WEBSITE"; tb8_messages[1] = "INFORMATION ABOUT INTERNET"; tb8_messages[2] = "AND THANKS FOR VISITING"; tb8_rptType = 'infinite'; tb8_rptNbr = 5; tb8_speed = 125; tb8_delay = 1000; var tb8_counter=1; var tb8_currMsg=0; var tb8_tekst =""; var tb8_i=0; var tb8_TID = null; function tb8_pisi(){ tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1); document.title = tb8_tekst; tb8_sp=tb8_speed; tb8_i++; if (tb8_i==tb8_messages[tb8_currMsg].length){ tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay; } if (tb8_currMsg == tb8_messages.length){ if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){ clearTimeout(tb8_TID); return; } tb8_counter++; tb8_currMsg = 0; } tb8_TID = setTimeout("tb8_pisi()", tb8_sp); } tb8_pisi() </script>

Keterangan:

" pada tulisan yang berwarna ungu adalah tampilan teks, ganti sesuai keinginan kamu.

" pada tulisan yang berwarna hijau tb8_speed = 125 adalah kecepatan teks berjalan pada TITLE BAR, silahkan expresikan sesuai keinginan kamu.

Cara membuat efek salju pada blog

kalau pingin blog kamu gak kalah sama d eropa yang bisa musi salju , kita juga bisa buat salju bo.ongan di blog kita sendiri ,  kita sekarang membahas bagaimana cara membuat salju bertaburan di blog.


Tidak seberapa penting, tapi setidaknya bagus untuk menghiasi blog. Untuk sobat yang tertarik untuk mencoba, berikut beberapa langkah mudah membuat efek salju pada blog :

1. Login pada blog sobat

2. Rancangan >> Add Gadget >> pilih yang java script / Html

3. Copy code script dibawah dan paste di kotak tadi , untuk judulnya kosongkan saja.

<script src="http://masterendi.googlecode.com/files/salju.js"></script>

4. Save Gadget
by :http://al-azhar-the-best.blogspot.com

Memasang Widget "I Love Indonesia"

 Hmmm.. lama jg gak update blog ini, malez tapi kangen... heheehe

mumpung lagi punya mut neh sob, kali ini saya bahas gmn cara pasang widget I Love Indonesia di pojok kanan atas/seperti yg terlihat di blog ini. Langsung saja sob, ikuti langkah-langkah berikut ini.

Langkah-langkahnya :

1. Buka Blogger dan Sign In menggunakan account sobat
2. Pilih tata letak
3. Add Widget
4. Text/HTML
5. Masukan Script di bawah ini :

<script language="JavaScript" src="https://sites.google.com/site/kodeblogger/javascript/widget.js.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://lh6.googleusercontent.com/_9W8681AXnyo/TWS8zq3XKFI/AAAAAAAAAL8/VNes2sF4baw/iluvindonesia.png")</script>

6. Simpan dan lihat hasilnya

Cara hanya menampilkan judul posting saja pada halaman depan blog

cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan. 

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode </head> , untuk mempermudah tekan Ctrl + f  lalu masukan </head>:

5. Copy kode css di bawah ini dan taruh sebelum kode </head> :

<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>

.post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;}

.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;}

</b:if></b:if>

</style>

6. Simpan Template.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Membuat Efek Unik di Blog

1. Sign in di Blogger
2. Kemudian pilih "Rancangan"
3. Klik "Tambah Gadget"
4. Pilih "HTML/Javascript"
5. Copy kode scipt dibawah ini (Pilih Salah Satu Script Yang Kamu Suka):

Salju Berjatuhan

Code:

<script language="javascript" src="http://zianxfly.250free.com/js/saljucursorblack.js"></script>

Daun Berjatuhan

Code:

<script src="http://arti.master.irhamna.googlepages.com/daun.js"/></script>

Love Berjatuhan

Code:

<script src='http://anas.ku93.googlepages.com/lovingheart.js'> </script>

Kupu Kupu Berterbangan

Code:

<script src="http://h1.badwaresite.www/pendi05/kupu.js" type="text/javascript">

Kelelawar Berterbangan

Code:

<script src="http://h1.badwaresite.www/pendi05/kelelawar.js" type="text/javascript">

Bintang Berjatuhan

Code:

<script src="http://h1.badwaresite.www/pinginbelajar/bintangberjatuhan/30.js" type="text/javascript"></script>

Burung Beterbangan

Code:

<script language="JavaScript1.2" src="http://www.geocities.com/yono_pati/burung.js"> /*********************************************** * Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/ * Please keep this notice intact ***********************************************/ </script>