Cara buat menu dropdown horizontal

Menu navigasi berfungsi sangat penting untuk website atau blog. Selain memberikan daya tarik lebih  pada website atau blog. Tapi sangat berguna untuk menavigasi atau memberi petunjuk pada pengunjung untuk memudahkan menelusuri dan melihat seluruh isi yang ada pada website atau blog anda. Ada beberapa bentuk menu navigasi, diantaranya vertikal dan horisontal. Dan keduanya mempunyai fungsi yang sama.
Kali ini saya menampilkan bermacam-macam koleksi menu navigasi Horisontal  yang saya dapat dari Blogger Tips And Tricks. Dan anda bisa membuat dan memiliki menu-menu ini sesuai selera anda. Anda tinggal lihat demonya, baca artikel panduannya, dan coba untuk membuat.

Langsung saja berikut koleksi menu navigasi Drop-Down Horisontal :

1. Advanced CSS Menu

Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/
Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip


2.  Bulletproof CSS Sliding Doors

Demo : http://azadcreative.com/files/Bulletproof.zip
Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


3.  How to Make a CSS Sprite Powered Menu

Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Article : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


4.  CSS Express Drop-Down Menus

Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Article : http://www.projectseven.com/tutorials/navigation/auto_hide/
Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


5.  CSS3-only horizontal drop line tab menu

Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Article : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


6.  Nicer Navigation with CSS Transitions

Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions



7.  Pure CSS Horizontal Menu

Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Article : http://www.devinrolsen.com/pure-css-horizontal-menu/


8.  DropDown CSS Menu

Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Article : http://divitodesign.com/css/how-to-dropdown-css-menu/
Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


9.  Pure CSS Menu With Infinite Sub Menus Tutorial

Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/


10. CSS3 Dropdown Menu

Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/


11. Elegant Drop Menu with CSS Only

Demo : http://aext.net/example/elegant-menu-with-css-only/
Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download : http://www.box.net/shared/paoqo8y1lt


12. CSS dropdown menu without javascripting or hacks

Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129


13. Create Vimeo-like top navigation

Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Article : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


 14. ADxMenu

Demo : http://aplus.rs/adxmenu/examples/htb/
Article : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


15.  A Great CSS Horizontal Drop-Down Menu

Demo : http://sperling.com/examples/menuh/
Article : http://sperling.com/examples/menuh/
Download : http://sperling.com/examples/menuh/menuh.css


16. CSS menus

 Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Article : http://www.howtocreate.co.uk/tutorials/testMenu.html


17. Pure CSS Fish Eye Menu

Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
Article : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


18. A centered menu with gradient and two pointers

Demo : http://www.cssplay.co.uk/menus/two_points.html
Article : http://www.cssplay.co.uk/menus/two_points.html


19. Create an Advanced CSS3 Menu

Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


20. Solid Block Menu

Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


21. Sleek Pointer Menu

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


22. Sleek Pointer Menu 2

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


23. How to Create a CSS Menu Using Image Sprites

Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Article : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


24. CSS Sprite Navigation Tutorial

Demo : http://www.ehousestudio.com/assets/downloads/sprite/
Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download : http://www.ehousestudio.com/assets/downloads/sprite.zip

25. CSS Overlapping Tabs Menu

Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


26. CSS Navigation Menus

Article : http://www.jacorre.com/design/cssnavmenus.htm

27.
CSS3 Chunky Menu

Demo : http://zubeta.com/demo-menu.html
Article : http://zubeta.com/css3-menu-demo.html


28. Creating a glassy non div navigation bar

Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Article : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


29. Centered Tabs with CSS

Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Article : http://24ways.org/2005/centered-tabs-with-css


30. Apple’s Navigation bar using only CSS

Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css


31. Animated horizontal tabs

Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Article : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


32. A Horizontal Button Menu - The Easy Way

Demo : http://www.cssplay.co.uk/menus/listnine.html
Article : http://www.cssplay.co.uk/menus/tutorial.html


Naah.... banyak kan...?
sekarang Selamat Mencoba...
Semoga bermanfaat.

Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Read More

Menghitung kecocokan hubungan dengan javascript kalkulator

                                                 
        Menghitung kecocokan pasangan dengan javascript

Mau cobain coba aja di bawah ini, berapa persen kecocokan km..

Love Calculator
Javascript

+ =

widget from: :Lodaya Karawang

Coba sobat test seberapa cocok kah sobat dengan pasangan sobat.. menurut java script..

Read More

Membuat Teks Melayang Mengikuti Arah Kursor

   Teks melayang ? layangan kali yah bisa terbang...he..he.. udah ah candanya
Oke kali ini saya akan memberikan tutorial tentang bagaimana caranya membuat teks melayang - layang mengikuti arah kursor di blog anda, sebagai contoh lihat screen shoot berikut :

Oke langsung aja ke TKP,
sig'in di blogger, klik tata letak tambah elemen halaman tambah halaman plih html/java script
copy paste kode berikut :

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Yhoga Deviant'.split('').reverse().join('');

var font='Verdana,Arial';
var size=6; // up to seven
var color='#ffff00';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.5;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

Klik simpan templale, beres deh
oh ya ganti nama yhoga deviant dengan nama atau tulisan sobat sendiri dan
untuk merubah warna bisa sobat cari kode berikut ini :

var font='Verdana,Arial';
var size=6; // up to seven
var color='#ffff00';

ukuran dan warna tinggal di atur sendiri, beres kan...

Read More

membuat favicon

Favicon adalah sebuah icon dari situs web atau blog kita yang biasanya terletak di pojok kiri addres bar (kotak pencarian moozilla/opera dll) .
cara membuat favicon tidaklah sulit, yang diperlukan hanyalah membuat file berformat .ico
lalu menguploadnya ke google page creator atau bisa juga ke picasa,
oke kita mulai saja pertama - tama buatlah icon favicon kamu sendiri dengan cara
memakai favicon generator atau gampangnya kamu langsung klik aja gambar di bawah ini

http://tools.dynamicdrive.com/favicon/

atau ini :

ulpoad lah sebuah gambar berukuran kecil berformat gif atau png yang max ukurannya 150 kb untuk lebih memudahkan.

lalu klik generate kemudian downloadlah icon tersebut.
selanjutnya uploadlah icpcob tersebut ke host image seperti yang tadi disebbutkan diatas.
salin alamat url nya.
contohnya saya mempunyai url seperti ini  "http://www.geocities.com/amn_tea/favicon.ico"/>
Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
1. Klik pada Tata Letak.

2 . Klik Edit HTML.

3 . Silahkan cari kode (posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah dhenk).

4. Simpan kode favicon yang tadi persis di atas kode . Contoh :

<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>

5. Klik tombol Simpan Template.
6 Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

By : Yhoga

Read More

how to make your post or contents blog is more expressive

Subang,15 mei 2010
Old great friend hi and young wherever you lie, we meet again in Trik's event and Tips :D.. In this time episode we will try to work through about "How to Makes Postingan / Content Blog Is More Expressive. Fathom a meaning what this?

if at services Blog any other one for example Wordpress, each us typepad this sign :) therefore that emerging is pictured it:) , if is this sign :p there fore that emerging pictured it :p etc.. Nha if such is cannikin will make blog we becomes more it expressive. Unhappily divides we who use to service at Blogger not get that facility. But  peace fella, in Trik and this time Tips we will try to work through how so for us what do use service Blogger can as which be at Wordpress. Its stage is enough is easily, 


1. Log in to go to blogger trus vote for Layout-->> Edit HTML
2. Mark off to hit on answer that really, eh, fathom a meaning on Expand Widget Templates
3. Sought for this code]]> (its position approximately at left positioning middle part)
4. Insert script hereunder a hair's breadth under code]]>

Don't forget to be kept, and tries your  posting by uses that code, Successful goodlucky. if fails to try again, if stills to fail attempt yes once more, if stills to fail again mybe its server again down or it really because you less profit. :D

This following is many standard smile's codes that can be utilized:

:) --> :)
:D.--> :D
:$ --> :$
:( --> :(
:p--> :p
;) --> ;)
:k--> :k
:@ --> :@
:# --> :#
:x--> :x
:o--> :o
:L--> :L
:O--> :O
:r--> :r
:y.--> :y
:t--> :t
:s--> :s
:~ --> :~
:v--> :v
:f--> :f
:d.--> :d
:c--> :c
:z.--> :z

Before adds is its code, shall at space before.
to while that before, icon smile hereafter is still deep observational at laboratory:D
by : yhoga

Read More

Jump Break Vitur Baru Blogger - Readmore Otomatis

Jump Break Vitur Baru Blogger - Readmore Otomatis

Blog Buat Semua | Semakin hari blogger semakin tidak mau kalah bersaing dengan pesaing utamanya yaitu wordpress. Hal ini ditandai dengan semakin diperbaiki vitur-vitur blogger yang semakin memudahkan penggunanya. "Read More" atau "Baca Selengkapnya" isilah kitanya. Adalah suatu fitur yang memungkinkan kita menampilkan beberapa teks/paragraf sebagai cuplikan dari isi keseluruhan artikel blog, intinya adalah ringkasan awal sebuah artikel blog yang kemudian akan ditampilkan seluruhnya jika melakukan klik pada tanda/link yang umumnya bertuliskan"Readmore/Selengkapnya".


Vitur ini sebenarnya sudah ada sejak lama
pada wordpress dan adapun pada blogger baru ada saat ini, jika kembali ke sebelum perkembangannya saat blogger belum memiliki vitur ini kebanyakan para pengguna blog menggunakan triks seperti ini. "Membuat Ringkasan Artikel atau Baca Selengkapnya" dan sekarang vitur ini tidak perlu digunakan lagi karena blogger sudah memilikinya.

Berikut adalah Screenshotnya:

Vitur tersebut terdapat tulisan "Insert Jump Break" dan selamat mencoba.

Read More

google search engine

google search engine now can your make for your needen
if your want to find everyting in the world.

Read More