Cara Menambahkan Efek Teks pada Cursor Mouse

Yang dimaksud Efek Teks pada Cursor adalah ketika Cursor atau mouse kita gerakkan, maka akan muncul sebuah efek yaitu Cursor yang bergerak diikuti oleh deretan teks. Dan teks tersebut terserah kita, mau di beri tulisan apa saja. Cara buatnya mudah, silahkan anda ikuti langkah berikut bila anda berminat :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget


4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







5. Copy dan paste kode script dibawah ini pada gadget tersebut :

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Ganti dengan Teks yang anda suka';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Catatan :

Silahkan ganti tulisan berwarna merah dengan tulisan atau teks yang anda suka.

6. Simpan.

Selamat mencoba dan lihat hasilnya, semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

Baca artikel lain :

Cara buat kotak Pencarian Untuk Web atau Blog

Pada artikel ini, saya akan menjelaskan bagaimana Cara buat kotak Pencarian Untuk Blogger. Kotak Pencarian ini lebih menarik, sebab di lengkapi dengan beberapa tombol share atau tombol berbagi kebeberapa Social networking seperti : Digg, Twitter, Facebook, Stumbleupon, Delicious. Selain itu tesedia tombol berlangganan lewat RSS Feed, Email Feed, Twitter, dan Facebook.
Serangkaian tombol pencarian dan tombol jaringan sosial ini didukung oleh www.addthis.com. Anda bisa langsuing membuatnya di www.addthis.com, atau anda bisa membuat sendiri dengan panduan yang akan saya berikan dibawah ini.

Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css"> .subbox{width:305px;border:0 solid #141414;overflow:hidden} .addthis_toolbox{padding:15px 0 5px 0;text-align:center} .addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0} .addthis_toolbox .custom_images a:hover img{opacity:1} .addthis_toolbox .custom_images a img{opacity:0.85} .rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .rssbox:hover{border:1px solid #92aed1} .rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .rssbox a:hover{color:#7c8a9b;text-decoration:underline} .emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .emailsbox:hover{border:1px solid #92aed1} .emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .emailsbox a:hover{color:#7c8a9b;text-decoration:underline} .twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .twitterbox:hover{border:1px solid #92aed1} .twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .twitterbox a:hover{color:#7c8a9b;text-decoration:underline} .facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .facebookbox:hover{border:1px solid #92aed1} .facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .facebookbox a:hover{color:#7c8a9b;text-decoration:underline} #search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left} #search:hover{border:1px solid #92aed1} #search form{margin:0;padding:0} #search fieldset{margin:0;padding:0;border:none} #search p{margin:0;font-size:85%} #s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline} input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222} </style><br />

8. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Kotak Pencarian pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="subbox"> <div id='search' style='display:inline;'> <form action='/search' id='searchform' method='get'> <input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." /><br /> <input id="searchsubmit" type="submit" value="Search" /><br /> </form> </div> <table> <tr> <td><div class="rssbox"> <a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPLt0RcoCnGnxa7SKcdiqdWExb2p4EUyzLijedFHtu90UxJYswAeAxIO90w1DnDddMZ5LFdkEhk77KDD0dMmEqpGCXWrwFtoqbeK5SKYBkdTscsVE1EmZxlCyL6Hl222uGsKp96mjGsXk/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a><br /> </div> </td> <td><div class="emailsbox"> <a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCLN3SA57F_fQ9__s6ljqVFJmAxU434PrlKrHZ5KEHS_TaGFxsjRKgckjXQRw9c1TvqOidTwtqGSJADHPoeT1u79Ifu-IXEGV_Dge_yE5AZfo6crSOUtGUpP7uH4DGHcbF_f3ErbreZwA/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a><br /> </div> </td> </tr> <tr> <td><div class="twitterbox"> <a href="http://twitter.com/USERNAME-TWITTER" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GADip_Lklyfc1mg6KK-fWWL4l8IZqjpKccrcg0Hdf0iv3bUG6W54YyPSfc7OmcdDOr4wqfDfvvl2OR16astdx6SCEbSBlrOs0F0D_cZuvnU-XIVsF4CZh1Vk2MH5MwnrO2SQrQeGxoHM/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/USERNAME-TWITTER" target="_blank" rel="nofollow">Twitter</a><br /> </div> </td> <td><div class="facebookbox"> <a href="http://www.facebook.com/USERNAME-FACEBOOK" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwfdsPC7oEUQ1fGsdd9h1F2r_tIG0DhmRxtt0kSEChBRJhsmpuJ_LNr0U_mIAmA6_bX6NJcpV_opikp9jB8_gu1gbTvO5cru584A74lRTt4KEKt2Wi9HV4ebOTkfsedIRtr_Wf1uvmT8J/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/USERNAME-FACEBOOK" target="_blank" rel="nofollow">Facebook</a><br /> </div> </td> </tr> </table> <p style="display:none;" align="center"> Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p> <div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4LcMHumgZsMiS-tid9QYJN7AnAfXo62fMWYYgtzPRtWBa_MqnzyHcpuB06gR7GZWxH7aK5G5XXP-6aUH0fZeODFO4smy9G58vCRVDciMeVLhcTQpkh70XIfv1xlqaVFUcOw4kesGYTU8/' width='32'/></a><br /> <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYrxT5HRpRb-eUZ0DNR8S-OtN-__W99oNAQVJr8r-QmohwkrEDsBJFWGYUhTbdEI5cgcnO2M06O186oZEWodg05SNz_HeN77qJFnGy_9xN6voleR8VQM8JxUssLfMngT2htRYRKQP6AE/' width='32'/></a><br /> <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-HVxEj5Or4lEQWUEv0YjXVatsNZXrqBKlVTsdOYEvE9Us1fukFksFIbb1WjgFxdls7aRhQZZDDpTGv4hDDcObgcmOeOgkSkL-fCqOGQC0E2TqwEO11k9cWTIBeh5iB4lxViSrnGPYz8/' width='32'/></a><br /> <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVtVfERkpfRmizV9U5hkOja_vqWNyHnDSBzNIYBqMjYwNMWw_6dR5NmOeJ5DOLHhXdeYR6gCV08ARNE0DntczWOG6dA9vOcozDy7QwosBQnLIIIjvQ0nlnluXxr5K-i2vlFfkEbceibs/' width='32'/></a><br /> <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHUlQ74SlSYpQLpaZvIj8EryiP-Dxh8HEadqqfaD_7sjXLCyUK-YqnV_kZ9yKPOh1aREFPFmCxzfMrYr4Sul6j3PcQvxyIQiPuaQVZOBvfxX3sqwFHH-kN3zR8fu0j2A88XaEFYfCKZ8/' width='32'/></a><br /> <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIBHGAQ1dj9w2zgoSf9f84fXGqXgObOR34ivfgUnOIglNUc4j88R_6zHFL3OIr_5wXD9Tf5UZQF1ej_owRyaVrMfKF_4Uo7kWOHP-iO1kNIeGK3qAgfgaDuNQ-wZ5LKRP3WQdQk8fuh_I/' width='32'/></a><br /> <a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwL9Ol-8hxREq56MMub02yjAsIP83VcmBTzaZjzLPQ7sUbOyNOA5KKwP0K-IlLk7zpcA_H9dSjjLON9paNDdzuhthJB_yqZ7iNNj2yCInhxbCMZONnF4a12x-AlobxRJQKQhO_Py3abb0/' width='32'/></a><br /> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div> </div>

Catatan :
-Ganti tulisan merah dengan FEEDBURNER-ID anda
-Ganti tulisan Biru dengan USERNAME-TWITTER anda
-Ganti tulisan Pink dengan USERNAME-FACEBOOK anda 5. Simpan.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

 

Baca artikel lain :

Cara buat Menu navigasi Drop-Down Horisontal

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.

Baca artikel lain :