Bagaimana cara membuat sub menu seperti yang ada di blog ini dan ini.
Mungkin yang di maksud adalah menu Touch Down (mendarat), atau yang biasa disebut sebagai submenu navbar horisontal. sesuai dengan namanya 'mendarat' yakni menu ini akan bekerja ketika pointer mouse melintas diatas link tersebut. Yang menampilkan daftar-daftar link yang lain ke bawah.Tutorial ini kelanjutan dari cara membuat sub menu link yang erat kaitannya dg tutorial ini, karena menu touch down biasanya di letakan pada sub menu. Manfaat submenu navbar ber-horizontal ini yakni untuk menghemat ruang pada blog, sama halnya menu multi kolom yang di ciptakan untuk menghemat ruang pada blog, namun sayang menu touch down dan menu multi kolom hanya bekerja ketika di akses lewat komputer, jika diakses lewat ponsel maka tidak bisa bekerja. Tapi bagi yang ingin mencoba silahkan ikuti tutorial berikut :
Kemudian tempatkan kode CSS berikut di atas kode ]]></b:skin>
#SubNavbar{background:#bb0000; width:960px; height:32px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; margin:0; padding:0;} #touch{margin:0; padding:0;} #touch ul{float:left; list-style:none; margin:0; padding:0;} #touch li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #touch li a, #touch li a:link, #touch li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;} #touch li{float:left; padding:0;} #touch li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #touch li ul a{width:140px;} #touch li ul ul{margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul{left:-999em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul{left:auto;} #touch li:hover, #touch li.sfhover{position:static;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} ..topleft {width: 304px; float: left; margin: 0; padding:0;} ..topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} ..topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
Kemudian tambahkan kode HTML berikut di bawah kode <div id='header'> atau jika menu ini akan di tampilkan di atas konten seperti contoh demo yang di sebutkan di atas info.blogtegal.com maka kode HTML berikut di tempatkan tepat diatas <div id='content-wrapper'>
Keterangan Text yangn berwara merah adalah link. ganti text1 dan 2 tersebut dengan link kamu. Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus kamu ganti.
Cara Memasukkan Codenya Sebagai Berikut : 1. Login 2. klik Tata Letak atau Layout 3. Klik Tambah Elemen atau Add Element 4. Klik HTML / JAVASCRIPT 5. Copy dan paste kode di atas 6. Klik Simpan/Save. 7. Sudah selesai
Banyak widget yang harus di tampilkan di sidebar blog, tapi karena tempat tidak mencukupi akhirnya tidak dipasang. Untuk mengatasi semua itu kita bisa memakai cara dengan cara membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.
Berikut cara membuat menu tab view di blog: 1. Masuk blogger >> rancangan >> edit html >> centang expand template widget 2. cari kode ]]></b:skin> 3. copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>
Perhatikan tulisan : width: 103px; = lebar tabs (tab1, tab2, tab3). background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).
4. Selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat 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>
5. Kemudian Simpan / Save Template. 6. Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript 7. Copy kode di bawah ini di dalam box atau kotak HTML/Javascript
Perhatikan tulisan merah width: 350px;ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3 bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit cara menambah menu tab view di blog, hanya membutuhkan kesabaran sedikit saja :D. Pengen blog sobat lebih cantik? Beri juga navigasi nomor halaman di blog. Berikut cara membuat navigasi nomor halaman di blog.
