Menu Dropdown

  Membuat Menu Dropdown caranya mudah langsung aja pratek dengan catatan siapkan dulu link link yang akan di pasang di menu .

LLogin ke blogger Anda, klik menu Design > Edit HTML.
  Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.

·         ·  <script>
var last_expanded = &#39;&#39;;
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == &#39;hide&#39;) {
if (last_expanded != &#39;&#39;) {
var last_obj = document.getElementById(last_expanded);
last_obj.className = &#39;hide&#39;;
}
obj.className = &#39;show&#39;;
last_expanded = id;
} else {
obj.className = &#39;hide&#39;;
}
}
</script>

·         ·  Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.

·           .dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}

·         ·  Lalu klik Save Template.

·         ·  Kemudian klik menu Design > Page Element > Add a Gadget.

·         ·  Pilih HTML/Javascript, lalu masukkan kode berikut ini :

<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
 <a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>

• Terakhir klik tombol Save. Selesai...
• Bisa Pasti Bisa 

Membuat slide Header

Header Slide Keterangan width:930,height:140

1. Silahkan untuk langkah awal kunjungi dan registrasi dihttp://www.photobucket.com

2. Buatlah beberapa gambar berformat jpeg/png (harap gambar yang anda buat diserasikan dengan thema blog, ukuran lebar dan ukuran tinggi header blog anda), karena header tidak membutuhkan ukuran & resolusi tinggi silahkan anda buat beberapa gambar header anda di powerpoint saja, jangan lupa tambahkan teks judul blog dan deskipsi blognya, lanjut lakukan grouping sehingga gambar menjadi satu, kemudian klik kanan gambar lakukan 'save as picture' dengan format jpeg atau png.

2. Setelah beberapa gambar header selesai anda buat dengan langkah kerja diatas, silahkan anda login di photobucket kemudian silahkan upload beberapa gambar header yang anda buat tadi, beri judul kemudian silahkan saving file yang sudah di upload. Kemudian copy paste Dirrect link gambarnya simpan di notepad sebagai dokumen anda. Sampai disini anda sudah punya modal link gambar header yang nanti akan dijadikan modal slideshow :)

3. Langkah ketiga silahkan login ke akun blog anda, masuk ke design dan edit html.

4. Download dan backup fulltemplate anda untuk berjaga-jaga, siapa tahu nantinya terjadi kesalahan.

5. Silahkan centang expand widget, kemudian cari kode </head> , letakkan kode dibawah ini dengan cara copy paste, diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 930,height:140, navigation: false, delay: 5000 }); }); </script>

6. Keterangan width:930,height:140 adalah menunjukkan ukuran lebar & tinggi slideshow serta ukuran gambar (image) yang ditampilkan,sesuaikan dengan header anda.

7. Setelah selesai, silahkan save template anda. Kemudian masuklah ke Design (Rancangan).

8. Lakukan Add a Gadget, pilih Add a Gadget yang paling atas sebagai header, pilih HTML/Javascript. Kemudian Paste kode dibawah ini.

<div id='coin-slider'>

<center>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

<a href="imgN_url" target="_blank">

<img src="LINK URL GAMBAR ANDA" />

<span>

ISI KETERANGAN DI SINI

</span>

</a>

</center>

</div>

9. Jangan lupa masukkan dirrect link url gambar-gambar yang anda simpan di notepad tadi pada area berwarna merah tersebut,untuk isi keterangan terserah anda bisa diisi atau anda abaikan.

10. Lakukan saving, selesai

Icon Blogger

Mengganti icon blogger dengan gambar-gambar ataupun foto sendiri di addressbar sangat mudah tinggal masukan kode javascrip/HTML


Catatan : Gambar yang mau di pasang harus berukuran 24 x 24 pixel up to 32 x 32 pixel

Langkah-langkahnya :
1. Loggin ke Blogger.com
2. Pilih rancangan klik tab Edit HTML
3. Cari kode </head>
4. Silahkan copy kode di bawah ini, lalu paste kode diatas kode </head>

<link href='http://i1063.photobucket.com/albums/t520/cameratani/th_noprofil.jpg' rel='SHORTCUT ICON'/>

Keterangan : Kode yang berwarna Hijau ganti dengan kode foto / gambar masing-masing ( kode dari photobucket.com / 4shared.com ) 

Nah begitu sobat saya sampaikan yang memang sudah saya pratekkan, silahkan ATM  Postingan ini mudah mudahan bermamfaat

 

Cara menghilangkan tanda obeng dan tang

Tidak suka ada Obeng dan Tang pada saat edit Blog !!!

Langkah-langkah menghilangkan icon obeng dan tang pada blog :
1. Login ke blogger
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini ]]></b:skin>
5. Copy paste kode berikut persis di atas kode yang tadi : 
 .quickedit{
display:none;
}
 




6. Klik tombol Simpan template.

Membuat auto hide Navbar

Bagaimana cara membuat auto hide navbar pada blog ini?

Pertama, masuk ke dalam akun blogger kita masing-masing.
Kemudian klik fitur rancangan.
Klik edit HTML.
Contreng Expand Template Widget.
Cari kode HTML berikut ini.

Body {

Kemudian tempelkan kode HTML berikut ini tepat di atas kode HTML di atas.

#navbar-iframe{opacity:0.0;filte#r:alpha(Opacity=0)}<br />#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Memasang buku tamu

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

 cara memasang buku tamu ini hasil dari sobat kita yang bealamat di Http:// zuaz.

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.                 
   <style type="text/css">
   #at{
   position:fixed;
   right:35%;
   z-index:+1000;
   }
   * html #at{position:relative;}
   .attab{
   height:0px;
   width:0px;
   float:top;
   cursor:pointer;
   background:url(url);
   }
   .atcontent{
   float:left;
   border:2px solid #fff;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVXXo5ByYm-ok34XMZodg5o24hWIs71-G4U2Jou7K1JHuKz3yHudgugRRnfrhRKJS-IQpK06hIrJQ9hbTBRXmVRlhDz4OQ3eDcgmcru9NUK0cIAP3W-LOYHtvEsWXIdOdpBlu2pmxwLd3M/)#000000 repeat-x bottom center scroll;
   -moz-border-radius:10px;
   padding:10px;
   }
   .atcontent:hover{
   border:2px solid #fff;
   background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
   }
   </style>
   <script type="text/javascript">
   function showHideAT(){
   var at = document.getElementById("at");
   var w = at.offsetWidth;
   at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
   at.opened = !at.opened;
   }
   function moveAT(x0, xf){
   var at = document.getElementById("at");
   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   at.style.bottom = x.toString() + "px";
   if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="at">
   <div class="attab" onclick="showHideAT()"> </div>
   <div class="atcontent">
   <div align="center">
   <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
   
   Strip kode cbox sobat
   
   </div>
   </div>
   <br />
   <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
   </div></div>
   
   <script type="text/javascript">
   var at = document.getElementById("at");
   at.style.bottom = (-200-at.offsetWidth).toString() + "px";
   </script>
    
   Klik save / simpan.
   Keterangan:
5. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
6. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
7. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
8. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog

burung twi terbang di blog

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

• Pertama-tama silahkan login di Blogger
• Klik Design > Page Element > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsMvdOeKdtVjMU6SiebtdYWKhNW1ZzjjFmMp7Nb6UmPd8WYaRRWOm1rHx4x_donNtFRmf_dLDhArkLYtTLZvisakJRCJtlMwWqCqzgMuWGh3JgCKHo8z3jjGIqNef8N8WbeoG_E8lglw/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
• Simpan dan lihat hasilnya.

 Warna Pilihan Burung Twitter

 Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1zR4VpAIVPnSFOVdsWpYPDu6pgOff-k0lQ-8Uw32njkhDVWvWpQLwXMKYErWzjvDPwYmPEgfVnZa5jE0vJ4-6E8wUV530lrxsCDmJ95WF-A4mrZc_76e6hKVd2mVQVhSFSVEYi1vfYE/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQZ9xn6Vf-0GxgSejp6vsr8JA5DPmSG5jU7CREyUFDAslz5gcqZbNRYJKGTeb5Xvqurw5gBfh5cBcxs4SwR1qJkd8nNnSof8Gg_-dQZqFfVtDldoHuF-XHW8FuEVljghylL-tlzNOEJs/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gRYGypSehbDzwZ6QEP8bOepPb5m7BhRuisFCiQAcaZcHA-ISYpGsn_0ZXSE7YzSaouW1kDxdneKW-smlrk4jcgAgo9Dire0B6xBCgBInxLjI9h7LnuSA5C4XMmQQP1wGTziSuZxd3Hs/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLypVk2MlpTd4wV5bVbn97YADWD5sSqqMFdREUGI80Gd-XgG1zoU5BNDq6s1z79EL694gCP17hlp0kJhM2HLuMiZqoN4ViwJHMjtcRovxxC-bBvjZhR9hLewRErnTCL4-1zUX-pC04eI/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSncZIBiBnJfAQv_E3jAyHGdhng2vudTVx1XEqlYdbujGTEw30eb-HPEdZkESuzXt27-X2bHnsBe0BY0ghQ7OneVhYCgvrS9DPWBXNnrsRSK9lSF6TpDINOzZhFHOUE1VLc3yKv9b3Btc/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6J230BiZXbGFJxIEWzLTCK4Xd855PiI6w-ZaUkRqGi9SnM7b3zMPLJ5Ab-vWHgIdCLtHYjQiEeDTSSFGiUSo66Y86ubJyo1A2BuRDDaDa7nmKX8u3ijHadyIlOyKDxCrF_1jJdP_gpCo/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGgvesS5GP4S87O6_buLj-LZjuiFJja94Zix0hpkVb1NbK08IGC-4r5_UkGJzUW5WmZIQYS_Pibu4vR3Qmep4EJLEpChyphenhyphenwUMHUYU3iP2IoPNGhuOTs2u-CAhZXXNvOR7q3RCjQNi5dkyY/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcI2MGCU3x2ugux0wGfPAYvYxwIQ2PFzdw-jRcNJ1BH5vdj5_Nfg_hE9DDW3b6pE11gf4hrppV0Q-udFXTcZe7QzzYK8Y0gIXIh4OiWL2F_TESsgiJUjiZepaXOaFELok4tRALz3MRiWA/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!!!!