Membuat "Sticky/Floating" Menu Navigasi Horizontal



Udah lama banget ane ngga ngapdet postingan.. Semua aktifitas yang membuat ane pusing mulai dari tugas-tugas kuliah, skripsi ane yang judulnya bermasalah, konflik dengan pembimbing lah..!! Ditambah lagi ane sibuk belajar meng-edit template ini agar bisa fix (tapi rasanya ga pernah fix sih... ^^). Yah! Pokoknya bermacam-macam. 

Oke! Kembali ke Blog.. karena mendengar permintaan beberapa teman ane yang bertanya bagaimana cara membuat navigational menu seperti yang ada di atas, ane berinisiatif lagi untuk membuat postingan ini. Sebenarnya trik ini sudah pernah terbit dalam blog ane, tapi sepertinya pengunjung juga malas untuk menjelajahi blog ini. Oleh karena itu ane buat judul baru saja tentang widget yang satu ini.

caranya sederhana karena kalian dapat mengaksesnya pada postingan ane untuk membuat floating object pada blog (silahkan klik di sini). dan di dalam floating object tersebut, kalian dapat mengisinya dengan sebuat navigational menu yang ada pada postingan jadul ane yang satu lagi.

Sesederhana itu sih..! Silahkan cek TKP bagi yang ingin membuat sama persis seperti blog milik ane ini. ^^










klik yg bawah bos...!!!
Jumlah komentar : (22)

Membuat Tab Menu dengan Slide Effect (versi Abu Farhan)


Entah kenapa jarang banget ane liat blog yang menggunakan widget ini. Padahal widget Tab Menu ini cukup keren dari segi tampilan dan ringan dalam proses loading. Alasan ane tidak menggunakan widget ini sendiri karena disamping ane sudah memiliki tab menu sendiri dari om Khendin, widget ini juga tidak sesuai dengan template ane yang sifat bentuknya tidak bergerak alias fixed size.

Widget ini merupakan Tab Menu yang sangat fleksibel, dengan slide effect menggunakan script JQuery. Penasaran seperti apa??? Lihat demonstrasinya di sini. Widget ini merupakan hasil karya dari Webitect, dan terima kasih pada om Abu Farhan yang mau berbagi infonya. ^^

Langsung aja ya! Untuk membuatnya sendiri cukup mudah, pertama-tama masuk ke "Tata Letak" dari Dasbor Blogger, dan masuk pada "Edit HTML".

Langkah awal, pasang kode CSS untuk membentuk tampilan widget ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.






Setelah itu, kita akan memasang script JQuery dari Google. Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode berikut tepat di atas </head>.





Yang terakhir, tinggal memasang widgetnya yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";

</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Perhatikan kode berwarna hijau!! "starttab" adalah nomor widget yang akan masuk dalam tab pertama, "endtab" adalah jumlah widget yang akan masuk ke dalam Tab Menu, sedangkan "sidebarname" adalah nama id dari kolom yang akan di jadikan Tab Menu.

Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu, lihat gambar berikut:


Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar  "endtab=3". Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.

Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

CATATAN: Widget ini tidak akan muncul di pratinjau, jadi jangan stres bila kelihatannya gagal, langsung saja simpan dan lihat hasilnya ^^ (seandainya tidak muncul, mungkin blogger membutuhkan beberapa saat untuk memperbaiki error yang disebabkan cache dari tampilan sebelumnya).

Sederhana kan!!?? (meskipun keliatannya rumit -_-') Tapi patut di coba. Sekali lagi silahkan lihat CONTOH dari widget ini di blog ane yang satunya.. ^^v..

Oke! Selamat mencoba =)










klik yg bawah bos...!!!
Jumlah komentar : (38)

Good Bye Translator Widget - Welcome "Sticky" Navigational Menu


Gaya kan, kali ini postingan ane judulnya bahasa Inggris! hahaha... ehhmm.. -_-'. Kali ini ane dedikasikan untuk mengucapkan selamat tinggal pada widget google translator yang ada di blog ini karena memang kenyataannya tidak terlalu bermanfaat. Alasannya karena bahasa yang ane pergunakan di setiap postingan blog ini tidak bisa di-translate dengan baik oleh google (lha..! bukan bahasa Indonesia yang baik dan benar, jadi ngaco deh kalau pakai translator.. =P). Ditambah lagi pengunjung blog ini didominasi oleh para blogger yang cukup paham dengan bahasa ane (bukan bahasa Indonesia ya.. ^^). Sekali pun ada pengunjung blog yang tidak paham dengan bahasa ane, tidak banyak yang bisa paham dan memperoleh manfaat dari postingan-postingan blog ini. (yang dilakukan cuma komentar nye-pam -_-''). Jadi ane mengucapkan maaf sebesar-besarnya untuk para Mister dan Mistress di sana yang tidak bisa menikmati isi blog ini (itu pun kalau ente ngerti dengan ucapan permintaan maaf ane hehe..).

Tapi, segala sesuatu di dunia ini sebaiknya seimbang. Karena ane menghilangkan sesuatu di blog ini, ane jadi menambahkan sesuatu juga di blog ini ^^v. Yang ane tambahkan adalah Sticky Navigational Menu (Menu Navigasi yang "Lengket"). Meskipun widget ini sudah lebih dulu ane buat, tapi ada baiknya kalau ane resmikan sekarang. =)

Masih belum tahu apa "Sticky" Widget...! 0_o .. Itu lho...! Tiap kalian menggerakkan scrolling halaman ini ke bawah, tapi widget ini tetap kokoh pada posisinya. Contohnya seperti Menu Navigasi di atas, dan widget "Follow Me On Twitter" di sebelah kiri.

Nah..!! Kebetulan, ane juga mau berbagi tips bagaimana cara membuat widget ini pada blogspot kalian (Jiaah..! Cuma mau ngasi tau cara bikin widget ini aja pendahuluannya panjang bener!! :S).

Seperti biasa, login pada blogger, pilih "Tata Letak", kemudian "Edit HTML". cari kode ]]></b:skin> (gunakan Ctrl+F) lalu copy dan paste kode CSS berikut tepat di atasnya.

#sticky1 { position:fixed;_position:absolute;bottom:300px; left:0px;
clip:inherit; _top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Note: Perhatikan kode berwarna biru di atas. Kode tersebut mengandung arti bahwa jarak widget adalah 300 pixels dari bottom (bawah window) dan 0 pixels dari left (kiri window). Kode berwarna hijau dapat di ubah dengan top (dari atas window), atau right (dari kanan window).

Setelah selesai memasang kode CSS di atas, pasang widget-nya. Caranya, cari kode </body> lalu copy dan paste kode HTML berikut tepat di atasnya.

<div id="sticky1">
<a href="http://twitter.com/mimuha">
<img src="http://lh5.ggpht.com/_W0jEX3f70oA/S4o6lCtWc_I/AAAAAAAAAS4/vavzcsANjko/Untitled-2.gif" /></a>
</div>

Kode HTML di atas adalah kode widget "Follow Me On Twitter" yang ada pada blog ini. Kalian bisa mengganti script berwarna hijau dengan kode tag gambar, Menu Navigasi, CBox Chat Widget, Stats Counter, Alexa PR, Translator, atau widget apa pun. Untuk menambah sticky widget yang baru, buat lagi kode CSS dan HTML di atas pada tempatnya, tapi ubah nama "#sticky1" menjadi "#sticky2", begitu juga dengan <div id="sticky1"> menjadi <div id="sticky2">. Jangan lupa pada kode CSS-nya ubah posisinya menjadi berbeda (bottom, left, top, right). Apabila semua sudah dilakukan, pilih pratinjau, jika berhasil, simpan pilih simpan.

Script widget ini tidak membuat lemot loading blog, semua tergantung pada widget apa yang di pasang dalam kode "div" di atas. Sebaliknya, dengan ane menghapus widget "Translator" malah membuat loading blog ane jadi makin cepat. Jadi, ane cukup senang dengan perubahan ini.

Semoga bermanfaat ya sob..! sampai ketemu lagi... ^^v.











klik yg bawah bos...!!!
Jumlah komentar : (26)

Setujukah Kalian Kalau Blogger Menghapus Blog Yang Dicampakkan?


Hmmm... Apa yang dimaksud dengan "blog dicampakkan"?? Ini berawal dari kisah saat pertama kali ane membuat blog ini. Alamat blog yang ane isi pertama kali adalah muhammadmizan.blogspot.com. Ternyata ane sama sekali tidak bisa memakai nama alamat tersebut karena sudah ada yang memiliki. Yang sangat disayangkan, ternyata blog itu hanya berisi headline judul blog, tanpa ada postingan sama sekali (entah sejak kapan blog ini dibuat, yang jelas, sih Muhammad Mizan ini bukan ane -_-').

Ada beberapa kemungkinan kenapa blog itu dicampakkan:
Kemungkinan pertama, si Muhammad Mizan itu memang hanya iseng membuat blognya.
Kemungkinan kedua, si Muhammad Mizan memang sengaja mempersiapkan blog-nya untuk keperluan nanti.
Kemungkinan ketiga, si Muhammad Mizan lupa dengan user dan password yang dia miliki.

Kenyataannya sih, membuat nama domain tersebut memang tidak menjadi masalah serius, apalagi kita bisa membuat alamat sendiri dari penyedia domain web, mulai dari yang komersil, sampai yang gratisan seperti dot co.cc, co.tv, co.nr, dsb. Namun, adakalanya memiliki alamat dari blogspot dengan nama asli kita pada nama subdomainnya dapat menjadi kebanggaan tersendiri. ^^

Sebagai salah satu contoh, nama url subdomain "cantik" (udah kayak nomor handphone aja ^^ ) yang dicampakkan adalah http://blog.blogspot.com/. Blog ini hanya berisi postingan berbahasa korea dengan satu postingan berjudul "Test" yang diterbitkan tahun 2003.

Tadinya besar harapan ane kalau blog ini akan muncul dengan nama alamat url http://muhammadmizan.blogspot.com/ tapi ternyata sudah ada dan tercampakkan. Lalu ane ubah menjadi http://mizan.blogspot.com/, ternyata juga sudah ada dan tercampakkan pula. Subdomain m-mizan, bukan menjadi favorit ane =P, muhanmmad-mizan juga tidak menarik. Akhirnya ane memutuskan alamat url blog ini menjadi http://em-mizan.blogspot.com/, sebuah alamat url yang lumayan ane suka, unik, dan ane tidak berniat untuk menggantinya dengan nama domain apapun. ^^v

Tadi adalah awal mula cerita bagaimana nama alamat situs blog ini terbentuk... hehe.. Jadi bagaimana seharusnya blog yang "tercampakkan" ini? Apa dibiarkan beredar terus tanpa ada kejelasan (mungkin selamanya 0_o), atau tidak ya..!??








klik yg bawah bos...!!!
Jumlah komentar : (42)

Mengenai Saya

Foto Saya
Mizan
Mahasiswa rantau yang mendalami kajian Ilmu Jurnalistik, saat ini sedang sibuk dengan kuliah sambil berbagi info di Dumay (Dunia Maya) ^^v. Blog ini beroperasi secara profesional, berisi tentang info2 seputar komputer dan blogging. Semoga blog ini dapat memberi inspirasi dan info tambahan pada pedoman blogging pengunjung semua. ^^ trims..
Lihat profil lengkapku

Pos Terpopuler