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 :

 

• Home
• Products
• Services
• Support
• Contuct Us

 

 

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>




/* ================================================== Tabs6 Author : Christopher Ware URL : http://www.exploding-boy.com Tutorial oleh Rohman URL : http://kolom-tutorial.blogspot.com kunjungi blog saya untuk tutorial menu lainnya ================================================== */ #tabs6 { float:left;width:100%; background:#efefef; font-size:13px; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0;padding:10px 10px 0 5px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top; margin:0;padding:0 0 0 4px;text-decoration:none; } #tabs6 a span { float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#fff; font-weight:bold; } /* Commented backslah Hack hides rule from IE5-Mac \*/ #tabs6 a span { float:none; } /* End IE5-Mac hack */ #tabs6 a:hover span { color:#C2FB77; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; }




7. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :



<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>



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



<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>



9. 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) :
<div id='tabs6'> <ul> <!-- Silahkan ganti tanda pagar (#) dengan link milik anda --> <li id='current'><a href='#' title='your link title here'><span>Home</span></a></li> <li><a href='#' title='your link title here'><span>Products</span></a></li> <li><a href='#' title='your link title here'><span>Services</span></a></li> <li><a href='#' title='your link title here'><span>Support</span></a></li> <li><a href='#' title='your link title here'><span>Contuct Us</span></a></li> <li><a href='#' title='your link title here'><span>Obral Plus</span></a></li> <li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li> </ul> </div><!-- #tabs6 end -->






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. Tunggu beberapa saat ketika proses sedang berlangsung



7. lihat ke bagian kode template anda, kemudian cari kode ]]></b:skin>



8. Copy kode yang ada di bawah ini, lalu paste di atas kode ]]></b:skin>




/* ================================================== Tabs6 Author : Christopher Ware URL : http://www.exploding-boy.com Tutorial oleh Rohman URL : http://kolom-tutorial.blogspot.com kunjungi blog saya untuk tutorial menu lainnya ================================================== */ #tabs6 { float:left;width:100%; background:#efefef; font-size:13px; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0;padding:10px 10px 0 5px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url("http://ahom24.googlepages.com/tableft6.gif") no-repeat left top; margin:0;padding:0 0 0 4px;text-decoration:none; } #tabs6 a span { float:left;display:block;background:url("http://ahom24.googlepages.com/tabright6.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#fff; font-weight:bold; } /* Commented backslah Hack hides rule from IE5-Mac \*/ #tabs6 a span { float:none; } /* End IE5-Mac hack */ #tabs6 a:hover span { color:#C2FB77; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; }




9. Silahkan lihat ke bagian bawah, lalu cari kode yang seperti ini :




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





10. Hapus kode diatas, lalu ganti dengan kode berikut :



<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section> <div id='tabs6'> <ul> <!-- Silahkan ganti tanda pagar (#) dengan link milik anda --> <li id='current'><a href='#' title='your link title here'><span>Home</span></a></li> <li><a href='#' title='your link title here'><span>Products</span></a></li> <li><a href='#' title='your link title here'><span>Services</span></a></li> <li><a href='#' title='your link title here'><span>Support</span></a></li> <li><a href='#' title='your link title here'><span>Contuct Us</span></a></li> <li><a href='#' title='your link title here'><span>Obral Plus</span></a></li> <li><a href='http://kolom-tutorial.blogspot.com' title='tutorial lengkap membuat blog di blogspot'><span>Blogspot Tutorial</span></a></li> </ul> </div><!-- #tabs6 end -->






11. Klik tombol Simpam Perubahan.



12. 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....

Yang suka dengan artikel ini, beri votting ya.

Bookmark this post: