Widget Menu Tab View Untuk Blog

Oleh Roronoa Alwei

Sabtu, 12 Maret 2016

Bagikan :

Tweet

Banyak para blogger ingin memasang Widget yang satu ini tapi sangat sulit mencarinya di google, karena kenapa?
Karena para blogger belum tahu nama widget ini apa. Nama widget ini adalah Menu Tab View. dan banyak blog-blog professional memakai widget ini


Banyak artikel seperti ini tapi para blogger harus belajar untuk membuat tab dengan CSS dan jQuery. tetapi kebanyakan dari tutorial tersebut mengharuskan kita untuk memodifikasi/mengedit kode template blog, selain itu kita juga harus secara manual menambah isi menu tab.

Dengan tutorial di blog ini, kita tidak harus memodifikasi kode template blog atau menambah isi tab secara manual. Cukup mudah, hanya menambahkan kode menu tab ke dalam widget HTML / Javascript. Sangat mudah kan



Kelebihan Widget ini

1. Tidak ribet atau susah cara pemasangannya
2. Untuk mempermudah pemasangan, pengaturan dan penghapusan widget. Jika tidak suka dengan tampilannya, cukup menghapus tab widget HTML / Javascript.
3.  tampilan professional dan nampak indah

Nah. Untuk cara pemasangan widget cukup mudah

-Login blog > Tata letak > Tambah Gadget > HTML/Javascript
-Copy kode di bawah ini

<style type="text/css">
            .tabber {
             padding: 0px !important;
             border: 0 solid #bbb;
            }
            .tabber h2 {
             float: left;
             margin: 0 1px 0 0;
             font-size: 12px;
             padding: 3px 5px;
             border: 1px solid #bbb;
             margin-bottom: -1px;
             overflow: hidden;
             position: relative;
             background: #00BFFF;
             cursor:pointer;
             -moz-border-radius:5px 5px 0 0;
             border-radius:5px 5px 0 0;
            }
            html .tabber h2.active {
             background:  #fff;
             border-bottom: 1px solid #fff;
            }
            .tabber .widget-content {
             border: 1px solid #bbb;
             padding: 10px;
             background: #fff;
             clear:both;
             margin:0;
            }
            .codewidget, #codeholder {
             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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
             $('#codeholder').bloggerTabber ({
              tabCount : 4
             });
            });
            </script><div id='codeholder'>
        <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

12px adalah ukuran pada judul tab (populer,recent comment,categories,archive seperti di gambar)
javascript hapus jika blog anda sudah ada jquery nya
nomer 4 itu jumlah widget yang ingin di satukan

setelah beres simpah lalu buat widget untuk dimasukan di tab Contoh : Label,Categories,dll seperti di gambar (di tata letak)

jika sudah klik simpan dan lihat hasilnya.
Dan jika anda ingin widget Recent comment seperti di foto anda bisa lihat hmtl di (Widget Stylish Recent Comment untuk blog)

Jika anda masih bingung silahkan komentar
Semoga bermanfaat dan terimakasih telah berkunjung di blog saya

Tag : Widget Blog