Blog Archive
-
2011
(136)
- Februari(1)
-
Januari(135)
- Mengapa Bung Karno di Gilai Wanita?
- 5 Bualan Yang Disukai Cewek! cewek jangan baca!
- Facebook 'Sebarkan' Virus Sipilis
- Alasan Wanita Lajang Tertarik Pria Beristri
- Ditemukan, Nenek Moyang Virus HIV AIDS
- 10 Fakta Sehat Tentang Kopi
- Menyembunyikan Drive Dengan NoDrives Manager
- Facebook Chat Dan Yahoo Chat Dengan Digsby
- Lindungi File Penting Anda Dengan FileSecrets
- Ebook Gratis Microsoft SQL Server 2008 R2
- Memperbaiki Windows Dengan Microsoft Fix It Center
- Gratis Ashampoo Internet Accelerator 2 Serial Number
- 5 Situs Untuk Mengolah Foto Secara Online
- Windows 7 Sidebar Untuk Windows XP Dan Vista
- Download Ebook Gratis Tutorial Adsense
- Download Firefox 4 Beta
- Nitro PDF Reader – Free PDF Reader, Editor & Creator
- Situs Gratis Untuk Membuat Logo
- Kirim SMS Gratis Via Internet
- Nonton TV Lewat Internet
- Hamster Free Video Converter
- Mengelola Dan Mempercantik Desktop Dengan 360desktop
- SpyShelter, Software Anti KeyLogger
- Cara Membuat Bootable USB Drive
- Login Dengan Beberapa Username Menggunakan Multifox
- Memberi Password Pada Folder Dengan My Lockbox
- Mengunci Komputer Dengan USB Flash Drive
- Cara Cepat Membuka Folder Dengan Buzz Folders
- Mengubah Konfigurasi Windows Dengan X-Setup Pro
- Mengedit Foto Dengan Mudah Menggunakan Zoner Photo...
- JDownloader, Download Manager Gratis
- ImTranslator, Firefox Addons Untuk Menterjemahkan ...
- Memberikan Berbagai Macam Efek Ke Foto Dengan FunP...
- Winstep Nexus, Sistem Docking Untuk Windows
- Ultra Copier, Mempercanggih Fungsi Copy Di Windows
- Mengubah Format File Secara Online
- Membaca Buku Dan Majalah Secara Online Dengan GooR...
- Fishbowl, Aplikasi Facebook Client
- Memproteksi Folder Dengan Folder Access 2.1
- Backup & Restore Firefox Setting Dengan MozBackup
- Backup Dan Restore Data Dengan EASEUS Todo Backup
- 7 Kebencian Pria Soal Kekasihnya
- 4 Kesalahan Orang Baru Putus Cinta
- 10 Hal Tentang Pria Idaman Wanita
- Do'a mencari jodoh
- Cinta or Nafsu?
- Menampilkan Recent Post
- Menambahkan Total Komentar pada Judul Postingan
- Menambahkan Page View This Post
- Menghilangkan Tulisan "Langgan: Entri (Atom)"
- Menandai Komentar Kita (Highlight Author Comment)
- Membuat Scroll di Area Komentar
- Alert Untuk Menyambut Pengunjung
- Menambahkan AddThis Untuk Membagikan Tulisan Kita
- Membuat Page Peel Effect
- Menambahkan Google Translate dengan Icon Bendera
- Menambahkan Widget Sexy Sosial Bookmarks
- Menghilangkan Judul di Sidebar
- Membuat Navigasi Breadcrumb di Blog
- Membuat Menu Tab View
- Menghilangkan Tulisan "Tampilkan Entri Lawas"
- Striker Anyar City Sindir Manchester United
- Totti Mulai Tak Betah di Roma
- 29 Calon Pemain U-23 Digenjot Fisik
- Pujian Kecil Riedl untuk Ruben Wuarbanaran
- Linkin Park
- Ya Sudahlah !!!
- Tuhan Merajut Kehidupanmu
- Pasang iklan disini
- Ciri Ciri Cewek Belum Pernah Pacaran
- Ciri Ciri Perempuan Nakal
- Pria Butuh 1 Detik untuk Seleksi Calon Istri
- Ciri-Ciri Gadis Masih Perawan!
- Apakah bisa mendeteksi kebohongan?
- Kepribadian seperti apa yang cenderung menjadi pem...
- Apa sebab orang berbohong?
- Benarkah wanita lebih banyak berbohong daripada pria?
- 64 Persen Wanita Sembunyikan Jumlah Mantan Pacar
- Beredar Isu Facebook Akan Ditutup
- Wanita Cantik Sukses, Sumber Kehancuran Rumah Tang...
- Wanita Inginkan Apa, Kadang Aku Tak Mengerti
- Mengapa sih kita butuh selingkuh ?
- Perbedaan Cinta dan Nafsu, Beda Tipis Sekali
- Cara Menghilangkan Sifat Pemalu, Minder, Nggak Ped...
- Cara Mencari Jodoh / Pacar
- Tips Pacaran Jarak Jauh
- Kesederhanaan
- Cinta dan Kesetiaan
- Kebahagiaan
- Menikmati “Double Guitar” Power Metal
- Tanda-Tanda Cinta Sejati
- Liga Primer Indonesia
- Administrasi Pendidik dan Tenaga Kependidikan
- Administrasi Sarana dan Prasarana Pendidikan
- Administrasi Keuangan
- Administrasi Hubungan Sekolah dengan Masyarakat
- Administrasi Tata Persuratan dan Kearsipan
- Administrasi Laboratorium
- Administrasi Perpustakaan
- Administrasi Bimbingan dan Konseling/Bimbingan Karier
- 2010 (18)
Kamis, 13 Januari 2011
Membuat Menu Tab View
Ingin blognya lebih rapi lagi? pakai saja navigasi yang satu ini, yaitu Menu Tab View.Dengan menu tab view, kita akan menghemat lebih banyak tempat, dengan sedikit space kita bisa menampilkan banyak piliha. Misalnya kita bisa menampilkan menu tulisan Terbaru, Komentar, dan Terpopuler. Langsung saja akan kita pelajari bersama cara membuat menu tab view, seperti yang saya pakai sekarang ini.
Untuk membuat tab view yang kita pelajari ini cukup mudah, tidak perlu mengedit template, tapi hanya menambahkan script saja diHTML/JavaScript.
Cara Membuat Menu Tab View:
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:
<div><style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 77px; /* 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: #333333; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* 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: 240px;" class="Tabs">
<a>Terbaru</a>
<a>Komentar</a>
<a>Iklan</a>
</div>
<div style="width:240px; height:300px; " class="Pages">
<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://wonggrissee.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="”text/javascript”" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://wonggrissee.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</div>
</div>
<div class="Page">
<div class="Pad">
<script src="http://kumpulblogger.com/sca.php?b=6024" type="text/javascript"></script>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><div></div></div>
- Itu ada adalah tab view yang Belajar Ngeblog di BLOG gunakan, silahkan mengganti beberapa kode warna yang sesuai dengan blog Anda. Misalnya ganti 333333 dan000000 dengan FFFFFF jika warna dasar blog anda adalah putih.
- Anda dapat mengganti lebar dan tinggi menu tab view dengan merubah width:240px; height:300px sesuai dengan sidebar blog Anda.
- Dan juga Anda harus mengganti script di masing-masing tab ( yang miring ) dengan script yang Anda inginpasang di tab view, atau jika tidak mau susah-susah ganti saja wonggrissee dengan sub domain blog Anda.
Silahkan di otak atik script yang bikin puyeng itu hehe... semoga berhasil...
Label:
Tips dan Trik Blog
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar