Cara membuat tab view otomatis di blog

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

Dalam 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.

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.
  

trik pendukung

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• widget social media scale di blogspot
• fungsi style clear both
• Tutorial menampilkan post date diwaktu yang sama
• feed validator tool
• cara membuat Image pseudo style
• cara membuat Google Plus buttons style
• cara mebuat fasilitas chat di blog
• cara membuat Blockquote di blogspot

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:21 PM