2013 January 13 Archive - EXEIdeas – Let's Your Mind Rock

Many of my friends are asking about this that he want something like this to make them site stylish, Today i think he will be happy and also i am.So with out any loss of time first see the demo then use our simple coding.As we know “That An Image Is Much Better Then Thousand Words.” so put some images on your menu bar to describe him in gentle way.One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages.So now we going to show you how to add stylish Hover HTML-CSS Text Menu With Images On It navigation menu to Blogger/Website Or Other Also. This navigation menu make your blog attractive and stylish blog. This menu perfectly work only on some browser such as Explorer, Chrome, Firefox, and Safari. Here we using simple HTML-CSS only. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) Image On Text.2.) Both Have Same Time Hover Effect On Mouse.3.) Add Unlimited Menu.4.) Simple And Stylish With Easy Instillation.5.) Quick Loading Time.6.) Pure CSS, No JQuery.7.) Can Customize Fully.8.) Short And Simple Code.9.) Easy To Install.10.) SEO Optimized.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To Layout.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Scroll To “HTML-JAVASCRIPT”6.) Click “+” Icon To Add It.7.) Now Copy The Below Code And Paste It To There.8.) Leave The Title Empty.9.) Click Save, Now You Are Done.How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between .3.) Save It, Now You Are Done. #exebasemenu li.exemenu-exemenupic-0000 a { background: url("SIMPLE IMAGE URL") no-repeat top; line-height: 10px; padding-top:50px; text-align: center; }#exebasemenu li.exemenu-exemenupic-0000 a:hover { background: url("ON HOVER IMAGE URL") no-repeat top; }.exemenu li { float:left; position:relative; margin:0; }.exemenu a { display:block; position:relative; }.exemainnav li a { font-family:"Lucida Grande"; text-transform:uppercase; font-size:12px; color:#2d2d2d; text-decoration: none; }.exemainnav li a:hover { color:#f8f19e; } Home About Me My Portfolio My Works Contact Me Customization:1.) Change All Blue Hash With Your Menu Links.2.) Change All Red Text With Your Menu Links Names.3.) Change SIMPLE IMAGE URL With Your Simple Image URL And Change ON HOVER IMAGE URL With Your Hover Image URL.4.) Save And Done.