Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger - Hallo sahabat 5BAB5, Pada Artikel yang anda baca kali ini dengan judul Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Layout, Artikel TAG, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger
link : Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger

Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger

Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger

 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.

Demikianlah Artikel Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger

Sekianlah artikel Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat TAG VIEW KEREN Popular Label dan Arsip pada Blogger dengan alamat link https://5bab5.blogspot.com/2017/10/membuat-tag-view-keren-popular-label.html

Tweet