Kode Javascript Untuk Membuat Widget Tab View Tanpa Perlu Edit HTML


Tutorial kali ini kita akan membahas cara membuat widget tab view seperti yang terdapat pada sidebar blog saya yang ada disini.

Untuk cara pemasangannya cukup mudah karena tidak perlu merubah html pada template blog. Dengan menggunakan tab view ini dapat membuat tampilan blog anda jadi lebih dinamis & minimalis.

Tertarik ingin mencoba?

Lihat tutorialnya dibawah ini.

*.Buka akun blog sobat.
*.Pilih menu"Rancangan/Design"-->"Elemen Laman"-->"Tambah Gadget/AddGadget"
*.Pilih"Add HTML/JavaScript",
Kemudian masukkan kode javascript dibawah ini ke kolom HTML. Tidak perlu diberi judul.


<style type="text/css">&#8232;.blogtabs {padding: 0px !important;border: 0 solid #bbb;}&#8232;.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #000;cursor:pointer;}&#8232;html .blogtabs h2.active {background: #ff0000;}&#8232;.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: transparent;clear:both;margin:0;}&#8232;.btab, #showtabs {display:none;}&#8232;</style>&#8232;<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>&#8232;<script type="text/javascript" src="http://naughtyric.googlecode.com/files/SimpleTabViewJQuery.js"></script>&#8232;<script type="text/javascript">&#8232;$(document).ready(function() {&#8232;$('#showtabs').simpleBlogTab ({organictabs: 4});&#8232;});&#8232;</script>&#8232;<div id="showtabs">&#8232;</div>&#8232;

*.Klik tombol"Simpan/Save".
*.Taruh Widget ini tepat diatas kumpulan widget lain yang ingin dimasukkan kedalam tab view dan pastikan widget-widget tersebut telah memiliki judul.
*.Pada script di atas hanya untuk maksimal 4 widget yang dapat masuk ke dalam tab view. Jika ingin menambah lagi widget yang ingin dimasukkan, ubahsaja angka di organictabs: 4 sesuai dengan jumlah widget yang ingin dimasukkan.
*.Klik tombol"Simpan"pada bagian atas.
*Selesai.


Sekarang coba lihat kembali tampilan beranda blog anda.
Semoga berguna dan bermamfaat..




Source
Share on Google Plus

About Fulldesainer

    Blogger Comment
    Facebook Comment

5 comments:

  1. thanks gan
    http://tokoobatherbal23.com/

    ReplyDelete
  2. Thanks infonya gan, sangat membantu :)
    http://kedaiacemaxs.com/

    ReplyDelete
  3. Thanks infonya gan, sangat membantu :)
    http://kedaiacemaxs.com/

    ReplyDelete
  4. terimakasih infonya sob, sukses terus
    http://ramuantradisionalkita.com/pengobatan-tradisional-diabetes-melitus/

    ReplyDelete
  5. keren banget artikelnya gan
    http://apotekacemaxs.com/

    ReplyDelete



Ada yang perlu Anda tanyakan?Link error,kritik dan saran..?Silahkan sampaikan di kolom komentar dibawah ini.

1. Klik select profile -->> pilih Name/URL.
2. Isi nama Anda dan isi URL dengan alamat Facebook Anda/ kosongkan saja.
3. Klik Lanjutkan.
4. Ketik komentar anda dan klik PUBLISH.
5. Bagi yang belum bisa berkomentar dengan HTML,silahkan klik disini.
6. Komentar yang kurang sopan,Spam/SARA otomatis akan kami hapus.

Terimakasih atas kunjungan Anda.