We have been moved to http://www.bloganol.com/

Showing posts with label Menu. Show all posts
Showing posts with label Menu. Show all posts
This widget contains two part.The CSS part and the HTML part.You should copy the CSS part in the head section of your blog and HTML part in the body section of your blog.


CSS Code:
<style type="text/css">
.feed_menu {
font-family: verdana;
font-size: 11px;
font-weight: normal;
color:#000;
}
.feed_menu a {
text-decoration: underline ! important;
color: #3a64c3 ! important;
}
.feed_menu ul {
padding: 0;
margin: 0;
display: block;
}
.feed_menu li {
list-style-type: none;
position: relative;
text-align: left;
padding: 5px;
}
.feed_menu li a{
position: relative;
text-align: left;
padding-left:110px;
display:block;
height:17px;
color: #3a64c3;
font-family: verdana;
font-size: 11px;
font-weight: normal;
}
.feed_menu {
background-color: #fff;
border-top: 1px solid #999;
border-right: 3px solid #999;
border-bottom: 3px solid #999;
border-left: 1px solid #999;
padding:10px;
font-family: verdana;
font-size: 11px;
font-weight: normal;
color:#000;
width:260px;
}
</style>


HTML code:
<div class='feed_menu'>
<b>Subscribe Options</b>
<hr/>
<ul>

<li>
<a href='http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/xml.th.gif) top left no-repeat;'><span>Subscribe to RSS feed</span></a>
</li>

<li>
<a href='http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/yahoo.th.gif) top left no-repeat;'><span>Add to My Yahoo</span></a>
</li>

<li>
<a href='http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/newsgator.th.gif) top left no-repeat;'><span>Subscribe in NewsGator</span></a>
</li>

<li>
<a href='http://feeds.my.aol.com/add.jsp?url=http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/myaol.th.gif) top left no-repeat;'><span>Add to My AOL</span></a>
</li>

<li>
<a href='http://www.bloglines.com/sub/http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/bloglines.th.gif) top left no-repeat;'><span>Subscribe with Bloglines</span></a>
</li>

<li>
<a href='http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/netvibes.th.gif) top left no-repeat;'><span>Add to netvibes</span></a>
</li>


<li>
<a href='http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Bloganol' style='background:url(http://images6.theimagehosting.com/albums/33936/google.th.gif) top left no-repeat;'><span>Add to Google</span></a>
</li>

</ul>
</div>


Read more
Hey friend today i have brought you a  smooth CSS menu which includes a cool Search engine.Click here for demo.

CSS code:


<style type="text/css">

#nav {
    width:900px;
    height:34px;
    background: url(http://img524.imageshack.us/img524/8224/menutn6.png) repeat-x;
    margin:0 auto; padding:0; 
font-family: Arial, Georgia, Sans-serif;
    overflow:hidden;
}

#menu {
 float:left;
 width: 580px;
 height:34px;
}

#menu ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#menu ul li {
 float: left;
}

#menu ul li a {
 display: block;
 text-align: center;
 font-weight: bold;
 font-size: 14px;
 padding: 10px 10px 10px 10px;
 color: #333;
}

#menu ul li a:hover, #menu ul li a.active {
 text-align: center;
 font-weight: bold;
 font-size: 14px;
 background: #ccc;
text-decoration:none
}

#search_box {
 float: right;
 width:200px;
 height:34px;
 
}

#search_box #searchform {
 margin: 0 0;
 padding: 0 0;
 height:34px;
}

#search_box #searchform .search_button {
 margin: 0 0 0 5px;
 padding: 0 0;
 border:0;
 width:28px;
 height:34px;
 background: url(http://img368.imageshack.us/img368/2286/searchwz8.png) no-repeat;
 cursor:pointer;
}

#search_box #searchform #s {
margin-top: 6px;
padding: 0;
vertical-align:top;
} 
</style>

HTML Code:


<div id='nav'>
 <div id='menu'>

  <ul>
   <li><a href='http://bloganol.blogspot.com/' title='Link 1 Title'>Link 1</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 2 Title'>Link 2</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 3 Title'>Link 3</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 4 Title'>Link 4</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 5 Title'>Link 5</a></li>
  </ul>
 </div>

 <div id='search_box'>
  <form action='/search/' id='searchform' method='get'>
  <input id='s' name='s' type='text'/><input class='search_button' id='searchsubmit' type='submit' value=''/></form>
 </div>

</div>

Read more
If you are using Flash Creating software for designing cool Flash menus , Texts , banners and Buttons for your blog then you wasting your valuable time.If you are among them then this post is fully dedicated to  you. Now you can create cool Flash objects without Using any Flash Creating Software through Flashvortex.This is not only Fast but it is also Reliable.This helps you to save your Time and Make your works more Easier.

Flashvortex is a site that helps you create free Flash Objects online without using any Flash Related software but you should need to install adobe Flash player in your Computer.Flashvortex Offers you mainly four Types of Flash objects they are Menus,Text,Buttons and Banners.Besides this they offer you Free flash widgets also.

Using the basic version of Flashvortex is totally free.You dont need to register to Flashvortex if you like to use the basic version.If you like to use the advanced version then you must register to Flashvortex and should pay neraly $20 per year.

You have to follow mainly  steps to create a cool Flash objects .They are.

  1. Goto flashvortex.com .
  2. Choose template and enter Data.
  3. Get the object code.

After you get the code Paste the code into your blog and start Showing Cool Flash Objects in your blog.

Read more
It is very boring to create a dropdown menu by entering the long and boring codes.So i searched for a tool that can create your desired dropdown menu by just entering the title and url . After an hour i found it. i found a page designed by hackosphere that can create a dropdown menu by just entering the title and url. Besides this after you create a dropdown menu you can directly put it in your blog by just clicking a button.

Visit Dropdown Menu Creator Page



Read more
This is the greatest CSS menu you have ever seen . It is originally created by ndesign-studio and modified by bloganol for the easy of the bloggers. In this menu whenever you haver the image the image comes front and becomes bigger.See the Demo Below.

Demo:Hover the image with your mouse pointer.



In the above demo you will see two menu . The top menu is called top dock and Bottom menu is called the Bottom Dock.Now lets start the installation of this dock menu.

First of all goto Blogger EditHtml Page and Insert the Following Code to the Head section of your Template just above ]]></b:skin> Tag.


<script type="text/javascript" src="http://bloganol3.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://bloganol3.googlepages.com/interface.js"></script>
<link href="http://bloganol3.googlepages.com/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>

<style type="text/css">
.dock img { behavior: url(http://bloganol3.googlepages.com/iepngfix.htc) }
</style>
<![endif]–>

Again insert the following Code Just Below ]]></b:skin> Tag of your Template.


<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>
Now the time comes to select Top Duck Menu or Bottom Duck Menu . If you like to use The Top Duck menu then Copy the Following Code and Paste it to Your Blog by adding a new Html Page.

Top Dock Menu

 <div class="dock-container">
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="rss" /><span>Links</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /><span>RSS2</span></a>
</div>

Or If you like to use Bottom Dock menu then Copy the Following Code and Paste it to Your Blog by adding a new Html Page.

Bottom Dock Menu
 <div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Contact</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Portfolio</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><span>Music</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><span>Video</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><span>History</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><span>Calendar</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><span>Links</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="links" /></a>
<a class="dock-item2" href="#"><span>RSS</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><span>RSS2</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /></a>
</div>

Read more
Now the use of CSS Menus has been increased in blogs. People Use vertical or CSS menus in their blog to make the Blog attractive and easy to use.So Bloganol brings you the indent CSS menu. Although the real developer of this Indent CSS menu is dynamicdrive Bloganol has modified it a little therefore bloganol can be also said as the side developer of the modified indent CSS menu .You can also see dyanmic drive demo and Tutorial Page.. Now let's start the installation of this CSS Menu.

Step 1
Copy the following code and Paste it to the head section of your blog Template just before ]]></b:skin> Tag.


/* horizontal Indent CSS menu
------------------------------------------- */
/*Credits: www.dynamicdrive.com */
/*Modified and Promoted by bloganol.blogspot.com */


<style type="text/css">

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(http://i306.photobucket.com/albums/nn241/deineshd/indentbg1.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(http://i306.photobucket.com/albums/nn241/deineshd/indentbg2.gif) center center repeat-x;
}

</style>

Step 2

Now the second step is to Copy the Following Code and paste it to Your Blog.To keep it in your blog Goto blogger Layout -> Add a new Page Element -> Html/Javacript , paste the code and Click save changes.

<div class="indentmenu">
<ul>
<li><a href="http://www.bloganol.blogspot.com/" target="_blank">Bloganol</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/Blogger%20templates" target="_blank">Blogger templates</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20hacks" target="_blank">Blogger hacks</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20tools" target="_blank">Blogger Tools</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blog%20widgets" target="_blank">Blog Widgets</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20tricks" target="_blank">Blogger Tricks</a></li>
</ul>
<br style="clear: left" />
</div>

After you complete the above process your CSS Menu is Ready.
Read more