Bikin seru Tab Menu View

Kalo kamu punya posting yang banyak atau seabrek, mending lebih baik mulai kamu ringkas dech.

Maksudnya apa nich koq nyuruh meringkasnya????
Gini maksudnya, misalkan saja kamu ingin melihat postingan orang untuk menambah ilmu dalam ber-blog ria. Nah kamu pasti nyari artikel tentang materi yang ingin kamu ambil pasti kamu pilih tombol "search" untuk menemukannya.
Tapi kenyataanya kurang efisien dan memakan waktu agak lama...

Supaya para pengunjung yang nyari artikelnya g' kelamaan nunggu n tepat sasaran, mending kamu pake cara ini di blog kamu, yaitu dengan memasang tab menu view

Kalo kamu tertarik ingin membuatnya, berikut ini tutorialnya :
1. Login di Blogspot -> Layout -> Edit HTML
2. Kemudian kamu cari kode ini ]]></b:skin> , supaya tepat sasaran kamu tekan CTRL+F trus masukkan kode tadi,n enter
3. Setelah ketemu kamu copy script di bawah ini dan paste sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid black;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}


4. Pasang script ini sebelum kode </head>
5. Setelah itu kamu save
6. Kamu copy script di bawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

7. Teks yang warnanya orange merupakan teks yang ada pada menu atas, sedangkan teks yang berwarna merah itu bisa kamu ganti dengan link-link postingan kamu, gambar, atow yang lain dech.
8. Trus copy lagi hasil editan tab view kamu yang berisi link tadi n
9. Lalu masuklah ke Page Element, terserah kamu mau menempatkannya diamana. Trus klik
Add Page Element -> HTML/JavaScript.
8. Trus Paste-kan script tadi kedalam kotak yang tersedia
9. Sekarang jadi deh tab menu view kamu....

2 comments:

  1. kok g ada tulisan yang warna merah, jadi bingung mnegartikan tulisannya

    ReplyDelete
  2. bro, di tempatku kok ga bisa ya

    ReplyDelete