Info informasi Cara membuat tabview blogger atau artikel tentang Cara membuat tabview blogger ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.
Cara membuat tabview blogger ini merupakan salah satu cara yang banyak digunakan untuk membuat blog dengan template berbasis magazine style, contohnya di sini, tapi yang kang supris tampilkan bukanlah yang seprti itu, namun yang ingin di share dalam belajar ngeblog ini adalah seperti yang anda bisa liat di situs sumbernya di sini,trik ini merupakan cara yang jitu untuk membuat situs anda terasa seperti situs terkenal...hehe...nah, untuk membuat tabview ini, caranya ikuti petunjuk berikut:
* Login dulu ke account blogger anda
* lebih baik lagi jika anda praktek di blog "percobaan", bukan blog aslinya...biar ntar gak rugi kalo dah terlanjur di save
* Pilih tab Tata Letak --> Edit HTML
* Download dulu template aslinya...biar ntar kalo ada kesalahan gak terlalu ribet mengembalikannya
Copy kode berikut dan pastekan di atas kode ]]></b:skin>
* Tips : Kalau susah mencarinya, coba tekan tombol Ctrl+F, di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Copy kembali kode berikut di atas </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>
Setelah itu,
* Simpan template anda.
* 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 id="TabView" class="TabView">
<div style="width: 75%;" class="Tabs">
<a>Blogger Tips</a>
<a> Download Gratisan</a>
<a>Adsense</a>
</div>
<div style="width: 98%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
Tips Blogger 1 <br/>
Tips Blogger 2 <br/>
Tips Blogger 3 <br/>
</div>
</div>
<div class="Page">
<div class="Pad">
Free Download 1 <br/>
Free Download 2 <br/>
Free Download 3 <br/>
</div>
</div>
<div class="Page">
<div class="Pad">
adsense 1 <br/>
adsense 2 <br/>
adsense 3 <br/>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
* Sekarang lihat tab view dalam blog Anda
perhatikan kode di atas:
1. Kode yang berwarna Biru merupakan teks yang letaknya dalam Tab atau judul tab-nya.
2. Kode yang berwarna hijau tua adalah tampilan teks yang akan muncul dalam halaman tab view.
3. Kode yang berwarna merah merupakan tampilan lebar halaman tab view.
SUMBER : http://www.suprisdiantoko.com/2009/03/cara-membuat-tabview-blogger.html
Demikian artikel tentang Cara membuat tabview blogger ini dapat kami sampaikan, semoga artikel atau info tentang Cara membuat tabview blogger ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
Melalui jaringan backlink yang kami miliki merupakan penyedia jasa backlink menerima berbagai backlink Indonesia dengan layanan jasa backlink murah yang kami kelola secara manual dan profesional. Kami menawarkan jasa backlink terbaik. Bagaimana cara membeli backlink dari kami?. Silahkan 👉 Hubungi Kami! harga sangat terjangkau!
Berikut adalah daftar 50 situs Jaringan Backlink kami!
Kami jaringan backlink sebagai media backlink bisa juga menerima content placement yakni jasa backlink termurah kami di dalam artikel. Pesan segera jasa backlink termurah ini. Karena kami adalah raja backlink yang sebenarnya!
