Advanced CSS Menu For Blogger

I would like to say thanks to web designer wall for this amazing menu.This Navigation menu is really awesome,it is having three buttons and if you want to add more than you can add it with help of Photoshop.So have it in your Blog.

Steps To Add This Amazing Menu

• Go to Dashboard.
• Go to Layout.
• Add a Gadget >> Html/Javascript.
• Paste the below code there.

<style>
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/menu-bg.jpg) no-repeat;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .home {
  width: 144px;
  height: 58px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}​
</style>
<ul id="menu">
  <li><a href="#" class="home">Home <span></span></a></li>
  <li><a href="#" class="about">About <span></span></a></li>
  <li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

• Now, Click on Save.

It's Done.

CSS Styled Text Box

This is cool css styled text box for blogger. This text is for notice,note,etc. You can also use if for displaying script. This box has hover and active text effects. In normal mode it is white in color and in hover mode it turns blue. In active mode it turns to green color. So have it in your blog.

Steps To Add This Text Box

• Go to Dashboard.
• Go to Templates >> Edit html.
• Find for ]]></b:skin> tag.
• Paste the below code there.

.postmsgg23
{
color: black;
background-color: white;
width: 400px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.postmsgg23:hover
{color: white;
background-color: CornflowerBlue ;
}
.postmsgg23:active
{
background-color: darkgreen ;
}

• Now click on Save the Template.
• Write a new post.
• Paste the below code where you want the text box to appear.

<div class="postmsgg23" style="font-family: &quot;Courier New&quot;,Courier,monospace;">Yout Text Here</div>
</div>

• Now, click on Publish.

It's Done.

Add Comment Bubble Next To Post Title

This is another exiting comment tutorials from blog toolz. The concept is clear by the heading. Add number of comments bubble next to post title.This Bubble can be changed i will get to it further. Showing the number og comments really help you to get more comments and commenters. So have it in your blog.

Steps To Add Comment Bubble Next To Post Title

• Login to your Dashboard.
• Go to Templates.
• Edit Html >>Expand Widget Templates.
• Find for ]]></b:skin> tag.
• Paste the below code before it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(Your Bubble Image Link);
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

List Of Bubble Icons

• Now, find for this code.

<h3 class='post-title entry-title'

• Add the below code before it.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

• Now, Save your Template.

It's Done.