Selasa, 09 Oktober 2012

Cara Membuat Menu Auto Hidden di Blog

Menu Auto Hidden adalah menu yang di dalamnya bro terdapat Kode Html seperti gadget yg di inginkan, dan mempunyai cara kerja yang keren untuk auto hidden yang satu ini bro, nanti yg akan ada didalam menu ini bro bisa menutup sendiri dan terbuka kembali lalu seterusnya, kalo sudah bosan tinggal di Exit aja bro, Menu Auto Hidden yg gua posting ini bro banyak keunggulannya karena lebih modern dan keren habis plus simple bro, untuk lebih jelasnya bro lihat contoh gambar berikut :




Bagi lo pada yang tertarik bro, langsung aja simak 2 untaian cara berikut bro :


Cara 1 bro :

    >> Login ke Blogger lo pada bro
    >> Pilih Rancangan
    >> Klik Edit Html
    >> Jangan Lupa Bro Centang Expand Template Widget
    >> Untuk Mengantisipasi Kesalahan Bro,Lakukanlah BACKUP DATA terlebih dahulu ya bro.

    >> Carilah bro Kode </head> bro, lalu letakkan Kode Jquery diBawah bro Tepat diAtas 
          Kode </head> bro.



 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>



Cara 2 bro :


      >> Masuk ke Dashboard Blog Lo bro 
      >> Pilih Rancangan 
      >> Edit Tata Letak 
      >> Add Gadget  
      >> Pilih HTML/Javascripts  



     >> Pastekan Kode diBawah bro diDalamnya
     >> Atau bro lo dapat letakkan Kode diBawah Tepat diAtas Kode </Body> bro
         



<script src='http://raxterblog.googlecode.com/files/menuautohidden.js' type='text/javascript'/><div id='fbslidebox' style='position: fixed; width: 330px; overflow: hidden; bottom: 20px; RIGHT: 10px; background: url(&quot;http://www.nurwahyudin.com/demo/php/hak_akses/images/background.jpg&quot;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(17, 17, 17); display: block;'>
<div style='width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;'>
<a href='#' id='fbcloseslidebox' style='float: right; color: red; padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 10px; font-family: Verdana,Geneva,sans-serif;'>Exit</a>
<strong style='color: red;'>JUDUL CONTENT YANG LO INGIN BRO</strong>
KODE HTML YANG LO INGIN TAROK BRO
</div></div>


Ket :

  1. width: 330px : silahkan lo atur sesuai lebar kolom yg lo inginkan bro
  2. width: 320px : silahkan lo atur bro sesuai lebar garis dalam kolon yg lo inginkan bro
  3. RIGHT : adalah posisi menu auto hidden yg lo inginkan bro, disini lo bisa bro atur dengan posisi kiri : LEFT dan kanan : RIGHT 
  4. background: url(&quot;http://www.nurwahyudin.com/demo/php/hak_akses/images/background.jpg&quot;) adalah bentuk background menu-nya bro, jika lo tidak menginginkan Background silahkan hapus kode ini oke bro
  5. http://www.nurwahyudin.com/demo/php/hak_akses/images/background.jpg adalah Alamat URL Background yg lo inginkan bro.
  6. color: red : silahkan ganti warna red dengan yg lo inginkan bro, ini berlaku untuk TULISAN EXIT , contoh warna yg bisa dipakai bro : green, blue, black, white dll 
  7. color: red : silahkan ganti warna red dengan yg lo inginkan bro, ini berlaku untuk TULISAN JUDUL CONTENT bro , contoh warna yg bisa dipakai bro : green, blue, black, white dll 
  8. Tulisan yang berwarna HIJAU silahkan lo isi sesuai hati lo bro



>> Terakhir tinggal Simpan aja deh bro, gampangkan bro ? ? ?



Selamat Mencoba ya bro ! ! !

2 komentar:

  1. sob saya suadah pasang link kamu... kita tukeran link yah.... trimz

    BalasHapus
    Balasan
    1. Maaf bro, Gua belum nemu link RaxterBlog di blog lo bro, konfirmasi ya bro kalo sudah ada.

      Hapus