Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

CSS menu : tabs6

Setelah melihat perkembangan penghasilan kang rohman dari iklan yang ada di blog ini,
akhirnya kang rohman berubah fikiran. Apanya yang berubah? begini ade-ade, teteh-teteh,
bapak-bapak, ibu-ibu, dan sebangsanya .
Dulu, untuk download template atau nerangin cara pasang menu navigasi, para pengunjung blog ini sengaja saya
lempar alihkan ke blog saya yang berbahasa inggris dengan maksud agar
blog tersebut mendapatkan traffic yang cukup lumayan dan alih-alih berharap semoga saja
ada yang berbaik hati mengklik iklannya. Namun sekarang semuanya mungkin tidak akan terjadi lagi,
sekarang kang rohman akan tulis semuanya di sini, download di sini dan silahkan baca sepuasnya

Sudah ah ko kayanya jadi sombong begitu..hihihi.

Untuk tulisan pertama mengenai menu navigasi, yang saya bahas adalah
menu navigasi yang di beri nama Tabs6. Ini bukan buatan
kang rohman, namun buatan orang lain yang sudah di modifikasi agar bisa
di pake di blogspot. Namun untuk menghargai desainer nya, tolong jangan
di hilangkan credit pada kode css nya ya. Untuk skrinsut
menu navigasi ini adalah sebagai berikut :

 

 

 

Kalau anda berminat, silahkan baca tutorialnya sampai selesai.Namun kalau tidak
berminat,mending cari artikel lainnya yang lebih menarik .

Jika anda merasa tertarik dengan menu navigasi di atas, silahkan baca sampai
dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di
dapat bisa berbeda dengan contoh diatas karena faktor desain template yang
berbeda-beda, oleh kerena itu ada kemungkinan anda harus sedikit merubah kode
yang saya berikan agar cocok dengan template anda.

Berikut adalah langkahnya :

Klik kanan pada kedua gambar di bawah ini, lalu Save Picture As…
lalu save dulu di komputer anda.

tableft6.gif

tabright6.gif

Kemudian simpan pada image hosting yang biasa anda gunakan, misalkan
di photobucket
atau google pages dan lain-lain.
Lalu anda catat alamat dari kedua gambar tersebut. Contoh, saya mempunyai alamat gambar
untuk kedua gambar di atas sebagai berikut :



http://ahom24.googlepages.com/tableft6.gif

http://ahom24.googlepages.com/tabright6.gif

 

Sebenarnya anda boleh saja menggunakan kedua alamat tersebut,
namun saya khawatir jika terlalu banyak yang memakai alamat
tersebut bisa terjadi limited band with sehingga gambar tidak
dapat tampil dan menu anda jadi tidak bagus, jadi sebaiknya
pake alamat sendiri ya.

Berikut adalah salah satu cara menginstall menu tabs6 :

Langkah #1

  1. Silahkan Sign in di blogger dengan ID anda.
  2. Klik Layout.
  3. Kemudian klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).
  5. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>
  6. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>
  7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :


  8. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
    </b:section>

  9. Ubahlah kode yang berwarna hijau, sehingga kodenya menjadi seperti ini :


  10. <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
    <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
    </b:section>

  11. Kemudian klik Simpan Template.Silahkan tunggu
    beberapa saat.

Langkah #2

  1. Klik tab Elemen Halaman
  2. Lalu klik Tambahkan sebuah Elemen Halaman yang ada di bagian header (elemen paling atas).
  3. setelah munculwindow popup, klik TAMBAHKAN KE BLOG yang untuk HTML/JavaScript.
  4. Copy lalu paste kod berikut pada kolom yang tesedia (jangan lupa untuk merubah alamat gambarnya) :
  5. Klik tombol Simpan Peribahan.
  6. Selesai, silahkan lihat hasilnya.

 

 

Terkadang jika anda melakukan instalasi sesuai dengan langkah
diatas, untuk beberapa template hasilnya kurang bagus. Oleh karena
itu, saya akan mencoba menulis dengan cara lain. Namun cara ini
hanya untuk Template Minima (template asli dari blogger).

Langkahnya sebagai berikut :

  1. Silahkan Sign in di blogger dengan ID anda.
  2. Klik Layout.
  3. Kemudian klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting).
  5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
  6.  

     

  7. Tunggu beberapa saat ketika proses sedang berlangsung
  8. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>
  9. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>
  10. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :

  11. <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:if>
    </b:includable>
    </b:widget>
    </b:section>

  12. Hapus kode diatas, lalu ganti dengan kode berikut :
  13. Klik tombol Simpam Perubahan.
  14. Selesai. silahkan lihat hasilnya.

Agar mendapat variasi yang berbeda, sedikit akan saya tambahkan.

jika anda melakukan langkah di atas, maka hasil yang di dapat adalah
tab-tab atau menu-menu akan mepet ke sebelah kiri, jika ingin sedikit
menjorok ketengah anda harus menambahkan sedikit kode. kodenya yang ini :


#tabs6 {
float:left;width:100%;
background:#efefef;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}

kode yang di tambahkan adalah seperti ini :


#tabs6 {
float:left;width:90%;
background:#efefef;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
padding-left:10% ;
}

Angka 10% adalah besarnya nilai jarak sela dari sebelah kiri,
silahkan di ubah sesuai kebutuhan.

Untuk yang lainnya, silahkan anda otak-otik sendiri, keburu siang nih belum mandi

mandi dulu ahhhhh….

Iklan

14 Februari 2008 - Posted by | aksesori blog, blog tutorial, menu navigasi css

15 Komentar »

  1. Sangat bermanfaat Kang…
    Thanks…

    Komentar oleh kholish | 14 Februari 2008 | Balas

  2. mantap kang… kumaha keluarga sehat kang…
    thx

    Komentar oleh use | 14 Februari 2008 | Balas

  3. Akhirnya selesai juga modifikasi pada blog-ku. Aku kupas juga sedikit pada postingan : http://3d-design-info.blogspot.com/2008/02/kholish-design-blog-dgn-tampilan-baru.html

    Komentar oleh kholish | 15 Februari 2008 | Balas

  4. Assalamualaikum wrwb..
    Mas saya berhasil bwt menu tabs6 tapi masalahnya ada warna putih di belaKangnya ,mas gimana ya caranya ngilangin background warna putih di belakangnya..,mohon ya

    wassalam

    Komentar oleh TAHAJUD CALL | 16 Februari 2008 | Balas

  5. @tahajud call : di bagian css nya, silahkan anda cari yg seperti ini :

    #tabs6 {
    float:left;width:100%;
    background:#efefef;
    font-size:13px;
    line-height:normal;
    border-bottom:1px solid #666;
    }

    yang musti di rubah adalah kode yg untuk background saja, perhatikan kode ini :

    background:#efefef;

    ganti kode tersebut dengan koe seperti ini :

    background:transparent;

    trus kalo dah di ubah, jangan lupa untuk di save.

    Komentar oleh Rohman | 16 Februari 2008 | Balas

  6. kang, kenapa “add a page elementnya ada di atas header?? Dan kenapa kok menu tabnya ga berfungsi menampilkan label saya hanya menampilkan halaman blog saya saja?? Dimana kesalahan saya?? Mohon bantuannya, trimakasih.

    Komentar oleh Rie | 3 Maret 2008 | Balas

  7. mas mohon bantuannya saya ada kesulitan kenapa tab halamannya tidak berpindah kehalama lain jika diklik tidak mau berpindah ke halaman lan hanya di halaman depan saja, saya sangat butuh bantuannya mas. Hasil blog saya bisa di cek di http://www.ferdigi.blogspot.com atau jawaban bisa di email ke ferdigi@yahoo.com

    teruima kasih sebelumnya

    Komentar oleh www.ferdigi.blogspot.com | 12 Maret 2008 | Balas

  8. @rie : emang di atas header. nanti kan bisa di pindahin ke bawah.

    @ferdigi : emang begitu, kalo mo pindah pada saat di klik ya musti ngerobah kode css nya

    Komentar oleh Rohman | 12 Maret 2008 | Balas

  9. Mas Gimana ya cara meluruskan garis antara yang diposting dengan garis menu yang aksesoris??? kenapa saat saya pasang menu navigasinya di bawah hider jadi ga sama???? mohon bantuane

    Komentar oleh Dede Ariyanto | 3 Mei 2008 | Balas

  10. Mas,mo tanya klo tabs menunya ngelinknya kesalah satu postingan saya di blog gmn?tq b4

    Komentar oleh Kusnow | 6 Mei 2008 | Balas

  11. thanks kang, berarti banget neh

    Komentar oleh Anthony Harman | 22 Juni 2008 | Balas

  12. :))

    Komentar oleh Anonymous | 15 Juli 2008 | Balas

  13. Mas bantuin aku dong aku udah tambahkan menu ccs free tabs 6 tapi ada kesalahan jadi gini kalo saya lagi dalam status log in di blog maka pada bagian sidebar blog aku melorot kira-kira ipx tapi kalo ga login dan di akses ga melorot itu gimana ya … harus ditambahkan kode dimana biar rata dan rapih. Tapi kalo menu tabs6 nya ku taroh di atas header blog aku maka ga melorot gimana ya aku pengennya menu-menu yang ada di posting itu aku letakann di antara sidebar, main bar dan header blog aku tak tunggu ya jawabannya …………….

    Komentar oleh Dede Ariyanto | 17 Juli 2008 | Balas

  14. Mr . Rohman yang Geniusssssssssss………..

    Saya benar2 baru belajar blogging…..
    Dan itu semua gara2 ada pandduan dari kolom tutorial ini… terima kasih untuk itu..

    Nah sekarang masalahny, aku kan dah bisa buat tabs nya… tapi klo i click ga ada respon apa apa… di gimanain mestinya??

    trus cara ganti kata kata nya gimana bang???
    Misalnya “blog tutorial” menjadi “New Research”

    tolong di balas bang..

    Klo bisa di tinjau langsung bang, ke http://www.chemicalengineeringforbetterlife.blogspot.com

    tolong di balas ya bangggggggggggggggggggggggggg….

    Terima kasih banyaaaaaaaaaaaaaaaaaaaaaaaaakkkkkkkkkkkkk

    Komentar oleh Erwin Immnuel Naibaho | 11 Agustus 2008 | Balas

  15. kang ini ayas lagi, nanya lagi habis ada masalah lagi. langsung aja: gimana cara mengaktifkan tabs-tabs yang ada pada template download-an. trus gimana cara merubah tulisan pada tiap-tiap tab biar cocok dengan isi blog. biar lebih jelas kalo aq g tahu caranya, mampir ya ke blog ku: http://www.moslemscorner.blogspot.com. makasih berat

    Komentar oleh mumtaz | 4 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: