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 Demo Gambar

Dalam tutorial kali ini kita akan menampilkan widget :

[*]Entri Populer
[*]Lebel
[*]Arsip blog
[/list]



[/list]
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 :

[*]Entri Populer Klik disini cara membuat entri populer
[*]Lebel / Kategori  Klik disini cara membuat lebel di blog
[*]Arsip Blog Klik disini cara membuat arsipt di blogspot 
[/list]
Jika widget tersebut sudah terpasang silahkan lihat tutorial dibawah ini




Tutorial cara membuat tab view otomatis

• Seperti 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;
cursorointer;
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 yang di block baris pertama adalah code CSS bisa saja anda letakkan code tersebut diatas code ]]></b:skin>&nbsp; template anda.
• Code yang di block baris ke dua adalah code JQUERY bila anda sudah mempunyai Jquery versi diatasnya code tersebut tidak usah dipasang, sipatnya bisa atau tidak.
• Code yang di block baris ke tiga adalah code scriptnya
• Code yang hurufnya dibolt ' Jumlahtabs : 3 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.
  Untuk melihat tutorialnya lebih detail lihat sumbernya.

Sumber : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-tab-view-otomatis-di-blog.html

 

sip deh, tapi yang begini

sip deh, tapi yang begini suka bikin berat loading blog, jadi saya ga pernah masang

 

makasih atas sarannya bang cayun

Sebenarnya rahasia untukmempercepat loding blog tergantung dengan pemakaian widgetnya dan berbagai script baik itu Jquery dan Iklan. ada baiknya thems template juga perlu diperbaiki sebab menurut pengalaman saya yang masih belum seberapa bang cayun, template blog pangarus besar dengan lambatnya loding blog, banyak para sobat2 bloger kita yang memang hanya memperdulikan tampilannya saja tapi tidak menyadari lodingnya, script yang tidak sesuai dan kevalitan HTML serta Meta Tag yang tidak begitu akurat begitu juga dengan pemakaian JQuery yang begitu berlebihan tentu akan memberatkan loding blog kita bang. btw blog abang cayun yang http://eboobelajarkteknisikomputer.blogspot.com/ bagus dan mantap salut buat abang.

 

Rivaiblog wrote:

Iya banyak faktor yang mempengaruhi loading blog sperti Jquery,Javascript,gambar dan masih banyak yg lainnya .. saya sih pakai yg standar" aja..

iya itu blog saya mas dan biasa aja

 

mantap bang ayun

yup setuju, berarti enak juga belajar bloging sama abang.
di mantapkan bang blognya biar valid html 5 sekalian soalnya seonya dah mantap biar lebih sempurnah... bang...

 

Rivaiblog wrote:

xixi, saya ga pernah memikirkan valid HTML 5, coz itu katanya ga berpengaruh sama sekali ke SEO ,, yg penting $$

 

cayun wrote:

iya sih untuk beberapa tools tapi pernah saya coba memakai tools dari

Code:

www.seoanalyser.net

ternyata hasil SEO yang saya dapatkan dibeberapa tools SEo yah sudah bagus pas waktu ngecek di situs seoanalyser wah ternyata jauh dari harapan, sehingga saya memperbaiki kevalitannya untuk HTML 5 dan sekarang dah mulai meningkat hanya saja blog saya ini memang masih baru kurang lebih 3 bulanan belum mempunyai pageranking heheh maklum bang masih anak baru...

 

kalo yang gak pake javascript

kalo yang gak pake javascript adakah?

 

LilihPAP wrote:

Saya rasa tidak ada soalnya pemanggilan scriptnya untuk ditampilkan harus ada jadi pastinya memakai JQury untuk memanggil scripnya. kalo manual saya rasa tampilan standart saja sob.

 

dah..

dah..

 

Mantab sharingnya

Mantab sharingnya

 

satriajogja wrote:

Terimakasih bang...

 

Tipsnya lengkap

Tipsnya lengkap langsung dites ke tkp deh

 

royger wrote:

oke bang silahkan