Laman

Terima Pendaftaran Admin Blog ini, buat update artikel apa aja, Bebas!!.. Hubungi Facebook (Pesan) facebook.com/davidrakafajri

Cara Membuat Menu Navigasi Horizontal Glossy Di Blog


Cara Membuat Menu Navigasi Horizontal Glossy Di Blog - Kembali di postingan kali ini. Saya akan memberikan suatu tutorial blogger Cara Membuat Menu Navigasi Horizontal Glossy Di Blog. Sudah tahu Navigasi Glossy atau belum? jika belum berikut screenshotnya.


New+Picture

Keren gak? Tetap mau melanjutkan? Baiklah, langsung saja berikut tutorialnya.

1. Login Ke Blogger Sobat.

2. Masuk Edit HTML

3. Masukkan kode berikut di atas ]]></b:skin>

.glossymenu{

    position: relative;

    padding: 0 0 0 34px;

    margin: 0 auto 0 auto;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIGYdmTW3XNE_ADSFQwadAAKM1LVOFAckkZH3iq7vDeAe59fj2yG6rOsQZcIBaqOohVUQpQwcpf_Mp2JdnYQXyeOXcKN005TaNE7TkSAQDfw50iG1nHQVnhcKIvwNVDxA-ZIIDaI5Vup4/s1600/maskolis+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/AVvXsEg8RuRSHl7xlBgzyeBcOLcb0knJoA3CRXcouOlaggLCSbdkouVJHbyWnswjt8jYVj_L-84oCrhyIFWEV-mSxpWksjotQ_BpkCb-WNDgJncLsRHoSUkpD6qneEPD943Lb3mKKQiqNhriIJw/s1600/maskolis+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/AVvXsEief3tUGCMFwhGBg__spceXmcFzCb1qJH_vj5P5OmSP_BGDNlMy5J20PM5gYj-AWfMDYosgq_5p7KVVb2XgeSd4I5xaTnTYUWqdo8PnLvWHetqZocGNRSrdG954O_ib9M8vQEu5bynww1c/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/

}

4. Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :

image_thumb%5B2%5D

Silahkan upload dulu image diatas ke tempat hosting masing-masing.

5. Dan yang terakhir, masukkan kode berikut diatas <div id='header-wrapper'>


<ul class='glossymenu'>
<li class='current'><a href='http://BLOG-KAMU.blogspot.com/'><b>Home</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
<li><a href='http:/BLOG-KAMU.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
</ul>

6. Simpan dan lihat hasilnya


Sumber : http://linggarbloggersejati.blogspot.com/2013/01/cara-membuat-menu-navigasi-horizontal-glossy.html#ixzz2IDL97Y28

Tidak ada komentar:

Posting Komentar