Untuk menghemat tempat, tab view menu sangat efisien dengan ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom komentar beberapa waktu yang lalu tentang bagaimana cara membuat menu di sidebar seperti pada contoh gambar disamping? Mungkin yang dimaksud adalah Cara Membuat Tab View Menu di Sidebar Blogger.
Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.
Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Baiklah sekarang silahkan ikuti langkah-langkahnya sebagai berikut:
Login ke Blogger => klik Rancangan/Design => klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widgetatau baca Cara Melakukan Edit HTML Pada Template Blogspot;
Gunakan tombol Find (Ctrl + F) untuk mencari kode </head>, kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode </head>:
<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>
Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]></b:skin>:
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: 3px;
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: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan Anda klik Rancangan/Design => klik Add Gadget/Tambah Gadget => pilih yang HTML/Javascript atau jika diperlukan silahkan baca Cara Pasang dan Hapus Widget Blog di Blogspot;
Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 300px;">
<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>
Kemudian Simpan.
Jika Anda ingin menyembunyikan judul content HTML/Javascript tersebut, silahkan baca tutorilanya Cara Menyembunyikan Judul Widget di Blogspot, semoga bermanfaat.
Keterangan:
Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi;
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu;
Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.
Cara Pasang Yahoo Messenger (YM) di Blogger
Saya punya blog di Blogspot. Saya ingin pengunjung blog saya bisa chatting dengan saya lewat Yahoo! Messenger. Mungkinkah?
Untuk keperluan itu kita bisa memanfaatkan fitur Pingbox yang disediakan Yahoo!. Lewat Pingbox, kita akan mendapatkan kode yang harus kita pasang di blog, profil Friendster, atau website kita.
Berikut ini cara membuat Pingbox:
Klik http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini:
Pilih Background Theme sesuai dengan preferensi kita;
Di kolom Display name, masukkan nama yang akan kita tampilkan. Contrenglah opsiShow Yahoo! Messenger display image jika kita ingin menampilkan gambar yang sekarang muncul di YM kita.
Pilihlah salah satu ucapan selamat datang di kolom Online Greeting, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
Pilihlah salah satu pesan bahwa kita sedang tidak online di kolom Offline message, atau pilih Enter custom message jika kita ingin membuat sendiri ucapan itu.
Contrenglah opsi Require visitors to enter Nickname to send IM agar setiap orang yang mengirim pesan ke kita diwajibkan mengisikan nama aliasnya (nick name);
Pada kolom Save Pingbox as, tulislah nama Pingbox kita. Misal, jika pingbox yang kita bikin sekarang ini akan dipasang di blog, berilah nama Pingbox Blogger atau sesuka anda.
Tekan tombol Save;
Akan muncul windows bar. Masukanlah Yahoo! ID dan passwordnya, lalu tekan tombol Sign In. Windows itu akan menutup sendiri.
Akan muncul kotak berisikan kode yang harus kita pasang. Untuk mendapatkan kode yang pas sesuai peruntukannya, pilihlah jenis blog atau website kita. Misal, jika kita ingin mendpatkan kode untuk Blogger maka kliklah logo dan tulisan Blogger yang tersedia.
Tentukan ukuran kotak yang kita inginkan. Sangat disarankan untuk memilih opsi Recommended.
Tekan tombol Copy to clippboard.
Tahapan selanjutnya Cara Pasang Yahoo Messenger (YM) di Blogger, langkah-langkahnya sebagai berikut:
Login ke Blogspot Anda => klik Rancangan/Design => Tambah/Add Gadget => pilihHTML/JavaScript atau baca Cara Pasang dan Hapus Widget Blog di Blogspot;
Setelah terbuka halaman baru, pada kolom Judul, tulislah Judul yang kita mau, misal:CHATBOX.
Pada kolom Konten masukan kode Pingbox yang telah dicopy sebelumnya, caranya letakkan Crusor ke dalam kolom Konten, lalu klik kanan dengan mouse dan pilih pasteatau tekan Ctrl + V pada keyboard;
Klik Simpan, selesai.
Cara Membuat Teks Berjalan di Menu Bar
Pernak pernik pada website/blog bagi sebagian orang mungkin diperlukan supaya terlihat unik dan menarik, meskipun terkadang pernak-pernik itu tidak memberikan manfaat terhadap perkembangan website/blog itu sendiri, namun selama itu tidak mengganggu dan/atau merusak website/blog tidak ada salahnya digunakan.
Salah satu pernak-pernik yang bisa dipasang oleh pengguna blogspot adalah berupa teks berjalan pada Menu Bar seperti yang saya pasang pada blog ini, coba tengok ke atas, bagaimana menurut Anda?
Jika tertarik juga untuk memasang teks berjalan pada blog Anda, cara membuatnya sangat mudah, cukup memasukan script pada template blog.
Cara Membuat Teks Berjalan di Menu Bar, silahkan ikuti langkah-langkahnya sebagai berikut:
Login ke blogger;
Pada menu Layout => Edit HTML, jangan lupa centang kotak Expand Template;
Letakkan kode dibawah ini diatas kode </head>:
<script type='text/javascript'>
//<![CDATA[
msg = "Blog Serba Tersedia";
msg = "| Tutorial | Musik | Video | Software | DLL |" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
Contoh memasangnya seperti di bawah ini:
<script type='text/javascript'>
//<![CDATA[
msg = "Blog Serba Tersedia";
msg = "| Tutorial | Musik | Video | Software | DLL |" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
</head>
Jika sudah, klik Save Template Selesai.
ebagai blogger pemula pada saat mengunjungi blog kita sendiri, terkadang dalam hati ada rasa penasaran apakah ada orang lain yang mengujungi blog kita? maka dari pada penasaran lebih baik gunakan saja widget satu ini sebagai Cara Mengetahui Pengunjung Yang Online.
Manfaat dari mengetahui pengunjung yang online adalah sebagai dasar evaluasi dan bahan memotivasi diri sendiri agar terus belajar dan berpromosi untuk meningkatkan trafic pengunjung, karena apalah artinya mempunyai blog atau web jika tidak ada pengunjungannya.
Bagi pengguna blogspot yang tertarik untuk memasang widget pemantau pengunjung yang online ini, caranya sebagai berikut :
Silahkan klik alamat situs ini http://www.whos.amung.us/ untuk menuju ke halaman websitenya, seperti pada contoh gambar di bawah ini :
Copy paste code pada kolom yang saya kasih tanda lingkaran merah atau apabila ingin posisi widget di blog sesuai keinginan Anda, maka sebelum mengcopy paste code tersebut silahkan diatur terlebih dahulu di menu yang saya kasih lingkaran biru;
Selanjutnya memasang code widget di atas pada sidebar blog, caranya terlebih dahulu Anda harus login ke http://www.blogspot.com dengan email dan password Anda, lalu klik Layout/Rancangan, klik Add a Gadget/Tambah Gadget dan pilihHTML/JavaScript seperti gambar berikut :
Setelah terbuka halaman HTML/JavaScript, masukan/copy paste code widget di atas ke dalam halaman content seperti contoh gambar di bawah ini :
Terakhir klik Save/Simpan, lalu lihat hasilnya.
Tidak ada komentar:
Posting Komentar