Belajar Membuat Menu Tab View Di Blogspot
Assalamualaikum sahabat ikut belajar blog, sebelumnya saya ucapkan terima kasih kepada sahabat-sahabat yang telah berkunjung pada blog Ikut Belajar, blog yang sederhana ini tidak seperti blog-blog lainnya. yaps mari kita mulai belajarnya. kita lanjut sekarang Belajar Membuat Menu Tab View Di Blogspot. Ok kita langsung saja ke TKP
Untuk Cara Membuat Blog di Blogspot silahkan lihat dipostingan sebelumnya.Tutorial Membuat Blog Di Blogspot.
Selamat Mencoba...
Cara Membuat Menu Tab View Di
Blog
·
Login ke akun Blogger anda
·
Masuk ke menu Tata Letak
·
Silahkan klik Tambah Gadget,
kemudian pilih HTML/Java Script
·
Masukkan kode dibawah ini
<style
type="text/css">
.blogtabs {padding: 0px !important;border: 1px solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}html .blogtabs h2.active {background: #fff;}.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}.btab,
#showtabs {display:none;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://bloggergubug.googlecode.com/files/tabviewjquery.js"></script><script type="text/javascript">$(document).ready(function() {$('#showtabs').simpleBlogTab ({organictabs: 3});}); </script> <div id="showtabs"> </div>
.blogtabs {padding: 0px !important;border: 1px solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}html .blogtabs h2.active {background: #fff;}.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}.btab,
#showtabs {display:none;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://bloggergubug.googlecode.com/files/tabviewjquery.js"></script><script type="text/javascript">$(document).ready(function() {$('#showtabs').simpleBlogTab ({organictabs: 3});}); </script> <div id="showtabs"> </div>
·
Klik Simpan tanpa diberi nama
·
Untuk mengisi Tab, silahkan
letakkan widget yang akan dijadikan Tab dibawah widget yang memakai kode diatas
tadi.
Anda juga bisa mengatur jumlah Tab dengan mengubah
angka yang diberi background warna kuning, silahkan ubah angka 3 dengan jumlah
Tab sesuka anda.Untuk Cara Membuat Blog di Blogspot silahkan lihat dipostingan sebelumnya.Tutorial Membuat Blog Di Blogspot.
Selamat Mencoba...
Post a Comment
Silahkan Berkomentar Dengan Baik dan Sopan
No Spam
No Link
Terima Kasih Telah Berkunjung Ke Blog ini