Cara Membuat TAG View Responsive Mobile ( HP )

Membuat TAG View Responsive Mobile ( HP )

Tag View Responsive Meruapakan Suatu Tampilan Tag pada Blog atau Web yang di gunakan untung menjadikan sebuah Tag seperti Rag Popular Post, Tag Archive, Tag Label dan Lainnya, yang di jadikan dalam Satu Menu.

Dengan Tag View Tampilan Blog atau Web akan lebih Menarik dalam Tampilan. Apalagi dengan Responsive Pasti Akan Terlihat Bagus atau bisa dibilang Keren.

Membuat Widget atau Layout  TAB VIEW Pada Blogger ?

Fungsi dari Tab View ini Meringkas Widget atau Layout dalam Tampilan Blog atau Web,

Misal Kita Tambah Widget Popular Post dan Tambah Lagi Archive Tambah lagi Widget Category pasti Nanti Akan Bertambah dan turun kebawah tiap menambah jadi akan semakin panjang jika ada penambahan lagi jadi tampilan akan kurang menarik atau terlalu panjang ke bawah.

Disini lah fungsi tab view dapat di gunakan,
Meringkas Tab tab yang ada dalam satu kolom dengan header
Jadi dengan tab view tampilan akan lebih menarik dan elegan, dan pasti lebih keren. he

Cara lain untuk tampilan seperti Tab View ada tapi mungkin agak Kurang Bagus dalam tampilan,
Cara terebut dengan menggunakan dengan Scroll.
Scroll dapat membatasi ukuran yang akan kita tampilkan, tapi kita harus menggeser ke bawah atau keatas jika yang kita tampikan banyak.
Sudah Bagus tapi Kurang Efisian

Contoh Scroll :

Membuat Widget atau Layout  TAB VIEW Pada Blogger

Fungsi dari Tab View ini Meringkas Widget atau Layout dalam Tampilan Blog atau Web,

Misal Kita Tambah Widget Popular Post dan Tambah Lagi Archive Tambah lagi Widget Category pasti Nanti Akan Bertambah dan turun kebawah tiap menambah jadi akan semakin panjang jika ada penambahan lagi jadi tampilan akan kurang menarik atau terlalu panjang ke bawah.

Disini lah fungsi tab view dapat di gunakan,
Meringkas Tab tab yang ada dalam satu kolom dengan header
Jadi dengan tab view tampilan akan lebih menarik dan elegan, dan pasti lebih keren. he

Cara lain untuk tampilan seperti Tab View ada tapi mungkin agak Kurang Bagus dalam tampilan,
Cara terebut dengan menggunakan dengan Scroll.
Scroll dapat membatasi ukuran yang akan kita tampilkan, tapi kita harus menggeser ke bawah atau keatas jika yang kita tampikan banyak.
Sudah Bagus tapi Kurang Efisian

Malah Jadi Penjelasan Scroll, gak nyambung ya, maaf sebagai tambahan artikel saja, biar kelihatan banyak,
dengan begitu kan kelihatan banyak artikelnya
 katanya artikel semakin banyak semakin berbobot,
Namanya berbobot pasti lebih bagus

Kata Orang Jawa : "Bobot Bibit Bebet" itu bagus dan baik.

jadi artikel yang berbobot pasti bagus. he
Ok lanjut

Berikut Cara Pembuatan Tab View  Pada Blogger:

1. Login dan Masuk Halaman Dasbor Blog Anda
2. Pilih Tema klik Edit HTML
3. Cari kode ]]></b:skin>, untuk mempercepat Pencarian tekan tombol CTRL+F tulis "]]></b:skin>"
4. Copy Paste Script Dibwah ini Letakkan kode berikut di atasnya :

.vitabs, .vita-list {margin:0;} .vitabs .vita-list {padding:0;} .vitabs-menu {padding:0 0;margin:0;margin-bottom:0;border:1px solid #f1f1f1;border-bottom:0;} .vitabs-menu li{margin:0;font-size:13px;font-family:'Open Sans';font-weight:400;text-transform:uppercase;height:40px;line-height:40px;width:29%;list-style:none;text-align:center;display:inline-block;padding:5px;background:#29abe2;color:#fff;cursor:pointer;position:relative;transition:all .3s} .vitabs-menu li:nth-child(3) {background:#2c3031;color:#fff;width:32%;} .vitabs-menu li:hover {background:#29abe2;} .vitabs-menu li:nth-child(3):hover {background:#34393a;} .vitabs-menu .active-tab,.vitabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s} .vitabs-menu .active-tab:hover,.vitabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#333;} .vitabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px} .vitabs-menu li:nth-child(1):before {content:'\f006';} .vitabs-menu li:nth-child(2):before {content:'\f09e';} .vitabs-menu li:nth-child(3):before {content:'\f0e6';} .vitabs-content{padding:10px;background:#fff;margin-bottom:15px;border:1px solid #f1f1f1;border-top:0;} .vitabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .vitabs-content .widget li {background:#fff;color:#333;float:none;} .vitabs-content .widget li:last-child {border-bottom:none;} .vitabs-content .widget ul {background:#fff;color:#333;overflow:visible;}

Langkah ke 2 :

1. Cari lagi kode </body>
2. Copy Paste Script Di bawah ini letakan diatas kode </body>

<script type='text/javascript'>
$(function(){$(&quot;.vitabs-1&quot;).mvitabs()})
</script>

<script type='text/javascript'>
//<![CDATA[
// Simple Tab
!function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.vitabs=d.$element.children(),d.options=a.extend({},a.fn.mvitabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.vitabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.vitabs.wrapAll('<div class="'+c.vitabs_container_class+'" />'),b.vitabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.vitabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.vitabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.vitabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$vitabs_menu=a(g).prependTo(c.$wrapper),b=c.$vitabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$vitabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.vitabs.hide().filter(":eq("+b+")").show(),c.$vitabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onvitabselect)&&b!==c.current_tab&&d.onvitabselect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$vitabs_menu.remove(),a.vitabs.unwrap().unwrap(),a.vitabs.removeAttr("style"),a.vitabs.children(b+":first").removeAttr("style"),a.$element.removeData("mvitabs")}},a.fn.mvitabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mvitabs");e="object"==typeof c&&c,g||f.data("mvitabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mvitabs.defaults={container_class:"vitabs",vitabs_container_class:"vitabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",vitabsmenu_class:"vitabs-menu",vitabsmenu_el:"ul",tmpl:{vitabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onvitabselect:null}}(window.jQuery,window,document); //]]> </script>

Lalu Save Template.

Setelah itu

Cari kode seperti ini " <aside id='sedebar-wrapper' atau kode
" <b:section class='sedebar' id='sidebar' preferred='yes'>
agar lebih cepat dalam mencari dengan menggunakan CTRL+F

Copy kode dibawah ini taruh dibawah kode :
" <aside id='sedebar-wrapper' atau kode
" <b:section class='sedebar' id='sidebar' preferred='yes'>

 <div class='vitabs vitabs-1'>
<b:section class='vita-list vita-list-1 section' id='vita-list-1' showaddelement='yes'>
  <b:widget id='PopularPosts1' locked='false' title='Popular' type='PopularPosts' visible='true'>
    <b:includable id='main'><div class='popularblanter'>
  <b:if cond='data:title'><h3><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
              </div>
</b:includable>
  </b:widget>
</b:section>
<b:section class='vita-list vita-list-2 section' id='vita-list-2' showaddelement='yes'>
  <b:widget id='HTML1' locked='false' title='Random' type='HTML' visible='true'>
    <b:includable id='main'><div class='random-posts'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
<b:section class='vita-list vita-list-3 section' id='vita-list-3' showaddelement='yes'>
  <b:widget id='HTML4' locked='false' title='Comment' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section> 
</div>

Silahkan Preview Hasilnya :

Anda bisa lihat hasilnya di Tata letak atau Layot pada blogger anda

Ketarangan :

Jika Masih ada yang error dalam save template seperti HTML4, dan seterusnya biasanya itu menandakan bahwah widget tersebut sudah terpasang untuk solusi ganti saja
HTML4 ke HTML5 dan seterusnya atau yang belum ada widget tersebut.

Semoga bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: