TUTORIAL BOX FUNNY ALL IN ONE

kemaren ada yang tanyak nih gimana cara buat box macam ini.

nah, ini box dila kasih nama Box Funny All in one .

kenapa dila kasih nama seperti itu ???

jawabannya karena Box ini diajari sama kak Funny sang penghuni Blog Diary Khansa .

dan box ini sangat efisien sekali. Semua widget bisa dijadikan satu.

makanya, dila bilang "ALL IN ONE" hehehe...

nah, sekarang dila nak bagi-bagi tutor nih..

langsung aja ya ..

step 1

log in dulu ke blog korang

step 2

buka tata letak, tambahkan gadget HTML/Javascript

step 3

copy kode dibawah ini 

<div class="separator" style="clear: both; text-align: left;"> <br /></div> <div class="separator" style="clear: both; text-align: left;"> </div> <div class="separator" style="clear: both;"> <style type="text/css"></div> <div class="separator" style="clear: both;"> div.TabView div.Tabs</div> <div class="separator" style="clear: both;"> {height: 30px;overflow: hidden}</div> <div class="separator" style="clear: both;"> div.TabView div.Tabs a {float:left; display:block; width: 67px; </div> <div class="separator" style="clear: both;"> text-align:center ; height: 50px; </div> <div class="separator" style="clear: both;"> padding-top:8px; vertical-align:middle; border:1px solid #555555; </div> <div class="separator" style="clear: both;"> border-bottom-width:0; text-decoration: none; font-family: "Kristen ITC"; </div> <div class="separator" style="clear: both;"> font-weight:bold; color:#000000; </div> <div class="separator" style="clear: both;"> -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}</div> <div class="separator" style="clear: both;"> div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active</div> <div class="separator" style="clear: both;"> {background-color: #FFACC7; </div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; </div> <div class="separator" style="clear: both;"> overflow:hidden; background-color:#FF95B8; </div> <div class="separator" style="clear: both;"> div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}</div> <div class="separator" style="clear: both;"> div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</div> <div class="separator" style="clear: both;"> </style></div> <div class="separator" style="clear: both;"> <script type='text/javascript'></div> <div class="separator" style="clear: both;"> //<![CDATA[</div> <div class="separator" style="clear: both;"> function tabview_aux(TabViewId, id)</div> <div class="separator" style="clear: both;"> {</div> <div class="separator" style="clear: both;"> var TabView = document.getElementById(TabViewId);</div> <div class="separator" style="clear: both;"> // ----- Tabs -----</div> <div class="separator" style="clear: both;"> var Tabs = TabView.firstChild;</div> <div class="separator" style="clear: both;"> while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;</div> <div class="separator" style="clear: both;"> var Tab = Tabs.firstChild;</div> <div class="separator" style="clear: both;"> var i = 0;</div> <div class="separator" style="clear: both;"> do</div> <div class="separator" style="clear: both;"> {</div> <div class="separator" style="clear: both;"> if (Tab.tagName == "A")</div> <div class="separator" style="clear: both;"> {</div> <div class="separator" style="clear: both;"> i++;</div> <div class="separator" style="clear: both;"> Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";</div> <div class="separator" style="clear: both;"> Tab.className = (i == id) ? "Active" : "";</div> <div class="separator" style="clear: both;"> Tab.blur();</div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> while (Tab = Tab.nextSibling);</div> <div class="separator" style="clear: both;"> // ----- Pages -----</div> <div class="separator" style="clear: both;"> var Pages = TabView.firstChild;</div> <div class="separator" style="clear: both;"> while (Pages.className != 'Pages') Pages = Pages.nextSibling;</div> <div class="separator" style="clear: both;"> var Page = Pages.firstChild;</div> <div class="separator" style="clear: both;"> var i = 0;</div> <div class="separator" style="clear: both;"> do</div> <div class="separator" style="clear: both;"> {</div> <div class="separator" style="clear: both;"> if (Page.className == 'Page')</div> <div class="separator" style="clear: both;"> {</div> <div class="separator" style="clear: both;"> i++;</div> <div class="separator" style="clear: both;"> if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";</div> <div class="separator" style="clear: both;"> Page.style.overflow = "auto";</div> <div class="separator" style="clear: both;"> Page.style.display = (i == id) ? 'block' : 'none';</div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> while (Page = Page.nextSibling);</div> <div class="separator" style="clear: both;"> }</div> <div class="separator" style="clear: both;"> // ----- Functions -------------------------------------------------------------</div> <div class="separator" style="clear: both;"> function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }</div> <div class="separator" style="clear: both;"> function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</div> <div class="separator" style="clear: both;"> //]]></div> <div class="separator" style="clear: both;"> </script></div> <div class="separator" style="clear: both;"> <form action="tabview.html" method="get"> </div> <div class="separator" style="clear: both;"> <div id="TabView" class="TabView"> </div> <div class="separator" style="clear: both;"> <div style="width: 300px;" class="Tabs"> </div> <div class="separator" style="clear: both;"> <a><span style="color: red;">(nama subtitle 1)</span></a></div> <div class="separator" style="clear: both;"> <a><span style="color: red;">(nama subtitle 2)</span></a></div> <div class="separator" style="clear: both;"> <a><span style="color: red;">(nama subtitle 3)</span></a></div> <div class="separator" style="clear: both;"> <br /></div> <div class="separator" style="clear: both;"> </div> </div> <div class="separator" style="clear: both;"> <div style="width:210px; height:280px; " class="Pages"> </div> <div class="separator" style="clear: both;"> <div class="Page"> </div> <div class="separator" style="clear: both;"> <div class="Pad"> </div> <div class="separator" style="clear: both;"> <span style="color: red;">(kode data subtitle 1)</span></div> <div class="separator" style="clear: both;"> <br /></div> <div class="separator" style="clear: both;"> <textarea><span style="color: red;">(keterangan data subtitle 1)</span>

step 4 

otak-atik sendiri ya ...

hehehe...

step 5

pratinjau dulu, kalau tak rusak langsung save

okedeh! sekian tutor tentang BOX FUNNY ALL IN ONE .

semoga bermanfaat.

jika ada yang tak paham, bole tanyak Dila.

oke !

---

Terimakasih sudah membaca , Tinggalkan komentarnya juga ya

---