Cara membuat widget menu tab view otomatis 3 kolom di blog - Pernahkah anda melihat di sidebar blog orang lain sebuah widget yang memiliki 3 kolom? Nah itulah yang dinamakan widget tab viewyang sering dipakai oleh orang lain yang fungsinya sangat banyak,salah satunya adalah untuk menyembunyikan widget yang kurang penting atau untuk memperindah tampilan blog agar kelihatan lebih simple dan elegant.Untuk demo widget tab view sendiri bisa langsung anda lihat di sidebar blog saya ini,memang di blog orang lain tutorial widget tab view nya suka ribet tapi disini saya sudah menyediakan tutorial dalam membuat widget menu tab view yang otomatis jadi tidak perlu edit ini itu lagi cukup langsung pake seperti biasanya.
Sebelumnya saya juga sudah sempat membuat tutorial tentang cara membuat widget random post tapi untuk kali ini saya akan menjelaskan tutorial tentang cara membuat widget menu tab view 3 kolom di blog yang mungkin bisa membantu anda semua.Tapi sebelumnya jika anda kesulitan dalam membuat widget menu tab view ini maka anda bisa mencari template gratis yang sudah menggunakan widget ini karena rata-rata template magazine sekarang sudah menggunakan widget yang seperti ini sebagai contohnya template dari mas sugeng.
Nah bagaimana cara membuat menu widget multi tab view 3 kolom di blog,baiklah langsung saja anda simak tutorial berikut silahkan aanda praktekan dengan benar jika ada kesalahan script atau anda mengalami kesulitan dalam mempraktekannya anda bisa langsung tulis di komentar tentang keluhan anda.
2. Setelah itu anda save dulu template anda kemudian masuk pada menu Tata letak > Tambah Widget > HTML/Javascript dan copy kode berikut ini dan pastekan di kotak yang sudah disediakan disana.
3. Script di atas sudah dirancang hanya menampilkan widget popular post,archive dan recent coment jadi hanya bisa untuk ketiga widget ini,nah untuk anda yang ingin mengganti widget sesuai keinginan silahkan anda buat dulu widget yang anda inginkan dan ambil kodenya di edit HTML di template blog anda kemudian anda ganti salah satu kode widget di atas sebagai contohnya silahkan lihat kode dibawah ini.
4. Nah kode di atas adalah kode untuk widget popular post silahkan anda ganti dengan kode widget yang lain yang anda inginkan,ingat untuk mengganti kode widget silahkan anda perhatikan kode pembatas setiap kode widget di atas,kode pembatas adalah kode </b:widget> </b:section> </div> dan kode awal adalah <div class='widget1' id='tab1'> atau <div class='widget1' id='tab2'> atau <div class='widget1' id='tab3'> .
Nah jika anda sukses membuat widget tab view otomatisnya maka widget tersebut akan langsung ada di blog anda pada bagian sidebar.Baiklah semoga artikel saya tentang cara membuat widget menu tab view otomatis 3 kolom di blog ini bisa membantu anda dan bermanfaat untuk anda semua,jika ada keluhan atau semacamnya silahkan berkomentar nanti kami akan memberikan solusinya,untuk demo widget tab view 3 kolomnya silahkan anda lihat langsung di sidebar blog ini.
Sebelumnya saya juga sudah sempat membuat tutorial tentang cara membuat widget random post tapi untuk kali ini saya akan menjelaskan tutorial tentang cara membuat widget menu tab view 3 kolom di blog yang mungkin bisa membantu anda semua.Tapi sebelumnya jika anda kesulitan dalam membuat widget menu tab view ini maka anda bisa mencari template gratis yang sudah menggunakan widget ini karena rata-rata template magazine sekarang sudah menggunakan widget yang seperti ini sebagai contohnya template dari mas sugeng.
Nah bagaimana cara membuat menu widget multi tab view 3 kolom di blog,baiklah langsung saja anda simak tutorial berikut silahkan aanda praktekan dengan benar jika ada kesalahan script atau anda mengalami kesulitan dalam mempraktekannya anda bisa langsung tulis di komentar tentang keluhan anda.
Cara membuat widget menu multi tab view otomatis 3 kolom di blog
1. Silahkan anda masuk ke akun blogger anda terlebih dahulu dan langsungmasuk ke menu Template > Edit HTML > cari kode ]]></b:skin> Kemudian copy kode dibawah ini dan pastekan tepat di atas kode ]]></b:skin> .#tabslect,#tabslect li{padding:0;margin:0;list-style:none;overflow:hidden}
#tabslect{margin:0 auto 10px}
#tabslect li{float:left;width:33.3%;text-align:center}
#tabslect a{line-height:32px;display:block;background-color:#303030;color:white;font-weight:bold;text-decoration:none}
#tabslect .selected a,#tabslect a:hover{background-color:#1295C9}
2. Setelah itu anda save dulu template anda kemudian masuk pada menu Tata letak > Tambah Widget > HTML/Javascript dan copy kode berikut ini dan pastekan di kotak yang sudah disediakan disana.
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='tabslect'>
<li class='tab1'><a href='#tab1'>Popular</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='bungkusside'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2 itemprop='name'><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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' expr:title='data:post.title' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</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' expr:title='data:post.title' itemprop='url' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' itemprop='image'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' itemprop='name'><data:post.title/></a></div>
<div class='item-snippet' itemprop='description'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Recent Comments' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul class='hierarchy'>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass == "expanded"'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#tabslect li:first").addClass("selected");$("#bungkusside > div").hide();$("#bungkusside > div:first").show();$("#tabslect a").click(function(){$("#tabslect li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#bungkusside > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
3. Script di atas sudah dirancang hanya menampilkan widget popular post,archive dan recent coment jadi hanya bisa untuk ketiga widget ini,nah untuk anda yang ingin mengganti widget sesuai keinginan silahkan anda buat dulu widget yang anda inginkan dan ambil kodenya di edit HTML di template blog anda kemudian anda ganti salah satu kode widget di atas sebagai contohnya silahkan lihat kode dibawah ini.
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2 itemprop='name'><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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' expr:title='data:post.title' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</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' expr:title='data:post.title' itemprop='url' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' itemprop='image'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='no image' class='post-thumbnail' src='http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' itemprop='name'><data:post.title/></a></div>
<div class='item-snippet' itemprop='description'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
4. Nah kode di atas adalah kode untuk widget popular post silahkan anda ganti dengan kode widget yang lain yang anda inginkan,ingat untuk mengganti kode widget silahkan anda perhatikan kode pembatas setiap kode widget di atas,kode pembatas adalah kode </b:widget> </b:section> </div> dan kode awal adalah <div class='widget1' id='tab1'> atau <div class='widget1' id='tab2'> atau <div class='widget1' id='tab3'> .
Nah jika anda sukses membuat widget tab view otomatisnya maka widget tersebut akan langsung ada di blog anda pada bagian sidebar.Baiklah semoga artikel saya tentang cara membuat widget menu tab view otomatis 3 kolom di blog ini bisa membantu anda dan bermanfaat untuk anda semua,jika ada keluhan atau semacamnya silahkan berkomentar nanti kami akan memberikan solusinya,untuk demo widget tab view 3 kolomnya silahkan anda lihat langsung di sidebar blog ini.
0 Komentar
Penulisan markup di komentar