Cara Membuat Fungsi Auto Hide Navbar

Jika anda merasa membutuhkan fitur Navbar tapi masih tidak suka dengan visualnya yang kurang menarik maka anda bisa menyembunyikannya saja. Metode ini biasa disebut dengan Auto Hide Navbar. Navigation Bar hanya akan muncul ketika kursor mouse digerakkan di sekitar area Navigation Bar. Agar lebih mudah memahami silahkan lihat preview disini

Silahkan menuju DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND TEMPLATE WIDGET.

Selanjutnya cari kode berwarna orange seperti kode dibawah. Gunakan CTRL+F untuk memudahkan pencarian. Jika anda sudah menemukannya kemudian Copy kode merah dibawah ini tepat diatas kode berwarna orange tadi.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100) 

Sehingga hasil yang didapatkan kira-kira tampak seperti dibawah ini.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)
]]></b:skin>
</head>

Setelah selesai SAVE template dan lihat hasilnya. Selamat mencoba. Gudlak! :D

Cara Menghilangkan Tulisan "Showing post with label...show all posts"

Secara default template blogger menampilkan sebuah tulisan "Showing post with label...show all posts" ketika kita mengakses setiap halaman berdasarkan label. Ternyata banyak pengguna blogger yang merasa tidak sreg dengan tulisan ini karena dirasakan kurang begitu penting dan mengganggu tampilan blog.



Bagi anda yang ingin menghapus tulisan "Showing post with label...show all posts" anda bisa mengikuti langkah-langkah dibawah ini.

DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND WIDGET
Selanjutnya cari kode seperti dibawah ini. Gunakan CTRL+F untuk memudahkan pencarian.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>


Jika anda sudah menemukannnya, Hapus seluruh kode diatas dan gantikan dengan kode dibawah ini.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Save template dan view blog untuk melihat hasilnya.
Selamat mencoba. Gudlak! :D

Cara Menghilangkan Tulisan Subscribe To Post (Atom)

Secara default biasanya pada template blogger akan terdapat tulisan subscribe to: post (atom) atau berlangganan : post (atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai link feed dari blog anda. Tujuannya agar pengunjung bisa dengan mudah berlangganan feed anda. Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini dirasakan sudah tidak terlalu penting lagi.


Bagi anda yang merasa tulisan ini tidak terlalu penting untuk ditampilkan, anda bisa menghilangkannya dengan cara berikut ini:

DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND WIDGET TEMPLATE Selanjutnya temukan kode seperti dibawah ini. Gunakan CTRL+F  untuk memudahkan pencarian.

<b:include name='feedLinks'/>

Hapus kode diatas. Save template dan silahkan view blog untuk melihat hasilnya.
Selamat mencoba.

Cara Menghilangkan Navbar Blogger

Navbar atau Navigation Bar adalah sebuah frame horizontal yang terdapat dibagian paling atas sebuah blog (platform Blogger). Fitur Navbar ini sebenarnya memiliki fungsi yang cukup penting untuk memandu (navigasi) pemilik blog maupun pengunjung. Adapun beberapa fungsi dan kegunaan dari Navbar seperti dibawah ini:


  • [B]: Dengan mengklik simbol ini akan membawa anda kembali pada www.blogger.com.
  • Search Blog: Fitur ini akan memudahkan anda mencari blog lain dan hasil pencarian akan tampil langsung pada halaman blog tersebut.
  • Follow: Fitur ini berguna jika seorang Blogger ingin mengikuti perkembangan sebuah blog. Jika kita menjadi pengikut sebuah blog maka kita akan mendapatkan update blog itu langsung keblog kita secara otomatis.
  • Share: Fitur ini memiliki fungsi yang sama dengan widget sosial bookmark. Kita bisa mengshare blog yang kita sambangi keberbagai situs sosial bookmark seperti Twitter, Facebook, Google Reader dan lain-lain.
  • Flag Blog (Report Abuse): Fitur ini berguna untuk melaporkan sebuah blog yang memiliki konten atau isi yang berbahaya seperti materi porno, ilegal, SARA, dan materi lainnya yang termasuk kepada pelanggaran TOS Blogger. Dengan menandai sebuah blog yang bermasalah akan menjadi acuan bagi pihak Blogger untuk menindaklanjutinya dengan tindakan seperti memberi peringatan hingga menghapus blog yang bermasalah tersebut.
  • NextBlog: Fitur ini akan membawa anda kepada blog orang lain secara acak, terutama blog yang baru saja mengupdate contentnya.
  • Email Address: jika anda telah log-in anda akan melihat akun (account) anda, yakni email address anda.
  • Dashboard: jika anda telah log in, maka anda akan melihat link (New Post & Costumize) yang membawa pada dashboard anda.
  • Sign In/Out: ini option bagi anda, jika ingin log-in atau log-out.

Dari penjelasan fitur diatas bisa kita lihat fungsi dan kegunaan dari Navigation Bar Blogger. Satu-satunya kelemahan dari Navigation Bar adalah bentuk visualnya yang kaku dan kurang menarik seperti iklan pop-up sehingga mengganggu penampilan desain blog secara keseluruhan. Pada tutorial kali ini kita memiliki dua pilihan tindakan yang akan kita lakukan antara lain mengganti warna navbar atau menghapus navbar. Pilih salah satu sesuai kebutuhan anda.

1. Mengganti Warna Navigation Bar
Jika anda tidak ingin menghapus navbar dan hanya ingin mengganti warnanya agar menyatu dengan warna desain template anda (istilahnya ngeblend) maka anda bisa mengikuti langkah-langkah dibawah ini;

DASHBOARD ► LAYOUT ► PAGE ELEMENTS, klik pada  "Edit" di kotak NAVBAR dan anda bisa memilih 4 pilihan warna berbeda. Pilihlah warna sesuai selera anda.



2.Menghapus Navigation Bar
Jika anda tetap memilih untuk menghapus Navigation Bar ini dengan alasan mengganggu penampilan desain blog maka anda bisa mengikuti langkah-langkah dibawah ini. Sebelum melakukannya lebih baik anda mendownload template anda sebagai back up jika terjadi kerusakan atau eror dalam modifikasi ini. Selanjutnya silahkan anda menuju;

DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND TEMPLATE WIDGET kemudian temukan kode dibawah ini. Kode ini merupakan kode informasi mengenai template seperti judul template, nama pencipta, alamat URL, tanggal release dan update, dan informasi lainnya. Kode ini biasa terletak dibagian awal template dan mudah untuk ditemukan. Jika anda kesulitan menemukan kode ini maka gunakan CTRL+F untuk memudahkan pencarian.

Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Sudah ketemu? Kalau sudah langkah selanjutnya adalah meletakan kode merah dibawah ini tepat dibawah kode diatas.


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


Sehingga tampilannya seperti dibawah ini.


Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Setelah selesai SAVE template dan lihat hasilnya. Selamat mencoba. Gudlak! :D

Cara Menghilangkan Angka Dalam Label

Secara default Label pada template blogger biasanya akan diikuti angka yang menunjukkan jumlah posting yang di beri label yang berkaitan. Terkadang kita tidak ingin menampilkan angka yang tertera dengan alasan yang bermacam. Pada tutorial kali ini akan dijelaskan bagaimana cara menghilangkan angka didalam label tersebut. Mari ikuti langkah-langkah seperti dibawah ini:

DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND TEMPLATE WIDGET
Selanjutnya cari kode seperti dibawah ini. Gunakan CTRL+F untuk memudahkan pencarian.

(<data:label.count/>)

Jika anda sudah menemukan kode merah di atas, silahkan hapus/ delete. Klik tombol Simpan Template dan Selesai. Silahkan lihat hasilnya! Mudah Sekali bukan? Selamat mencoba. Gudlak :D

Cara Menghilangkan Deskripsi Blog

Untuk memaksimalkan tampilan header terkadang judul blog dan deskripsinya harus kita hilangkan karena mungkin tidak sesuai dengan estetika desain blog yang kita inginkan. Nah kalo pada tutorial yang lalu kita berhasil menghilangkan judul blog. Maka selanjutnya pada tutorial ini kita akan mencoba menghilangkan deskripsi blog pada header.

Tanpa banyak cakap lagi ikutin langkah-langkah dibawah ini:
DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND TEMPLATE WIDGET

Selanjutnya cari kode seperti dibawah ini. Gunakan CTRL+F untuk memudahkan pencarian.


#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
}

Nahh kalau dah ketemu, kita bisa tambahkan kode CSS visibility:hidden; biar deskripsi blognya nggak keliatan cara naruh kodenya seperti dibawah ini :

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
visibility:hidden;
}

Kalo udah beres semuanya jangan lupa di Save pengaturannya.
Selesai. Mudahkan?

Cara Menghilangkan Judul Blog

Judul blog berguna untuk memberikan informasi tentang blog kita dan sangat penting dalam pencarian search engine. Judul blog pun juga merupakan salah satu poin penting dari SEO karena judul blog inilah bagian pertama yang di index search engine. Tapi kadangkala judul blog terlihat kurang menarik dan mengganggu penampilan blog.

Biasanya template blogger menyertakan tampilan judul blog dan deskripsi blog sebagai default dan tidak bisa dihilangkan secara otomatis. Maka yang perlu kita lakukan adalah menghilangkannya secara manual melalui menu Edit HTML. Mau tau caranya lebih lengkap? ikutin langkah-langkah dibawah ini:

DASHBOARD ► LAYOUT ► EDIT HTML ► Centang EXPAND TEMPLATE WIDGET
Selanjutnya cari kode seperti dibawah ini. Gunakan CTRL+F untuk memudahkan pencarian.


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

Nah kalau udah ketemu, tambahkan kode CSS visibility:hidden; biar judul blognya nggak keliatan.

Perhatikan cara menaruh kodenya seperti dibawah ini :


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Kalo udah beres semuanya jangan lupa di Save pengaturannya.
Selesai. Mudahkan?