rss

Thursday, October 2, 2008

Cara pasang tabview pada blogspot


Kali ini saya menjelaskan cara pasang tabview di blogspot, dan semoga bisa membantu para blogger khususnya yang masih newbie walapun saya sendiri masih awam tentang dunia blog. berikut pencerahannya:

  1. login ke blogger "Layout-> Edit Html.
  2. cari kode ini: ]]></b:skin>
  3. copy paste kode dibawah pas diatas kode ini: ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

setelah Anda memasang kode diatas carilah kode "</head>" dan pasang kode dibawah ini pas diatas kode "</head>"

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

kemudian save (simpan)

selanjutnya klik page element - menu -> add page element-> copy paste kode dibawa ini :

&lt;script src='http://superin<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>host.com/trikblog/tabview.js' type='text/javascript'/&gt;

janga lupa di simpan. happy blogging!






4 Komentar:

Pascal on October 8, 2008 at 10:59 AM said...

mas kalo tab view ini disimpan di posting, bakalan muncul kagak????? :D

Duan on October 8, 2008 at 11:36 AM said...

@Pascal
klo di diatas postingan itu bisa, tapi kalo di postingan kyknya gak bisa:)

Panda on October 9, 2008 at 3:02 PM said...

dulu pernah pake tp ancur, cb pake yg ini ah.tp kantongin dulu buat kapan2 kalo ganti layout

makasih mas

internet indonesia on December 27, 2009 at 9:20 AM said...

puyeng dah kalo uda otak atik kode HTML.

tukeran link ama blog ruanginternet mari ke sini...


Post a Comment

Masukan komentar kamu

 
Sitemeter

Recent Comment

Followers