Cara Membuat Tab View dalam Postingan

Cara Membuat Tab View dalam Postingan di Blogspot - Setelah sekian hari mencari akhirnya ketemu juga cara mebuat tab view dalam postingan di blogspot. Biasanya yang ada adalah memasang tab view di bawah header, sidebar atau di bawah dan atas postingan. Dan kalau pun ada yang dalam postingan itu pun untuk domain berbayar dan biasanya pakai php. Kalau mau lihat contohnya untuk tab view dalam postingan coba aja lihat pada DEMO. Gimana??

Kalau sobat tertarik ingin mencoba memasangnya di blog silahkan saja langsung ikuti langkah-langkahnya sebagai berikut.

1. Login ke blogger
2. Pilih Pos
3. Pilih mode HTML
4. Copy dan Paste script berikut dalam postingan.

<style type="text/css"> #tablist{ padding: 3px 0; margin-left: 0; margin-bottom: 0; margin-top: 0.1em; font: bold 12px Verdana; } #tablist li{ list-style: none; display: inline; margin: 0; } #tablist li a{ padding: 3px 0.5em; margin-left: 3px; border: 1px solid white; border-bottom: none; background: red; } #tablist li a:link, #tablist li a:visited{ color: white; } #tablist li a.current{ background: red; } #tabcontentcontainer{ width: 400px; /* Insert Optional Height definition here to give all the content a unified height */ padding: 5px; border: 1px solid yellow; } .tabcontent{ display:none; } </style> <script type="text/javascript"> //Set tab to intially be selected when page loads: //[which tab (1=first tab), ID of tab content to display]: var initialtab=[1, "sc1"] ////////Stop editting//////////////// function cascadedstyle(el, cssproperty, csspropertyNS){ if (el.currentStyle) return el.currentStyle[cssproperty] else if (window.getComputedStyle){ var elstyle=window.getComputedStyle(el, "") return elstyle.getPropertyValue(csspropertyNS) } } var previoustab="" function expandcontent(cid, aobject){ if (document.getElementById){ highlighttab(aobject) detectSourceindex(aobject) if (previoustab!="") document.getElementById(previoustab).style.display="none" document.getElementById(cid).style.display="block" previoustab=cid if (aobject.blur) aobject.blur() return false } else return true } function highlighttab(aobject){ if (typeof tabobjlinks=="undefined") collecttablinks() for (i=0; i<tabobjlinks.length; i++) tabobjlinks[i].style.backgroundColor=initTabcolor var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor } function collecttablinks(){ var tabobj=document.getElementById("tablist") tabobjlinks=tabobj.getElementsByTagName("A") } function detectSourceindex(aobject){ for (i=0; i<tabobjlinks.length; i++){ if (aobject==tabobjlinks[i]){ tabsourceindex=i //source index of tab bar relative to other tabs break } } } function do_onload(){ var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1 collecttablinks() initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color") initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color") if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){ var cookieparse=get_cookie(cookiename).split("|") var whichtab=cookieparse[0] var tabcontentid=cookieparse[1] expandcontent(tabcontentid, tabobjlinks[whichtab]) } else expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) } if (window.addEventListener) window.addEventListener("load", do_onload, false) else if (window.attachEvent) window.attachEvent("onload", do_onload) else if (document.getElementById) window.onload=do_onload </script> <br /> <ul id="tablist"> <li><a class="current" href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc1', this)"><span style="font-family: Verdana, sans-serif;">Pesan penerbit</span></a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc2', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Menu 1</span></a></li> <li><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc3', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Menu 2</span></a></li> <li><a href="http://www.blogger.com/search.#" onclick="return expandcontent('sc4', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Menu 3</span></a></li> <li><a href="http://www.blogger.com/search.#" onclick="return expandcontent('sc4', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Menu 4</span></a></li> </ul> <div id="tabcontentcontainer"> <div class="tabcontent" id="sc1"> <span style="font-family: Verdana, sans-serif;">Blog ini berisi mengenai kumpulan beberapa script untuk mempercantik tampilan blog anda agar pengunjung blog betah berlama-lama mencari informasi yang diperlukan dalam halaman blog anda.Semoga postingan yang yang saya berikan bisa bermanfaat untuk sobat blogger semua.</span></div> <div class="tabcontent" id="sc2"> <span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/11/membuat-kotak-menu-tab-view.html">Membuat kotak menu tab view</a><br/><a href="http://alamatlinkanda.com">Teks anda</a><br/><a href="http://alamatlinkanda.com">Teks anda</a></span></div> <div class="tabcontent" id="sc3"> <span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/11/script-energy-saving-mode-pada-blog.html">Script Energy Saving Mode</a><br/><a href="http://alamatlinkanda.com">Teks anda</a><br/><a href="http://alamatlinkanda.com">Teks anda</a></span></div> <div class="tabcontent" id="sc4"> <span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/11/script-kamera-cctv-pada-blog.html" target="_blank">Script SMS gratis</a><br/><a href="http://alamatlinkanda.com">Teks anda</a><br/><a href="http://alamatlinkanda.com">Teks anda</a></span></div> <div class="tabcontent" id="sc5"> <span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/11/script-menyembunyikan-shoutbox-pada-blog.html" target="_blank">Script ShoutBox tersembunyi</a><br/><a href="http://alamatlinkanda.com">Teks anda</a><br/><a href="http://alamatlinkanda.com">Teks anda</a></span></div> </div>

5. Publish dan selesai.