Daftar Isi





Tampilkan postingan dengan label Navbar. Tampilkan semua postingan
Tampilkan postingan dengan label Navbar. Tampilkan semua postingan

Minggu, 22 Juli 2012

Membuat Auto Navbar

Menu Navbar dapat dihilangkan juga dapat ditampilkan, tergantung selera kita. Berikut ini adalah cara untuk membuat menu navbar auto show-hide /otomatis tampilkan-sembunyikan :
Ikuti Lankah-langkah Berikut ini :
  • Masuk kehalaman Dashboard,klik link Layout,lalu klik link Edit HTML. Lalu carilah kode di Body {

    body { font: 100% Arial, Helvetica; background: #000000; color: #333; }
    atau
    body {
    font: 100% Arial, Helvetica;
    background: #000000;
    color: #333;
    }
    atau code script yang serupa/ menyerupai kode tersebut diatas
  • Kemudian Ketikan Kode berikut di Atasnya
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
    sehigga keseluruhannya menjadi :
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
    body {
    font: 100% Arial, Helvetica;
    background: #000000;
    color: #333;
    }
  • jika sudah klik SAVE TEMPLATE
  • Akseslah blog anda untuk membuktikannya

    S E L A M A T M E N C O B A...
    Diambil dari Blog Tutorial
Read more »

Menghilangkan Menu Navbar

Pada suatu blogger/blogspot pada bagian atas dari blog anda ada toolbar yang biasa disebut navbar. Navbar secara otomatis dimunculkan pada sebuah blog blogger/blogspot yang baru dibuat dan mempunyai warna defaultnya adalah warna biru tua.


(Klik Gambar Untuk Memperbesar)

Beberapa pemilik blog merasa terganggu dengan kemunculan navbar ini.Lantas bagaimana cara menyembunyikan navbar ini? Ada beberapa cara :
Sebelumnya anda login dulu pada Blogger, lalu klik TEMPLATE.
Cara pertama.
Diantara kode <body>, letakkan kode <noembed> dan </noembed>

<noembed> <body> </noembed>

Cara kedua.
Diantara kode <body> letakkan kode <noscript> dan </noscript>

<noscript> <body> </noscript>

Cara ketiga
Copy dan paste kode dibawah ini dan letakkan diantara <style> dan </style> pada <head>.

#b-navbar {
height:0px;
visibility:hidden;
display:none
}

seperti contoh

<style type="text/css">
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
</style>

Cara keempat.
Copy dan paste kode dibawah ini dan letakkan diantara <head> dan </head>

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>

Sebagai navigasi, anda bisa pasang button untuk menampilkan atau menyembunyikan navbar pada blog anda.Copy dan paste kode dibawah ini dan letakkan dibagian lain dari halaman blog anda.Bisa di side bar atau dimana saja sesuai dengan keinginan anda.

<span style="cursor:pointer;" onclick="ShowHideNav();">
Show/Hide Navigation
<a style="visibility:hidden;" href="http://marchsya.blogspot.com"> </a>
</span>

SeLamat Mencoba...!
Diambil dari Marchsya Blog
Read more »

Menampilkan Kembali Menu Navbar

Triknya sebenarnya cukup mudah. Tapi sebelumnya kita akan menyinggung sedikit tentang kenapa Navbar di blogger kita harus di tampilkan? Perlu kita ketahui bahwa sebenarnya Menghilangkan Navbar di Blogger itu ternyata melanggar TOS blogger. Dan resikonya, Blog Kesayangan kita ditutup oleh pihak Blogspot. Dalam tanda kutip Kalau kita sudah memiliki domain sendiri yang berbayar barulah kita bisa hilangkan itu Navbarnya. Kebanyakan saat kita mengganti template dari jasa penyedia template gratis external Navbar telah di hilangkan.

Berikut Caranya Menampilkan Kembali Menu Navbar:
  1. Pertama tentunya harus login dulu donk di blogger (^_^)
  2. Kita masuk ke tata letak (layout) => edit html
  3. Kemudian Kita cari script ini
  4. #navbar-iframe { height: 0px; visibility: hidden; display: none; }
    Kalau susah nyarinya tekan Ctrl+F dn masukkan script yang tadi.
  5. Kalau Sudah Ketemu, Hapus Script yang tadi.
  6. Jangan lupa Di save.
  7. Lihat Hasilnya.
    Gimana kawan? Mudah kan? Selamat Mencoba..
Read more »