Tunggu ya!!!!
Antologi Puisi & Cerpen
Tunggu ya!!!!
Menu Tab View Tanpa Edit HTML 2
Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.
- Copy kode berikut untuk Menu Tab View dengan border yang melengkung.
<style type="text/css">
#badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; -moz-box-shadow: 2 4 4 #cccccc;
-webkit-box-shadow: 2 4 4 #cccccc;
-goog-ms-box-shadow: 2 4 4 #cccccc;
box-shadow: 2 4 4 #cccccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-goog-ms-border-radius: 10px;
border-radius: 10px;}
div.TabView div.Tabs
{height: 30px;overflow: hidden;}
div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
text-align:center ; height: 18px; /* tinggi menu atas */
padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
font-weight: normal; color: white; /* warna font menu atas */ -moz-box-shadow: 1 2 2 #000000;
-webkit-box-shadow: 1 2 2 #000000;
-goog-ms-box-shadow: 1 2 2 #000000;
box-shadow: 1 2 2 #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active -moz-box-shadow: 1 2 2 #000000;
-webkit-box-shadow: 1 2 2 #000000;
-goog-ms-box-shadow: 1 2 2 #000000;
box-shadow: 1 2 2 #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-goog-ms-border-radius: 15px;
border-radius: 15px;color: #000000;background: #fff290; /* background menu atas */ }
div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
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>
<form action="tabview.html" method="get">
<div id="badan">
<div id="TabView" class="TabView">
<div style="width:355px;" class="Tabs">
<a>Daftar Isi</a>
<a>Recent Post</a>
<a>Komentar</a>
<a>Link Blog</a>
<a>Tukar Link</a>
</div>
<div style="width:355px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 3
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 4
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 5
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Hasilnya seperti gambar di bawah.
- Copy kode berikut untuk Menu Tab View biasa.
<style type="text/css">
#badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; }
div.TabView div.Tabs
{height: 30px;overflow: hidden;}
div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
text-align:center ; height: 18px; /* tinggi menu atas */
padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
font-weight: normal; color: white; /* warna font menu atas */ }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {color: #000000;background: #fff290; /* background menu atas */ }
div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
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>
<form action="tabview.html" method="get">
<div id="badan">
<div id="TabView" class="TabView">
<div style="width:355px;" class="Tabs">
<a>Daftar Isi</a>
<a>Recent Post</a>
<a>Komentar</a>
<a>Link Blog</a>
<a>Tukar Link</a>
</div>
<div style="width:355px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 3
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 4
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 5
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Hasilnya akan seperti ini. Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.
Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.
Membuat Menu Tab View tanpa Edit HTML
Caranya sangatlah gampang, tidak perlu susah-susah. Sobat blogger tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.
Silahkan login ke Blogger, pilih RANCANGAN, kemudian pada Elemen Halaman, klik Tambah Gadget. Silahkan pilih HTML/Javascript. Copy paste kode di bawah ini ke dalamnya:
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Tulisan warna kuning adalah judul dari menu Anda, sedangkan tulisan warna merah adalah isi dari menunya. Untuk lebar, huruf (font), dan tingginya, silahkan sesuaikan dengan lebar sidebar blog Anda. Hasilnya bisa Anda lihat di sini!
Kalau belum jelas, silahkan berkomentar. Ditunggu ya???
Selamat Belajar!!!
Mengenal Kode HTML
HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa dari World Wide Web (WWW) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser
Tag-tag dasar HTML:
<html> : Definisi sebuah dokumen HTML
<title> : Definisi judul dalam dokumen
<body> : Definisi body dokumen
<h1> - <h6> : Definisi heading 1 s/d 6
<p> : Definisi sebuah paragraf
<br> : Sisipan line break
<!-- > : Definisi kompentar dalam source code
Tag-tag pemformatan:
<b> : Teks yang ditebalkan
<big> : Teks dengan ukuran yang besar
<em> : Teks yang diberi tekanan
<i> : Teks yang dimiringkan
<small> : Teks yang kecil ukurannya
<strong> : Teks yang ditebalkan
<sub> : Subscipt
<sup> : Superscript
<ins> : Teks yang disisipkan
<del> : Teks yang dihapus
<u> : Teks yang diberi garis bawah
Tag-tag Link dan List:
<a> : Definisi untuk ancor
<link> : untuk warna text sebelum diklik
<vlink> : untuk mengubah warna text link setelah diklik
<alink> : akan mengubah warna link aktif
<ol> : Ordered list / untuk penomoran
<ul> : Unordered List / bullet
<li> : List item
<dl> : Definition term
<dd> : Definition description
Karakter khusus dalam file HTML :
& quot ; ( " )
& amp ; ( & )
& frasl ; ( ⁄ )
& lt ; ( < )
& gt ; ( > )
& nbsp ; ( spasi )
& copy ; ( © )
Selamat belajar dan sukses selalu!!!