Cara Membuat Menu di Blog

Menu blog merupakan navigasi yang digunakan untuk mempermudah pengunjung untuk mencari artikel yang dia cari. Untuk mendesain menu pada blog kita harus menyesuaikan dengan template blog kita, pada dasarnya menu pada blog terbagi dua yaitu menu horizontal dan menu vertikal. Menu horizontal pada blog pada dasarnya diletakkan melintan dibawah header namun terkadang ada juga yang meletakkannya diatas footer. Sedangakn menu vertikal biasanya diletakkan pada sidebar kiri atau kanan.

Blogspot pada dasarnya tidak menyediakan pengaturan yang memungkinkan untuk dimodifikasi, namun blogspot merupakan open source yang bisa dirubah menurut keinginan blogger. Terbukanya blog akan sangat menguntungkan blogger untuk bisa memodifikas blog masing-masing.

Pada artikel ini Blogger Tutorial akan menjelaskan cara membuat menu profesional pada blog dengan menggunakan Css menu generator untuk membuatnya buka www.mycssmenu.com

Pilih salah satu menu, baik itu horizontal maupun vertikal, dibawah ini adalah salah satu contoh menu horizontal, dan pilih Costumize jika sudah mendapakan menu yang anda cari.

Setelah itu anda akan dibawa ke tab halaman lain, Tips 1#  adalah petunjuk dan sambutan selamat datang bagi anda. Jika ingin membaca tips dan trik sebelum memulainya anda bisa langsung menekan tombol Next, atau close jika anda sudah mengerti dan langsung mulai cara membuat menu css di blog anda.

Tahapan selanjutnya adalah, anda akan dihadapkan dengan dua kolom interface, sebelah kiri adalah Css styles yang berfungsi untuk merancang atau mendesain tampilan serta animasi css menu pada blog anda.  Sesuaikan warna dan jenis huruf serta animasi yang anda pakai.

Pada artikel ini kita mengambil contoh membuat menu horizontal, tahapan selanjutnya adalah membuat teks menu dengan cara merubah default dari Css menu. Untuk merubahnya, klik kanan dan pilih "Edit Text/URL" pada menu tersebut, tampilannya akan terlihat seperti gambar dibawah ini.

Pada bagian Text/URL ganti dengan teks menu kamu, biasanya diawali dengan menu "Home/Beranda" dan untuk URL ganti dengan alamat url blog yang kamu inginkan. Nah, untuk sub menu dibawah rubah dengan cara diatas, dan jika kamu tidak memerlukannya hapus "delete item" dan untuk menambah sub menu kamu tinggal pilih "Add sub menu".

Setelah merancang desain tersebut baik dari Css Styles dan interfacenya, pilih "save" pada menu bagian atas. Copy kode yang diberikan ke dalam notepad. Buka dashboard blog kamu --> Rancangan --> Tambah Gadget dan pilih HTML/Javascript, dan copykan kode tersebut ke dalamnya dan simpan. 

Catatan : Kode yang diberikan biasanya menampilkan copyright, namun itu terserah anda apakah ingin menghapus copyright tersebut untuk tampilan blog yang profesional, namun dosa ditanggung sendiri ya..^_^

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

Kode CSS:

/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

Kode HTML:

<!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget

7. Setelah pop up window muncul, pilih opsi HTML/Javascript

8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:

 

9. Klik save.

10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

Cara membuat menu dibawah header di Blog

Membuat menu header blog itu sangat mudah, kita hanya perlu menambah beberapa kode. Contoh menu itu adalah Home / Beranda / Depan / Halaman utama , Menu Contac, menu Profile, menu Disclaimer, dan menu-menu lain yang ingin sobat buat. Manfaatnya adalah mempermudah user / pengunjung blog bernavigasi di blog kita, sehingga memperbesar pageview.

Nah, menu-menu diatas tergantung kebutuhan sobat, jika sobat merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, namun yang perlu diperhatikan agar berhasil adalah layout blog sobat harus sama atau mirip dengan template yang saya gunakan.

Langkah-langkah dibawah sudah saya uji coba di blog DEMO saya, dan berhasil. Sebelum memulai langkah-langkah dibawah backup terlebih dahulu template blog sobat.

Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blog sobat, lalu ke menu Rancangan >> Edit HTML,  centang ' Expand Template Widget'

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin>

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

]]></b:skin>

Perhatikan kode yang di cetak tebal, untuk kode merah adalah warna yang tampiannya bisa sobat ganti dengan kode warna html. KLIK Disini untuk mengetahui kode warna HTML.

Kemudian tebal hitam adalah size jarak antar menunya bisa sobat rubah jika ingin merubahnya.

5. Save template lalu klik Elemen Laman atau klik rancangan.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut

<a href="http://www.masterendi.com " class="navigation">HOME</a>
<a href="http://http://www.masterendi.com/p/rekomendasi.html " class="navigation">CONTACT</a>
<a href="http://www.masterendi.com/p/buku-tamu.html " class="navigation">BUKU TAMU</a>
<a href="http://www.masterendi.com/2011/01/links-sahabat-master.html " class="navigation">LIKS</a>

Ganti yang dicetak tebal dengan keinginan sobat.

7. SAVE lalu lihat hasilnya..

Cara pasang jam di blogger

Banyak sekali sahabat blogger baru yang menanyakan bagaimana cara pasang jam di blogger, aksesoris ini ternyata banyak juga peminatnya terutama kau hawa yang sangat mengetahui akan arti kecantikan yang akan dituangkan dalam sebuah blog. Jujur om sangat tidak menyarankan untuk memasang jam pada blog kalian, selain bikin lambat page load juga kurang terlalu berguna, coba baca artikel om sebelumnya 17 Tips agar halaman blog tampil Profesional. Walaupun sudah banyak para blogger yang mengetaui cara pasang jam ini tapi tidak begitu bagi blogger pemula yang baru memulai membuat blog tentu perlu tahapan dan bimbingan jadi gak ada salahnya untuk memasang aksesoris ini jika dirasa berguna :). Layanan gratis aksesori jam sangat banyak, namun kali ini om hanya menjelaskan cara pasang jam menggunakan layanan gratis dan paling banyak digunakan http://www.clocklink.com/

Langkah-langkah pasang jam di blogger sebagai berikut:

1. Klik alamat http://www.clocklink.com/
2. Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php 
3. Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
4. Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
5. Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
6. Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
7. Copy atau Simpan kode yang telah dipilih untuk sementara waktu
8. Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
9. Selesai :) dan lihat hasilnya.

Contoh jam :


Selamat mencoba dan happy Blogging :)