Tab view 3 in 1 menampilkan entri popular yang mendapat komen tertinggi, nama pemberi komen terbanyak dan komen terbaru.
Tab view ini akan memberikan penampilan yang lebih kemas serta menjimatkan ruang blog anda
Sekiranya anda mahu memasang tab view ini sila ikuti beberapa langkah mudah di bawah.
1. Sign in akaun blogger anda.
2. Pilih LAYOUT --> EDIT HTML.
3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.
4. Cari kod ini.
5. Copy kod di bawah dan letakkan di atas kod tadi.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Perhatian !!! Anda boleh mengubah kod berwarna biru mengikut kesesuaian saiz yang anda mahukan.
6. Seterusnya cari kod ini.
7. Copy kod di bawah dan letakkan di atas kod tadi.
8. Save Template anda.
9. Langkah seterusnya pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.
10. Copy kod di bawah dan Paste.
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 280px;" class="Tabs">
<a>Popular</a>
<a>Top</a>
<a>Terbaru</a>
</div>
<div style="width: 280px; height: 350px;" class="Pages">
<div class="Page">
<div class="Pad">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>
</div>
</div>
<div class="Page">
<div class="Pad"> <p>
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=0fa4b52819e930cfa76ab4323eb17f99&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10" type="text/javascript"></script> <p>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Perhatian !!! Anda perlu menggantikan kod berwarna biru kepada nama blog anda dan untuk mengubah saiz atau tajuk tab view.
11. Setelah selesai Save dan view blog untuk melihat hasilnya.
12. Selamat Mencuba.
