Membuat Menu Tab View

Ingin blognya lebih rapi lagi? pakai saja navigasi yang satu ini, yaitu Menu Tab View.Dengan menu tab view, kita akan menghemat lebih banyak tempat, dengan sedikit space kita bisa menampilkan banyak pilihan. Misalnya kita bisa menampilkan menu tulisan Terbaru, Komentar, dan Terpopuler. angsung saja akan kita pelajari bersama cara membuat menu tab view, seperti yang saya pakai sekarang ini. !ntuk membuat tab view yang kita pelajari ini cukup mudah, tidak perlu mengedit template, tapi hanya menambahkan script saja di HTML/JavaScript. Cara Membuat Menu Tab View ". Login ke blogger #. $ilih Rancangan kemudian Tambah Gadget %. $ilih HTML/JavaScript &. Masukan kode script berikut ini' (div)(style type*+te,t-css+) div.Tab.iew div.Tabs /height' %0p,1over2low' hidden3 div.Tab.iew div.Tabs a /2loat'le2t1 display'block1 width' 44p,1 -5 ebar Menu !tama 6tas 5te,t7align'center 1 height' %0p,1 -5 Tinggi Menu !tama 6tas 5padding7top'8p,1 vertical7align'middle1 border'"p, solid 9:D:D:D1 -5 ;arna border Menu 6tas 5border7bottom7width'01 te,t7decoration' none1 2ont72amily' +.erdana+, <eri21 -5 =ont Menu !tama 6tas 52ont7weight'bold1 color'90001 -5 ;arna =ont Menu !tama 6tas 57mo>7border7radius7tople2t'"0p,1 7mo>7border7radius7topright'"0p,3 div.Tab.iew div.Tabs a'hover, div.Tab.iew div.Tabs a.6ctive /background7color' 93333331 -5 ;arna background Menu !tama 6tas 5- 3 div.Tab.iew div.$ages /clear'both1 border'"p, solid 9:D:D:D1 -5 ;arna border Kotak !tama 5- over2low'hidden1 background7 color'93333331 -5 ;arna background Kotak !tama 5- 3 div.Tab.iew div.$ages div.$age /height'"00?1 padding'0p,1 over2low'hidden3 div.Tab.iew div.$ages div.$age div.$ad /padding' @p, @p,3 (-style) (script type*Ate,t-javascriptA) --(BCDD6T6C 2unction tabviewEau,FTab.iewId, idG

/ var Tab.iew * document.getHlement:yIdFTab.iewIdG1 -- 77777 Tabs 77777 var Tabs * Tab.iew.2irstDhild1 while FTabs.classIame B* +Tabs+ G Tabs * Tabs.ne,t<ibling1 var Tab * Tabs.2irstDhild1 var i * 01 do / i2 FTab.tagIame ** +6+G / iJJ1 Tab.hre2 * +javascript'tabviewEswitchFA+JTab.iewIdJ+A, +JiJ+G1+1 Tab.classIame * Fi ** idG ? +6ctive+ ' ++1 Tab.blurFG1 3 3 while FTab * Tab.ne,t<iblingG1 -- 77777 $ages 77777 var $ages * Tab.iew.2irstDhild1 while F$ages.classIame B* A$agesAG $ages * $ages.ne,t<ibling1 var $age * $ages.2irstDhild1 var i * 01 do / i2 F$age.classIame ** A$ageAG / iJJ1 i2 F$ages.o22setKeightG $age.style.height * F$ages.o22setKeight7 #GJ+p,+1 $age.style.over2low * +auto+1 $age.style.display * Fi ** idG ? AblockA ' AnoneA1 3 3 while F$age * $age.ne,t<iblingG1 3 -- 77777 =unctions 7777777777777777777777777777777777777777777777777777777777777 2unction tabviewEswitchFTab.iewId, idG / tabviewEau,FTab.iewId, idG1 3 2unction tabviewEinitiali>eFTab.iewIdG / tabviewEau,FTab.iewId, "G1 3 --LL) (-script) (2orm action*+tabview.html+ method*+get+) (div id*+Tab.iew+ class*+Tab.iew+) (div style*+width' #&0p,1+ class*+Tabs+) (a)Terbaru(-a) (a)Komentar(-a) (a)Iklan(-a) (-div) (div style*+width'#&0p,1 height'%00p,1 + class*+$ages+) (div class*+$age+) (div class*+$ad+)

<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js"> </script> <script style="text/javascript"> var numposts = !" var showpostdate = true" var showpostsummary = true" var numchars = !!" var standardstyling = true" </script> <script src="http://#urniasepta.blogspot.com/$eeds/posts/de$ault% orderby=published&amp"alt=json-inscript&amp"callbac#=showrecentposts"> </script> (-div) (-div) (div class*+$age+) (div class*+$ad+) <script style="'text/javascript'" src="http://duniaanda.googlepages.com/typoxp-recentcomments(.js"> </script> <script style="text/javascript"> var numcomments = !" var showcommentdate = true" var showposttitle = true" var numchars = !!" var standardstyling = true" </script> <script src="http://#urniasepta.blogspot.com/$eeds/comments/de$ault% alt=json-in-script&callbac#=showrecentcomments"> </script> (-div) (-div) (div class*+$age+) (div class*+$ad+) <script src="http://#umpulblogger.com/sca.php%b=)!(*" type="text/javascript"></script> (-div) (-div) (-div) (-div) (-2orm) (script type*+te,t-javascript+) tabviewEinitiali>eFATab.iewAG1 (-script)(div)(-div)(-div) da beberapa !ang haru" #ita #etahui dari "cript di ata"$ Itu ada adalah tab view yang :elajar Igeblog di : MN gunakan, silahkan mengganti beberapa kode warna yang sesuai dengan blog 6nda. Misalnya ganti 333333 dan %%%%%% dengan ====== jika warna dasar blog anda adalah putih.

6nda dapat mengganti lebar dan tinggi menu tab view dengan merubah width'#&0p,1 height'%00p, sesuai dengan sidebar blog 6nda. Dan juga 6nda harus mengganti script di masing7masing tab F yang miring G dengan script yang 6nda inginpasang di tab view, atau jika tidak mau susah7susah ganti saja #urniasepta dengan sub domain blog 6nda.