Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, June 3, 2013

Cara membuat tab view otomatis di blog

script tab view automatis
Sobat bloger dalam postingan kali ini saya terobsesi dengan komentar salah seorang sobat kita, dimana saya trus berpikir pikir bagaimana cara membuat tab yang menampilkan tag lebel dan tag arsip dalam halaman blog. Dan saya mempelajarinya dan membuat suatu widget yang simple agar para penggunanya tidak terlalu pusing apa lagi dia seorang yang masih baru didunia bloging. Pada postingan saya ini untuk menampilkan widget sangat mudah dalam halaman blog kita.

 

 

Struktur pemasangan widget tab view otomatis

scren shoot tabview otomatis 1Dalam tutorial kali ini kita akan menampilkan widget :
  • Entri Populer
  • Lebel
  • Arsip blog











    Jadi bila kita ingin menampilkan widget tersebut kita hanya membuat 1 widget saja dengan code Script tab view otomatis ini didalamnya dan diletakkan tepat diatas widget yang ingin ditampilkan. Agar lebih mudah dimengerti silahkan lihat gambar dibawah ini.
    Gambar yang diblog warna merah itu adalah widget dari script tab view otomatis, dan widget yang lain yang ingin kita tampilkan berada tepat dibawah widget tersebut.

    scren shoot tata letak 2

    Untuk mewujudkan misi kita ini silahkan buat widget :
    1. Entri Populer ► KLIK DISINI
    2. Lebel / Kategori  ► KLIK DISINI
    3. Arsip Blog ► KLIK DISINI 
    Jika widget tersebut sudah terpasang silahkan lihat tutorial dibawah ini

    Tutorial cara membuat tab view otomatis


    • Sepeti biasa login to blog
    • Klik "tata letak" ( biasanya ditempatkan di sidebar atau disamping halaman )
    • Pilih "HTML/Javascript" ( Tidak usah diberi judul widgetnya )
    • Copy script dibawah ini lalu pastekan dan simpan

    <style type="text/css">
    .BLOGDESIGN_TABS {
    padding: 0px !important;
    border: 1px solid #bbb; color: #FF0000; }
    .BLOGDESIGN_TABS h2 {
    float: left;
    margin: 0 2px 0px 0;
    font-size: 12px;
    padding: 3px 5px;
    border: 1px solid #bbb;
    overflow: hidden;
    position: relative;
    text-shadow: NONE;
    cursor:pointer;
    background-color: #000000;
    color: #FFFFFF;
    }html .BLOGDESIGN_TABS h2.active {
    background-color: #FF0000;
    color: #000000;
    }
    .BLOGDESIGN_TABS .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
    .btab, #lihattabs {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">eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?
    String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=
    function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(9($){$.o.q=9(6){4 f={g:3};4 6=$.r(f,6);4 a=$(b).h().h(\'.7\');a.8(\'s\');a.t(\'.7\').u(0,6.g).8(\'1\');$(\'.1\').c();$(\'.1:d\').i($(\'.1 2\'));$(\'.1:d\').j();$(\'.1\').v($(\'#w p\').x({\'y\':\'z 0 0\',\'A\':\'0\',\'B-C\':\'D\'}));$(\'.1 2:d\').8(\'e\');$(\'.1 2\').E(9(){$(\'.1 2\').F(\'e\');$(b).8(\'e\');4 k=$(\'.1 2\').G($(b));4 5=$(\'.1:H(\'+k+\')\');5.i($(\'.1 2\'));$(\'.1\').c();5.j();5.l(\'.7-m\').n().c();5.l(\'.7-m\').n().I(J);K L})}})(M);',49,49,'|BLOGDESIGN_TABS|h2||var|animtab|options|widget|
    addClass|function
    |tablog|this|hide|first|active|
    tabwidget|jumlahtabs|parent|prepend|show|base|find
    |content|contents|fn||rivaiBlogTab|
    extend|btab|nextAll|slice|append|lihattabs|css
    |margin|5px|padding|font|
    size|10px|click|removeClass
    |index|eq|fadeIn|700|return|false|jQuery'.split('|'),0,{}))
    </script><script type="text/javascript"
    >$(document).ready(function() {$('#lihattabs')
    .rivaiBlogTab ({jumlahtabs: 3});});</script><div id="lihattabs"></div>

    Keterangan Code

    • Code warna biru adalah CSS bisa saja anda letakkan code tersebut diatas code ]]></b:skin>  template anda.
    • Code warna merah adalah JQUERY bila anda sudah mempunyai Jquery versi diatasnya code tersebut tidak usah dipasang, sipatnya bisa atau tidak.
    • Code warna Hijau adalah jumlah tab widget yang akan ditampilkan yang telah kita sesuaikan. Bila anda ingin menampilkan 4 silahkan ganti code huruf 3 dengan 4.
      NB : untuk menampilkan jumlah tab widget anda harus menyesuaikan berapa widget yang anda pasang dibawah widget tabview ini.

    Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

    Salam Blogger.... !!! .

    Me

    Admin Rivai Silaban

    Share article with : Google+ Facebook Twitter
    Di posting oleh : Rivai Silaban Update pada : 5:21 PM

    6 comments :

    1. Komentar SPAM Akan secepatnya dihapus
    2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
    3. Cek komentar masuk sebelum bertanya.
    4. Link aktiv tidak akan berpungsi.
    5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
    6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
    7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
    8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

    Salam bloger .. !!
    Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
    Konversi Kode Forum Diskusi Join to Blog