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 :

Font Re-Sizer Widget For Blogger

Wondering if your blog's font are big , small or just right ? Just leave it on your visitors because this tool will give your visitors an option yo resize your blog's font as they want.

• Go To Blogger > Template > Edit HTML > Find </head> 

• Just above </head> paste following script :

<script src='http://widcraft.googlecode.com/svn/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){
var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);
new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());
});
  </script>
<style type='text/css'>
  div.slider {
  width: 97%;
  height: 26px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0I_yKmgHnWPUeZQlQvgP9kVgE8LamxXBHTVGEA0mJHXJwMrKLOtRBk1fnogy9y1Ch18VXPUoBF-V0yaWpBdeg_wNxUaldsMvkXRvMrNZN0Md2tUSgXi1_vnypgTro5nhARg6XLkHH8A/s1600/slider-bg.png) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3HZtUZFUhfopVT6AayLIAencoItRlumZkD3v9oWsSUJIzPBUSpWvDqvwU74yLuZWldAQz0-zEt4w0-RUNYFdjXF7TadVPS5CTGi0vv631g1aSabkzvG_tfZdGoYLN-nqPW2glQPk3ms/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

• Now search for : 

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

• Replace this with :

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

•  Save your template....

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

<div id="myElement" class="slider"><div class="knob"></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.widcraft.blogspot.com/" title="Blogger Widgets" target="_blank">Widget Craft</a> |
<a href="http://widcraft.blogspot.com/2012/09/font-re-sizer-widget-for-blogger.html" title="Font Re-Sizer Widget For Blogger" target="_blank">Get Yours ?</a></p>

• Click On 'Save'

That's it........Visit your blog and see it in action

Google Style CSS3 Buttons

We all love Google and all of it's content and buttons are one of it.You can use these buttons on your html documents , blogger , wordpress and all html/css supported services , Let's start with CSS :

• Go To Blogger > Template > Edit HTML > Paste following CSS just above ]]></b:skin> :

.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.button:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}

How To Add :

These buttons are available in two sizes normal and big :

Normal :

<a href="#" class="button">Stand Alone</a>
<a href="#" class="button left">Left</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button right">Right</a>
<a href="#" class="button">Stand Alone</a>

Big :

<a href="#" class="button big">Stand Alone</a>
<a href="#" class="button left big">Left</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button right big">Right</a>
<a href="#" class="button big">Stand Alone</a>

That's it.....