Pages

Kamis, 08 Desember 2011

Cara Membuat Tab View di Blogger


Cara Membuat Tab View di Blogger-Sebagian banyak temen blogger tentu sudah mengetahui Cara Membuat Tab View,so klo begitu ini khusus sya share kepada temen blogger yang masih belum tau aja,Tab view ini sangat berguna bagi seorang blogger untuk memperbanya jumlah Tab View DI Blog nya ,kalau Tab view banya itu kemungkinan besar klik adsense akan menjadi lebih banyak,so gak usah banyak ngomong nih Cara Membuat Tab View di Blogger silahkan di amati dengan teliti,,,,,sebelum anda mengaplikasikanya di blog temen blogger sekalian:
  • Login dulu ke account temen blogger
  • Pilih tab Tata Letak --> Edit HTML.
Note/perhatian : Sebelum temen blogger melakukan edit template, tidak ada salanya temen blogger simpan dulu template dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk ,sehingga jika terjadi hal-hal yang sulit di kendalikan temen blogger sudah memiliki back-up untuk mengembalikannya seperti semula.
Tips : Kalau susah temen blogger kesulitan mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga temen blogger 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-top-left-radius:5px;
-webkit-border-top-left-radius: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;
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 :
  1. Kode berwarna hijau menunjukan ukuran Tab-view, rekomendasi: usahakan ukuran width yang berwarna hijau sama.
  2. Kode yang berwarna merah boleh temen blogger diganti dan sesuaikan dengan template blog.
  3. Silakan temen blogger edit kode di atas (ditambah atau dikurangi) dan berimajenasi dengan atribut lain, atau kalau temen blogger merasa sudah pas biarkan apa adanya.
  4. Untuk pemilihan warna, kamu dapat melihatnya di kode warna ini.
  • 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>
  • Simpan template .
  • 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>
  • Sekarang lihat tab view dalam blog kamu
Tips : Lakukan percobaan setiap kode trik blogger dalam blog uji coba  (pilih buat blog baru di dasbor blogger.com).

Catatan :
  1. Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
  2. Kode yang berwarna biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.

Selamat membuat tab view di Blogger cayo…..

Tidak ada komentar:

Poskan Komentar