Cara membuat Tab di SharePoint

Untuk mempercantik tampilan UI di SharePoint, kita bisa menggunakan Tab dimana webpart2 yang tampil di page akan terlihat lebih simple walaupun kita menggunakan banyak webpart. Dan juga untuk menghindari scroll down lebih banyak.

Adapun tampilannya seperti dibawah ini :

Untuk menampilkan seperti itu, kita menggunakan Content Editor ataupun HTML Form WebPart.
Adapun step by step untuk implementasinya :
1. Edit Page, dan add content editor
2. Klik HTML

3. Copy Script dibawah ini

<style type=”text/css”>
.et-tab {
PADDING-BOTTOM: 3px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: inline-block; BACKGROUND: url(/_layouts/images/selbg.png) repeat-x; FONT-SIZE: 8pt; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 3px
}
.et-activetab {
BORDER-BOTTOM: #ffaa19 1px solid; BORDER-LEFT: #ffaa19 1px solid; BACKGROUND-COLOR: #ffaa19; COLOR: #050505; BORDER-TOP: #ffaa19 1px solid; BORDER-RIGHT: #ffaa19 1px solid
}
.et-inactivetab {
BORDER-BOTTOM: #007fff 1px solid; BORDER-LEFT: #007fff 1px solid; BACKGROUND-COLOR: #007fff; COLOR: #ffffff; BORDER-TOP: #007fff 1px solid; BORDER-RIGHT: #007fff 1px solid
}
.et-separator {
BACKGROUND-COLOR: #ffaa19; HEIGHT: 5px
}
.et-tabrow {
WHITE-SPACE: nowrap
}
.et-offscreen {
POSITION: absolute; MAX-WIDTH: 1px; MAX-HEIGHT: 1px; TOP: -9999px
}</style>

<script>

(function()
{
var AP=”Play”,sec=30,Header=”none”,Split=”No”,Expand=”+”,Print=””;
if (document.forms[0].elements[“_wikiPageMode.value”]==”true”||document.forms[0].elements[“MSOLayout_InDesignMode”].value==”1″){return;}

</script>

4. Jangan lupa untuk menghide webpart tersebut.