Pengikut

Salam blogger, Sebuah blog akan menjadi kurang lengkap jika belum dipasang tab menu yang dapat dijadikan pedoman oleh pengunjung untuk melihat menu yang terdapat dalam blog tersebut. Kali ini saya akan sedikit berbagi Trik Blogger kepada sobat semua, yaitu cara membuat tab menu horizontal. Sebenarnya banyak cara untuk menampilkan menu tersebut misal dengan search di google, atau dapat juga dengan cara membuat sendiri dengan sofware khusus untuk membuat tab menu, Ikitu tutorial dibawah ini.

Berikut Langkah-langkah Membuat Tab menu Horizontal :
1. Login ke account blogger sobat
2. Klik menu Tata letak
3. Tambah gadget dan pilih html/javascript
4. kemudian copy kode di bawah ini
<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml>
<style type="text/css">
<!--/* CSS Tabs */
#navcontainer {
background: #6C82B5;
border-top: 5px solid #32527A;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}
#navlist {
list-style: none outside none;
margin: 0px;
padding: 0;}
@media all {
#navlist {
text-align: center}}
#navlist li {
bottom: 0px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;}
html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;}
#navlist a, #navlist a:link, #navlist a:visited {
background:#999999;
border: 1px solid #FFF;
bottom: 10px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;}
#navlist a:hover {
background: #e6e6e6;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;}
#navlist a:active {
background: pink;
bottom: 0px;
color: blue;
position: relative;
right: 0px;}
#navlist li#active {
background:#369 ;
bottom: 1px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;}
html>body #navlist li#active {
background: #000;
margin: 0 2px 0 2px;}
#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #808080;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 10;
color: ;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;}-->
</style>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="http://boytriks.blogspot.com/search/label/Tips%20Blogger">Trik Blogger</a></li>
<li><a href="http://boytriks.blogspot.com/search/label/Tips%20Facebook">Trik Facebook</a></li>
<li><a href="http://boytriks.blogspot.com/search/label/Tips%20Internet">Trik Internet</a></li>
<li><a href="http://boytriks.blogspot.com/search/label/Tips%20Komputer">Trik Komputer</a></li></ul></div>
</!doctype>
Keterangan :
  • Gantilah tata warna yang ada sehingga penampilannya berbeda dengan EPG Studio
  • Gantilah huruf yang berwarna merah dengan menu pada blog and
Selamat mencoba dan semoga bermanfaat

Posting Komentar

  1. Makasih infonya gan^^
    Sukses terus ya buat blognya^^

    BalasHapus
    Balasan
    1. iya sama sama gan, makasih komentarnya

      Hapus
  2. mas boleh tanya nih. gimana bikin tab menu dropdown kaya mas yang diatas yang ada home, daftar isi, tips & trik dan lain-lain... boleh tau gak caranya gimana ? makasih sebelumnya..

    BalasHapus
    Balasan
    1. kalo untuk yang itu bawaan template nya gan

      Hapus
  3. Sini Ya mas :)
    http://titaniumout.blogspot.com

    BalasHapus
    Balasan
    1. iya siap, thanks buat komentarnya

      Hapus
  4. kalo untuk nambahin menu tab nya giman? bisa di share g mas?

    BalasHapus
    Balasan
    1. Kalo nambahain menu tab nya tinggal edit di html box yang ada di blogger nya,, makasih

      Hapus
  5. klu cara ngisi nya gmna ya gan? maklum newbie di dunia blog

    BalasHapus
    Balasan
    1. tinggal ganti tulisan yang warna merah merah itu gan... kalo pengen lebh banyak.. tambahin aja

      Hapus
  6. Min, gimana caranya ganti warna fontnya ya? mohon bantuannya :)

    BalasHapus
  7. Terimakasih banyak mas, sangat membantu sekali artikelnya..

    BalasHapus
  8. gan kalau sy mau ganti warna nya gmn yah

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!