Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam

Menambah koleksi menu tutorial, saya akan memberikan tutorial membuat menu horizontal sebagai navigasi menu, menu label horizontal kali ini di dominasi dengan warna gradasi merah hitam. Untuk anda yang ingin membuat menu navigasi horizontal, silahkan ikuti tutorial yang saya berikan kali ini.


Cara membuat menu horizontal



Untuk demo dari menu horizontal yang saya maksud, silahkan anda kunjungi demo menu horizontal di black csstyle

Untuk tutorial pemasangannya, terlebih dahulu kita akan menempatkan kode HTML pada widget blog anda, silahkan ikuti petunjuk gambar berikut:

1. tata letak

2. tambahkan gadget

3. html

Kemudian anda pastekan kode berikut pada jendela konfigurasi HTML/Javascript :

<ul id="tsa-extrapedas">
<li><a href="alamat blog anda">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Silahkan anda rubah tulisan yang saya beri warna merah di atas dengan alamat tautan dan anchor text yang ingin anda buat.

Menambahkan CSS



Selanjutnya kita akan menambahkan CSS pada menu navigasi yang telah kita buat, silahkan ikuti tutorial gambar berikut :

1.menu template<

2.tambahkan css

Pastekan kode CSS berikut di jendela sebelah kanan

#tsa-extrapedas {width: 850px; height: 70px; border-left:2px solid black;border-right:2px solid black;border-top:4px solid black;padding: 0 auto; margin: 0 auto;background-color:#4d3131;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000103', endColorstr='#4d3131');background-image:-webkit-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-moz-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-ms-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-o-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);}
#tsa-extrapedas li {list-style: none; float: left; margin: 0 11px;}
#tsa-extrapedas li:first-child {margin-left: 10px;}
#tsa-extrapedas li a {display: block; width: 100px; height: 40px; padding:4px;margin:auto;background-color:#cc1d1d;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d2def5', endColorstr='#cc1d1d');background-image:-webkit-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-moz-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-ms-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-o-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
font: bold 17px Helvetica, Arial, Sans-serif;text-align:center; color:red; text-decoration: none;border-bottom:#a41a1a;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
#tsa-extrapedas li a:hover,#menu li a:focus,#tsa-extrapedas li a:active{font:bold 24px Helvetica, Arial, Sans-serif;color:#dcdcdc;background:transparent;border-bottom:2px solid red}


kemudian klik tombol terapkan ke blog.
Lihat hasilnya pada homepage blog anda, jika anda suka dengan tutorial cara membuat menu navigasi horizontal yang saya berikan kali ini, silahkan bantu blog saya ini dengan tombol share yang terletak di bawah posting kali ini, dan jangan lupa berkomentar.
Semoga bermanfaat
al ghifari
Artikel Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;

53 comments

1/20/2013 10:13:00 PM

Terima ksih atas tutorial bloggernya gan,, saya coba dulu.. mampir dan komentar balik ya.. :)

1/20/2013 10:30:00 PM

@PutuGiBagi- Terima kasih juga atas komentarnya, pasti saya kunjungi balik mas.

1/21/2013 05:33:00 AM

Info yang menarik sob, salam kenal juga sebelumnya

1/21/2013 11:34:00 AM

Makasih infonya bos tolong mampir balik ya sekali sekali komentar di blog baru ane hehe

1/21/2013 02:10:00 PM

kunjungan balasan sob,
:)

tutorialnya bagus sekali sob, sangat bermanfaat

salam berbagi

1/21/2013 03:35:00 PM

Berkunjung kawan ..makasih atas infonya

1/21/2013 05:42:00 PM

@inblogspot.comSalam kenal juga sahabat Beni Iskandar, dan terima kasih atas komentarnya.

1/21/2013 05:55:00 PM

@Woco Langsung meluncur ke blog nya mas, dan terima kasih atas komentarnya.

1/21/2013 05:59:00 PM

@andieshinigamisalam berbagi juga mas, dan terima kasih atas komentarnya.

1/21/2013 06:00:00 PM

@Obat Tradisional Liversama-sama mas, terima kasih juga atas komentarnya.

1/22/2013 07:23:00 AM

bermanfaat banget !!

kunjungi Balik ya :www.websinjai.blogspot.com

1/22/2013 11:32:00 AM

ga ada contoh jadinya mas??

1/22/2013 12:22:00 PM

sip gan, thanks ea udah share, hehehe

1/22/2013 04:17:00 PM

@Sinjai BlogPasti saya kunjungi balik sobh, terima kasih atas komentarnya.

1/22/2013 04:19:00 PM

@guntaraajie-versiondi atas sudah saya sertakan link demo nya mas, silahkan di periksa lagi, hehe..
Terima kasih atas komentarnya

1/22/2013 04:39:00 PM

@Achmed Islamic HernawanSama sama sahabat Achmed, terima kasih juga atas komentarnya.

r10
1/22/2013 07:01:00 PM

semoga bermanfaat bagi yg membutuhkan

1/22/2013 08:15:00 PM

@r10amin mas, semoga bermanfaat juga bagi saya dan blog ini.
Terima kasih atas komentarnya

1/23/2013 11:14:00 AM

agak ribet ya..
kurang suka coding.. :D

1/23/2013 11:15:00 AM

ni nih yang dibutuhin banyak orang.. :D
thanks sob..

1/23/2013 04:32:00 PM

@pondokgueMasa sih mas?hehe.. perasaan masih panjangan css nya google button agan komentator di bawah saya ini,hehe..

1/23/2013 04:35:00 PM

@Cupitdan komentar mas "Cupit" yang dibutuhin saya,hehe..
terima kasih atas komentarnya.

1/23/2013 08:27:00 PM

Kalau saya udah pas sekali template untuk buat menunya sob,,jadi cukup posisi default aja dulu.

1/23/2013 10:09:00 PM

@Abed SaragihBetul sekali mas Abed, tutorial ini memang lebih cocok untuk yang senang utak-atik template bawaan blogger, dengan gaya personal diluar web art.
Terima kasih atas tambahan komentarnya mas.

2/18/2013 06:57:00 PM

trimakasih gan atas informasinya, penjelasan gan membantu ane yang baru belajar, alian orang awam,,

2/19/2013 08:06:00 PM

Wah, patut untuk dicoba nih..
Terima kasih infonya..

Mampir gan...

2/20/2013 08:20:00 AM

@Blogger Muntok silahkan mas, terima kasih juga untuk komentarnya.

Terima ksih atas info tutorial bloggernya gan,, saya coba dulu.. mampir dan komentar balik ya.. :)

Mantap bro.... maju terus

2/21/2013 07:51:00 AM

@cara mendapatkan uang dari internet Setiap pemberi komentar pasti saya kunjungi balik sobat, terima kasih atas tambahan komentarnya.

2/21/2013 07:57:00 AM

@Lebih Baik Jadi Blogger Daripada Jadi Koruptor wah,wah, wah.., anchor text nya keren tuh mas, lebih baik jadi blogger ya?hehe..
terima kasih untuk tambahan komentarnya.

2/28/2013 11:44:00 AM

TERIMA KASIH gan,, tp kok ga ada perubahan apa" ea...

2/28/2013 11:57:00 PM

@Wira Angkasa maksudnya tidak ada perubahan gimana ya mas? coba tambahkan gadget jangan di tempat bagian tab biasanya berada, bisa di bagian sidebar atau footer untuk nantinya di seret ke bawah header.
terima kasih komentarnya.

3/02/2013 11:22:00 PM

Wah agan y satu ini baik banget y....
mau kasih backlink.
Semoga sukses GAN :D

3/02/2013 11:28:00 PM

Iya kenalin, aku traniner public speaking. ku suka bergabi.
Makasi atas linkya :D

3/02/2013 11:49:00 PM

@kursus public speaking sama-sama mas, salam kenal juga, terimakasih juga untuk komentarnya.

3/04/2013 01:49:00 PM

terima kasih gan

3/04/2013 07:26:00 PM

mantap tutorialnya gan..

3/21/2013 12:26:00 PM

mantap gan tutor nya ..

3/31/2013 12:17:00 AM

Wah, saya telah lama melakukan blogwalking, tapi hasinya minim, mengapa mas?
salam kenal

3/31/2013 10:08:00 PM

@noerdin- Maksudnya hasil minim gimana mas Noerdin?mungkin karena topik nya banyak jadi optimasinya terpecah-pecah, tapi trafficnya lumayan qo, apalagi pengunjung unik perhari nya(maaf, saya intip histats nya)
salam kenal juga mas.

5/01/2013 07:28:00 AM

Terimakasih Gan
http://ilhamshare301.blogspot.com/

5/05/2013 10:39:00 PM

sangat bermanfaat

5/18/2013 04:04:00 AM

Thank Tutorial blognya !

5/18/2013 01:41:00 PM

@khaerun edede jdi ad tommi ini menu drop downnya !!

@al gifari follow blog aku juga gan !!

6/08/2013 11:17:00 AM

sip gan

6/19/2013 11:44:00 AM

mntap gan artikelnya

7/03/2013 08:32:00 AM

oke

7/09/2013 03:07:00 PM

Thanks mas bro udah nulis artikel tutorialnya, salam kenal ya

7/11/2013 01:17:00 AM

Makasih mas tutorial nya, sukses selalu

10/03/2013 08:24:00 PM

mampir dulu ah. sambil ninggalin jejak... :)

http://www.tokoumami.com/

10/06/2013 11:02:00 AM

mantap gan

http://www.yasaefa.com/

11/08/2014 07:37:00 PM

This paper is so nice and interesting to note, as the writing is on the website saatnya that discusses the kata kata galau, bisnis online and many other interesting posts.

Post a Comment

Copyright © The Art of SEO

Designed By: the Art of SEO