Membuat menu tab view blog dengan background gambar menarik
Pada siang hari ini ini yang
akan saya posting adalah bagaimana caranya membuat menu tab view pada
blog. Sebenarnya sudah banyak artikel yang membahas tentang artikel
seperti ini, apa salahnya saya mencoba berbagi ilmu dan ikut meramaikan
tutorial sederhana ini, dan yang akan kita lakukan adalah membuat menu
tab view dengan background gambar menarik yang tentunya lebih
memaksimalkan tampilan blog kita dan membuat pengunjung blog kita betah
berlama-lama di blog kta. Sebelumnya mari kita simak yang ini :
- Untuk menghindari hal yang tidak kita inginkan terlebih dahulu Download lengkap template anda , agar bisa dikembalikan lagi seperti semula jika tidak berhasil / salah dalam pengeditan.
- Setelah memasukkan kode tambahan sebelum menyimpan template anda pratinjau dahulu, jika tidak ada pesan error berarti langkah-langkahnya sudah benar.
- Centang Expand Tamplate Widget (untuk menampilkan kode-kode yang tersembunyi)
- Saat mencari suatu code dan untuk memudahkan pencarian klik Ctrl+F kemudian letakkan kode yang ingin anda cari.
- Langsung menuju apa yang aka kita lalkukan hari ini yaitu cara membuat menu tab view blog dengan background gambar menarik
- Loggin ke Blogger => Layout => Edit HTML dan cari kode ini “]]></b:skin>“ Lalu simpan kode berikut tepat diatas kode “]]></b:skin>“
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 91px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #5EAAC2; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #FFFFFF; /* 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: #5EAAC2; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #5EAAC2; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #330066; /* 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: 3px 5px;
}
#nav {
background:url(�http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/s1600/topmenu-c.png�)
no-repeat scroll 0 0 #FFFFFF;
clear:both;
height:32px;
margin:0 auto;
padding:4px 0 0;
}
#nav-left {
display:inline;
float:left;
padding-left:6px;
padding-top:1px;
width:660px;
}
#nav-right {
display:inline;
float:right;
padding-right:15px;
padding-top:3px;
width:200px;
}
#nav ul {
font:bold 1em Verdana,Arial,Helvetica,sans-serif;
margin:0;
overflow:hidden;
padding-left:0;
position:relative;
}
#nav ul li {
float:left;
list-style:none outside none;
}
#nav ul li a, #nav ul li a:visited {
color:#FFFFFF;
display:block;
margin:1px 4px;
padding:4px;
text-decoration:none;
}
#nav ul li a:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#999999;
color:#FFFFFF;
margin:1px 4px;
padding:4px;
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#999999;
color:#FFFFFF;
margin:1px 3px;
padding:4px;
}
- Perhatikan dengan seksama text yang berwarna merah, lakukan pengaturan sesuai selera anda.
- Sekarang anda cari kode “<head/>“ Simpan kode berikut tepat sekali diatasnya
<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>
<!-- Envolve Chat -->
<script type='text/javascript'>
var envoSn=19210;
var
envProtoType = (("https:" ==
document.location.protocol) ? "https://" :
"http://");
document.write(unescape("%3Cscript
src='" + envProtoType +
"d.envolve.com/env.nocache.js'
type='text/javascript'%3E%3C/script%3E"));
</script>
- Karena kode-kode itu sangat sensitif, setelah memasukkan kode-kode tambahan kedalam tamplate anda seperti yang saya himbau di atas, ada baiknya pratinjau dahulu tamplate anda, jika tidak ada pesan error berarti langkah-langkah yang anda lakukan terhadap tamplate anda sudah benar.
- klau sudah benar klik save tamplate
- Langkah ter akhir Klik add a gadget >>> pilih “HTML/java script“
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Articles</a>
<a>Comments</a>
<a>Banner</a>
</div>
<div class="Pages" style="background: url("URL GAMBAR DISINI") transparent; height: 305px; padding: 2px; width: 273px;">
<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>
- Simpan gadget
- Selesai
Tambahan : (perlu anda perhatikan)
- Tulisan warna merah, untuk “judul tab” misal nih Articles (pada tab 1). Comments (pada tab 2) dst
- Tulisan
warna kuning, untuk memasukkan isi tab. Bila antar isi dalam satu tab
(misal isi dalam tab 1) ingin tidak tampak terpisah-pisah maka hapus
kode tersebut
- Jangan lupa ganti (URL GAMBAR DISINI) dengan URL gambar anda
- Jika ingin merubah warna border dan background kotak menu atas sesuai dengan blog anda, bisa langsung berkunjung kesini
0 komentar:
Posting Komentar