Bloggroll

Jumat, 16 Desember 2011

Cara Membuat Menu Horizontal


Ketika anda memasang sebuah template baru, lalu di template tersebut tidak menyediakan widget untuk menu nya. Tidak perlu khawatir, karena kali ini saya akan mengajarkan Cara Membuat Menu Horizontal nya. Menu horizontal adalah kumpulan menu yang berbaris horizontal.  Jadi, dengan menu ini teman-teman dapat mengatur isi menu di blog nya masing-masing. Ini sangat memudahkan pengunjung agar dapat menemukan materi atau artikel yang ingin dibaca atau dicari. Meskipun ada gadget Search dari google untuk blog kita, tapi ratarata pengunjung lebih sering menggunakan daftar menu atau pun label. Menu horizontal ini terletak di bagian atas pada blog kalian.


Berikut cara cara membuat menu tersebut :
1. Login ke blogger.com masing- masing.
2. Lalu, klik Tata Letak atau yang versi terbaru blog sekarang yaitu Rancangan.
3. Lalu pilih Edit HTML.
Disitu terlihat kode-kode Javascript yang mungkin anda kurang mengerti. Janganlah pernah mengubah simbol-simbol atau karakter yang ada di dalamnya jikalau anda belum paham. Ikuti langkah dibawah ini, agar pengeditan tidak gagal.
4. Selanjutnya tekan CTRL + F untuk mencari sebuah karakter yang ingin diedit.
    Tuliskan dalam kotak search, kode berikut ini :
]]></b:skin>
Maka, akan langsung terlihat kode tersebut didalam edit HTML nya.
Lalu masukkan kode di bawah ini tepat diatas kode tersebut.

.horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
.horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
.horizontal-menu li{display:inline; margin:0}
.horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
.horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}

Lalu klik SIMPAN TEMPLATE.
Tulisan yang berwarna biru, merupakan ketebalan garis pinggir di bawah menu. Bagi teman-teman yang tidak menginginkannya silahkan ganti 1px dengan 0px.
Sedangkan tulisan berwarna orange, Adalah warna background ketika disorot, ketika pengunjung menyorot menu pada blog anda pasti warnanya akan berubah menjadi orange. Anda dapat menggantinya dengan kode warna yang lain.
Selanjutnya yang harus teman2 lakukan yaitu menaruh kode HTML menu horizontal pada elemen add gadged bagian header (bagian atas blog)
Bagi teman2 yang ternyata template-nya gak ada elemen add gadget pada bagian headernya, maka bisa ditambah dengan menggunakan trik yang berada di postingan "cara menambah add elemen pada bagian header", pilih add elemen di bawah header, bukan yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="horizontal-menu">
<li>

<a href="http://mediashared-liquid.blogspot.com">HOME</a>

<a href="http://mediashared-liquid.blogspot.com/2009/11/Gombal20%Gembel">DAFTAR ISI</a>

<a href="http://mediashared-liquid.blogspot.com/2009/11/english-post.html">ENGLISH</a>

<a href="http://mediashared-liquid.blogspot.com/2009/12/arabic-blogger-tutorial.html">
العربية</a>

<a href="http://mediashared-liquid.blogspot.com/2009/12/sekilas-info.html">SEKILAS INFO</a>

<a href="http://mediashared-liquid.blogspot.com/2009/11/link-to-this-blog.html">LINK AND BANNER</a>

<a href="http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2" target="_blank">FEED</a>

</li>
</div>
</div>


Klik Simpan


Yang perlu teman2 ubah adalah pada bagian2 yang telah saya tandai denagn warna biru itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex: http://mediashared-liquid.blogspot.com ===>> HOME

Bagaimana...mudahkan?
Mungkin beberapa rekan blogger merasa trik di atas rada susah atau mungkin ribet, maka gak sah khawatir...masih ada alternatif lain, yaitu cara membuat menu horizontal secara instan. Tentu ini hanya membutuhkan waktu yang relatif pendek untuk membuatnya. Oh iya...gak hanya menu horizontal yang dapat teman2 buat, menu vertikal juga bisa...dan kerennya lagi bisa milih2 gaya/style suka2 kita. Biar gak kelamaan, langsung aja kunjungi web: Accessify.com

Berhubung itu webnya bule, jadi teman2 bisa menggunakan jasa Google translate.
Terima Kasih. Jangan lupa komentar apabila ada kesulitan. ^^

10 komentar:

serbadijual mengatakan...

Tks sobat, tp saya perlu pencerahan nihh. bila ingin mengisi suatu kata atau gambar di dalam buttom gimana ya. yg di tulis di atas sdh di praktekan namun bila di klik larinnya k blog situ...............

Scr888 Malaysia mengatakan...

I really love your weblog, Its great ntc77 net apk scr888 casino game to find not absolutely everyone is just posting a ton of rubbish these days!

flag mengatakan...

Thanks for sharing info. Keep mega888 random jackpot
up the good work...We hope you will visit our blog often as we discuss topics of interest to you

Great Awan mengatakan...

Subsequently, after spending many hours on the internet at last We've uncovered an 168 8099 apk scr888 casino game 4 individual that definitely does know what they are discussing many thanks a great deal wonderful post.

Great Awan mengatakan...

Spot on with this article, I really think this website needs more attention.  I'll probably rapid slim diet pills be back to read more, thanks for the info.

918kiss Malaysia mengatakan...

You have a very good site, well constructed and very interesting i have bookmarked you, hopefully you keep posting new stuff, many thanks



Joker123 Malaysia , joker123 apk android , joker123 online , joker123 slot download , joker123 login , joker123 apk new version , download joker123 iphone , joker123 test id

918kiss Malaysia mengatakan...

You got a really useful blog I have been here reading for about half an hour. I am a newbie and your post is valuable for me.



Joker123 Malaysia , joker123 apk android , joker123 online , joker123 slot download , joker123 login , joker123 apk new version , download joker123 iphone , joker123 test id

OneGold88 mengatakan...

Thanks for taking 918kiss app the time to discuss that, I 918kiss ios really feel strongly about it and love learning more on that topic. If achievable, as you gain 918kiss apk download competence, would you mind updating your blog with more information? It is highly helpful for me.

methew william mengatakan...

The blog article very surprised to joker123 vip
me! Your writing is good. In this I learned a lot! Thank you!

Woodman J Parker mengatakan...

Ultra Fast Keto Boost usually, a fashion is monitored with repetition assessments. If the outcomes stay excessive, they show that there's no suitable control of blood glucose and the health practitioner
will try to decide the reason to modify the medication, weight-reduction plan and different elements which can be affecting this manipulate.
https://purefitketodietplan.com/ultra-fast-keto-boost/

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger