TUTORIAL

Trend 2015

Selasa, Februari 8

Cara Mudah Membuat Menu Horizontal Cantik

Para sobat blogger, selamat jumpa lagi ya, meski hanya di media maya. Saya ingin sharing tentang Cara Membuat Menu Horizontal Cantik, karena tidak semua template blog dilengkapi dengan menu bawaan, baik yang horizontal maupun vertikal. Padahal menu pada blog ataupun website mempunyai manfaat yang besar bagi pengunjung. Menu ibaratnya shortcut atau tombol yang berisi link untuk jalan pintas bagi pengunjung mencari informasi-informasi tertentu yang diperlukan. Menu horizontal biasanya diletakkan di bawah atau di atas header tepatnya di bagian atas blog, sedangkan menu vertikal biasanya diletakkan di sidebar kiri. Di luar sana banyak sekali kita jumpai berbagai model menu. Tetapi kali ini saya hanya akan mencontohkan satu cara membuat menu yang sederhana seperti pada blog ini, sehingga sobat pemula mudah untuk menerapkannya.
Inilah contoh menu horizontalny;



Jika berminat Anda bisa memasang di blog Anda. Langkah-langkahnya cukup mudah, begini;
1. Copy dulu script di bawah ini, .
.menu-solid{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: #ebf225 ;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
}
.menu-solid {
display: inline;
}
.menu-solid a{
float: left;
color: #000;
padding: 9px 11px;
text-decoration: none;
}
.menu-solid a:visited{
color: #cc0000;
}

.menu-solid a:hover, .menu-solid .current{
color: #ffffff;
background: #800000;
text-decoration:none;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}


2. Kemudian bawalah copian itu ke blog Anda, caranya masuk ke blogger dengan ID anda
3. Di halaman Dasbor klik Rancangan

4. Klik edit html  kemudian cari kode --->  ]]></b:skin>  letakkan scrip yang sudah anda kopi di nomor 1 tersebut tepat di atas kode  ]]></b:skin>  lalu klik simpan. (Anda bisa merubah kode yang berwarna kuning)
Setelah langkah ini selesai lanjutkan ke langkah no 5.

5. Selanjutnya copy kode html berikut ini ;
<div class='menu-solid'>
<a href='http://jss-triplernews.blogspot.com'target="_blank">Home</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-daftar-jss-tripler.html'target="_blank">Cara Daftar</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-membeli-posisi-jss-tripler.html'target="_blank">Beli Posisi</a>
<a href='http://sinma68.blogspot.com/2010/09/membuat-acoount-alertpay.html'target="_blank">Daftar AlertPay</a>

</div>

6. Kembali ke Rancangan dan klik tambah gadget, tempat dimana akan Anda letakkan Menu tersebut, (umumnya di bawah header) lalu klik Tambah Gadget
7. Setelah terbuka halaman konfigurasi html, cari dan temukan HTML/JavaScript dan klik


8. Kolom judul; tidak perlu diisi, terus  paste kode script /html nomor 5 di tempat yang tersedia 
9. Sebelum Anda melanjutkan, ganti dulu kode/tulisan yang berwarna merah, sesuai dengan link yang akan anda pasang. Yang berwarna biru adalah nama menu yang akan tampil, silahka diganti sesuai dengan nama menu yang anda inginkan.. Jumlah menu bisa Anda tambah /kurangi sesuai kebutuhan Anda.
8. Jika semua sudah anda kerjakan, terakhir klik tombol Simpan dan sekarang klik lihat blog.

Selesai, di blog Anda sudah bertambah satu lai gadget yang akan semakin mempermudah pengunjung blog Anda mendapatkan informasi dengan cepat.

Selamat mencoba, semoga berhasil



Menarik untuk Dibaca:

21 Comments:

ida aida said...

gak bisa kode ]]> ini ketemu la yang ]]></b:skin&gt ini gak ketemu tak pasang di kode ini malah yg tmpil diatas judul blog kode-kode tok pusing pak!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Makhasin said...

Coba cek sekali lagi ke html, semua blog ada kode tsb dan jangan mudah menyerah, OK.

sogegallery said...

Mas,saya blm berani posting krn Blog saya masih
blm ada menu Hor nya.Coba pasang sendiri gak jadi-
jadi. Apa ada ya situs yg nyediain menu jadi (In
donesia )yg langsung bisa di Copy ? Sukur-sukur Mas bisa bantu saya. Trims.

Makhasin said...

@herycano, tanpa menu kan tetap bisa posting knapa harus menunggu. mulailah menulis dan menu nanti nyusul, dimana kesulitannya, coba baca teliti dan ulangi praktiknya.

Unknown said...

Namun kenapa ditemplate saya ga bisa muncul yach.Mohon pencerahan.Makasih informasinya kawan,salam kenal.Happy blogging.

ALYA-HARIS said...

ALHAMDULILLAH AKU UDAH BISA TERAPKAN MENU HORIZONTALNYA.... TERIMA KASIH BOSSS

Makhasin said...

@ALYA-HARIS sama-sama, trims sudah berkunjung

novhyc said...

cara mengisinya dengan postingan bagaimana..???

Ringtone Lucu Gratis said...

thanks, aku coba dlu gan

Jokam354 said...

thanks atas ilmu nya

Sadar Diri said...

thank's ilmunya, tapi jika ingin mengelompokkan postingan kita (baik yang lama atau yang baru) dalam menu2 tersebut gimana pak?

Makhasin said...

@sadar diri: sama-sama shobat, semua artikel shobat tentu harus dikategorikan/ berlabel dulu sehigga mudah dikelompokkkan dalam menu-menu sesuai keinginan, link label/kategory itulah yg dipasang di menu.

RT cH4NeL said...

BOS KOK PKE LINK ANE KAGA BISA?

Unknown said...

. Maksudnya kode tulisan warna merah di ganti itu gimana caranya ya?

Makhasin said...

@Dini Okta:tulisan warna merah itu kan contoh, silahkan ganti dengan link yang akan anda pasang pada menu2 yang dibuat

Unknown said...

ka buat posting isi menu nya dimana ?
mohon bantuan nya :)
-@AmabellCLP (twitter)
amabellgmail@.com

Unknown said...

jika tidak berupa tulisan bukan link gimana ya gan cara buwatnya?mohon bantuannya

Makhasin said...

@Amabell Sary: Pasanglah link judul posting pada menu maka posting akan terbuka jika menu diklik. kasih emailnya ga benar ya D.

Makhasin said...

@eko yeyen: coba baca posting cara pasang gambar pada header di blog ini.

Obat Kolesterol said...

terima kasih banyak telah berbagi informasi tentang trik membuat menu horizontal di bawah... semoga tuhan memberikan yang terbaik bagi kita semua

Obat Penyakit Varikokel said...

terimakasih banyak gan, sangat bermanfaat sekali artikelnya..

blogger templates | Make Money Online