Sekarang kita mulai trik blogger membuat tab view dalam blog :
- Login dulu ke account blogger kamu
- Pilih tab Tata Letak --> Edit HTML.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
div.TabView div.Tabs {
width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
Catatan :width: 350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width: 350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
- Kode yang berwarna biru bisa diganti dan sesuaikan dengan template blog kamu.
- Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.
- Untuk pemilihan warna, kamu dapat melihatnya di kode warna.
- Copy kembali kode berikut di atas kode </head>
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
- Simpan template kamu.
- Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
- Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
- Copy dan paste kode di bawah ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<div class="Page">
<div class="Pad">
<ul>
<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
Kamu bisa memasukkan script<br />
Kamu bisa memasukkan image<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />
</div>
</div>
<div class="Page">
<div class="Pad">
View 3.1<br />
View 3.2<br />
View 3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Selamat mencoba
<div class="TabView" id="TabView">
<div class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages">
<div class="Page">
<div class="Pad">
<ul>
<li>View 1.1</li>
<li>View 1.2</li>
<li>View 1.3</li>
</ul>
</div>
</div>
<div class="Page">
<div class="Pad">
Kamu bisa memasukkan script<br />
Kamu bisa memasukkan image<br />
Kamu bisa memasukkan numbered list/bullent list/<br />
Apalagi memasukkan teks atau link jelas bisa/<br />
</div>
</div>
<div class="Page">
<div class="Pad">
View 3.1<br />
View 3.2<br />
View 3.3<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Tidak ada komentar:
Posting Komentar