Cara Membuat Menu tab View (recent post, comments, daftar isi) di Blogger

Post by Hori Revens on Monday, April 25, 2011 | 6:50 AM


Jika ada yang masih kebingungan dengan cara membuat menu ini, maka tidak salah tempat deh. Menu ini sangat favorit di kalangan teman-teman blogger lain coz menu ini bisa menyajikan banyak Form berisi link dalam satu Widget saja. Untuk teman-teman master sih pasti sudah ngerti dan tahu tapi klo untuk yang newbie saya jelaskan aja deh, hehehe. Ini deh triknya semoga bermanfaat yah ^^

  1. Login ke Blogger.
  2. Pilih tab Design – Page Elements.
  3. Add widget – HTML/JavaScript.
  4. Masukkan kode berikut ini :
<div><style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 120px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#FF0000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #333333; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:3px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* Warna background Kotak Utama */ }

div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 370px;" class="Tabs">
<a>Newest</a>
<a>Comments</a>
<a>Sitemap</a>
</div>
<div style="width:370px; height:260px; " class="Pages">
<div class="Page">
<div class="Pad">

<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://horier.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
</div>
</div>

<div class="Page">
<div class="Pad">
<script style="”text/javascript”" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://horier.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</div>
</div>

<div class="Page">
<div class="Pad">
<script src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daftarisi.js"></script><script src="http://horier.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><div></div></div>
  1. Ganti URL berwarna merah dengan URL blog anda sendiri dan juga URL sitemap anda.
  2. Bila perlu, ganti juga code yang berwarna ungu untuk menyesuaikan dengan template anda, setelah itu Save dan bisa dilihat hasilnya.

    21 Comments:

  1. wow.. info yg bagus kang!! bisa aku coba!!

  2. sip gan. tp bikin load tambah lemot euy

  3. @moo-no : oke deh sob, monggo silakan ^^

    @afif : kayaknya sih ya sob cuman dikit ketimbang banner tu malah berat

  4. informasinya mantap sekali nih sob , sangat bermanfaat sekali gan , langsung saja ke tkp

  5. @jelly : oke deh sob, thanks ya..monggo deh silakan dicoba ^^

  6. Tutorial yang keren gan...aku baru tau,,hehehe lam kenal

  7. @motogp : yoi sob, salam kenal juga deh

  8. mantap nih,,,langsung aza meluncur ke tkp,,makasih banyak,,

  9. pencerahan baru nih,,sangat bermanfaat sekali,,makasih banyak kawan,,,sukses trus,,ditunggu info selanjutnya,,

  10. @obat : iy mas sabar aja yah nunggu artikel lainnya, hehehe .. oke" silakan dicoba deh triknya ^^

  11. sob ada gak cara nyembunyiin tab view??maksud aq cuma tampil di halaman psting?

  12. @randy : hmmm .. maksudnya biar bisa tampil selain di homepage'kan?? ada sob tutornya ane kesana aja kasih tau tips-nya

  13. Ane coba kox scroll nya gag fungsi gan? mohon bantuannya gan

  14. @latest : hmmm..koq aneh ya, padahal dulu aku coba bisa koq..mungkin bisa kamu tulis kata" errornya apa sob?

  15. tfs kawan...
    oia, ane bisa lihat demonya dmn y sob?

    Salam damai kami sepanjang hari..

  16. Nice info. Thanks for sharing.

    Asia Poker99 merupakan agen Poker Terpercaya di Indonesia,
    Poker Gampang Menang serta Poker Tanpa Bot akan membuat Anda betah untuk bermain di AsiaPoker 99!

    Ayo cobain sekarang juga!

  17. Post a Comment

    Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .