Cara Mudah Membuat Tab View Categori di blog

adscblog

Mungkin anda pernah mengunjungi sebuah blog yang dimana disana anda melihat di bagian sidebar ada tiga buah tombol yang sejajar,misalkan populer post,comment dan juga recent post,dan dimana setiap tombol tersebut di klik oleh kita maka akan menampilkan suatu artikel yang sesuai dengan judul yang berada di tombol tersebut,dan itu dinamakan Tab view,biasa nya tombol tab view yang di pasang di sidebar ini hanya berjumlah 3 saja

Dan begitu guja dengan artikel ini,akan menerangkan bagaimana kita bisa memasang tombol tab view ini di halaman depan blog,dan unik nya tab view ini adalah tab view yang menampilkan sesuai dengan kategori blog atau postingan,dengan begitu maka setiap yang akan tampil di tab view ini hanyalah artikel yang sesuai dengan kategori saja

Maka dengan begitu blog anda akan semakin unik saja dan ini cocok bagi anda para blogger yang dimana blog nya tersebut mempunyai banyak Categori atau juga label,dengan Tab view categori ini anda bisa menampilkan setiap Categori/label sesuai dengan ke inginan anda

Dan kelebihan dari tab view ini memudahkan para pembaca untuk bisa dengan mudah menelusuri isi dari blog anda,dan selain itu juga tampilan template yang anda miliki akan semakin keren dan juga terlihat propesional tentu nya

Sebenar nya Tab view ini bukan pembicaraan baru,jika anda adalah blogger lama,maka tab view Categori ini pernah ada di template nya Maskolis,template yang dimana pada saat itu sangat populer di dunia blogger

Cara Memasang Tab View Categori di blog

Dan untuk tampilan Tab view ini bisa anda perhatikan pada Gambar di atas,kira kira seperti itulah Tab View Categori yang sedang saya bahas sekarang ini,dan jika anda tertarik untuk memasang tab view ini di blog anda,maka bisa anda ikuti lngkah-langkah penerapan nya di bawah ini

• Seperti biasa silahkan anda masuk ke blogger dengan email dan juga psword nya
• setelah itu silahkan anda klik Template yang berada di bagian Dashboard blogger
• Kemudian klik lagi Edit Html
• Setelah anda berada di pengeditan Html silahkan anda cari kode </b:skin> atau </style> untuk memduahkan pencarian anda,silahkan anda tekan tombol Ctrl+F secara bersamaan,kemudian letakan kode CSS berikut sebelum kode di atas

#tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
.tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
.tabber{padding:10px 0}
.tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
.tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
.tabber h2 a{color:#222}
.tabber h2 a:hover{color:#026ab5}

keterangan :: width:640px silahkan anda sesuaikan dengan panjang blog anda

• Setelah itu silahkan anda cari lagi kode </head> kemudian silahkan anda letakan kode berikut sebelum kode tesebut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7VDmURZKH_-WJtkJDBB7W41P4mvhNa2RuVC0lJlfccfGnA0EOAkegqTjU0_jmgF3I1QJBwFEclR7p2bFvfLndQAhEAtBduK8ttRJ11mU7yodViQiszT-qfX2zbsLPiGAqvNiPqFNDz6E/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
//]]>
</script>

Jika Tulisan yang berwarna merah sudah ada di templatemu,jangan lah di pasang kembali,hapus saja

• Langkah selanjut nya silahkan anda cari kode </body>biasa nya kode ini berada di akhir template,dan letakan kode berikut sebelum kode tesebut

Untuk Tulisan yang Berwarna silahkan anda ganti sesuai dengan judul Categori yang akan anda tampilkan

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
//]]>
</script>

• Kemudian silahkan anda letkan kode HTML berikut sesuai dengan ke inginan anda,namun ke banyakan orang menyimpan kode HTML ini di bawah main-wrapper

<div id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div>

• kemudian save template

Untuk yang berwarna merah,silahkan anda ganti dengan Nama Categori atau label blog anda

Nah itulah cara membuat Tab View Categori di blog semoga artikel nya bisa membantu sobat blogger,selamat mencoba dan semoga berhasil

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 29 Juni and have 0 komentar