Stylish Email Subscription Forms For Blogger

Get your followers stick to your blog with Rss feed subscription forms and today i'am going to post three amazing forms for your blog and site. No doubt this is the coolest set i have ever seen in my blogging life.

How To Add :

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript

• Post any of the script given below

Form Code #1 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNm_2bJkQ2WyCb2LvaewveMbHgYPdX9JY4xr46Pz9DdM5EkR16KkLreyYtLafi-npLnIlVNoISNdhfdjP2RaXlF2sbnCj3DOax-eBxpzc3LpkhcojP7uIOFLN4uPVQ0_pS-l3WnImQ3ZY/s1600/Grey.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Form Code #2 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2FvNzdeFxzd9FvTMjY-sPF5u55qySNRuoTC-HV6q_eN7Hb7zHDpr89U14H_2k1FIWp20ZtMv9alK7ydVQ2eiT0WH0VIG89OFVmuDhIDam3YhlvbbjUu_B1xN_-bMvrlN9EHEwQab-Qk/s1600/Red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Form Code #3 :

<style type="text/css">
#widgetcraft-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PrcgBy84CKypvcx1rEz1CJW5SVSvXewPWiw7kO4x3PgPZ6eU4KbFkZ118TwLNuGJFEfVC_K8oCtHEyoYwxUBn-vrplRo5ZHzK34K4NZvE-HOuIVtMKKteazMzWEZbPGJm2Ja5mN1OqY/s1600/Blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#widgetcraft-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#widgetcraft-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
    outline:0px;
}
form#widgetcraft-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="widgetcraft-emailbox">
    <form id="widgetcraft-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="FeedURL" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"
        />
    </form>
</div>

Final step just replace FeedURL with your feed's url.....for example if your feed address is feeds.feedburner.com/WidgetCraft then WidgetCraft is your feedurl.

Smooth jQuery Multi Level Drop Down Menu To Blogger

I posted this menu when i first created this blog but earlier today i mean just 10minutes ago i accidentally deleted that posts so time to write it back again :

• Go to Blogger Dashboard > Design > Layout.

• Click on add a gadget link just below of Header

• Paste below code and save it.

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery,js"></script><script type="text/javascript" src="http://widcraft.googlecode.com/svn/WC-MLMenu,js">
</script>
<script type="text/javascript">
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>

  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

Save it and now just replace folder names with your own name and # with links.....sorry i deleted that post.....not intentionally :/ 

Breadcrumb Navigation For Blogger

If you wanna be a pro-blogger then you must need a great navigation on your blog. Just like many famous sites and wordpress you can add a navigation on your blogger which is simply cool.

Let Me Explain :

Above your post title it'll look like this : Home >> Name Of A Label >> Post Title

How To Add :

• Go To Blogger > Template > Edit HTML > Mark 'Expand Widgets Template'
• Press CTRL and F on your keyboard and search for this code:

<b:include data='top' name='status-message'/>

• Right below that paste it :

<b:include data='posts' name='breadcrumb'/>

There may be two occurrences of <b:include data='top' name='status-message'> in your template, you should do the same thing if there’s a second one.

• Now search for this code:

<b:includable id='main' var='top'>

• Just above it, paste this code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Now time to add some css....you can add below css or change it with custom css if you know any thing about css.

• Search for ]]></b:skin>

• Just above it post following CSS

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
font-weight:bold;
}

OK almost done....now time for final and most important step

• Save The Template

Now it's done.....if you're facing any problems then please let me know.....Thanks!!

5 Cool Webkit Scroll-Bars

Yesterday i posted an article about Changing Scroll-Bar In Blogger  and today i'll show you 5 cool scroll bar to use in your blog and documents.

Scroll-Bar #1 :

::-webkit-scrollbar { height:12px; width: 12px; background:#646060; } ::-webkit-scrollbar-thumb { background-color: lightgray; }

Scroll-Bar #2 :

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4);
}

Scroll-Bar #3 :

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(0, 0, 0, .2) 50%,
             rgba(0, 0, 0, .2) 75%,
             transparent 75%,
             transparent)
}

Scroll-Bar #4 :

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFF;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: #CCC;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #AAA;
}
::-webkit-scrollbar-thumb:active {
    background: #888;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Scroll-Bar #5 :

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

If you got a cool scroll-bar design then please send it to me.....Thanks!

Changing Scroll-Bar In Blogger

Cool scroll-bars really gives your blogs a profession touch and it still looks cool. So this post is about changing scroll-bar in your blogger.

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin>

• Just above it post CSS3 given below

::-webkit-scrollbar {
height:12px;
width: 12px;
background:#646060;
}
::-webkit-scrollbar-thumb {
background-color: #FFFFFF;
-moz-border-radius: 10px;
border-radius: 10px;
}

• Save Template

Notice : This will only work in Google Chrome.

25 Cool Google Tricks

There are lots of hidden secrets in Google you may not know . Today I'm gonna write about 25 of them. They are damn cool. Here we go:

1.Google Gravity : Don't you hate it when you can't find searched lyrics of a song which you can't remember ? Frustrated ? Get all your frustration on google by throwing all of it's content.

Just Go To Google > Type 'Google Gravity' > Click on 'I'am Feeling Luck  > Smack It Down

2.Google Sphere : Sick with scrolling images ? Now you can revolve them around Google by using this trick.

Just Go To Google > Type 'Google Sphere' > Click on 'I'am Feeling Luck  > Search Some Images

3.Zerg Rush : Do you think Google doesn't need any food? Wohhh you are so wrong, Google is hungry enough to eat your search results . Really you will find Google a bit hungry

Just Go To Google > Type 'Zerg Rush' > Click on 'I'am Feeling Luck  > Kill Some Hungry Beasts

4.Do A Barrel Roll : I can control Google with my words. I'll tell Google to do a barrel roll and he'll surely do that. Come On , I'am not kidding.

Just Go To Google > Type 'Do A Barrel Roll' > Click On Search > See My Control

5.The Answer To Life, The Universe And Everything : Some times I wonder what is life and what is the answer to life , the universe and everything.

Just Go To Google > Type 'the answer to life the universe and everything' > Click On Search > Find The Answer Out

6.Pacman : You remember a video game we played in childhood, eating food with our pacman. Man that was awesome plus you can now play pacman on Google and yea it's awesome.

Just Go To Google > Type 'Pacman' > Click on 'I'am Feeling Luck  > PG

7.Recursion : Google pokes fun at its own "did you mean" suggestions if you search recursion (repetition or returning) by questioning your spelling even though you didn’t make a mistake.

Just Go To Google > Type 'Recursion' > Click On Search > Did You Mean?

8.Kerning : Kerning is the spacing between letters in a word. When you do a search for kerning, Google changes the spaces between letters in the word 'kerning' in all the results. Heehee. You see what they did there?

Just Go To Google > Type 'Kerning' > Click On Search > K e r n i n g

9.Anagram : If you search for 'anagram' (rearranging the letters in a word to make a new word or phrase), Google rearranges the letters to suggest you were really searching for 'nag a ram'.

Just Go To Google > Type 'Anagram' > Click On Search > Nag A Ram

10.Find Chuck Norris : Google won't search for Chuck Norris because it knows you don't find Chuck Norris, he finds you.

Just Go To Google > Type 'Find Chuck Norris' > Click on 'I'am Feeling Luck  > Be-aware

11.Askew/Tilt : My family always wanted me to do something practical but I never did. Wanna see something practical ? Try this.

Just Go To Google > Type 'Askew' Or 'Tilt'> Click On Search > Practical

12.Goglogo : Customize Google logo and create your own little Google with Goglogo or create one for your girlfriend who is lazy enough to create it by herself.

Just Go To Google > Type 'Goglogo' > Click on 'I'am Feeling Luck  > Google

13.Binary : I really hate binary numbers but Google likes it. So he prefer to show binary digits as search query.

Just Go To Google > Type 'Binary'> Click On Search > It Sucks

14.Google Heart : Love is just complicated as maths and you can't solve it but Google can. Also it proves that Google has a heart inside his server.

It's Too Big Just Click Here To Visit

15.Google Rainbow : Girl gonna love this trick. Google Rainbow you may found a golden pot there just maybe.

Just Go To Google > Type 'Google Rainbow' > Click on 'I'am Feeling Luck  > Nyan Nyan Nyan

16.Google Mirror : Once I told Google to see his face in mirror. He is still upset with it. In mirror, Google looks horrible.

Just Go To Google > Type 'Google Mirror' > Click on 'I'am Feeling Luck  > elgooG

17.Annoying Google : In this trick Google will annoy all guys who are in hurry. Just go and type your search query in search box.

Just Go To Google > Type 'Annoying Google' > Click on 'I'am Feeling Luck  > Stop It

18.Google Terminal : Geek's method to access Google via terminal command lines.This is the coolest Google ever for me. It makes me feel like a pro-programmer.

Just Go To Google > Type 'Google Terminal' > Click on 'I'am Feeling Luck  > Like A Boss

19.Epic Google : Epic Google is Google on steroids . Once the page loads, the logo, search bar, “Search” and “I’m Feeling Excessive” buttons, all swell.

Just Go To Google > Type 'Epic Google' > Click on 'I'am Feeling Luck  > Run Run

20.Weenie Google : Weenie Google is the flip side of Epic Google. Once the page loads, logo, search bar, "Search" and "I'm Feeling Inadequate" buttons,will begin to shrink.

Just Go To Google > Type 'Weenie Google' > Click on 'I'am Feeling Luck  > Oops

21.Google MentalPlex : It's amazing. I won't tell you about this one. Just go and check this whole page out you may get surprised.

Just Go To Google > Type 'Google MentalPlex' > Click on 'I'am Feeling Luck  > Epic

22.Google Hacker : Those who are familiar with the so-called language of hackers may love using this Google trick to amuse haxor pals or confound the squares.

Just Go To Google > Type 'Google Hacker' > Click on 'I'am Feeling Luck  > Hack It

23.Google Underwater : One of the best tricks because your search results will float in water with sharks and all stuff.

Just Go To Google > Type 'Google Underwater' > Click on 'I'am Feeling Luck  > Swimming Time

24.Let Me Google That For You : Lazy enough to send big links then LMGTFU is for you..

Just Go To Google > Type 'Let Me Google That For You' > Click on 'I'am Feeling Luck  > Enjoy

25.I Love Google : I Know you love Google but it's not about that. Type what you love and it'll show everything about it.

Just Go To Google > Type 'I Love Google' > Click on 'I'am Feeling Luck  > Enjoy

Colorful jQuery Menu For Blogger

jQuery is totally amazing and today we're going to get another amazing jquery menu for your blogs and sites. First of all just wanna remind you all that you can also use this menu in your html documents and sites.

• Go To Blogger > Layout > Add A Widget > HTML / Javascript

• And paste the following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/Easing-Init.js"></script>
<style type="text/css">
#menu { float: left; position: relative; top: 0; left: 0; overflow: hidden; }
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 38px; width: 85px; top: 4px; left: -100px; }
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
#menu li { float: left; margin: 0 1px 0 0; }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; }
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }
</style>
      <!-- start menu -->
      <div id="menu">
        <ul>
          <li>
            <a href="#">Home </a>
          </li>
          <li>
            <a href="#">Widgets</a>
          </li>
          <li>
            <a href="#">SEO</a>
          </li>
          <li>
            <a href="#">Tutorials</a>
          </li>
          <li>
            <a href="#">CSS3</a>
          </li>
          <li>
            <a href="#">jQuery</a>
          </li>
          <li>
            <a href="#">Blogging</a>
          </li>
          <li>
            <a href="#">RSS</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      <!-- end menu --> 

• Now just replace all # with your links and all Menu item names with your custom names. 

Not Working : If it's not working then follow these steps :

• Go To Blogger > Layout > And remove all other menus except this one.

• Go To Blogger > Template > Edit HTML > And remove all css with #Menu.

Still not working ? Comment so i can help you.....

Feedback Widget For Blogger

This widget will help you to know what your viewers think about your blog and it really gives a pro-look to your blog. Alright here we go :

• First go and create a Feedback form with the help of this post.

• Now after creating form just put 'Form Embed Code' below :

• Just add and if your form doesn't fit in screen size go to layout and edit this widget and change Width and Height of your Form Embed Code

Cool Round CSS3 Badge

As you can see in above pic these round css3 badges are totally awesome and it's too easy to make :

<div id="RC3B">
HD
</div>
<style>
div#RC3B {background:black;
height:60px;
width:60px;
-moz-border-radius:64px;
-webkit-border-radius:64px;
padding:32px;
text-align:center;
color:white;background:#f656ac;
border:4px solid white;-webkit-box-shadow: 0 0 1px rgb(0,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0);
box-shadow: 0 0 1px rgb(255,0,0);font-size:50px; font-weight:bold;text-shadow: 0px 2px 2px #1F1F1F;
-webkit-transform: rotate(-19deg);
-moz-transform: scale(0) rotate(-19deg);
-ms-transform: scale(0) rotate(-19deg);
transform: scale(0) rotate(-19deg);
rotate(-19deg);
-ms-transform: scale(0) rotate(-19deg);
transform: scale(0) rotate(-19deg);
</style>

Now just replace HD with your text and paste it on your site or blog.

URL Encoder