Stylish CSS3 Menu For Blogger

Another post to show you power of CSS3 . It's a really vintage style menu for blogger and it'll look good in all dark and white blogs specially in header. Just wanna remind you guys again that you can also use this menu in other HTML supported services like Wordpress and all. Here we go :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following CSS :

nav ul
{
        padding: 0;
        margin: 0;
        list-style: none;
}
nav li
{
        float: left;
}
nav a
{
    float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #831608;
    font: bold 14px Arial, Helvetica;
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}
nav a:active
{
    background: #bb413b;
    position: relative;
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}

• Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following code : 

<nav>
        <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Forum</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
        </ul>
</nav>

Customization :

• Now you have to change # with your page links and Home/Categories/About....and all with your custom page title.

Converting Your Blogger Template Into Blank Template

Blogger templates are codded using the *XHTML 1.0 Strict Document Type*. It was developed by world wide web consortium on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template.

So here we're going to show you how to convert your blogger template into a blank template for all your HTML related work or any project you're going to do. All credits of this post goes to MBT.

Installing Template :

• Go To Blogger > Template > Edit HTML > Replace full template code with following code :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////STATIC HTML THEME////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------- */
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}
]]></b:skin>
 
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:400px; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.widcraft.blogspot.com'>Widget Craft </a>&#169; 2012.</p></center>
</div>
  </body>
</html>

• Click On Save.

• Click save and when prompted about the following error:

Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1

• Simply click on Delete widgets and you are all done!

Editing This Template :

• While creating widgets, you will add the JavaScript just below <head> or above </head>
• You will add the CSS code inside the two yellow highlighted sections
• And you will add the widget data or HTML code inside the two green body tags

Adding A Widget :

Now to give you an idea of how easily a blogger template could be designed from scratch simply add the following code just above </body> to make the Post widget function on your Static HTML Theme.

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Save your template and then visit the layout page again. You will be able to see the Post widget and you can now easily edit its formatting options. Go and create a new post and visit your blog to see it working just fine. Congratulations! you have created one of your first blogger widgets. Play this way with some exciting new widgets and find out how creative you could go.

Amazing Slideout Bookmarking Widget For Blogger

Sharing is one of the best ways to promote your content and specially twitter and facebook so all we need is a great sharing tool/widget and here is one which is amazing and really stylish which will surely help you to gain more shares than any other , now just add this widget in your blog by just clicking on Add To Blogger button just below this paragraph :

Get Approved On BuySellAds

BuySellAds is one of the leading publisher companies, which provides really rich quality and easy to load advertisements and you can earn good amount of revenue with it. Only problem with BuySellAds is that it's hard to get approved on it. In this post, I'll will post list of minimum requirements for getting approved.


Minimum Requirements To Getting Approved For BuySellAds :

• Greater than 100K impressions per month (for new sites, if you (or your team) have a history of creating really nice websites they will accept you)
• Your website must be live, finished, and have fresh content.
• Your website must contain custom domain (eg. www.abc.com), they don't accept sub domains (eg. www.abc.blogspot.com)
• No porn, anything illegal, or containing even remotely "questionable" content.
• If you have a ton of untargeted ads on your site already, then they are not going to approve you.
• Getting denied does not mean that they will not approve you at a future date.

Hope this well help you please leave your suggestions and questions in the comment section below.

Creating A jQuery Elastic Menu For Blogger

Second article of day in which i'am going to teach you how to create a jquery elastic menu for blogger and all html docs. Feeling damn sleepy because of not sleeping all night from over 8-9 months and doing blogging and crappy things over the internet all night so i'am going to finish this so quick.

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste following CSS :

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }
/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}
/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

• Now search for </head> and just above it paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
 $('.menuitem').mouseover(function(){ //When mouse over menu item
  gridimage = $(this).find('img'); //Define target as a variable
  gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
 }).mouseout(function(){ //When mouse no longer over menu item
  gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
 });
});
</script>

• Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following HTML :

<div id="menuwrapper">
 <div id="menu">
  <a href="#" class="menuitem"><img src="Image1"></a><!--Template for each menu item-->
  <a href="#" class="menuitem"><img src="Image2"></a>
  <a href="#" class="menuitem"><img src="Image3"></a>
  <a href="#" class="menuitem"><img src="Image4"></a>
  <a href="#" class="menuitem"><img src="Image5"></a>
 </div>
</div>

Now replace # with you links and Image 1/2/3/4/5 with your image url and just like this you can add as many images as you want....if this widget is not working then check if there is any other CSS in your template with same class and delete it. 

Multicolored CSS3 Tooltips

This is going to be my first post about tooltip and i thought that i should share some cool and easy tooltips for your projects and blogs and finally i found these tooltips. It's CSS3 ( A bit of jquery for IE6 ) So here we go :

First Add JavaScript ( For IE6 ) :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>

Now Add CSS3 :

<style>
.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}
.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;                  
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
  border: 0; /* IE6 fix */
}
.tooltip:hover span
{
  visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;      
  border-bottom: 0;
}
.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}
/* Yellow */
.yellow-tooltip span
{
  border-color: #e1ca82;
  background-color: #ffeaa6;                  
}
.yellow-tooltip span:after
{
  border-top-color: #ffeaa6;
}
.yellow-tooltip span:before
{
  border-top-color: #e1ca82;
}
/* Navy */
.navy-tooltip span
{
  color: #fff;
  text-shadow: 0 1px 0 #000;
  border-color: #161a1f;
  background-color: #1e2227;
}
.navy-tooltip span:after
{
  border-top-color: #1e2227;
}
.navy-tooltip span:before
{
  border-top-color: #161a1f;
}
/* Blue */
.blue-tooltip span
{
  border-color: #59add4;
  background-color: #61bde7;
}
.blue-tooltip span:after
{
  border-top-color: #61bde7;
}
.blue-tooltip span:before
{
  border-top-color: #59add4;
}
/* Pink */
.pink-tooltip span
{
  border-color: #ce4378;
  background-color: #ea4c88;
}
.pink-tooltip span:after
{
  border-top-color: #ea4c88;
}
.pink-tooltip span:before
{
  border-top-color: #ce4378;
}
</style>

 Finally HTML Markup :

<a href="#" class="tooltip">Text To Display<span><b>Tooltip Title</b><br>Tooltip Text</span></a>

Now read this carefully there are 5colors of this tooltip and you can change colors by changing class tag below are some examples :

<a href="#" class="tooltip">Gray<span><b>Optional title</b><br>This is a gray CSS3 tooltip.</span></a>

<a href="#" class="tooltip yellow-tooltip">Yellow<span><b>Optional title</b><br>This is a yellow CSS3 tooltip.</span></a>

<a href="#" class="tooltip navy-tooltip">Navy<span><b>Optional title</b><br>This is a navy CSS3 tooltip.</span></a>

<a href="#" class="tooltip blue-tooltip">Blue<span><b>Optional title</b><br>This is a blue CSS3 tooltip.</span></a>

<a href="#" class="tooltip pink-tooltip">Pink<span><b>Optional title</b><br>This is a pink CSS3 tooltip.</span></a>

Sending HTML Emails From Gmail

Gmail is more than just an ordinary email service. It's the most used email service all over internet which provides you lots of services and it's easy to use

Just like other services Rich Text Editor is most advanced mail editor but the fact is that we can't send HTML emails with it but in this post we're going to find a solution of this problem.So the question is how to send HTML emails with Gmail and after doing some research i found that it's not that hard of complicated all you need is HTML knowledge.

For this we just need a WYSIWYG HTML editor just like Blogger provides so you can use Blogger's post editor for this. So now what we have to do is just create our HTML Email in Blogger post editor or any other WYSIWYG HTML editor , you can also use this editor by clicking here.

Now create your full Email in that editor and after creating press CTRL+A to select all content you created on that editor and copy it by pressing CTRL+C and now all we have to do is just go to Gmail and click on Compose Email (In new interfere) and paste all content by pressing CTRL+V and send it to your friends or any one you want.

I know it was easy if you got some basic HTML knowledge.

Fancy Lava Lamp Menu For Blogger

Fancy Lava Lamp menu is one of the most popular and coolest menu i found and it's easy to add them on your blog so without wasting any time let's start :

• Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :

• Just above ]]></b:skin> paste CSS given below :

/*lavalamp fancy menu start*/

.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

.lavalamp ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

.lavalamp ul li {
list-style: none;
float:left;

text-align: center;
}

.lavalamp ul li a {
padding: 0 20px;
text-align: center;
}

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}

/*lavalamp fancy menu End*/

•  Now search for </head> and just above it paste following script :

<script src='http://widcraft.googlecode.com/svn/jquery.min.js' type='text/javascript'></script>
<script src='http://widcraft.googlecode.com/svn/LavalampMenu.js' type='text/javascript'></script>

•  Save template 

Installing script and css is done and now we're going to add menu 

• Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div class="lavalamp">
 <ul>
  <li class="active"><a href="/">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

• Save and we're done...... 

How To Customize :

Replace all # with your links. As you can see in picture on the top this menu comes with 6 different colors now to change color replace <div class="lavalamp"> with below codes (In order of colors as above pic )

Simple : <div class="lavalamp">

Cyan : <div class="lavalamp cyan">

Dark : <div class="lavalamp dark">

Magenta : <div class="lavalamp magenta">

Orange : <div class="lavalamp orange">

Yellow : <div class="lavalamp yellow">

jsBloggerLightbox For Blogger

jsBloggerLightbox is a specially made for blogger and installing this is very simple and it takes only one step. This lightbox automatically identify all images on your blog and show all of them in this lightbox. First we recommend you to disable default lightbox provided my blogger ( Settings > Post And Comments ). Now it's time to install it :

• Go To Blogger > Template > Edit HTML > Search for </head>

• Just above it paste following script :

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript">
 </script>
 <script src="http://widcraft.googlecode.com/svn/jsBloggerLightbox.js" type="text/javascript">
 </script>

That's It...Enjoy and share.....

jQuery Follow Us Social Icons Widget For Blogger

Here is an amazing and sleek jquery widget for your blog to show-off your social links and email. As you can see in above image this widget is very stylish and also a basic widget for every blog.

Generate this widget with our widget generator all you have to do is just put your facebook , twitter usernames and your email address and it's ready to add :