TIPS PASANG WIDGETS PADA BLOG

TIPS - CARA MEMASANG Widget YAHOO MESSENGER DI BLOG

Ternyata Yahoo Messenger atau yang sering disebut dengan YM masih banyak digunakan oleh orang-orang di Indonesia. Mereka memasang status online Yahoo Messenger di website atau blog. Biasanya sih yang punya toko online. Saya juga, coba lihat di bagian bawah website ini, akan Anda dapati icon Yahoo Messenger yang bisa terlihat online / offline 


Dan saya rasa, cara ini cukup sebenarnya cukup efektif untuk menggaet para calon pelanggan yang sedang mengunjungi website kita untuk setidaknya tanya / kontak by chat. Selain itu tujuannya adalah mempermudah orang-orang yang sudah jadi pelanggan kita yang ingin menghubungi kita secara langsung dengan chatting online.


Cukup mudah kok pasang YM di blog atau website kita. Ini langkah-langkahnya. 
Pasang kode script yahoo messenger berikut ini:


<a href=”ymsgr:SendIM?IDYahoo“><img alt=”” src=”http://opi.yahoo.com/online?u=IDYahoo&amp;m=g&amp;t=1″ border=”0″ /></a>


Script di atas merupakan script HTML, jadi Anda cukup copy paste saja seperti apa adanya script di atas.
Ganti kode IDYahoo dengan ID atau username Yahoo milik Anda. Semisal bingung ya pakai saja alamat email yahoo-nya.
Untuk memilih gambar atau icon Yahoo Online Status, ganti kode t=1 dengan kode angka piilihan gambar. Nah, silahkan lihat gambar berikut:










4. Dah gitu aja. Selesai.


Cukup mudah bukan? Sekarang Anda bisa chatting online dengan pelanggan menggunakan Yahoo Messenger langsung melalui website atau toko online Anda. Harapannya semoga pelanggan kita juga jadi lebih nyaman ketika ingin menghubungi kita.


======================================================================
CARA MEMASANG YAHOO MESSENGER DI BLOG


Pada postingan kali ini kita akan memberikan ulasan tentang cara memasang YM (Yahoo Messenger) Status pada Blog. Kalian bebas bisa naruh di blog apa..boleh Blogger, Wordpress atau yang lain.

ane belajar dari : http://www.pandaanku.com/2011/08/cara-memasang-status-ym-pada-blog.html


Untuk cara memasangnya gak beda jauh ketika kita memasang widget HTML baru pada Blog kita.



















Nah sebelum itu kalian Pilih dulu icon YM sesuai pilihan kalian. Disini ada masing-masing 2 status pasangan, yakni online status dan offline status. Namun apabila kalian kepingin membuat gambar sendiri untuk dijadikan icon YM, baca tutorialnya cara Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri



Untuk icon 0-5








Untuk icon 6-8








Untuk icon 9-16








Untuk icon 16-24













Nah, apabila sudah punya pilihan iconnya, sekarang tinggal buka Blogger atau Wordpress saja.


Silahkan buka Design terus klik Page Elements -->Add Gadget --->klik opsi HTML /Javascript
Setelah itu copas kode dibawah ini:











<a href="ymsgr:sendIM?Id_yahoo_kamu"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_kamu&amp;m=g&amp;t=0&amp;l=us"/>





</a>



Penting: Dari kode script diatas kalian harus mengganti tulisan Id_yahoo_kamu (ada 2 tulisan) dengan ID akun yahoo kamu sebenarnya dan Tulisan t=0 dengan Kode Status yahoosesuai pilihan diatas


Save dan lihat hasilnya...













Sekali lagi saya ingatkan apabila kamu menginginkan agar icon YM adalah gambar, foto, atau logo kamu sendiri maka baca tutorialnya DISINI atau yang berjudul Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri






contoh nya >>










<a href="ymsgr:sendIM?setya_wa2n"> <img src="http://opi.yahoo.com/online?u=setya_wa2n&amp;m=g&amp;t=14&amp;l=us"/>


</a>






=======================================================================================




Membuat Widget Yahoo Messenger di Blog









Berusaha tidak putus-putus membuat postingan nih sobat.

Sobat Blogger yang baik, pernahkah kalian berfikir bagaimana memberikan keterangan kepada pengunjung Blog bahwa kita sebagai admin Blog sedang online/offline. Nah salah satunya dengan Widget Yahoo Messenger ini,

kita bisa memberitahu pengunjung bahwa kita sebagai Admin Blog sedang dalam keadaan online/offline. Untuk Cara Pembuatanya saya akan bahas pada artikel Membuat Widget Yahoo Messenger di Blog, silakan simak yah sobat.
Pertama sobat harus memiliki software Yahoo Messenger pada PC sobat. Silakan klik disini, atau masuk akun Yahoo>>Messengger, untuk Download Yahoo Messenger. Sebenarnya jika tidak memiliki software Yahoo Messenger pun bisa, karena pada Yahoo>>Mail pun ada Messenger. Namun jika ingin status widget sobat online, maka sobat harus masuk yahoo mail pada browser sobat dan ganti status Messenger menjadi "Ada/Terlihat".
Setelah Yahoo berhasil didownload maka instalkan. Setelah berhasil terinstal, buka software Yahoo Messenger dan sign in seperti biasa sobat melakukan sign in di akun Yahoo.
Perhatikan gambar dibawah ini pada tulisan yang bergaris bawah merah adalah ID YM sobat. Atau biasanya ID YM itu pada email client (contoh:gie_mulyana@yahoo.com).




# Jika sobat telah mempunyai softaware Yahoo Messenger dan mengetahui ID YM sobat, silakan teruskan ke langkah berikutnya.
Langkah berikutnya, login ke akun Blogger sobat. Masuk pada bagian Tata Letak>>Tambahkan Gadget (diposisi yang sobat inginkan)>>HTML/Javascript.
Berikan judul ataupun tidak, terserah sobat. Masukan kode HTML di bawah ini.


<a href="ymsgr:sendIM?gie_mulyana"> <img src="http://opi.yahoo.com/online?u=gie_mulyana&amp;m=g&amp;t=14&amp;l=us"/></a>




# Ubahlah tulisan berwarna merah dengan ID YM sobat. Ubahlah kode berwarna biru dengan tampilan yang sobat inginkan. Berikut daftar kode dan tampilan yang akan dihasilkan.




















Setelah sobat selesai menentukan ID YM dan kode tampilanya, maka klik Simpan dan lihat hasilnya.


======================================================





Cara Mudah Memasang Yahoo Messenger di Blog






Cara membuat status online dan offline yahoo messenger paling mudah atau cara menambah widget/icon yahoo messenger di blog milik anda.

Cara Simple memasang yahoo messenger di blog, Aplikasi jejaring sosial yang dikeluarkan Yahoo ini memang sering digunakan untuk Chatting sesama pengguna YM maupun urusan Bisnis dan Blog, nah kali ini ada satu Tutorial bagaimana cara menambah icon yahoo messenger di blog Tentunya dengan Mudah, Simple, gak pake lama dan pastinya Cepat, Gini caranya :


1. Masuk ke dashbor blog.


2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.

3. Masukkan Code Berikut:


<a href="ymsgr:sendIM?Id_yahoo_anda"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_anda&amp;m=g&amp;t=14&amp;l=us"/>


4. Ubah Text yang berwarna Merah dengan Id Yahoo milik anda, Sedangkan Text yang berwarna Biru ganti dengan Code gambar Berikut untuk memilih Icon Online / Offline yang akan tampil pada blog anda:























5. Kalau sudah anda Simpan.


Terakhir tinggal anda lihat hasil akhirnya, selamat mencoba dan semoga bermanfaat.






===========================================================





CARA MEMASANG YAHOO MESSENGER DI BLOG


Ternyata Yahoo Messenger atau yang sering disebut dengan YM masih banyak digunakan oleh orang-orang di Indonesia. Mereka memasang status online Yahoo Messenger di website atau blog. Biasanya sih yang punya toko online. Saya juga, coba lihat di bagian bawah website ini, akan Anda dapati icon Yahoo Messenger yang bisa terlihat online / offline 


Dan saya rasa, cara ini cukup sebenarnya cukup efektif untuk menggaet para calon pelanggan yang sedang mengunjungi website kita untuk setidaknya tanya / kontak by chat. Selain itu tujuannya adalah mempermudah orang-orang yang sudah jadi pelanggan kita yang ingin menghubungi kita secara langsung dengan chatting online.


Cukup mudah kok pasang YM di blog atau website kita. Ini langkah-langkahnya. 
Pasang kode script yahoo messenger berikut ini:


<a href=”ymsgr:SendIM?IDYahoo“><img alt=”” src=”http://opi.yahoo.com/online?u=IDYahoo&amp;m=g&amp;t=1″ border=”0″ /></a>


Script di atas merupakan script HTML, jadi Anda cukup copy paste saja seperti apa adanya script di atas.
Ganti kode IDYahoo dengan ID atau username Yahoo milik Anda. Semisal bingung ya pakai saja alamat email yahoo-nya.
Untuk memilih gambar atau icon Yahoo Online Status, ganti kode t=1 dengan kode angka piilihan gambar. Nah, silahkan lihat gambar berikut:

Dah gitu aja. Selesai.


Cukup mudah bukan? Sekarang Anda bisa chatting online dengan pelanggan menggunakan Yahoo Messenger langsung melalui website atau toko online Anda. Harapannya semoga pelanggan kita juga jadi lebih nyaman ketika ingin menghubungi kita.


Jika Anda pengguna WordPress, gunakan bantuan text widget yang nantinya bisa Anda letakkan pada area sidebar. Atau jika Anda ingin meletakkannya pada suatu halaman tertentu, gunakan penulisan metode text (jangan visual).


Oia, baca juga cara instal WordPress di localhost jika Anda ingin mencobanya terlebih dahulu di komputer Anda sebelum melihat hasil online-nya.


Oke, semoga tips cara memasang YM di blog atau website ini bermanfaat ya.


Sukses untuk usaha Anda!


========================================================================
Cara Pasang Widget Yahoo Messenger di Blog Website






Cara-Ririn.Com – Untuk Memasang Widget Yahoo Messenger di Blog Website sebenarnya tidak begitu sulit, karena anda hanya perlu memasang kode script nya saja pada blog kesayangan anda. Widget ini cukup penting sekali untuk dipasang di situs. Terlebih lagi apabila anda membuka usaha di internet seperti punya Toko Online, punya situs penyedia layanan jasa tertentu, dan lain sebagainya. Sehingga, dengan memasang widget yang satu ini bisa memudahkan pengunjung untuk berkomunikasi dan berinteraksi dengan pemiliik / admin blog dengan hanya sekali klik.


Sebelum anda memasang widget Yahoo messenger, terlebih dahulu anda harus punya akun Yahoo!. Jika belum punya, silahkan bikin akun dulu atau baca selengkapnya tentang tutorial Pendaftaran Yahoo Indonesia. Setelah anda punya akun, silahkan download dan install aplikasi/software Yahoo messenger di komputer / laptop kesayangan anda. Silahkan klik url ini http://messenger.yahoo.com/download/untuk mengunduh aplikasi Yahoo Messenger.


Nah, apabila anda sudah memenuhi kedua syarat diatas, anda bisa membuat dan memasang widget nya di blog. Karena anda sudah punya username yang nantinya akan dibuat widget. Anda bisa memasang widget tersebut di bagian sidebar atau di dalam postingan. Kebetulan saya sudah pasang, tapi di dalam postingan. Anda bisa melihatnya di Halaman Ini. Ada berbagai macam bentuk dan jenis widget, tinggal anda mau pilih yang mana. Kebetulan saya hanya pilih yang biasa aja bentuknya.






Nah, agar tidak terlalu panjang introduksinya, mari kita intip tutorial tentang Cara Pasang Widget Yahoo Messenger di Blog Website. Berikut adalah langkah-langkahnya.
Cara Membuat Widget Yahoo Messenger di Blog


1. Silakan copy seluruh script berikut ini<a href="ymsgr:sendIM?setiyarin"> <img src="http://opi.yahoo.com/online?u=setiyarin&amp;m=g&amp;t=14&amp;l=us"/> </a>



Keterangan:


Ganti kode warna biru dengan username Yahoo Messenger anda


Ganti kode warna merah untuk memilih bentuk / jenis tampilan widget


2. Berikut adalah kode bentuk-bentuk / jenis tampilan widget Yahoo Messenger. Silahkan di klik untuk memperbesar ukuran gambar


3. Untuk memasang widget Yahoo Messenger di Blogger / Blogspot, silahkan pilih menu Tata Letak > klik Tambahkan Widget > Tambahkan widget HTML/JavaScript > Silahkan paste seluruh kode script diatas > Klik Save


4. Untuk memasang widget Yahoo Messenger di WordPress, silahkan pilih menu Appearence > pilih sub menu Widgets > Tambahkan widget Text > Silahkan pastekan kode tadi > Klik Save.


Saya kira cukup sampai disini dulu perjumpaan kita kali ini. Kini giliran anda yang mencobanya. Good luck ya 


Demikian informasi yang bisa saya share untuk anda tentang Cara Pasang Widget Yahoo Messenger di Blog Website. Semoga bisa berguna untuk anda sekalian. Jangan lewatkan posting menarik lainnya di Blog Cara Ririn tentang Cara Pasang Widget Twitter di Blog. Terimakasih atas perhatiannya 






========================================================================








Cara Pasang ikon yahoo messenger d blog atau web




Anda ingin menampilkan status yahoo mesengger di web / blog anda ? Anda ingin menampilkan contact anda di yahoo messenger sehingga pengunjung yang berkunjung ke web / blog anda dapat chat dengan anda melalui yahoo messenger ?




Berikut code html yang harus anda sisipkan ke web /blog anda.




<a href=”ymsgr:sendIM?nama_id_ym_anda“> <imgsrc=”http://opi.yahoo.com/online?u=nama_id_ym_anda&m=g&t=1&l=us”/>

</a>




Keterangan :




Ganti script warna merah dengan id yahoo anda dan untuk tampilan ikon ym , ada beberapa style ID yang bisa anda gunakan. Pada Contoh dibawah ini saya menggunakan angka 1, lihat contoh berikut :




<a href="ymsgr:sendIM?hilmi_atiq"><img src="http://opi.yahoo.com/online?u=hilmi_atiq&m=g&t=1" border="0"></a>




*hilmi_atiq itu ID saya.




Setelah kode HTML tersebut disisipkan di blog atau web akan tampil sbb : 




Jika anda sedang login/online di Yahoo Messenger maka Ikon ID anda akan hidup berwarna kuning.




Berikut tampilan ikon YM yang bisa anda gunakan pada blog atau website anda :









Selamat Mencoba. SALAM SUKSES




========================================================================





Cara Pasang YM di Blog






Jika Anda memiliki website atau blog, Anda dapat memberikan cara mudah bagi pengunjung untuk menghubungi Anda melalui Yahoo! Messenger. Untuk menampilkan simbol indikator keberadaan online (OPI), yang perlu Anda lakukan adalah menambah sedikit kode ke halaman Web Anda. Kemudian ketika pengunjung datang ke situs Anda, mereka akan melihat simbol menampilkan status online Anda, bahkan ketika Anda sign out dari Yahoo! Messenger.




Yahoo Messenger masih merupakan sarana pesan instant bagi pemilik blog atau website. Cara cara pasang ym di blog untuk menampilkan status online yahoo messenger sangat mudah, Anda tinggal meng-copy sedikit kode di bawah ini:




a. Untuk Blogspot (Pasang pada widget HTML)

Masuk ke Rancangan - edit tata letak - element laman, tambah gadget - pilih HTML/JavaScript Tambahkah kode script di bawah ini:




<a href="ymsgr:sendIM?identitas-ym"><img src="http://opi.yahoo.com/online?u=identitas-ym&m=g&t=2" border="0"></a>




b. Untuk Wordpress (Pasang pada sidebar)

Masuklah ke bagian Appearance (tampilan) Anda - Pilih Widgets - Tambahkan pilihan Widget Text ke sidebar. Tambahkan kode script ke dalam kolom text.




<a href="http://edit.yahoo.com/config/send_webmesg?.target=identitas-ym&.src=pg"><img border="0"

src=”http://opi.yahoo.com/online?u=identitas-ym&m=g&t=1&l=us”></a>




Kadang kedua kode script tersebut tidak berjalan semestinya, coba alternatif kode lain di bawah ini:




<a href="http://messenger.yahoo.com/edit/send/?.target=identitas-ym">

<img src="http://opi.yahoo.com/yahooonline/u=identitas-ym/m=g/t=2/l=us/opi.jpg" border="0" alt="Status YM" /></a>




Keterangan: Ganti identitas-ym dengan nama identitas yahoo messenger Anda. t=1 merupakan Status gambar YM yang dapat diganti sesuai selera. (kode gambar di bawah). Pastikan juga status YM Anda visible (dapat dilihat semua orang, agar tampak online)











========================================================================








Cara Membuat, Pasang, Memasang YM Status Blog













Cara Memasang, Membuat YM Status Blog WordPress. Untuk membuat YM Status Blog yang kita harus lakukan adalah memasukkan alamat URL YM status pada Widgets Blog kita. Cara membuatnya hampir sama dengan saat kita memasang banner pada Widget Blog. Berikut yang perlu kita ketahui sebelum memasang YM Status pada Blog :




Pertama adalah Alamat Pencarian Icon YM Status




Masing-masing icon memiliki URL sama hanya nomor icon-nya saja yang berbeda yaitu :




http://opi.yahoo.com/online?u=YM_ID_Anda&amp;m=g&amp;t=ICON_NUMBER&amp;l=us







Yang berwarna merah adalah yang harus kita ganti dengan YM_ID kita dan yang warna biru adalah nomor icon yang kita kehendaki. Pada Cara Memasang | Membuat YM status Blog WordPress, Sebagai contoh email yang saya gunakan adalah iklanblog@yahoo.com maka YM_ID yang digunakan pada YM Status adalah iklanblog dan misal icon yang saya kehendaki muncul adalah nomor online_14 maka alamat YM Statusnya adalah :




http://opi.yahoo.com/online?u=iklanblog&amp;m=g&amp;t=14&amp;l=us







Agar pencarian alamat dilakukan secara otomatis maka perlu ditambahkan perintahimg src=”…” berikut :




img src=”http://opi.yahoo.com/online?u=iklanblog&amp;m=g&amp;t=14&amp;l=us”







Pada Cara Membuat atau Memasang YM Status Blog, kode tersebut sekaligus akan memberitahukan pada pengunjung Blog akan Status YM kita. Jadi saat YM kita online maka Status YM Icon-nya akan menyala dan begitu juga sebaliknya.




Kedua adalah kode Link Klik Instan Messenger




Pada Cara Membuat | Memasang YM Status Blog WordPress, tujuan perintah ini supaya saat Icon YM Status yang sudah di pasang pada Blog kita diklik maka akan terhubung ke Instant Massenger YM kita pada komputer Client dengan penambahan perintah href=“….” sehingga perintah lengkapnya adalah :




href=”ymsgr:sendIM?YM_ID_Anda“




Selanjutnya supaya pembuatan status YM pada Blog dapat berfungsi sempurna kedua perintah tersebut harus digabungkan. Agar dapat terisi pada baris Widgets pada Blog maka harus kita masukkan pada kode <a></a> menjadi <a perintah1><perintah2></a> sehingga lengkapnya adalah :




<a href=”ymsgr:sendIM?YM_ID_Anda“> <img src=”http://opi.yahoo.com/online?u=YM_ID_Anda&amp;m=g&amp;t=ICON_NUMBER&amp;l=us”/></a>




Sehingga untuk YM_ID : iklanblog dan Icon Number : online_14, maka perintah lengkap yang dimasukkan di Text Widgets adalah :




<a href=”ymsgr:sendIM?iklanblog“> <img src=”http://opi.yahoo.com/online?u=iklanblog&amp;m=g&amp;t=14&amp;l=us”/></a>




Untuk mempermudah Cara Pasang, Memasang atau Membuat YM Status Blog, berikut di bawah ini jenis-jenis ICON untuk YM ID Status saat Online. Anda tinggal memilih nomornya :









========================================================================








Cara Pasang Icon Yahoo Messenger Di Blog







Buat sebagian sobat mungkin ada yang masih bingung Cara Memasang Icon Yahoo Messenger YM di Blog? Status atau Icon YM (Yahoo Messenger) untuk mempermudah seseorang menghubungi kita lewat blog. Kali ini coba iseng nulis cara pasang Yahoo Messenger di blog khusus buat kamu yg belum tau.




Buat sobat yang masih bingung membuat icon (status) YM di blog, berikut tutorial cara pasang Yahoo Messenger di Blog yg bisa kamu lakukan:









1.) Sobat tinggal kunjungi alamat url:

http://ymgen.com/index.php?opt=yahoo-messenger









2.) Ketikkan user ID YM atau Email Yahoo sobat









3.) Silakan copy dan paste kode html di blog sobat

- untuk blogspot paste di Widget "HTML/JavaScript"

- untuk wordpress paste di "Text"




Atau sobat tinggal pasang (copy-psate) kode html berikut di sidebar blog:







<a href="ymsgr:sendIM?nama_id_ym_sobat" target="_blank"><img src="http://opi.yahoo.com/online?u=nama_id_ym_sobat&m=g&t=2"></a>

- "nama_id_ym_sobat" yang warna Merah ganti dengan "id yahoo sobat".

- Untuk icon YM (angka 2 warna Biru) bisa ganti dengan pilihan Icon YM dibawah:









* Ini contoh Icon ID YM di blog dengan kode icon no=2:









Itu sedikit penjelasan tentang cara pasang Icon Yahoo Messenger di blog buat sobat yang mungkin masih bingung. Walaupun repost, tapi moga aja bisa bermanfaat. Salam Cinta dan Persahabatan. - See more at: http://cdproom.blogspot.co.id/2013/01/cara-pasang-icon-yahoo-messenger-di-blog.html#sthash.8E0WGrDx.dpuf




========================================================================





Cara Memasang widget Chat Yahoo Messenger di blogger
















Candra Fani akan menulis sedikit tentang cara menampilkan icon ID Yahoo Messenger YM widget Chat untuk blogger kita guna pengunjung bisa mengetahui apakah YM kita online/offline untuk mengontak kita.






Cara memasang dan membuat juga cukup sederhana, bisa di pasang di blogspot, ataupun template Script HTML biasa...






Silahkan pilih salah satu kawan...






Untuk icon 0-5








Untuk icon 6-8









Untuk icon 9-16










Untuk icon 16-24











Jika sobat sudah memilih dan menentukan Icon yang akan di gunakan sesuka hati kawan-kawan, Sekarang buka Blogger atau Wordpress. Silahkan buka Design terus klik Page Elements -->Add Gadget --->klik opsi HTML /Javascript




Setelah itu copy dan paste kode dibawah ini :





<a href="ymsgr:sendIM?Id_yahoo_Anda"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_Anda&amp;m=g&amp;t=0&amp;l=us"/></a>










Catatan: Dari kode script diatas Sobat harus mengganti tulisan Id_yahoo_Anda (di 2 tempat) dengan ID akun yahoo Anda (Ingat! jangan tempatkan alamat email YM (Yahoo) tetapi ID akun) yang sebenarnya.






Tulisan t=0 diganti dengan Kode Status Yahoo yang telah Anda pilih diantara pilihan icon diatas (ganti dengan t=1 atau t=2 atau t=10 atau … t=17 atau … …. ….. t=24).






Kalau semua langkah dan tipsnya sudah di coba sekarang tinggal save dan silahkan kawan-kawanlihat hasilnya di blog kawan hehehee






Selamat mencoba dan semoga bermanfaat wiw...






========================================================================


Cara Membuat Menu Pada Blogspot


Membuat menu pada blogspot pada intinya lebih rumit bila di bandingkan dengan wordpress, pada wordpress menu tinggal di buat selanjutnya di drag selsesai, untuk blog berpatfrom blgspot agak sedikit rumit karena harus edit via template html. Oke langsung saja kita mulai turotial kali ini.






Untuk penjelasan agar lebih mudah saya pakai menu yang ada pada blog saya ini. Pada blogsaya ini terdiri diri dari dua menu yaitu menu atas atau menu page yang berisi Home,Contact, Privacy Police menu beranda ini adalah menu asli atau menu yang biasanya ada pada template bawaan dari blogspot. cara membuatnya juga cukup mudah, kita bahas saja pada tutorial berikutnya. Sementara untuk menu yang kedua terdiri dari home, NEWS, SMART PHONE, WEBSITE, SOSIAL MEDIA, PHOTOSHOP nah menu inilah yang akan kita bahas lebih lanjut.

( Baca Cara Membuat Related Posts atau Artikel Terkait di Blogspot Terbaru)






Gambar di bawah ini adalah menu asli sebelum di edit atau menu asli dari hasil download Template. Menunya terdiri dari menu atas Home, Sampel Page 1, Sampel Page Image, dan menu utama yang terdiri dari Menu 1, Droop Menu 1, Droop Menu 2, Menu 2, Menu 3.










Gambar diatas jika kita lihat bagian dalam atau template html adalah sebagai berikut : Menu utama yang tertera pada gambar di atas akan terlihat pada saat mengedit html.









Untuk mencari menu sepeti gambar di atas caranya adalah masuk ke template pada blog Anda lalu klik edit html sesudah itu klik Ctrl + F pada keyboard Anda sehingga muncul kolom searchlalu ketik salah satu menu asli bawaan dari templet misal ( Menu 1 ) tekan enter pada keyboard Anda. Jika sudah ketemu bagian itulah yang nantinya akan kita edit sesuai dengan kebutuhan menu pada blog Anda.

(Baca Cara Membuat Menu Navigasi Drop Down di Blogspot)




Untuk proses edit templet silahkan cek gambar di bawah ini:











Menu pada blog saya yang terdiri dari SMART PHONE, WEBSITE, SOSIAL MEDIA, PHOTOSHOPsaya masukkan sebagai kategori, jadi pada saat kita menulis blog selesai menulis sebelum di publikasikan saya masukkan terlebih dahulu sesuai dengan kategori pada blog. Menunya tersebut setelah saya edit adalah sebagai berikut :







Silahkan ganti menu sesuai dengan URL blog Anda dan sesuaikan sendiri dengan menu yang Anda kehendaki dan jangan lupa untuk di save terlebih dahulu jika sudah di edit. Simpel dan mudah, jika Anda kesulitan membuat silahkan tinggalkan komentar.

( Baca Cara Membuat Menu di Blogspot Part 2)








Untuk lebih jelasnya silahkan lihat video tutorial Cara Membuat Menu Pada Blogspot dibawah ini :






=======================================================================






Cara Membuat Menu Navigasi Drop Down di Blogspot



Pada tutorial terdahulu sudah saya jelaskan cara membuat menu navigasi biasa, cara membut menu pages dan cara membuat gabungan menu vagiasi dan pages, pada tutorial kali ini saya akan menjelaskan cara membuat menu navigasi drop down atau menu sub navigasi. Sebelumnya akan saya jelaskan apa itu menu vaigasi drop down. Dalam terjemahan bahasa Indonesia drop down dapat di artikan turun kebawah jadi menu navigasi drop down adalah menu yang di fungsikan untuk mengelompokkan suatu artikel ke dalam sub kategori tertentu menjadi lebih terperinci sesuai dengan kategori artikel dan di susun kebawah berdasarkan menu utama. Sebagai contohnya Anda ingin membuat menu artikel dengan tema Smartphone di mana di dalamnya Anda kelompkkan lagi menjadi lebih terperinci dengan menambah sub menu seperti Android, iOS, Windows Phone atau Blackberry.






Fungsi menu drop down pada dasarnya untuk lebih memudahkan pembaca blog Anda membaca artikel tertentu yang sudah Anda buat sebelumnya, jadi jika ada pengunjung blog Anda yang kebetulan adalah pemilik Smartphone Android maka akan lebih memudahkan pembaca blog Anda membaca semua artikel berdasarkan sub kategori dari Smartphone yaitu Android.






Sama seperti artikel sebelumnya untuk memudahkan memahami artikel Cara Membuat Menu Navigasi Drop Down di Blogspot ini saya gunakan template blog yang saya pasang dalam blog ini. Karena tutorial ini adalah lanjutan dari tutorial sebelumnya, maka Saya sarankan Anda untuk membaca terlebih dahulu tutorialnya di sini, agar mudah dalam mempelajari tutorial lanjutan dalam artikel ini. Template blog ini merupakan template hasil download (template editan) bukan template bawaan dari blogspot. Pada tutorial kali ini Saya akan mengedit menu pada kategori Smartphone untuk saya spesifikkan lagi ke dalam kategori sub menu Android, Blackberry dan iOS. Sebelum saya rubah saya akan memberikan gambar agar perubahan dapat di lihat setelah saya edit. Gambar menu sebelum di edit bisa di lihat pada gambar di bawah ini.





Menu Navigasi Smartphone sebelum di edit






Menu navigasi pada gambar di atas jika dilihat dari kode HTMLnya adalah seperti pada gambar di bawah ini,








Menu Smartphone sebelum di edit






Cara menambah sub kategori pada menu Smartphone pada blog saya ini langkah-langkahnya adalah sebagai berikut. Masuk ke menu Blogspot, kemudian pilih Template selanjutnya pilih menu Edit HTML. Lihat gambar di bawah ini untuk lebih jelasnya.












Khusus pada menu Smartphone pada menu edit HTML pada menu blog ini akan saya tambahkan beberapa kode yang nantinya akan lebih spesifik sesuai dengan kategori yang akan saya buat.








Menu Smartphone setelah di edit

Untuk memudahkan akan saya jabarkan edit HTML sebelum dan sesudah di edit, bandingkan perubahan mana saja yang terjadi untuk memudahkan membedakanya. Yang pertama adalah menu Smartphone sebelum di edit kode HTML nya sebagai berikut

<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SMART PHONE'><a/>SMART PHONE</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER<a/></li>
</ul>

Setelah menu Smartphone saya edit berubah menjadi seperti pada kode HTML di bawah ini :

<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS</a></li>
<li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>
<ul>
<li><a href='http://kupastutorial.blogspot.com/search/label/Android'>Android</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/Blackberry'>Blackberry</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/iOS'>iOS</a></li>
</ul>
</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER</a></li>
</ul>

Perhatikan baik-baik kode sebelum dan sesudah di edit pada kode HTML ini di atas terutama pada tulisan yang saya beri tanda warna hitam. Pada menu setelah di edit atau perunahan menu Smartphone berubah menjadi <li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>. Fungsi ini untuk menampilkan statis atau ketika di klik tidak akan terjadi perubahan apa-apa. Jangan lupa tambahkan kode <ul> pada sub menu dan akhiri dengan kode </ul> untuk menutup kode pada sub menu kategori sub Smartphone.

Prose selanjutnya edit kembali artikel yang sudah Anda buat sebelumnya, buat kategori sesuai dengan sub menu yang anda buat sebelumnya, proses ini butuh waktu karena harus mengedit satu persatu perartikel, jadi Saya sarankan sebelum membuat banyak artikel sebaiknya sub menu navigasi harus di buat sebelumnya. Hasil menu Smartphone setelah di edit dengan membuat sub menu bisa di lihat pada gambar di bawah ini

Proses membuat sub menu navigasi selesai, selamat mencoba, jika terdapat kesulitan silahkan tinggalkan komentar.






========================================================================





Cara Membuat Menu Bar dan Sub Menu Bar di Blog










Cara membuat Menu bar dan sub menu bar di blog termudah.




Berikut ini langkah-langkah yang harus dilakukan :

Klik Menu Desain

Pilih Menu Template lalu pilih menu Edit HTML

Pilih/klik menu Lanjutkan

Pilih/klik menu Expand Template Widget




<div class='main-outer'> atau

<div id='main-wrapper'> atau <div id='main'>




Cari scrift berikut :




Agar lebih mudah, klik saja ctrl+F pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :




div class='main-outer'>.




Bisa jadi beda dengan template yang lain…




Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi :







<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>




PENJELASAN :

Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.

Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan.




7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.


========================================================================





Cara Membuat Menubar Multi Dropdown Di Blog


Sobat blogger, kembali lagi untuk berbagi tutorial, kali ini saya akan membagikan sebuah tutorial bagaiman cara membuat menubar multi dropdown di blog,tutorial ini saya ambil dari blog mbak Arlina, :) dan terimakasih sebelumnya buat mbak arlina yang sudah berbagi, sobat blogger menubar ini selain tampilannya elegant juga di desain menjadi responsive oleh mbak arlina tentu dengan kelebihan multi dropdown menu atau multi sub menu.









DEMO

Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.






Cara Membuat Menu Bar Multi Dropdown.

1. Buka akun blogger anda.

2. Pilih menu template > klik Edit Html

3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>


nav { display: block; margin-top: 100px; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #9ca3da; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #9ca3da; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }





5. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>


<nav> <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> <ul class="menu"> <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> <li><a href="#">Sub-Menu 3</a></li> <li><a href="#">Sub-Menu 4</a></li> <li><a href="#">Sub-Menu 5</a></li> </ul> </li> <li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li> <li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li> <li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a> <ul class="sub-menu"> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> <li><a href="#">Sub-Menu 3</a> <ul> <li><a href="#">Sub Sub-Menu 1</a></li> <li><a href="#">Sub Sub-Menu 2</a></li> <li><a href="#">Sub Sub-Menu 3</a></li> <li><a href="#">Sub Sub-Menu 4</a></li> <li><a href="#">Sub Sub-Menu 5</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li> <li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li> <li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li> </ul> </nav>





5. Langkah terakhir simpan kode di bawah ini tepat di atas kode </body>


<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ var touch = $('#resp-menu'); var menu = $('.menu'); $(touch).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 767 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); //]]> </script>





6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda.




Oke sobat saya rasa sudah selesai di tutorial cara membuat menubar multi dropdown di blog,untuk lebih dan kurangnya saya mohon maaf,semoga sukses. :)




======================================================================


Cara Memasang Menu Bar dan Sub Menu Bar di Halaman Blog














Jika anda memperhatikan tampilan blog jadipintar.com, lihatlah sederetan kotak berwarna biru dengan tulisan berwarna putih berisi daftar menu seperti; SALAM I DO'A, SHALAT I PUASA I MATI I WARIS I KIAMAT, dll, (tampilan sebelum ini, yang sekarang lihat model 2 di bawah-red) lalu jika kursor disentuhkan, akan tergulung layar yang memuat sekian banyak judul artikel, Itulah yang disebut dengan Menu dan Sub-Menu bar.

Menu dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu . Memberi sub menu bar juga membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan mata; blog kita tampak lebih ilmiah, teratur, dan simpel.

Jika anda berminat memasangnya di blog, artinya anda orang yang berfikir sistimatis dan menyukai keteraturan.Selamat mencoba.





Langkah Pemasangan





- Klik Desain

- Pilih Template lalu pilih Edit HTML

- Pilih/klik Lanjutkan

- Pilih/klik Expand Template Widget

Cari scrift berikut :

<div class='main-outer'> atau

<div id='main-wrapper'> atau

<div id='main'>

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi :

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li { height:30px; border-top:1px solid #fff; }

#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>







PENJELASAN :

1. Cara memasukkan alamat URL:

Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

2. Cara menuliskan judul menu atau judul postingan:




Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.

3. Cara merubah lebar menu: silakan cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :

#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;}

Angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.

4. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau.

5. Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blokwarna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.

6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.

[1]. <style>

[2]. /* -- Menu Horizontal + Sub Menu-- */

[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}




[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........

A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai, silakan klik daftar kode warna.

B. Mengganti warna tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beriwarna hijau dengan warna yang anda sukai (ganti kodenya saja).

C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarnaungu dengan jenis font kesukaan anda,

[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-

- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar .

- Lalu simpanlah/save.

Saran

* back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

* Untuk menghilangkan tampilan tampilan dobel dengan Laman Utama,

- Maka ikutilah saran berikut :

- Masuk ke Menu Laman

- Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"

- Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Apabila melalui cara yang kami bagikan ini belum berhasil, coba sahabat ulangi lagi dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa berkonsultasi melalui komentar di bagian bawah ini.




Tips Memasang Sub Menu Di Tata Letak/Side Bar BlogSetelah tutorial di atas memasang menu dan sub menu pada halaman artikel, kali ini masih tetap memasang menu dan subnya, tapi di sisi luar halaman postingan (side bar), caranya:

1. Masuk ke dasbor blogger anda

2. Pilih Tata Letak atau Lay Out

3. Klik Add Gadget/ Tambah Gadget

4. Pilih HTML/JAVASCRIPT.

(Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia)







<div id="RickyMenu">

<div id="Rickybox">

<ul id="punch">

<li><a href="#">Home</a></li>

<li>

<a href="#">Sample Page</a>

<ul>

<li>

<a href="#">Sub Page #1</a>

<ul>

<li><a href="#">Sub Sub Page #1</a></li>

<li><a href="#">Sub Sub Page #2</a></li>

<li><a href="#">Sub Sub Page #3</a></li>

</ul>

</li>

<li><a href="#">Sub Page #2</a></li>

<li><a href="#">Sub Page #3</a></li>

<li><a href="#">Sub Page #4</a></li>

<li><a href="#">Sub Page #5</a></li>

</ul>

</li>

<li><a href="#">Sample Post</a></li>

<li><a href="#">Blog Page</a></li>

</ul>

</div>

</div>

Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan

5. Klik Save/Simpan

Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.

Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal drop down menu di tempat yang anda inginkan.

Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:

Silahkan cari pada bagian akhir ada kode seperti ini:

<li><a href="#">Blog Page</a></li>

</ul>

Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:

<li><a href="#">Blog Page</a></li>

<li><a href="LINK BARU">TEKS BARU</a></li>

</ul>

Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini

<li><a href="#">Blog Page</a></li>

<li><a href="LINK BARU 1">TEKS BARU 1</a></li>

<li><a href="LINK BARU 2">TEKS BARU 2</a></li>

<li><a href="LINK BARU n">TEKS BARU n</a></li>

</ul>




Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut

<li><a href="#">Blog Page</a></li>

<li><a href="LINK BARU 1">TEKS BARU 1</a></li>

<li><a href="LINK BARU 2">TEKS BARU 2</a>

<li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>

<li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>

</li>

<li><a href="LINK BARU n">TEKS BARU n</a></li>







Model ke-2. (terpasang di jadipintar.com saat ini)




Ini adalah model drop down bertingkat yang bisa mengakomodir anatara menu dan submenu kemudian sub submenu dst. terserah kebutuhan; juga bisa saja hanya memasang menu saja (label) untuk lebih simpelnya. Untuk contoh silakan lihat di bagian atas blog ini.

Skripnya adalah:







<style>

#menu

{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #000000;

background: -moz-linear-gradient(#444, #000000);

background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 0px #9c9c9c;

-webkit-box-shadow: 0 2px 0px #9c9c9c;

box-shadow: 0 2px 0px #9c9c9c;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

line-height: 0;

}

#menu a

{

float: left;

height: 25px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Sub-menu */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);

-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);

box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px;

border-radius: 2px;

}

#menu ul ul

{

top: 0;

left: 150px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 10px;

height: 10px;

width: 130px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

}

#menu ul a:hover

{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child > a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after

{

left: -8px;

top: 12px;

width: 0;

height: 0;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 8px solid #444;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after

{

border-right-color: #04acec;

border-bottom-color: transparent;

}







#menu ul li:last-child > a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<ul id="menu">

<li><a href='/'>Home</a></li>

<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>

<ul>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>

<ul>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>

<ul>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>

<li><a href='http://namablog.blogspot.com' rel='dofollow' target='_blank'>Menu 3.3</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>

</ul>

</li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>

<ul>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul></li></ul>







Keterangan:

1. Silakan ganti tulisan berwarna merah namablog.blogspot.com dengan URL alamat blog anda.

2. Skrip ini bisa dipasang di side bar (luar artikel) atau pun di dalam artikel.

- Untuk di sede bar, seperti bisa anda ke edit blogger- Tata letak - Tambah Gadget, dst.

- Untuk di dalam artikel, anda mesti ke Template-Edit HTML dst., dan agar bisa terpasang di bagian paling atas blog, silakan copas skrip ini di atas kode </head>.







7 Pertanyaan Terbanyak Untuk Materi Ini1. Ganti Warna background

Aldy Madani28 Februari 2014 18.33

Tanya:

Gimana Cara Ganti Warna Background Barnya ?

Jawab:

Gampang, pada skrip baris ke-3 ada tulisan ......#156994

gantilah kode warna background tersebut dengan kode warna sesuai selera anda. Daftar kode warnanya silakan klik di sini.

Selamat berkreasi.




2. Memasukkan Artikel ke Sub menu

Boby.12AB2 Maret 2014 20.37

Tanya:

gan cara agar postingan kita ada di submenu gimana caranya

Jawab:

Cara mengisi url, masuklah dari BLOGGER, lalu pilih POS, klik DITERBITKAN, lalu pada judul artikel yang akan kita masukkan klik LIHAT. Copy alamat url yang tampak di atas, lalu pastekan ke kolom submenu

Semoga bisa dipahami.




3. Cara Memasang Sub menu

Iwhante Evendi15 Maret 2014 13.27

Tanya:

Maksih ilmunya Gan!

Gan ane dah buat menunya, tp gk bsa buat submnunya. Trus cara biar submnu tadi mngrah ke postingan trntu gmna ya?

Jawab:

Pada skript yang memuat "Menu 1, Menu 2 dll, rubahlah kode '#' dengan alamat URL postingan yang akan dipasang, kata "Menu 1" rubah dengan judul yang ingin ditampilkan di layar.

'#' = Alamat URL postingan yang akan ditampilkan (sub menu)

"Menu 1, Menu 2 ......= Judul postingan yang akan ditampilkan di layar.

1. Cara memasang "'#'" (URLs)

- Masuk dari dasbor (jangan copy-paste alamat URL dari homepage)

- Pada judul postingan yang ingin kita pasang klik "lihat"

- Akan tampil alamat URl-nya di kotak pencarian atas, lalu "copy"

- Paste-kan pada posisi '#' di skript

2.Cara memasang "Menu 1, Menu 2..... ", anda tinggal tulis judul yang ingin ditampilkan dari postingan tersebut, terserah apa yang sesuai dengan judul saja. Misalnya "cara membuat blog keren", "Pengertian Blog Dofollow", atau apa saja terserah.

Gampang kan ?

SELAMAT MENCOBA.




4. Cara Back Up Template

Tanya:

Marsudijono21 Mei 2014 18.19

Gan, back up templete itu gimana caranya?....Tx

Jawab:

Maksudnya membuat salinan skrip HTML untuk berjaga-jaga jika proses mengalami kegagalan dan tidak bisa kembali ke tampilan semula.

Caranya:

- Masuk BLOGGER

- Klik TEMPLATE

- Pilih HTML (akan muncul kotak HTML, centang kotak di kiri atas atau tanda panah hitam di seluruh sisi kiri kotak, untuk membuka semua kode yang tersembunyi).

- Copy seluruh isi skrip, paste-kan ke Noteped

Jika proses anda mengalami gangguan, anda akan bisa kembali ke tampilan semula dengan copas skrip yang di simpan di notepad tadi.

Semoga menjadi paham.




5. Mengatur Lebar Background Menu dan judulnya

Tanya:

Akah 20LEgend23 September 2014 11.17

Nyang masih blon berhasil, coba terus dan jangan takut salah asal kita inget "Pratinjau" dulu!

Semangaaaat.....!!

oh iye gan ane udah hampir berhasil tinggal dikit lagi, ane punya 2 pertanyaan:

1. Script yang mana nyang buat ngatur lebar Back ground menu Bar?

itu lho block warna biru klo dr contoh yg agan kasih diatas! ane udah coba ganti beberapa script

yang menurut ane mengatur soal ukuran tapi masih gagal.

makasih banyak gan, ane doain tambah ganteng.... :))

2. Apakah kita bisa mengatur Panjang pendeknya text "nama" Menu atau Sub Menu?

Soalnye Sub menu nyang mo ane buat lumayan panjang, udah ane coba tp begitu ane

Pratinjau Textnya kepotong gan....

Jawab:

1. Sudah saya tambahkan di artikel atas, silakan lihat "Penjelasan" poin 3.

2. Bisa dicoba, skrip baris ke-18, "width" nya ditambah jadi 300 px atau lebih terserah ente, kasih tahu kalau berhasil ya ?

Lain kali jangan pakai memuji, anda orang ke 2.000 yang ndoain begitu.




6. Cara Mengklasifikasi Sub Menu

Tanya:

Ade Rahmat26 November 2014 19.10

Gan gmna caranya nulis di menu atau submenu? tp bukan link ya, kalau link saya tau. contohnya di blog punya agan ada menu salat, puasa dll. nah kan pas di klik langsung ke halaman tuliasan blog agan. Tks

Jawab:

Klasifikasikan artikel anda berdasrkan label, nama pada menu hakikatnya adalah nama label, sehingga ketika anda klik menu "X", maka akan ditampilkan semua artikel dari label "X" tersebut, dicoba lagi ya, anda pasti bisa.




7. Cara Memasukkan URL

Tanya:

surya adi saputra7 September 2014 19.28

trima kasih mas berhasil,,, oya mas kalo yang tanda # kan di ganti Url menu atau sub menu, itu caranya gimana ya mas saya kurang paham, trima kasih,,

Jawab:

- Buka "Dasbor blogger"

- klik "Pos" lalu klik "diterbitkan"

- Pilih artikel yang mau di masukkan URlsnya, klik "lihat", nanti di kotak pencarian bagian atas (search bar) alamat URL nya akan tampil. Blok laku copy.

- Hapus tanda # ganti dengan alamat URL tadi (paste).






======================================================================




Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML









Kebetulan karena kemarin saya memakai Drop Down Menu di Blog ini, dan kelihatannya lebih bagus dari sebelumnya maka saya akan share Drop Down Menu yang saya pakai ini, siapa tahu bermanfaat.

Bagi yang berminat memakai Menu Drop Down seperti yang saya pakai ini silahkan anda copy kode di bawah ini:







<style>

#menu

{

width: autopx;

margin: 5;

padding: 5px 0 0 0;

list-style: none;

background: #000000;

background: -moz-linear-gradient(#444, #000000);

background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 2px 0px #9c9c9c;

-webkit-box-shadow: 0 2px 0px #9c9c9c;

box-shadow: 0 2px 0px #9c9c9c;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

line-height: 0;

}

#menu a

{

float: left;

height: 20px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Sub-menu */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 25px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);

-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);

box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px;

border-radius: 2px;

}

#menu ul ul

{

top: 0;

left: 150px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 5px;

height: 5px;

width: autopx;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

}

#menu ul a:hover

{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child > a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after

{

left: -8px;

top: 12px;

width: 0;

height: 0;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 8px solid #444;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after

{

border-right-color: #04acec;

border-bottom-color: transparent;

}

#menu ul li:last-child > a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<ul id="menu">

<li><a href='/' rel='nofollow'>Home</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown</a>

<ul>

<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/hubungi-bulan-ramadlan-seo.html' rel='nofollow' target='_blank'>Hubungi Bulan Ramadlan SEO</a></li>

<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-website-dan-produk-bulan.html' rel='nofollow' target='_blank'>Jasa Review Website dan Produk Bulan Ramadlan SEO</a></li>

<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-pasang-iklan-paket-murah.html' rel='nofollow' target='_blank'>Jasa Pasang Iklan Paket Murah</a></li>

<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-produk-dan-website-besar-besaran.html' rel='nofollow' target='_blank'>Jasa Review Produk dan Website Besar besaran</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown 2</a>

<ul>

<li><a href='/' rel='nofollow' target='_blank'>Menu 1</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 2</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 3</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 4</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/2013/06/cara-membuat-menu-drop-down-tanpa-edit.html' rel='dofollow' target='_blank'>Cara Membuat Menu Drop Down Tanpa Edit Html</a></li>

</ul></li></ul>









Lalu silahkan anda paste pada gadget html.

setelah anda paste silahkan anda simpan tanpa memberikan nama pada gadget tersebut.

dan sebelumnya silahkan anda ganti link yang ada dengan link anda, begitu juga nama sebagai anchor text-nya. dan sekian dari saya semoga Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML ini bermanfaat.






========================================================================





Cara Membuat Menu Drop Down Tanpa Edit HTML












Sangat mudah untuk membua menu drop down pada blogspot seperti di atas tanpa melakukan edit HTML, cukup dengan menambahkan gadget saja di bawah header blog.














Caranya:



Buka Dasbor > Tata Letak> Tambah Gadget (dibawah header)














Kemudian masukkan kode berikut ini:

<style>
    #menunavigasihorisontal {
        background: #ff7474;
        width: 100%;
    
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:50px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:normal 16px crushed, oswald;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #91857f;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav 

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li 

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav 

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #e06666;
        display: block;
        font:normal 14px Arial, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li 

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 14px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #e06666;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='http://www.tettytanoyo.com'>Home</a>
                </li>
                <li>
                  <a href='#'>About Me</a>
                </li>
                <li>
                  <a href='#'>This Blog</a>
                     <ul>
                        <li><a href='http://www.tettytanoyo.com/search/label/Tips'>Tips</a></li>
                        <li><a href='http://www.tettytanoyo.com/search/label/Blogging'>Blogging</a></li>
                        <li><a href='http://www.tettytanoyo.com/search/label/Diary'>Diary</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Other ▼</a>                 <ul> 
                    <li><a href='http://www.tettytanoyo.com/search/label/Giveaway'>Giveaway</a></li> 
                    <li><a href='http://www.kurikulumdanpembelajaran.blogspot.com'>Kurikulum</a></li> 
                    <li><a href='http://www.tettytanoyo.com/search/label/Puisi'>Puisi</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Menu 1</a></li> 
                    <li><a href='#'>Sub Sub Menu 2</a></li> 
                    <li><a href='#'>Sub Sub Menu 3</a></li> 
                  </ul> 
                  </li> 
                  </ul>             </li>
          </ul> 

        </div>












Kode yang saya beri warna adalah kode yang bisa diubah sesuai selera. Seperti font, warna, ukuran font, dan lainnya. (silakan diutak-atik sambil berkreasi)







Untuk mengetahui kode warna, biasanya saya melihat pada pengaturan di blogspot sendiri.




Masuk ke dasbor>template>sesuaikan.






Selesai






Selamat Mencoba, Semoga Bermanfaat :)




========================================================================





MEMBUAT MENU BAR + SUB MENU TANPA EDIT DI HTML



















Mungkin kebanyakan orang kesulitan untuk membuat menu dropdown apalagi bergaul dengan yang namanya html pasti sangat males padahal mudah jika kita memang serius dan tekun untuk mengerjakannya, nah di postingan ini sebelumnya sudah saya share namun yang ini berbeda kali ini saya akan berbagi mengenai cara membuat menu dropdown tanpa edit html dan mungkin cukup sederhana bagi anda para blogger sekalian, oke kawan langsung saja cekidot.



1. Pastikan anda sudah loggin ke blogger
2. Klik Rancangan / Layout
3. Klik Tambah Gadget
4. Pilih html/javascript
5. Copy - paste kan Code dibawah ini





<style>
#mbtnavbar {
background: #3B5998;
width: 87%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FF0000;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#mbtnav li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #FF0000;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’Nama Blog Kamu'>Home</a>
</li>
<li><a href=’link kamu’>About</a>
</li>
<li>
<a href=’#'>Page ▼</a>
<ul>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a>
<ul>
<li><a href=’#'>Sub Sub Page #1</a></li>
<li><a href=’#'>Sub Sub Page #2</a></li>
<li><a href=’#'>Sub Sub Page #3</a></li>
></ul></li></ul></li></ul></div>














di coba, kalo kurang jelas silahkan komentarnya. semoga dapat digunakan dan berfungsi, silahkan edit edit saja (yang berwarna merah dan biru / # boleh anda ganti terserah saja) jangan takut salah oke guys, simple kan, hehe thanks... :)






==========================================================================






















Membuat Menu DropDown untuk blog Sobat Blog Blogger tidak memerlukan Edit HTML, karena jika diterapka menggunakan Etit HTML, agak ribet untuk Blogger pemula. Adapun menerapkan menu drop down ini cukup melalui tambah gadged baru pada Dashboard Blog SobatBlogger. Lihat seperti gambar di bawah: Latar belakang, border menu ini bisa Sobat rubah dan font yang diinginkan.






Adapun craranya: Sobat harus masuk terlebih dahulu ke Blog Blogger untuk menambah gadget baru, lalu klik Design di halaman Blog Blogger, akan mengarah ke Page Element atau Add and Arrange Page Element. Setelah itu Sobat


akan melihat Add a Gadget, lihat seperti gambar di bawah





















Klik Add a Gadget tersebut, yang muncul seperti contoh gambar di bawah













Klik lagi pada area HTML/JavaScript, untuk mengeluarkan halaman Configure HTML/JavaScript, lihat gambar bawah: jangan lupa ketik Judul Gadget, agar mudah bila Sobat ingin mengedit ulang Gadget tersebut.













Lihat kode HTML/JavaScript di bawah: Copy dan Paste pada “Content” untuk HTML/JavaScript seperti gambar di atas, klik Save lihat hasilnya,,,,,,,,






<style>


#mbtnavbar {


background: #3B5998;


width: 87%;






color: #FFF;


margin: 10px 0;


padding: 0;


position: relative;


border-top:0px solid #960100;


height:35px;






}






#mbtnav {


margin: 0;


padding: 0;


}


#mbtnav ul {


float: left;


list-style: none;


margin: 0;


padding: 0;


}


#mbtnav li {


list-style: none;


margin: 0;


padding: 0;






}


#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {


color: #FF0000;


display: block;


font:bold 12px Helvetica, sans-serif;


margin: 0;


padding: 9px 12px 11px 12px;


text-decoration: none;


border-right:0px solid #627AAD;






}


#mbtnav li a:hover, #mbtnav li a:active {


background: #627AAD;


color: #FFF;


display: block;


text-decoration: none;


margin: 0;


padding: 9px 12px 11px 12px;






}






#mbtnav li {


float: left;


padding: 0;


}


#mbtnav li ul {


z-index: 9999;


position: absolute;


left: -999em;


height: auto;


width: 160px;


margin: 0;


padding: 0;


}


#mbtnav li ul a {


width: 140px;


}


#mbtnav li ul ul {


margin: -25px 0 0 161px;


}






#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {


left: -999em;


}


#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {


left: auto;


}


#mbtnav li:hover, #mbtnav li.sfhover {


position: static;


}


#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {


background: #EDEFF4;


width: 120px;


color: #3B5998;


display: block;


font:normal 12px Helvetica, sans-serif;


margin: 1px 0 0 0;


padding: 9px 12px 10px 12px;


text-decoration: none;


z-index:9999;


border:1px solid #ddd;






-moz-border-radius:4px;


-webkit-border-radius:4px;






}


#mbtnav li li a:hover, #mbtnav li li a:active {


background: #627AAD;


color: #FFF;


display: block;






}






#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {






background: #EDEFF4;


width: 120px;


color: #FF0000;


display: block;


font:normal 12px Helvetica, sans-serif;


padding: 9px 12px 10px 12px;


text-decoration: none;


z-index:9999;


border:1px solid #ddd;


margin: 1px 0 0 -14px;






}


#mbtnav li li li a:hover, #mbtnav li li li a:active {


background: #627AAD;


color: #FFF;


display: block;


}






</style>


<div id=’mbtnavbar’>


<ul id=’mbtnav’>


<li>


<a href=’#’>Home</a>


</li>


<li><a href=’https://readmoremyblog.wordpress.com/2012/02/19/beranda/’>About</a&gt;


</li>


<li>


<a href=’#’>Page ▼</a>


<ul>


<li><a href=’https://readmoremyblog.wordpress.com/’>READ MORE MY BLOG</a></li>


<li><a href=’https://readmoremyblog.wordpress.com/2012/04/05/cara-menautkan-link-blog-di-gravatar-profile/’>Gravatar Profile</a></li&gt;


<li><a href=’https://readmoremyblog.wordpress.com/cara-posting-baru-di-wordpress/’>Cara posting baru di WordPress</a>


<ul>


<li><a href=’#’>Sub Sub Page #1</a></li>


<li><a href=’#’>Sub Sub Page #2</a></li>


<li><a href=’#’>Sub Sub Page #3</a></li>


></ul></li></ul></li></ul></div>






Semoga dapat berfungsi






========================================================================



Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML








Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML - Menu naviagasi adalah menubar yang biasanya ditempatkan di bawah header blog yang berguna untuk mengarahkan pembaca maupun pengunjung blog menuju link yang mereka cari. Jika selama ini banyak para blogger yang kesulitan untuk cara membuatnya kali ini saya akan share tentang bagaimana cara membuat menu navigasi keren tanpa editing HTML. Dengan cara ini para blogger pemula yang belum mengetahui cara editing HTML yang memang membutuhkan ketelitian dapat membuat menu navigasi mereka dengan lebih menarik dan lebih mudah.






Menubar navigasi atau menu bar biasanya terdiri dari beberapa tab. "Di dalam" masing-masing tab tersebut berisi link yang menuju halaman posting, halaman statis, halaman label, ke website lain dll. Sebenarnya membuat tab menu tidak begitu sulit. Pada dasarnya intinya sama yaitu membuat menu yang berisi beberapa link dengan beberapa styling ditambahkan untuk daya tarik visual. Sementara link yang disusun secara vertikal, tab navigasi biasanya disusun secara horizontal.






Dalam tutorial ini kita akan menginstal bar tepat di bawah header, tempat khas atau umum untuk navigasi bar. Bar akan ditambahkan sebagai gadget melalui halaman Elemen Halaman. Keuntungan menggunakan gadget adalah bahwa jika Anda ingin menghapusnya nanti, hal itu dapat dilakukan dengan mudah tanpa mengedit HTML. Namun, untuk melakukan itu, template harus memiliki tautan Gadget atau widget wadah yang saya akan menyebutnya, di lokasi tertentu.






Baca Juga widget artikel terkait lainnya:


- Membuat navigasi no urut halaman


- Membuat search box keren


- Membuat Widget Paypal Donation


- Membuat widget Pagerank


- Membuat bermacam-macam popular post


- Membuat widget Alexa rank terbaru






Membuat Menu Navigasi Untuk Blogger








1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)


2. Klik Tambah Gadget.


3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.


4. Biarkan kotak judul kosong.


5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.






<style>

#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh382OqMwBgNl9XixevjNhW6EIjFnD6haCgruw-98kPgUDdSwFNro1T7b5n-bNcRbFsb237Nyo-DRYX_Vb_0fntraKbiKaCQy6L9IkFZ4VgEhdX-HxoOHjLqSpR0Ys05aE7Ge0traGCcrCQ/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}

#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
border-left:none;
}

#tab_menu li:last-child {
border-right:none;
}

#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>






6. Ganti "#" dengan URL halaman tujuan Anda.


7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.


8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.


9. Untuk mengubah lebar lebar menu edit: 960px.






Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warnamerah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan. 

1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyq-IBvyIaUuMZZ6G8vN3tQc9shY8aHp6xLuMGvG8-ePpbPzx7RGj9rJrVWMX4GU9Fur1CtIyhfqNBwvf5BeoWDQC6IkmhAwGIYZhPGN8Ik0da1-JO05GCEqzOtX9_m4QMT_dlDuJCnuU/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvhw6AAMtOuiXHk6pO2OJCJVM1SJFJ2YVhws8TVhn3KY_UTXDeyWNe-x2xdfd1l3Jdp_CMBovHXij9mHEGenvGOMI6IXLIzzF1FjR_-NzLwLSOkoMflnAnu-w4u0uWUFks3Er89ExXnAs/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXK0W9A2qIcL7AOrU-jf5ZM4QPJA-LzGVaKG-UlZsjVzwzLde8MQg4CV14Qrx5uYXnNT2fr17cyUqGFB-srKwEGL27tkGY3XGjwFiaBa-Bsf0VgjXzHxA2lBNKlFpUzjDROsB5Y2pS89L/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ouATg5B8EEmhhjgooX9kxqlrpkCfnNJCf-lb_0sRvgK-ye4R9-LRO2WbwX3fWJlbXdeLF8KxEP2EOhyphenhyphenoUv5Xolj-Gm1oILrTpuLJHqVs8LQMSTQLJriOYIAuMoMktkGtD72C3PLirPbV/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxrdHCAOa-f7yzDKUUJGAce7vR5sTdcUo2uPLbmaLw47QFZupTO_cmhLamE_GMPy2A76R5D0EvLdULXRReWD112yifPS39mh3ZD3mXsXldnkNtf_91dAB9r9to9gBJvMsy1iPkS9reoZY/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwI0uiUJnoef57zbpT6lMOfbnGQ56Le9zJKy3OWaXLXpLDup0lWDEagS5juMQfnNigGvQ4kbsD1X8z_mRBm6h2PyMCxaZLLHUck0440rlLn_QfUVnpnHUyYwLwE21Q_XtPPnxWrXjI5a1/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDsgN4Lj7-LqFXWDKHPFIn4FWcgyJzNQS8s0GXwMQuceMzc2XppzIbVXVXEGslfbFt9yK0LbUBfGps8Ys7DKk-eqSUOW4Yt063Wbxb53QoWqV6Xbbp6ULA6GWGxcBSEc3Wy7lYjAjK6p6/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDnB0xZ6jKc9_jv1qJcQih0gRU14wO7TomQVeGbj2DVDn_UMZWY36ERB4fN_tuJdQkKEZKkYtoAjOgiXVOQ49wAd6RdurI4w7xnWs2sEtkd1C-Soc-rwWZ_uzIV3REI9SKqU6V0dXzwCRH/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNaouWxDU9pNGD0b7toGZQN-1eKkCGtMSTjebUl7nOwr9kuiZzmZ1J2aRUAcRk9F6vL8gZOKHfeyKLDk1hYOC2M9-BME_JqD5664hhYwE7tMVbGi4nsK_ZvUr5rC7-5wHm3HgYuFkPYzD/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftuhnqOvn0QaN5xq5W-sRgNmI3fWHDC8ZROXlqNAc4QAZ5WvYkpx8fRuVQFs0z08AckIb5YGvS72pnibuY_U1a7J7ySu8kyHW7fea67RPACGSfwguahJH-ZTgt3-kO2-H1dOdCQ2QlvoS/s1600/menu_bg_10.png

========================================================






Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO

Jika anda sering kehilangan email, atau jika anda sering emailnya error karena dibuat percobaan oleh hacker pemula, atau apabila email anda sering mendapatkan email spam dari spammer, sangat tepat apabila anda membaca Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO ini




Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO

Sebenarnya banyak cara agar aman dari hacker dan spammer, dan saya akan menjelaskannya disini. oke anda simak baik baik Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO ini ya...




Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO

1. Buatlah Password yang tidak mudah ditebak oleh orang lain.

Cara dan nasehat seperti ini saya rasa sangat umum, dan saya tidak akan menjelaskan hal umum seperti ini disini, karena menurut saya hal yang umum seperti ini tidak seru dan tidak menarik.

2. Buatlah Email Alias

Dengan Email Alias maka email utama anda akan lebih aman, dikarenakan orang lain tidak tahu email utama anda.

dan menurut saya, cara kedua ini adalah cara yang paling bagus dan paling efektif. dan jangan lupa membuat kotak masuk sendiri buat email alias anda, maka dengan begitu email anda akan bebas dari email email spam.

Namun kalau anda menggunakan email alias di Yahoo, emailnya kurang keren, dan dengan mudah bisa diketahui oleh orang lain, dan lebih parahnya lagi, email alias di yahoo tidak bisa dibuat daftar facebook. jadi kalau anda mendaftar facebook dengan email Yahoo, anda tidak bisa menggunakan email alias.

Lalu bagaimana agar email utama bebas dari spammer?

seperti penjelasan saya diatas, silahkan anda buat kotak masuk khusus buat email yang datang dari Facebook, atau tandai spam saja, maka secara otomatis nanti tiap kali facebook memberikan informasinya ke email anda, maka email tersebut akan masuk ke kotak spam.

Gampang banget kan Trik dan Tips dari Bulan Ramadlan SEO?!

Jadi mulai sekarang, ucapkan selamat tinggal email spam!!!.






==============================================

Membuat Menu Bar Drop Down Tanpa Edit HTML





Ini Gan Saya Kasih beberapa Menu Bar Drop Down Tanpa Edit Html keren untuk blog agan..
Cara pemasangannya sangat gampang
agan tinggal masuk ke...

layout.
Click on add a gadget.
Pilih html / javascript.
Copy kode menubarnya di bawah ini.
Dan paste kode ke dalam html / javascript / gadget.



Pilih menu Bar yang agan suka.

1. Black Navigation Menu Bar ( Demo )








<style type

="text/css">

/* this code is by www.avdhootblogger.com Main */

#menu{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #111;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background:

-webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 1px #9c9c9c;

-webkit-box-shadow: 0 2px 1px #9c9c9c;

box-shadow: 0 2px 1px #9c9c9c;

}


#menu li{

float: left;

padding: 0 0 10px 0;

position: relative;

}


#menu a{

float: left;

height: 25px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}


#menu li:hover > a{

color: #fafafa;

}


*html #menu li a:hover{ /* IE6 */

color: #fafafa;

}


#menu li:hover > ul{

display: block;

}


/* Sub-menu */


#menu ul{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 5px;

border-radius: 5px;

}


#menu ul li{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}


#menu ul li:last-child{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}


#menu ul a{

padding: 10px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}


*html #menu ul a{ /* IE6 */

height: 10px;

width: 150px;

}


*:first-child+html #menu ul a{ /* IE7 */

height: 10px;

width: 150px;

}


#menu ul a:hover{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}


#menu ul li:first-child a{

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}


#menu ul li:first-child a:after{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}


#menu ul li:first-child a:hover:after{

border-bottom-color: #04acec;

}


#menu ul li:last-child a{

-moz-border-radius: 0 0 5px 5px;

-webkit-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}


/* Clear floated elements */

#menu:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}


* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */


</style>




<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

$(function() {

if ($.browser.msie && $.browser.version.substr(0,1)<7)

{

$('li').has('ul').mouseover(function(){

$(this).children('ul').show();

}).mouseout(function(){

$(this).children('ul').hide();

})

}

});

</script>



<ul id="menu">

<li><a href="#">Home</a></li>

<li>

<a href="#">Categories</a>

<ul>

<li><a href="#">CSS</a></li>

<li><a href="#">Graphic design</a></li>

<li><a href="#">Development tools</a></li>

<li><a href="#">Web design</a></li>

</ul>

</li>

<li><a href="#">Work</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>





2. Animated call to action navigation menu bar ( Demo )










<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>

<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZXsncTn0cJIbBJXoT37Tim-fKOVTlbPUf1TxLeW6qu8MSd174VGs64ickwYtINlpc_a8d5VoFPrRRVVtSnM_MR_HV6oTkh3BHXAShkmBhFzCU5XlT4vfzDwkzTfkeII2gqJBhlEL_Wk/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZXsncTn0cJIbBJXoT37Tim-fKOVTlbPUf1TxLeW6qu8MSd174VGs64ickwYtINlpc_a8d5VoFPrRRVVtSnM_MR_HV6oTkh3BHXAShkmBhFzCU5XlT4vfzDwkzTfkeII2gqJBhlEL_Wk/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZXsncTn0cJIbBJXoT37Tim-fKOVTlbPUf1TxLeW6qu8MSd174VGs64ickwYtINlpc_a8d5VoFPrRRVVtSnM_MR_HV6oTkh3BHXAShkmBhFzCU5XlT4vfzDwkzTfkeII2gqJBhlEL_Wk/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZXsncTn0cJIbBJXoT37Tim-fKOVTlbPUf1TxLeW6qu8MSd174VGs64ickwYtINlpc_a8d5VoFPrRRVVtSnM_MR_HV6oTkh3BHXAShkmBhFzCU5XlT4vfzDwkzTfkeII2gqJBhlEL_Wk/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>



3. Mega Drop Down Menu Bar ( Demo )



<style type="text/css">
#multimenu{ background:#156AA6; overflow:hidden;
}
#multimenu ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0;padding:0;
}
#multimenu li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0;
}
#multimenu li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px;
}
#multimenu li.depan a { border-left:none;
}
#multimenu li ul { background:#156AA6; height:auto; border:0; position:absolute;width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0;padding:0;
}
#multimenu li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3;border-bottom:1px solid #043457; margin:0; padding:0;
}
#multimenu li:hover li a { background:#156AA6;
}
#multimenu li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a { color:#fff;
}
#multimenu li:hover ul.hidden { display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
</script>



4. 3D Flying Book Navigation Menu Bar ( Demo )








<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->



5. Blue White ( Demo )








<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{

}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}

</style>



<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>




Menu Bar Drop Down
Menu Bar Drop Down Tanpa Edit HTML
Cukup Sekian Dan Terimakasih Semoga Bermanfaat



==================================================






Cara Membuat Menu Drop Down Tanpa Edit Html
Tutorial Cara Membuat Menu Drop Down Tanpa Edit Html sudah banyak yang membuat,namun saya ikut ikutan membuat karena ada teman saya yang memintanya,sekaligus buat arsip saja.
Bagi yang masih belum mengerti apa itu Drop Down saya akan menjelaskan sedikit mengenai Menu Drop Down
Menu Drop Down adalah Menu link yang apabila disentuh dengan Mouse nanti akan ada menu link yang jatuh kebawah.Contohnya Nanti akan saya tampilkan di bawah tulisan ini.
Membuat Menu Drop Down juga bisa menambah peningkatan SEO Friendly Blog,karena dengan adanya menu Drop Down pengunjung blog anda akan lebih gampang mencari Informasi yang dia butuhkan.
Untuk Membuat menu Drop Down silahkan anda Copy Kode di bawah ini:


<style>

#menu

{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #000000;

background: -moz-linear-gradient(#444, #000000);

background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 0px #9c9c9c;

-webkit-box-shadow: 0 2px 0px #9c9c9c;

box-shadow: 0 2px 0px #9c9c9c;

}

#menu li

{

float: left;

padding: 0 0 10px 0;

position: relative;

line-height: 0;

}

#menu a

{

float: left;

height: 25px;

padding: 0 25px;

color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#menu li:hover > a

{

color: #fafafa;

}

*html #menu li a:hover /* IE6 */

{

color: #fafafa;

}

#menu li:hover > ul

{

display: block;

}

/* Sub-menu */

#menu ul

{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);

-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);

box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px;

border-radius: 2px;

}

#menu ul ul

{

top: 0;

left: 150px;

}

#menu ul li

{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#menu ul a

{

padding: 10px;

height: 10px;

width: 130px;

height: auto;

line-height: 1;

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

*html #menu ul a /* IE6 */

{

height: 10px;

}

*:first-child+html #menu ul a /* IE7 */

{

height: 10px;

}

#menu ul a:hover

{

background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba);

background: -o-linear-gradient(#04acec, #0186ba);

background: -ms-linear-gradient(#04acec, #0186ba);

background: linear-gradient(#04acec, #0186ba);

}

#menu ul li:first-child > a

{

-moz-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#menu ul li:first-child > a:after

{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after

{

left: -8px;

top: 12px;

width: 0;

height: 0;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 8px solid #444;

}

#menu ul li:first-child a:hover:after

{

border-bottom-color: #04acec;

}

#menu ul ul li:first-child a:hover:after

{

border-right-color: #04acec;

border-bottom-color: transparent;

}




#menu ul li:last-child > a

{

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after

{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html #menu { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<ul id="menu">

<li><a href='/'>Home</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>

<ul>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>

<ul>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>

<ul>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.3</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>

</ul>

</li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul>

</li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>

<ul>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>

<li><a href='http://bukarahasia-no1.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>

</ul></li></ul>


Setelah anda Copy silahkan anda masuk ke dasbor dan pilih >> Tata Letak dan Pilih Gadget HTML.lalu Paste Kode diatas.Lalu letakkan gadget HTML di tata letak header.Lalu simpan.
Untuk mengubah warna silahkan anda berkreasi sendiri.
Sekian Cara Membuat Menu Drop Down Tanpa Edit Html Semoga Cara Membuat Menu Drop Down Tanpa Edit Html ini bermanfaat.






=======================================================




Cara Memasang Menu Dropdown Tanpa Edit HTML






Assalamualaikum Gan ! Pada kesempatan kali ini saya akan berbagi Tutorial bagaimana cara membuat menu dropdown pada blog tanpa mengubah atau mengedit HTML. Mungkin sobat-sobat (terutama yang sudah expert) sudah banyak yang tahu caranya. Tapi masih banyak juga sobat-sobat yang lain yang belum tau, terutama yang masih awam seperti saya, hehe. Seperti yang kita ketahui, jika mengedit lewat HTML, beresiko jika salah memasukkan kode, maka tampilan blog akan rusak, biasanya gambar/warna backgroundnya akan hilang.

Seperti yang sobat-sobat ketahui, Menu Drop Down adalah Menu link yang apabila disentuh dengan Mouse nanti akan ada menu link yang menurun kebawah..

Selain mempercantik tampilan blog sobat, Membuat Menu Drop Down juga bisa menambah peningkatan SEO Friendly Blog, karena dengan adanya menu Drop Down pengunjung blog anda akan lebih gampang mencari Informasi yang dia butuhkan.

Untuk Membuat menu Drop Down silahkan anda Copy Kode di bawah ini, kode ini juga saya gunakan di blog saya:





<style type="text/css">

#black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:630px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow: 1px 1px 10px #888;

-webkit-box-shadow:1px 1px 10px #888;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;border-left:1px solid #333}

#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}

#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}

#nav{margin:0; padding:0;}

#nav ul{float:left; list-style:none; margin:0; padding:0;}

#nav li{border-left:1px solid #ff0000;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}

#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}

#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}

#nav li li a, #nav li li a:link, #nav li li a:visited{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74PYTSGAeY1MyFiOLhdXHqULBKTiN06hJnoev0dMJpBUBYqMW-QnRGVxbvIkcXKX3xO__uCtqjWQzBVZY8HNQ6KuO6yIhPOne_9s4O_HOM2GsllrhWDu9L0fjmiGLLeOx3wY2r09ICBtb/); width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;

-webkit-box-shadow:1px 1px 10px #888;

-webkit-border-radius: 6px;}

#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}

#nav li{float:left; padding:0;}

#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}

#nav li ul a{width:140px;}

#nav li ul ul{margin:-24px 0 0 170px;}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}

#nav li:hover, #nav 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;}

</style>

<div id='outer'>




<div id='black'>




<div id='navbarmenuleft'>




<ul id='nav'>




<li><a href='http://positifers.blogspot.com/'>Home</a></li>




<li><a href='#'>Jejaring Sosial</a>

<ul>

<li><a href='https://www.facebook.com/'>SubMenu</a></li>




<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http:'http://positifers.blogspot.com/'>SubMenu</a></li>

</ul><li/>




<li><a href='#'>Free Software Download</a>




<ul>




<li><a href='http://positifers.blogspot.com/'>Meni 1</a></li>




<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

</ul></li>




<li><a href='#'>Upload & Download</a>




<ul>




<li><a href='http://search.4shared.com/q/1'>Menu</a></li>




<li><a href='http://positifers.blogspot.com/'>SubMenu1</a></li>

<li><a href='http://positifers.blogspot.com/'>SubMenu</a></li>

</ul></li>




<li><a href='#'>Video</a>

<ul>




<li><a href='http://positifers.blogspot.com/'>Video</a><ul>

</ul>




<ul>




<li><a href='#'>Contoh 1</a>




<ul>




<li><a href='#'>A</a></li>




<li><a href='#'>B</a></li>




<li><a href='#'>C</a></li>




<li><a href='#'>D</a></li>




<li><a href='#'>E</a></li>




</ul></li>




<li><a href='#'>Contoh 2</a>




<ul>




<li><a href='#'>A</a></li>




<li><a href='#'>B</a></li>




</ul></li>




<li><a href='#'>Contoh 3</a>

<ul>




<li><a href='#'>A</a></li>




<li><a href='#'>B</a></li>




<li><a href='#'>C</a></li>




<li><a href='#'>D</a></li>




<li><a href='#'>E</a></li>




<li><a href='#'>F</a></li>




<li><a href='#'>G</a></li>

</ul></li>




<li><a href='#'>Contoh 4</a>




<ul>




<li><a href='#'>A</a></li>




<li><a href='#'>B</a></li>

</ul></li>




</ul>

</li></ul></li></li></li></ul></div>

<div id='search'>

<form action='/search/' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='search...'/>

<input class='btn' type='submit' value='go'/>

</form>

</div></div>

</div>

Setelah di Copy silahkan sobat masuk ke dasbor blog lalu pilih => Tata Letak dan Pilih Gadget HTML.lalu Paste Kode diatas.Lalu letakkan gadget HTML di tata letak header. Kemudian simpan.

Untuk mengubah warna dan menu silahkan sobat berkreasi sendiri, jangan sama dengan menu dropdown saya ya ,hehehe.

Sekian Tutorial Cara menu membuat menu dropdown tanpa mengubah kode HTML dari saya, semoga bermanfaat.






==========================================





Cara Membuat Tulisan Berjalan Mengikuti Cursor/Kursor


==========================================================



CARA MEMBUAT MENU DI BLOG



Banyak sekali cara untuk membuat penampilan blog menjadi menarik dan elegan, salah satunya dengan memberikan menu tab pada blog. Membuat menu tab sederhana pada blog memang sangat memudahkan pengunjung blog untuk mengetahui dan memilih postingan / artikel berdasarkan kategori yang telah ditentukan. Selain itu menu tab juga menjauhkan kesan monoton pada blog kita. Bisa dibayangkan bila blog kita tidak mempunyai menu, rasa rasanya ada yang kurang. Penggunaan menu tab ini sangat dianjurkan bila postingan yang ingin kita terbitkan menjadi satu kelompok menu di dalam kategori tertentu. Berikut ada sebuah tips sederhana tentang cara membuat menu di blog (blogspot). Dalam membuat menu ini, kita tidak menggunakan menu template / edit HTML langsung pada template, namun kita memanfaatkan halaman / laman yang sudah tersedia di dasbor blogger.
1. Login ke BLOGGER kemudaian ke DASBOR blogger.
2. Pada pilihan menu di DASBOR pilih menu LAMAN. Maka akan muncul seperti pada gambar dibawah ini,


3. Kemudian klik LAMAN BARU, laman baru ini berfungsi untuk menambahkan menu tab berupa postingan, label atau posting yang ada didalam blog. Pada menu ALAMAT WEB ( dibawah LAMAN KOSONG) adalah cara membuat menu di blogdengan menambah url / link langsung baik url dalam blog maupun url lain (bukan url blog), tanpa memasukkan posting atau label.

4. Setelah klik LAMAN BARU, kemudian isi judul LAMAN, dalam mengisi judul itu terserah kita. Sebagai contoh saya menggunakan Judul KATEGORI seperti pada gambar dibawah ini :



4. Klik HTML, kemudian COPY kode berikut dan PASTE kan pada halaman HTML tersebut.

<div id="tabshori">
<ul>
<li><a href="http://berbagiinfo4u.blogspot.com/search/label/Berita">Berita</a></li>
<li><a href="http://berbagiinfo4u.blogspot.com/search/label/Komputer">Komputer</a></li>
<li><a href="http://berbagiinfo4u.blogspot.com/search/label/Otomotif">Otomotif</a></li>
<li><a href="http://berbagiinfo4u.blogspot.com/search/label/Info%20Ponsel">Info Ponsel</a></li>
<li><a href="http://berbagiinfo4u.blogspot.com/search/label/Buku%20Terbaru">Buku Terbaru</a></li>
</ul>
</div>

5. Ganti code warna merah dengan link / Url label pada blog Anda. Jika sudah selesai silahkan klik PUBLIKASIKAN, untuk menghindari kesalahan silahkan dilihat dulu pada Menu PRATINJAU.

6. Anda dapat menambahkan 6 - 7 menu sekaligus pada blog. Jika ingin cara yang instan cukup masukkan ALAMAT WEB pada LAMAN MENU. Selanjutnya tinggal isikan URL LABEL pada masing masing Menu Tab tadi.

Demikian sedikit tips sederhana tentang cara membuat menu di blog, dikatakan sederhana karena cara ini hanya memanfaatkan menu LAMAN yang sudah tersedia di Dasbor Blogger.


CONTOH MENU TAB DI BLOG :



=========================================================

Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya? 

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klikTambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat !

=========================================================================

Cara Memasang Efek (Animasi) Daun Berjatuhan di Blog

Cara Memasang Efek (Animasi) Daun Berjatuhan di Blog - Melengkapi postingan cara memasang 'efek - efek' lain (seperti efek kursor bertabur bintang, sudah baca belum?), kali ini saya akan membagikan cara memasang efek (animasi) daun berjatuhan (berguguran) di blog. Seperti namanya, efek daun jatuh ini akan meperlihatkan animasi (efek) daun berjatuhan di blog, yang dapat memberikan kesan natural (alami). Untuk preview efek (animasi) daun berjatuhan ini, silahkan lihat disini

Jika Anda berminat memasang efek (animasi) daun berjatuhan di blog ini, silahkan copy script berikut.

<script src='https://googledrive.com/host/0ByoCwyjwB1aDYks2cFpKUXFDbkU'/></script>

Berikut ini adalah cara memasang script daun berjatuhan (berguguran) di blog Anda :

1.      Buka Blogger, lalu masuk ke Tata Letak.

2.      Pilih Tambahkan Gadget -> HTML Javascript.

3.      Pastekan kode diatas, lalu klik Simpan.

Sekarang, coba buka blog Anda, dan nikmati daun daun berjatuhan di blog Anda. Selamat mencoba, dan jangan lupa untuk mengklik tombol Google +1 dibawah posting ini. Salam blogger, dan terima kasih!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

========================================================

Kumpulan Efek - Efek Blog

Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blogberikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan

<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>

2. Efek hati bertaburan

<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

3. Efek bintang bertaburan

<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>

4. Efek kembang api

<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

5. Efek Gelembung

<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

5. Efek Kupu - Kupu Terbang

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

Cara pemasangan :

1. Klik rancangan --> Edit html
2. Letakkan script efek di atas kode </body>
3. Klik Save

RABU, 25 NOVEMBER 2015

selamat pagi sobat blogger kali ini saya akan sedikit memberikan trik untuk memberikan beberapa efek pada blog ....

di antara efek tersebut ada efek salju berjatuhan, efek daun berjatuhan,Kode Untuk efek bintang berjatuhan, Daun Hijau, Daun Kering, Mawar dan Efek Bubble .

oke tanpa perlu panjang lebar langsung saja kode/scrip ad di bawah ini.

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

 CARA 1:

• login ke dashbord blog kamu 
• pilih 'Rancangan Design' 
• klik 'Tambah gadget / Add gadget' 
• pilih widget 'HTML/javascript' 
• kemudian copy dan pastekan script dibawah ini.
• lalu Simpan Template

CARA 2:

• Seperti biasa login dulu ke dashboard blogger anda. 
• Pilih Rancangan > Edit HTML, centang Expand widget template. 
• Cari kode </head> 
• Letakkan kode berikut diatas kode </head>
• Simpan template kamu.

 

Kode Untuk efek salju berjatuhan, Copy kode dan letakan di atas kode </head> 

<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>

Kode Untuk efek daun berjatuhan, Copy kode dan letakan di atas kode </head>  

<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Kode Untuk efek bintang berjatuhan, Copy kode dan letakan di atas kode </head>  

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Daun Hijau

<script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>

Daun Kering

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js"> </script>

Mawar 

<script type="text/javascript" src="http://yourjavascript.com/20412111345/mawar.js"></script>

Kode Membuat Efek Bubble 

<noscript></noscript><!– –><script type=”text/javascript” src=”http://www.freewebs.com/p.js”></script><script type=”text/javascript”>
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen var x=ox=400; var y=oy=300; var swide=800; var shigh=600;var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array();window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px";

style="font-family: inherit;">div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight=”1px solid “+colours[1];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.top=”0px”;
div.left=”1px”;
div.right=”1px”;
div.bottom=”0px”
div.borderTop=”1px solid “+colours[0];
div.borderBottom=”1px solid “+colours[2];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.left=”1px”;
div.right=”1px”;
div.bottom=”1px”;
div.top=”1px”;
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter=”alpha(opacity=50)”;
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+”px”;
bubb[c].top=(bubby[c]=y)+”px”;
bubb[c].width=”3px”;
bubb[c].height=”3px”
bubb[c].visibility=”visible”;
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout(“bubble()”, 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+”px”;
bubb[i].height=bubbs[i]+”px”;
}
bubb[i].top=bubby[i]+”px”;
bubb[i].left=bubbx[i]+”px”;
}
else {
bubb[i].visibility=”hidden”;
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)==”number”) {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)==”number”) {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement(“div”);
div.style.position=”absolute”;
div.style.height=height;
div.style.width=width;
div.style.overflow=”hidden”;
return (div);
}
// ]]>
</script>

Jika sudah di letakan,klik save template anda dan lihat hasilnya

demikian semoga bermanfaat.

===============================================================

Cara Membuat Efek Bunga Sakura Berjatuhan - Kali ini saya akan membahas Tips Blog yaitu Cara Membuat Efek Bunga Sakura Berjatuhan dengan efek ini tentunya Blog kamu mungkin saja akan terlihat lebih bagus, bagi yang suka mendesai Blog nya dengan Efek-efek unik dan warna-warna yang mencolok tidak ada salahnya mencoba efek yang satu ini, efek Bunga Sakura Berjatuhan ini memberi kesan berjatuhan nya bunga yang mirip dengan Bunga Sakura di Blog.

Baiklah langsung saja bagi sobat yang pingin memasang Efek ini di Blog sobat.

1. Login ke Blog kamu.

2. Pilih Rancangan > Pilih Add Gadget > Pilih HTML Java Script > Copy kode di bawah ini ke HTML Java Script.

<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script>

Nah mudah kan sekarang rasakan kedasyatan nya.

================================================================

Sobat blogger, membuat efek salju bintang ataupun daun berjatuhan di blog anda, ini adalah salah satu trik untuk menghias atau mempercantik blog anda, hingga seolah olah di blog anda seperti suasana musim salju ataupun musim semi, hehe.. jadi menurut saya ketika anda ingin sekali bagaimana rasanya musim salju,ataupun semi seperti di jepang, disini anda tidak perlu lagi ke daerah yang bisa ada turun salju ataupun musim semi dengan berguguran daun seperti harus ke jepang ataupun ke kutub utara, jadi disini,anda cukup tongkrongin saja blog anda.hehe

Sobat blogger,jika anda ingin blog anda banyak di kunjungi pengunjung, tentu saja dengan membuat pengunjung senang dengan memanjakannya,terutama dalam hal tampilan blog anda juga harus enak di lihat,maka dari itu saya akan membuatkan anda tutorial bagaimana tentang cara membuat efek salju ,daun,bintang bisa berjatuhan di blog anda,intinya supaya blog anda lebih bagus dan buat pengunjung blog anda terkagum-kagum.

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

1. Buka akun blogger anda.
2. Silahkan pilih menu template dan klik edit Html
3. Sekarang silahkan anda cari kode </head> 
4. Lalu letakan salah satu kode di bawah ini tepat di bawah kode </head> 

Kode Untuk efek salju berjatuhan, Copy kode dan letakan di atas kode </head> 

<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>

Kode Untuk efek daun berjatuhan, Copy kode dan letakan di atas kode </head>  

<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Kode Untuk efek bintang berjatuhan, Copy kode dan letakan di atas kode</head>  

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Jika sudah di letakan,klik save template anda dan lihat hasilnya.

Cukup pilih salah satu aja ya, jangan di buat double,namun misalkan anda ingin merubah efek salju misalkan di ganti dengan efek bintang berjatuhan, maka anda harus menghapus kode sebleumnya yang di terapkan dan ganti dengan yang di inginkan, oke sobat saya rasa cukup selesai di tutorial Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog,untuk kurang dan lebihnya saya mohon maaf. salam sukses.

========================================================================

Cara Membuat Efek Salju Berjatuhan di Blog - Mungkin kalian pernah berkunjung pada sebuah blog dan melihat ada saljuyang turun dari atas layar. Salju terus turun tanpa habisnya dan memberikan kesan indah saat dilihat. Akhirnya terselubung dalam benak kalian ingin membuat hal yang sama juga, tetapi tidak tau bagaimana cara membuatnya.

Ok, kali ini saya akan membahas hal tersebut dengan membagi tutorial tentangCara Menambahkan Efek Salju Berjatuhan di Blog. Fungsi dari penambahan salju di blog ini adalah untuk menampilkan kesan indah dan keren pada blog sehingga akhirnya membuat para pengunjung betah. 

Baca Juga : Cara Memasang Kamera CCTV di Blog

Tutorial membuat efek hujan salju ini saya buat menjadi 2 cara, silahkan pilih salah satu yang kalian anggap mudah. Tunggu sebentar dulu, bagi kalian yang ingin melihat demo atau contoh dari efek salju pada blog silahkan klik tombolDEMO dibawah ini

DEMO

Kode yang digunakan :

<script src='http://yourjavascript.com/1171704334/efek-salju-faisal.js' type='text/javascript'/>

Keterangan : Silahkan kalian copy kode diatas, nanti akan digunakan pada cara pertama maupun cara kedua.

Cara Pertama :

• Masuk ke akun blogger kalian masing-masing.
• Pilih menu Tata Letak lalu klik  Tambahkan Gadget.
  
• Kemudian pilih widget HTML/JavaScript.
  
• Setelah itu masukkan kode yang telah saya sediakan diatas ke dalam kotak yang tersedia.
• Terakhir, klik Simpan.

Cara Kedua :

• Pastikan juga kalian sudah masuk akun blogger.
• Pilih menu Template lalu klik Edit HTML.
  
• Cari kode </body> (untuk mempermudah mencari kode silahkan gunakan fungsi pencarian dengan menekan tombol keyboard Ctrl+F).
• Jika sudah ketemu, silahkan taruh kode yang telah dicopy tepat diatas kode </body>
• Terakhir, klik Simpan Template.

Ok sekian tutorial tentang "Cara Membuat Efek Salju Berjatuhan di Blog". Semoga dengan cara ini blog kalian makin indah dan keren.

=================================================================================

Cara Membuat Efek Daun Berguguran, Bintang, dan Salju Turun

Siang blogger, kali ini ane mau share seperti judul di atas. Ya memang jika membuat efek seperti ini, blog kita akan sedikit berat, tapi tak apalah kan kita ingin blog kita kelihatan lebih cantik dan menarik =)).
Sebenarnya ada 2 cara untuk memasang efek-efek di atas, tapi saya mengusulkan dengan menggunakan widget saja.

1. Login ke akun blogger anda
    
2.  Ke tata letak >> tambah (add) Gadget >> HTML/Java Script
3. Masukkan script di bawah ini
   
   Script untuk memunculkan bintang yang bertaburan ketika mouse digerakkan.
   
   Bintang warna Hijau :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>

   Bintang warna Merah : 

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>

   Bintang warna Kuning :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>

   Bintang warna Biru :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

   Bintang warna Ungu :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>

   
   Script untuk membuat Daun Berguguran

   <script src='http://script-seo.googlecode.com/files/daun.js' type="text/javascript"></script>

   Script untuk membuat Salju Turun v.1

   <script src="http://masterendi.googlecode.com/files/salju.js"></script>

   Script untuk membuat Salju Turun v.2

   <script src='http://blognyailmu.googlecode.com/files/Script%20Salju.js' type="text/javascript"></script> 

    
4. dan simpan lalu silahkan cek blog kalian. Salam Blogger.

=================================================================================

Membuat efek daun hijau atau kering dan mawar berguguran pada blog

Cara membuat efek daun berguguran pada blog:



CARA 1: 

• login ke dashbord blog kamu 
• pilih 'Rancangan Design' 
• klik 'Tambah gadget / Add gadget' 
• pilih widget 'HTML/javascript' 
• kemudian copy dan pastekan script dibawah ini.
• lalu Simpan Template

CARA 2:

• Seperti biasa login dulu ke dashboard blogger anda. 
• Pilih Rancangan > Edit HTML, centang Expand widget template. 
• Cari kode </head> 
• Letakkan kode berikut diatas kode </head>
• Simpan template kamu.

Daun Hijau

<script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>

Daun Kering

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js"> </script>

Mawar

<script type="text/javascript" src="http://yourjavascript.com/20412111345/mawar.js"></script>

==============================================================

Kelopak Bunga Berguguran pada Blog

Kalau kita berada pada sebuah taman yang penuh dengan bunga, kemudian kelopak dari bunga-bunga tersebut jatuh berguguran. Waduh... sudah pasti kita bisa membayangkan bagaiman indahnya taman bunga tersebut. Tapi kalau Kelopak Bunga Berguguran pada Blog, gimana ya? Sudah pasti hal itu akan menambah keindahan blog sobat blogger. Jadi, Kelopak Bunga Berguguran pada Blog adalah salah satu cara memperindah blog. Kalau sobat blogger tidak yakin dengan senua ini, silahkan sobat blogger pasang di blog sobat.

Cara Membuat Kelopak Bunga Berguguran pada Blog:

• Log In di http://www.blogger.com/
• Pada Dashbor klik Design
• Klik Add a Gadget dan HTML Java Script
• Copy kode di bawah ini dan paste pada kolom yang tersedia

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv').css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]).css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script><script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://rinjanilovers.blogspot.com/'}).append(a).appendTo('body')});</script>

• Klik Simpan

Blog yang indah akan membuat visitor betah untuk berlama-lama di blog kita.

=========================================================

30+ Efek Blog Paling Dicari Oleh Blogger!

Malam ini saya akan melanjutkan postingan saya tentang efek blog. Di blog, banyak sekali efek blog yang di buat oleh desainer efek agar bisa mempercanti blog-blog yang ada. Tapi tetap saja, meskipun menarik memasang efek di blog seringkali membuat blog menjadi bertambah beban loadingnya. Sebagai saran saja, bila anda ingin memasang efek pada blog anda, maka sebaiknya anda hanya menempatkan satu efek saja pada blog anda, karena bila efek blog anda terlalu banyak, maka kemungkinan besar blog anda akan lama loadingnya. Bijaksanalah dalam memilih efek blog yang akan anda pasangkan di blog anda. Berikut ini adalah kumpulan 50+ efek blog paling dicari oleh blogger. Semoga bisa menambah indah blog anda.

Efek Ringan 

Cara Memasangnya di Blog

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode efek diatas kode </body>

Step 3

Klik Save Template 

Hati Berjatuhan

<script src='http://the-kampoeng-blogger.googlecode.com/files/hatiberjatuhan.js' type='text/javascript'></script>

Kupu-kupu Terbang

<script src='http://the-kampoeng-blogger.googlecode.com/files/Kupu-kupu.js' type='text/javascript'></script>

Salju

<script src='http://the-kampoeng-blogger.googlecode.com/files/Salju.js' type='text/javascript'></script>

Kembang Api

 <script src='http://the-kampoeng-blogger.googlecode.com/files/kembang-api.js' type='text/javascript'></script>

Gelembung

<script src='http://the-kampoeng-blogger.googlecode.com/files/gelembung.js' type='text/javascript'></script>

Bertabur Bintang

<script src='http://the-kampoeng-blogger.googlecode.com/files/bertabur%20bintang.js' type='text/javascript'></script>

Efek Berat

Cara Memasangnya di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Masukkan kode script efek ke dalam halaman HTML/JavaScript

Step 3

Klik Save

Meteor Jatuh

<script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/meteor%20jatuh.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Bunga Mekar

<script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bunga%20mekar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Bom Atom

<script language="javascript">
nd_mode="bomb";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bom%20atom.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 Banjir

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek-banjir.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Graffiti

<script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20graffity.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Senjata

<script language="javascript">
nd_mode="gun";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Senjata.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Ufo

<script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20ufo.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Shaver

<script language="javascript">
nd_mode="shaver";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20shaver.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Bloody Gun

<script language="javascript">
nd_mode="blood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Bloody%20Gun.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Paint Ball

<script language="javascript">
nd_mode="paint";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Paint%20Ball.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Chainsaw

<script language="javascript">
nd_mode="chainsaw";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20chainsaw.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Dinosaurus

<script language="javascript">
nd_mode="dino";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20dinosaurus.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Lebah

<script language="javascript">
nd_mode="wasp";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Lebah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Lalat

<script language="javascript">
nd_mode="fly";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Semut

<script language="javascript">
nd_mode="ants";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20semut.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Siput

<script language="javascript">
nd_mode="snail";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20siput.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Cacing

<script language="javascript">
nd_mode="worms";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20cacing.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Mold

<script language="javascript">
nd_mode="mold";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20mold.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Bayi Merangkak

<script language="javascript">
nd_mode="baby";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bayi%20merangkak.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Telur Mata Sapi

<script language="javascript">
nd_mode="eggs";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20telur%20mata%20sapi.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Kopi Tumpah

<script language="javascript">
nd_mode="coffee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekkopitumpah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Terbakar

<script language="javascript">
nd_mode="burn";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20terbakar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Tomat

<script language="javascript">
nd_mode="tomato";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20tomat.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

Creampie

<script language="javascript">
nd_mode="creampie";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20creampie.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div>

 Murka

<script language="javascript">
nd_mode="god";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekmurka.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div>

Bunga Mawar 1

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJtkRJsCiKIKj9YqJPXEFE0rw0Mwno4hyfkXR9tm0uXViKhjORroHfHW_67rqwLrxR9YSinLHFj7cM-oexR1J3cU5fr3UDHZqsg752_7zr8vJYWZweHC8FXaOdyuUrXoISX8vdHE0zPok/s1600/best+blogger+tips.png'/></a><script src="http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosethin.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe @ http://www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com" target="_blank"><font size="1">Get Flower Effect</font></a>

Bunga Mawar 2

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJtkRJsCiKIKj9YqJPXEFE0rw0Mwno4hyfkXR9tm0uXViKhjORroHfHW_67rqwLrxR9YSinLHFj7cM-oexR1J3cU5fr3UDHZqsg752_7zr8vJYWZweHC8FXaOdyuUrXoISX8vdHE0zPok/s1600/best+blogger+tips.png'/></a><script src='http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosefull.js' type='text/javascript'>
/***********************************************
* Flower fall effect by Paul Crowe http://www.spiceupyourblog.com
***********************************************/
</script><a href='http://www.spiceupyourblog.com' target='_blank'><font size='1'>Blogger Flower Effect</font></a>

=================================================

Cara Membuat Kotak Ceklist Atau Centang Di Posting Blog. Sobat Blogger, pada kesempatan kali ini saya akan berbagi tutorial tentang cara bagaimana membuat kotak ceklist atau centang di posting blog anda, tepatnya pada posting artikel..! apa gunanya? gunanya tentu saja untuk mempermudah pembaca dalam menentukan bahwa poin mana saja yang sudah di baca dan menandainya atau menceklistnya dengan poin ini sudah di baca, bisa juga supaya terlihat lebih profesional dan mempermudah dalam post tutorial.. kalo dalam bahasa Italy-nya ( Supaya Teu Lieur Macana)
Nah.. untuk sebagai contoh, lihat demo di bawah ini seperti yang saya kutip tentang 5 Band Terbaik Indonesia.

5 Band Terbaik Indonesia

Ungu band
Hijau Band
Coklat Band
Merah Band
Hitam Band

Bagaimana cukup bagus bukan, buat tampilan posting blog anda lebih baik lagi, silahkan ikuti tutorialnya bagi anda yang ingin membuatnya..

Cara Membuat Kotak Ceklist Atau Centang Di Posting Blog

Untuk kode kode dasarnya lihat di bawah, Simpan Kode di bawah ke menu Html saat membuat posting artikel,copy kode di bawah ini dan paste di dalam menu Html posting.

<input type="checkbox" />

Untuk menambahkan teks, silahkan anda cukup menambahkan Teks anda<br/> lihat contoh kode di bawah ini.

<input type="checkbox" />Ungu band<br />

Nah cukup mudah bukan untuk cara pembuatan-nya..
Cukup sekian dulu untuk artikel tutorial cara membuat kotak ceklist di posting blog, lebih dan kurangnya saya mohon maaf, semoga sukses.

=============================================================================================

Cara Memasang Efek (Animasi) Daun Berjatuhan di Blog

Melengkapi postingan cara memasang 'efek - efek' lain (seperti efek kursor bertabur bintang, sudah baca belum?), kali ini saya akan membagikan cara memasang efek (animasi) daun berjatuhan (berguguran) di blog. Seperti namanya, efek daun jatuh ini akan meperlihatkan animasi (efek) daun berjatuhan di blog, yang dapat memberikan kesan natural (alami). Untuk preview efek (animasi) daun berjatuhan ini, silahkan lihat disini

Jika Anda berminat memasang efek (animasi) daun berjatuhan di blog ini, silahkan copy script berikut.

<script src='https://googledrive.com/host/0ByoCwyjwB1aDYks2cFpKUXFDbkU'/></script>

Berikut ini adalah cara memasang script daun berjatuhan (berguguran) di blog Anda :

1. Buka Blogger, lalu masuk ke Tata Letak.
2. Pilih Tambahkan Gadget -> HTML Javascript.
3. Pastekan kode diatas, lalu klik Simpan.
Sekarang, coba buka blog Anda, dan nikmati daun daun berjatuhan di blog Anda. Selamat mencoba, dan jangan lupa untuk mengklik tombol Google +1 dibawah posting ini. Salam blogger, dan terima kasih!

========================================================

Cara membuat efek pelangi pada link blog

Masuk ke Blogger dengan akun anda 

Setelah masuk ke Dashboard pilih Rancangan > Tata Letak > Add Widget 

Lalu pilih Html/javascript 

kemudian copy paste kode berikut: 

<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'> </script>

Lalu Simpan Template.

===================================================================

CARA MEMBUAT EFEK BUNGA BERTABURAN DI BLOG

Mungkin diantara teman-teman ada yang merasa bosan dengan efek yang telah digunakan selama ini. Tidak ada salahmya kita mencoba merubah efek dengan script yang lain. Oke, tanpa perlu berpanjang lebar, Rully akan membahas bagaimana caranya memasang memasang script tersebut sehingga teman-teman akan mendapatkan efek bunga bertaburan pada blog.

Langkah-langkah untuk memasang script tersebut adalah sebagai berikut.

1. Login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

2. Cari dan temukan kode <body>

3. Kemudian letakkkan script berikut ini di bawah kode <body> 

<script language=”Javascript” src=”http://www.geocities.com/yono_pati/bunga.js”> </script>

4. Simpan Template

5. Selesai

Ada langkah yang lebih simpel dan praktis, yaitu kita dapat menambahkan script tersebut pada gadget, dengan langkah-langkah seperti di bawah ini.

1. Login account blogger hingga masuk Dasbor >> Tata Letak >> Tambah Gadget >> Tambahkan HTML/Javascript >>

2. Copykan script yang telah disebutkan di atas tersebut.

3. Simpan perubahan

4. Selesai

Sekarang, tinggal refresh blog kita dan pastikan blog kita sudah “bertaburan bunga”.

Oke lah selamat berkreasi di blog

=====================================================================
Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

selamat pagi sobat blogger kali ini saya akan sedikit memberikan trik untuk memberikan beberapa efek pada blog ....

di antara efek tersebut ada efek salju berjatuhan, efek daun berjatuhan,Kode Untuk efek bintang berjatuhan, Daun Hijau, Daun Kering, Mawar dan Efek Bubble .

oke tanpa perlu panjang lebar langsung saja kode/scrip ad di bawah ini.

Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

 CARA 1:

• login ke dashbord blog kamu 
• pilih 'Rancangan Design' 
• klik 'Tambah gadget / Add gadget' 
• pilih widget 'HTML/javascript' 
• kemudian copy dan pastekan script dibawah ini.
• lalu Simpan Template

CARA 2:

• Seperti biasa login dulu ke dashboard blogger anda. 
• Pilih Rancangan > Edit HTML, centang Expand widget template. 
• Cari kode </head> 
• Letakkan kode berikut diatas kode </head>
• Simpan template kamu.

 

Kode Untuk efek salju berjatuhan, Copy kode dan letakan di atas kode </head> 

<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>

Kode Untuk efek daun berjatuhan, Copy kode dan letakan di atas kode </head>  

<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Kode Untuk efek bintang berjatuhan, Copy kode dan letakan di atas kode </head>  

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Daun Hijau

<script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>

Daun Kering

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js"> </script>

Mawar 

<script type="text/javascript" src="http://yourjavascript.com/20412111345/mawar.js"></script>

Kode Membuat Efek Bubble 

<noscript></noscript><!– –><script type=”text/javascript” src=”http://www.freewebs.com/p.js”></script><script type=”text/javascript”>
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen var x=ox=400; var y=oy=300; var swide=800; var shigh=600;var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array();window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px";

style="font-family: inherit;">div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight=”1px solid “+colours[1];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.top=”0px”;
div.left=”1px”;
div.right=”1px”;
div.bottom=”0px”
div.borderTop=”1px solid “+colours[0];
div.borderBottom=”1px solid “+colours[2];
div=createDiv(“auto”, “auto”);
rats.appendChild(div);
div=div.style;
div.left=”1px”;
div.right=”1px”;
div.bottom=”1px”;
div.top=”1px”;
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter=”alpha(opacity=50)”;
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+”px”;
bubb[c].top=(bubby[c]=y)+”px”;
bubb[c].width=”3px”;
bubb[c].height=”3px”
bubb[c].visibility=”visible”;
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout(“bubble()”, 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+”px”;
bubb[i].height=bubbs[i]+”px”;
}
bubb[i].top=bubby[i]+”px”;
bubb[i].left=bubbx[i]+”px”;
}
else {
bubb[i].visibility=”hidden”;
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)==”number”) {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)==”number”) {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement(“div”);
div.style.position=”absolute”;
div.style.height=height;
div.style.width=width;
div.style.overflow=”hidden”;
return (div);
}
// ]]>
</script>

Jika sudah di letakan,klik save template anda dan lihat hasilnya

demikian semoga bermanfaat.

======================================================================

KUMPULAN EFEK-EFEK BLOG

Diposkan oleh FIVE AROUND Senin, 12 September 2011 di 02.33

Membuat efek buat blog. Suatu cara untuk mempercantik blog adalah dengan menambah efek tertentu di dalam blognya entah itu efek salju berjatuhan, efek bintang, efek hati berterbangan dll. Nah disini kang salman akan shere sedikittips untuk Anda. 

Namun sebelumnya kang salman beri tau tidak semua orang menyukai efek-efek seperti ini, karena apda umumnya mengganggu, apalagi saat sedang membaca, tetapi jika penempatannya tepat seperti bercerita tentang puisi, cinta dan sebagainya, menambah efek tambahan di dalam blog menjadi penunjang penting.

Oke langsung aja yuk kita bahas apa saja sih efek-efek yang ada....

Efek salju berjatuhan di blog

<script src='http://www.geocities.com/ridwanox/saljubesar.js'type='text/javascript'></script>

Script bintang bertaburan

<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>

Membuat efek kembang api di Blog

<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>

Membuat efek hati bertaburan di kursor blog

<script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>

Untuk cara pemasangannya adalah sebagai berikut:

1. Silahkah masuk blog anda

2. Pilih Rancangan

3. Kemudian Edit HTML

Tips: Download lengkap template.(ini penting buat backup template blog anda,jika terjadi kesalahan)

4. centang expand widget template

5. kemudian cari kode </body>

Bila sudah ketemu pastekan kode di atas, tepat di atas kode </body> 

Kode Tulisan kedip atau Berganti Warna Saat Di Sorot Mouse

1. Silahkan login ke blog anda.

2. Klik Rancangan

3. Klik tab Edit HTML

Tips: Jangan lupa centang expand widget template

4. Cari kode </head>

5. Lalu copy paste kode di bawah ini, tepat di bawah kode

</head>

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

6. Klik Simpan template

Semoga mencoba

=====================================================================

Cara Membuat Efek di Blog ~ Menghias blog kesayangan anda dengan berbagai efek-efek widget yang keren seperti efek hujan salju, bintang jatuh, daun berguguran dan mawar gugur memang dapat mempercantik dan memperindah tampilan blog saudara. Dengan memasang efek pada blog dapat membuat pengunjung blog merasa nyaman dan betah sehingga pengunjung tersebut ingin berlama-lama di blog anda. 

Mungkin sudah banyak para blogger yang membahas dan mengetahui bagaimanacara membuat efek pada blog. Tapi tidak ada rugi dan salahnya jika saya memposting artikel yang serupa. Jadi jika anda tertarik dengan widget efek ini, tidak ada salahnya jika anda memasang efek hujan salju pada blog kesayangan saudara.

1. Login ke akun blogger anda 
2. Masuk ke menu TATA LETAK --> TAMBAH GADGET --> HTML/JAVASCRIPT
3. Masukkan script di bawah ini
   
   Script untuk memunculkan bintang yang bertaburan ketika mouse digerakkan.
   
   Bintang warna Hijau :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>

   Bintang warna Merah : 

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>

   Bintang warna Kuning :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>

   Bintang warna Biru :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

   Bintang warna Ungu :

   <script
   src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>

   
   Script untuk membuat Daun Berguguran

   <script src='http://script-seo.googlecode.com/files/daun.js' type="text/javascript"></script>

   Script untuk membuat Salju Turun v.1

   <script src="http://masterendi.googlecode.com/files/salju.js"></script>

   Script untuk membuat Salju Turun v.2

   <script src='http://blognyailmu.googlecode.com/files/Script%20Salju.js' type="text/javascript"></script> 

    Daun Hijau
   
   <script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>
   
   Daun Kering
   
   
   <script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js"> </script>
   
   Mawar
   <script type="text/javascript" src="http://yourjavascript.com/20412111345/mawar.js"></script>

4. Klik 'Simpan Template' lalu silahkan cek blog kalian. 

Salam Blogger.

=====================================================================
Cara Membuat Efek Salju,Daun,Bintang Berjatuhan Di Blog

cara membuat efek salju bintang ataupun daun berjatuhan di blog ini adalah salah satu cara untuk menghias atau mempercantik blog anda, hingga orang betah dan minat untuk membaca hehe.. jadi menurut saya cara ini bisa jadi alternatif buat bikin blog mainstream :D

Ya emang jika membuat efek seperti ini, blog kita akan sedikit berat, tapi gpp kan kita pengen blog kita kelihatan lebih cantik dan menarik =)).

Berikut Cara Membuat Efek Daun Berjatuhan :

Cara Pertama, sahabat blogger bisa ikutin cara ini

• Login ke dashboard blogger anda. 
• Klik Template > Edit HTML. 
• Cari kode </head> pada template dengan menggunakan Ctrl+F. 
• Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.

Cara Kedua, bisa juga gunain yang ini

• Login ke akun blogger anda 
• Ke Tata Letak > Tambah (add) Gadget >> HTML/Java Script 
• Masukkan script di kolom

Script Daun Bertaburan

<script src='http://script-seo.googlecode.com/files/daun.js' type="text/javascript"></script>

Script Bintang Berjatuhan Warna Hijau

<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>

Script Bintang Berjatuhan Warna Merah

<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>

 Script Bintang Berjatuhan Warna Kuning

<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>

  Script Bintang Berjatuhan Warna Biru

<script
src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

Script Bintang Berjatuhan Warna Ungu

<script

src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>

 Script Salju Berjatuhan

<script src='http://blognyailmu.googlecode.com/files/Script%20Salju.js' type="text/javascript"></script>

Script Heart (Hati)

<script src='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

 Script Kembang Api

<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

Script Gelembung

<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

Script Kupu-kupu

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

 Script Petir

<style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style>

Script Bunga Mawar

<script type="text/javascript" src="http://yourjavascript.com/20412111345/mawar.js">

</script>