• Translate

6/26/2015

Cara Membuat Widget Tabview Tanpa Edit HTML Template Blog

Tutorial Blogspot |

Advertisement

Cara Membuat Widget Tabview Tanpa Edit HTML Template Blog | Widget Tabview ini sangat berguna untuk membuat blog lebih singkat, jadi tampilannya minimalis dan eksotis. nah ini ada script yang saya dapatkan dari www.bloggersentral.com untuk membuat tabview tanpa harus edit HTML di template blog, mau tahu caranya silahkan ikuti langkah-langkah dibawah ini :


Langkah-langkah Installasi Script TabView
  • Login ke dashboard blog.
  • Pilih Rancangan → Elemen Laman → Add gadget (HTML/JavaScript).
  • Copy script dibawah ini dan paste pada gadget HTML/JavaScript tadi.
 <!-- Multi tav View -->
<style type="text/css">     .tabber {      padding: 0px !important;    

border: 0 solid #bbb;     }     .tabber h2 {      float: left;
     margin: 0 0 1px 0;
     font-size: 16px;
     padding: 12px 12px;
     border: 1px solid #bbb;
     margin-bottom: 1px;
     overflow: hidden;
     position: relative;
     background: #363b40;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #2c64b8;
     border-bottom: 1px solid #f9f9f9;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #f9f9f9;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>
    <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 : 2
     });
    });
    </script>
<div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

  • Klik Simpan/Save
  • Refresh Blog Netizens, dan lihat hasilnya
Script diatas saya hanya menampilkan 2 tabview saja, tapi apabila sobat ingin membuat menjadi 3 bagian silahakan ubah kode tabCount:2 menjadi tabCount:3 , dan jangan Netizens hapus kode <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a> karena kalau dihapus maka tabviewnya tidak akan bekerja. untuk hasilnya bisa netizens lihat di blog saya.

Apabila Netizens sudah menambahkan kode menu tab view di atas, maka Netizens cukup mengatur widget - widget mana yang ingin dimasukan ke menu tab view, Dan cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin netizens tambahkan ke bawah widget menu tab view tersebut. silakan lihat gambar di bawah ini: 


Itu saja Netizens caranya, gampangkan? apabila ada masalah dalam widget ini silahkan berkomentar secara positif.

Semoga Bermamfaat,

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.