Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Horizontal Tab Menu di BloGGeR Baru

Setelah diposting sebelumnya kita telah mencoba membuat tab horizontal berdasarkan kode css yang ada di template, kali ini kita akan buat tab baru dengan seluruh kode css baru yang sama sekali tidak berkaitan dengan seluruh kode css bawaan blogger baru. Sekaligus kita juga akan melakukan modifikasi pada kode html template supaya tab horizontal maupun berbagai menu yang lain bisa kita pasang di semua bagian yang dikehendaki.

Horizontal tam menu ini masih menggunakan kode css tanpa tambahan sebuah script sehingga beban pada blog juga tidak akan terasakan, apalagi background image yang kita gunakan juga amatlah kecil. Pembuatan tab ini bisa juga dimanfaatkan sebagai bahan latihan buat sobat blogger untuk melangkah pada pembuatan menu yang lebih kompleks diposting selanjutnya. Meskipun demikian, tidak ada ruginya jika tab menu horizontal ini digunakan untuk menambah kelengkapan blog sekaligus memperindah karena tampilannya yang sangat menarik.

Semua kode tinggal sampeyan copy dan simpan melalui penambahan widget blog tanpa harus upload satupun gambar/images karena semua sudah dalam bnetuk siap pakai. Beberapa perubahan terutama dilakukan untuk menempatkan tab pada posisi yang paling ideal dengan cara merubah margin di kode cssnya. Untuk link dan nama link-nya silahkan dirubah sesuai blog yang sampeyan kelola.

Kode CSS dan HTML Horizontal Tabs Menu-1

<style type="text/css">
.bgsGRmnu{
padding: 0;
float: left;
font: bold 13px Arial;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
border-left:1px solid white;
background: black url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlueRedLineVertV31H1.png) top center repeat-x;
}
.bgsGRmnu li{
display: inline;
}
.bgsGRmnu li a{
float:left;
color:#aad6fe;
padding:9px 11px;
text-decoration:none;
border-right:1px solid white;
}
.bgsGRmnu li a:visited{
color:#4fcafe;
}
.bgsGRmnu li a:hover, .bgsGRmnu li .current{
color: red;
text-shadow:-1px -3px 1px #fff;
-moz-text-shadow:-1px -3px 1px #fff;
-webkit-text-shadow:-1px -3px 1px #fff;
background: transparent url(http://s1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/GraybgNaviV31H318.jpg) center center repeat-x;
}
.boksmnu{
padding:0 0 2px;
border-bottom:2px solid red;
border-left:15px solid #000;
border-right:15px solid #000;
padding-left:1px;
height:35px; background:#000;
float:left;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>

<div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul class="bgsGRmnu">
<li><a href="Link-1">Link Title-1</a></li>
<li><a href="Link-2">Link Title-2</a></li>
<li><a href="Link-2">Link Title-3</a></li>
<li><a href="Link-2">Link Title-4</a></li>
<li><a href="Link-2">Link Title-5</a></li>
<li class="current"><a href="http://gubhugreyot.blogspot.com/">gubhug reyot</a></li>
</ul>
</div>

Cara Menggunakan Kode CSS dan HTML Horizontal Tabs Menu-1

  1. Login to BloGGeR : Lakukan login ke blogger terlebih dahulu.
  2. Dasboard
  3. : Setelah memasuki halaman dasboard, KLIK link Design/Rancangan.
  4. Design/Rancangan : KLIK link Edit HTML.
  5. BackUp Templates : KLIK link Download Full Templates/Download Template Lengkap, kemudian Save in a PC folder.
  6. Tetap di Edit HTML : Cari kode html di bawah ini.
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    Gunakan Ctrl +F untuk mencari kode html tersebut.
  7. Replace HTML Code/Rubah Kode : dengan kode berikut.

    <b:section class='header' id='header' showaddelement='yes'>

    Perubahan kode HTML ini berfungsi untuk memunculkan widget di atas header.
  8. Page Elements/Elemen Laman : KLIK link Page Elements/Elemen Laman.
  9. Add Gadget/Tambah Gadget : KLIK Add Gadget di atas Header (above header).
  10. Add Gadget/Tambah Gadget

    Blog Title (header)

  11. Add a Gadget/Tambahkan Sebuah Gadget : KLIK HTML/Javascript.
  12. Copy-Paste : Copy Kode CSS dan kode HTML Horizontal Tabs Menu, kemudian paste di box yang tersedia.
  13. KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog (open blog).

Catatan/Keterangan

  1. Ganti Link-1 s/d Link-5 dan http://gubhugreyot.blogspot.com dengan link yang akan digunakan.
  2. Ganti Link Title-1 s/d Link Title-5 dan gubhug reyot dengan link baru sesuai dengan link yang digunakan.
  3. Untuk merubah posisi tab (horizontal Tabs position), rubah pada kode CSS :

    <div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">

    top:-30px --> from top
    nilai minus semakin besar akan semakin naik,
    left:10px --> from left

    margin:0px 10 20px 0px;

    digunakan juga untuk posisi semua yang ada di atasnya, kanan, bawah dan kiri.

Cara Memasang Horizontal Tabs Menu di bawah Header

  1. Cari kode (find HTML Code) :

    <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
    <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
  2. Replace HTML Code (Ganti kode HTML) dengan kode HTML berikut :

    <b:section class='header' id='crosscol' showaddelement='yes'/>
    <b:section class='header' id='crosscol-overflow' showaddelement='yes'/>
  3. Lanjutkan cari kode CSS :

    .tabs-outer

    di atas kode tersebut terdapat penanda kode css tab horizontal yang bentuknya seperti ini (remove the red code) :

    /* Tabs
    ----------------------------------------------- */


    Hapus semua kode CSS hingga di atas tanda batas bawah tab seperti di bawah ini:

    /* Headings
  4. Kode yang harus di hapus adalah kode CSS yang berwarna merah (mekipun tidak semua template sama) :

    /* Tabs
    ----------------------------------------------- */
    /*
    .tabs-outer {
    position: relative;
    background: transparent;
    }
    
    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;
    }
    
    .tabs-cap-bottom {
    bottom: 0;
    }
    
    .tabs-inner {
    padding: 0;
    }
    
    .tabs-inner .section {
    margin: 0 35px;
    }
    
    *+html body .tabs-inner .widget li {
    padding: 1px;
    }
    
    .PageList {
    border-bottom: 1px solid $(tabs.border.bevel.color);
    }
    
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
    background: $(tabs.selected.background.color) none ;
    color: $(tabs.selected.text.color);
    }
    
    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    margin-right: 1px;
    padding: .65em 1.5em;
    font: $(tabs.font);
    color: $(tabs.text.color);
    background-color: $(tabs.background.color);
    
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -goog-ms-border-top-left-radius: 5px;
    -goog-ms-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }
    
    /* Headings
    ----------------------------------------------- */
  5. KLIK SAVE Template/Simpan Template.
  6. KLIK link Page Elements/Elemen Laman.
  7. KLIK Add Gadget/Tambah Gadget di bawah header (under the header).
  8. Blog Title (header)

    Add Gadget/Tambah Gadget

  9. Copy-Paste Kode dan simpan di HTML/Javascript.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

18 komentar:

  1. Mas Blog pean bagus..tampilannya.. aku suka... ajarin dong..

    BalasHapus
  2. terimakasih bsekali ilmunya gan bener@ ikhlas bgt anda aku ingin meniru

    BalasHapus
  3. keren bgt gan Blognya... mampir dunk k tmpt ane... skalian tukar artikel atau Link hehehe...

    BalasHapus
  4. Ya Rabb...kpn aku punya blog seperti nich!!!
    Tunjukkan jalan-Mu...

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. mas, bantu aku yang gaptek ini dunk...
    mau bikin : Horizontal Tabs Menu di bawah Header..
    tapi begitu cari html code-nya, kok gak ada d html ku?

    BalasHapus
  7. bos bagus kalee blognya,,

    ane masih belajar dan baru banget nih,
    mohon bimbingannya ya bang,..

    BalasHapus
  8. ane masih baru banget kenal blog, makasih info nya. i will try it. doakan moga berhasil:)

    BalasHapus
  9. bagus blog mas , .. .
    sampai2 terkesan ,,hehehe
    ane baru blajar buat blog ,,mohon bimbingannya y mas ,..
    tlong juga mas lhat blog ane ,.. klo bsa ksi komentar pa yg harus di perbaiki,,

    http://indonesia-complete.blogspot.com

    terima kasih

    BalasHapus
  10. truuus cara ganti warna sama font nyaa gimaanaaaa?????

    BalasHapus
  11. mantap...thank's gan... bs di coba neh...

    BalasHapus
  12. tahnk's berat om....
    sangat bermanfaat bangt nih blog you bwt pemula kaya gw.
    sekali coba gw langsung mengerti dan berhasil merubahnya. sebagai tanda trimaksih, akan gw pasang link you diblog gw. mohon izn'a.

    BalasHapus
  13. sambung treus bro aku masih baru ni bagi inpo dong

    BalasHapus
  14. nice inpo izin mencoba yaa

    BalasHapus
  15. 1. Pro .:C:.H:.E:.A:.T:.E:.R:.
    2. Silahkan buka kembali posting "Cara Membuat Horizontal Tab Menu di Blogger Baru" dan ganti kode CSS dengan yang telah terupdate (08 Agst 2011). Dua link background telah diperbaharui dan silahkan copas! Berikut link dua background dimaksud :
    - http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlueRedLineVertV31H1.png
    - http://s1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/GraybgNaviV31H318.jpg
    - Semoga bermanfaat!!

    Salam

    gubhugreyot

    BalasHapus
  16. gan tolong ajarin lahk tpi jgn rumuit kaya gini bingung

    BalasHapus
  17. keren bgt sh blooggggnya jdi pengiinnn

    BalasHapus

 
GR | Edited by | gubhug reyot