Kamis, 10 Februari 2011
Membuat Menu Navigasi Horizontal Glossy di Blog
Diposting oleh
ayo Indonesia
Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.
Langsung saja. berikut ini tutorial membuat glossy horizontal menu
- Login ke blogger dengan akun anda
- Kemudian pada dasbor klik Rancangan >> Edit HTML
- Tambahkan kode CSS berikut diatas tag ]]></b:skin>Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB (http://www.Download Disini.co./) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUZGurA5R2kJC8gPyJ801r-UgjmR4X69pdA4Psj5nP3Mo3xc2gnm8tb6dBtHNOCv8uWEY5rWmKW7lTRbAZrR9LB5AfNJrU2C48FwSGV4pCTlq3C3JPq3RblP4eojacY0IHgl2KC4FkUQY/s1600/Download Disini+menu.png) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNg_sdl_ypEm-C1ZzhVwGloS-ft_U-Y4vEwXjHLgHrkzR2JlcGFT_K5lXmN0IA9ZBaYbc4RSP32V9x4mxLAm5P4IWCjNXiRbbYYptAXJJ4TQTfn931KfzS-oKbUV3WaMc-sTTO7uwSyA0/s1600/Download Disini+nav.png) no-repeat; /*left tab image path*/
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2mELomcludAY_6d4ZgRBiRkvW-Kp3l_BjF8E-fKrdoimcXd5lTM6qjZYtTUtMjoQKvqSqI3EkflkatAj-QUH5XYI7ceK5U-PtdIFq7Yeicx0H883vgiHHFV7V5CmL9BZ5G8Zacsy0CIM/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
} - Silahkan upload dulu image diatas ke tempat hosting masing-masing.
- Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'> <ul class='glossymenu'><li class='current'><a href='http://freedownloadcopasthemes.blogspot.com/'><b>Home</b></a></li><li><a href='http://freedownloadcopasthemes.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li><li><a href='http://freedownloadcopasthemes.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li><li><a href='http://freedownloadcopasthemes.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li><li><a href='http://freedownloadcopasthemes.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li><li><a href='http://freedownloadcopasthemes.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li></ul>
- Temen-temen bisa edit link dan anchor teks kode HTML diatas
- Terakhir Save template anda
Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....
Label:
JQuery,
tutorial blog
Blog Archive
-
▼
2011
(496)
-
▼
Februari
(47)
- Cara Daftar Google Adsense Melalui Docstoc
- Cara Daftar Google Adsense Melalui Indyarocks
- Kenyataan Nasional Melalui Lapangan Sepakbola
- Pesan Kematian Dari Seorang Sahabat
- Mustahil Kalau Tuhan Tidak “Terlibat”
- Pahamilah Makna Kematian dengan Benar !
- Text To Hex, Text To Base 64, URL ( Text Encode & ...
- Kita Cemburu Pada Rakyat Irak
- Jangka Pendek dan Menengah Saya “memilih” Mayalsia...
- Siapa Takut? Ketika Tuhan Tidak Lagi Ditakuti……
- Sosok Tuhan Yang Menakutkan
- Yang Benar Adalah.....................
- Kenapa Kita Harus Meyakini Tuhan?
- Masa Bodoh Dengan Hari Esok
- Singa Tanpa Buntut, Telinga dan Perut
- Sudahkan Anda Bermurah Hati?
- Bayi Di Atas Atap
- Maaf Jika Nenek "Fuck You" Tersinggung
- Kepada Blogger Yang Terhormat Bolehkah Saya Pasang...
- Anda Tidak Akan Memahami Artikel Ini
- Hati Kita Menderita Sakit Kronis
- Kemarahan
- Kepada Yang Terhormat Umat Islam Di Indonesia
- Hidup Sesudah Mati
- Membuat Menu dTree di Blogger
- Membuat Menu Horizontal Animasi di Blog
- Membuat Menu Navigasi Horizontal Glossy di Blog
- Membuat Effect JQuery Link Nudging di Blog
- Membuat Multi Level Drop Down dengan jQuery
- Membuat Info Panel Slide Vertikal dengan jQuery
- Indonesian Hacker File Uploader
- Menambah Add Ons Feedburner Pada Browser di blog
- Menghilangkan Link Posting Lama dan Posting Baru d...
- Menghilangkan Show Older Post Pada Blogger
- Memasang Change Font This Blog di Blogger
- Memasang Text Resizer di Blog
- Membuat Chatbox Slide Vertikal Dengan jQuery di Blog
- Cara Meningkatkan Feedburner Readers di Blog
- Membuat Daftar Isi Dengan jQuery Accordion
- Membuat Efek Image Zoom dengan Jquery
- Membuat Sliding Login/Register Form Panel di Blog
- Memasang IP Address di Blogger
- Memasang Disable Right Click di Blog
- Menyembunyikan Nav Bar di Blogger
- Cara Mendaftarkan Blog di Google Adsense
- Tips Dasar-Dasar SEO
- Menambah Icon/Gambar Pada Judul Postingan Blog
-
▼
Februari
(47)