Cara membuat tab view otomatis di blog

Discussion in 'Blogger' started by Rivaiblog, Jun 8, 2013.

  1. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    [​IMG]
    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

    [​IMG]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.


    [​IMG]

    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;
    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 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
     
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    sip deh, tapi yang begini

    *bagus* sip deh, tapi yang begini suka bikin berat loading blog, jadi saya ga pernah masang *jail*
     
  3. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    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. *bagus*
     
  4. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    Rivaiblog wrote:

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

    iya itu blog saya mas dan biasa aja *keren2*
     
  5. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    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...
     
  6. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    661
    Likes Received:
    27
    Trophy Points:
    28
    Rivaiblog wrote:

    xixi, saya ga pernah memikirkan valid HTML 5, coz itu katanya ga berpengaruh sama sekali ke SEO *bingung* ,, yg penting $$ *ketawa4*
     
  7. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    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...
     
  8. LilihPAP

    LilihPAP Member

    Joined:
    Jun 8, 2013
    Messages:
    183
    Likes Received:
    3
    Trophy Points:
    18
    Google+:
    kalo yang gak pake javascript

    kalo yang gak pake javascript adakah?
     
  9. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    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.
     
  10. ayahnyanadia

    ayahnyanadia Well-Known Member

    Joined:
    Apr 4, 2013
    Messages:
    1,369
    Likes Received:
    153
    Trophy Points:
    63
    Google+:
  11. satriajogja

    satriajogja Member

    Joined:
    Feb 24, 2013
    Messages:
    348
    Likes Received:
    7
    Trophy Points:
    18
  12. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    satriajogja wrote:

    Terimakasih bang...
     
  13. royger

    royger Member

    Joined:
    Feb 15, 2013
    Messages:
    392
    Likes Received:
    12
    Trophy Points:
    18
    Google+:
    Tipsnya lengkap

    Tipsnya lengkap langsung dites ke tkp deh *keren2*
     
  14. Rivaiblog

    Rivaiblog Member

    Joined:
    Jun 7, 2013
    Messages:
    278
    Likes Received:
    1
    Trophy Points:
    18
    royger wrote:

    oke bang silahkan *bagus*
     
Loading...

Share This Page