Choosing A Perfect Name For Your Blog

Choosing a perfect name for your blog can be one of the most hardest and important thing. You want a name that portrays whatever your blog is about in a clear and concise manner. You can choose two types of names for your blog, relevant or something outside the box. Below are things to consider when choosing a blog name:

Related To Your Niche:  Make sure your blog's name is related to your blog's niche. It should give your visitors an idea about your blog. It's recommended that you focus on the main topic of your blog.

Easy To Remember: It must be easy for your visitors to remember. Be creative with your name but make it short and easy. Don't choose a ten word name for blog, which would look a bit awful. Stick with easy to remember names. Always try to pick a name with two or three words. Bored Panda is an epic name!!

Search For Available Domain Names:  This point is often ignored by people, probably because it's really hard to find a domain name of your choice that has not been registered yet. Always choose .com, .net or .org for your blog. If you're blogging about yourself then .me or .name is also a good choice.

Don't Be A Copycat: Copying a famous website or blog's name is not a great idea. You don't want to copy one of your competitor's blog names, so don't forget to Google a name before choosing it. Picking a famous website's name is also not good for your reputation. People will look your blog as a copy, even if it's not. Make sure it’s a name that will not get confused with other products, or services for that matter.

That's all for this time. These are just some few tips from me. In additional, asking your family and friends is also a great idea.

Rest In Peace ~ William "Paul Bearer" Moody (April 10, 1954 – March 5, 2013) ~ Greatest Pro-Wrestling Manager ~ Reason behind The Undertaker's success.... Miss yea Uncle Paul :'(

Hiding Links Inside Blogger Comments

Good News!!! The percentage on SPAM has not increased since the last year. Great, you know how high was the percentage last year? 100%!!!

Spam everywhere on your blog comments? Well, it's hard to find and delete every single spam comment from your blog. Even in Blogger, spammers will always target your blog's comment form to spread spam. Blogger's inbuilt spam filter will stop almost every possible spam comments but this will not solve the problem.

Last year, I shared a nice way to reduce email spam. Prayag Verma came up with a simple jQuery powered hack that hides any clickable link and just displays its text.

Code:

<script src='https://widcraft.googlecode.com/svn/jquery.js'/>
<script> 

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Add it just before the </body> tag in the Edit HTML. If you want to completely remove the links from the comments , then use this code instead:

<script src='https://widcraft.googlecode.com/svn/jquery.js'/>
<script> 

$('.comment-content a[rel$=nofollow]').hide());

</script>

This works for the Threaded Comments in Blogger, incase you want to make it work for the old Comments in Blogger , then the code is as follows:

<script src='https://widcraft.googlecode.com/svn/jquery.js'/>
<script> 

$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Hope this will reduce some spam from your comments. Don't forget to leave your comments...

3D Flipping Menu For Blogger

Here is a pure css based menu with 3d flip concept. Menu items will flip on mouse hover. Menu is inspired from bunch of flipping menus, and is created by David Walsh. Seriously, David is one of my favorite web developers.

You can download or check a demo of this menu at this link. The HTML structure consists of a list with links. The animation centers around transitions and transforms.  The actual A element wont move -- the parent SPAN element will.

Adding This Menu To Blogger:

Finally, it's time for me to begin the tutorial, which is not much tricky. We're going to add this menu to blogger in two steps. Time for the first one:

• Go To Blogger > Template > Edit HTML > Click on "Proceed"

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

• Post following css just above ]]></b:skin>:

        /* 3d flipping menu by BWidgets.com */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            -ms-transition: all .3s ease-out;
            -o-transition: all .3s ease-out;
            transition: all .3s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

• Save your template.

All done with first step....Now it's time for part - adding our html mark-up.

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

• Paste following mark-up:

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Demos
<span class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span>
</a></li>
<li><a href="#" class="three-d">
Deals
<span class="three-d-box"><span class="front">Deals</span><span class="back">Deals</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
</ul>

• Save widget....All done!!!!

Customization:

Replace all # with your custom links. You can add another option on menu by adding following code above </ul> tag:

<span class="three-d-box"><span class="front">Title</span><span class="back">Title</span></span>

Having troubles? Don't forget to leave a comment....

Top 5 Ways To Promote Your Blog

As of 16 February 2011, there were 156,000,000 blogs on the internet. One new blog is created every second and millions of active. Until 2009 blogs were usually the work of a single individual, occasionally of a small group, and often covered a single subject.

It's 2013 - blogs are now widely used by huge groups and companies to promote their work. As the blogosphere grows, it gets much harder for bloggers to grow their readership. Below are five easy and free tips to promote your blog:

1.Use Social Media: Take advantage of social media sites, i.e. Facebook, Twitter, Google +, and more, to promote your blog. If you're short on time, you can also automatic publish blog feeds to social media using dlvr.it. As of February, Facebook has 1.06 billion monthly active users and 680 million mobile users.

Share your blog on social networking sites such as Facebook and Twitter. Also, don't forget to create your blog's brand page on social networking sites.

2.Promote With Videos And Images: You could create a mini video or some images for your new blog post. Just let people know about your blog and content. Then take your media and upload it to image or video sharing sites, such as YouTube, Flickr, Facebook or Twitter. Don't forget to leave a link to your content in description.

3.Use Social Sharing Widgets: Make use of social media sharing widgets on your blog, which will allow your visitor to share your content on their favorite social media sites. It takes less than one second for your visitor to share your blog with sharing widgets.

Social sharing grows your site's referral traffic by enabling users to share content and activities with their friends or group on social media sites. If your website visitors like your content and want to share it, why don't we help them?

4.Guest Posting: Guest posting is the most effective and safe link building method available today, which helps you to boost your ranking and helps in building relationships with the clients.

Write guest posts for other blogs to promote your blog. You'll also get a backlink to your blog in your guest post. Also, if you're interested then you can write a guest posts for BWidgets by clicking here.

5.Submit Your Blog To Blog Directories And Bookmarking Services: Promote your blog is by submitting your blog to blog directories, RSS directories, bookmarking sites and more. Create a Pinterest board around your blog’s niche and pin an image from your posts.

You can get maximum views from bookmaking sites, such as Digg, StumbleUpon, or Reddit. Also, submit your blog's sitemap to Google and other search engines.

That's all for this time. Now it's time for your to work on all five tips. Happy Blogging...

10 Stylish CSS Blockquotes For Blogger

Blockquote element defines "a section [within a document] that is quoted from another source". Earlier today, I spent several hours to find and create these 10 stylish blockquotes. Some are created by me and rest are from bunch of sites. Demo and download of this project is available at this link.

How To Add Blockquote Styling On Your Blog:

Before I post styling, you should know how to replace these stylish blockquotes with your template's default one.

Go To Blogger > Template > Edit HTML > Search for following code:

.post blockquote

 or

.post-body blockquote

Now replace whole CSS with our custom styles, you can find them in next heading. Here is an example of your template's default blockquote:

.post blockquote {
 Some CSS HERE
}

10 Stylish Blockquotes:

Below are our 10 CSS blockquotes examples and their code, which is quoted in it:

.post blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid lightblue;
}

---

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

---

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}

---

.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

---

.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}

---

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}

---

.post blockquote {
background-color: white; color: #845424;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jnDnBoyZDiWmuYBXmkI2_KKm57rxsFD7H1NRVivHFhIw30uuj9gkzvht_ZJIzKNcX1CXw5RrrcqrE8YzePhkLKswF6UnhP9aJKjBgqFjyIHi-1A90LAHlpbWAsP4kQNqwbFLKMQo-do/s1600/Orange.gif);
background-position: 0% 10px;
background-repeat: no-repeat repeat;
border-width: 2px;
margin: 0px 20px;
min-height: 30px;
padding: 20px 20px 10px 45px;
vertical-align: baseline;
}

---

.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI_W6dLh-v_qgQPO2Xx_hhesEVf6mSv8FvTKJMEOWZEwTYjtddxuDlljJWzdoQmZAnNeYKpOx-WYMhLH8_UujrTdXldh8lnX9S4SzAmYCcYyX3fnldQhG3jKxk5xPkNFjRWBZfZf1Bfzg/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

---

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZ0tc4O01L8FHeBD7XO5CSG1-FIUgh9SCrszkweGWKCCkKy0B4ZIGsZysn0N9UhoU1A-Nl02_kWS6hS2zHntob85sPFBuBW-WOyGNpv8qPjEGCIbg8kyLhkeDzCZ6xLZxXLhGJYP8eR4/s1600/blockquote.png) no-repeat scroll 0px 0px transparent;
border: medium none;
margin: 5px 5px 50px;
padding: 25px 30px 5px 70px;
color: rgb(153, 153, 153);
font-style: italic;
}

---

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eAY10jiNGHiJ542LdD3eCpfZQdyVCWYyDcfKBNyhSWj5LxaHcOB0F3H4qP7mk785JV97m7Io0gwlKgWL_P0QdrvUYaYzAXYqdrboRYzZwkEhLYLdTXijb5x1AzBuTUQX5OFO3MxGI74/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-famliy:georgia,sarif;
font-size:13px;
}

New Floating Social Sharing Widget For Blogger

Earlier this year, I shared an awesome jQuery floating social sharing widget for Blogger. Now, it's time to share another one, which is from Making Different. It'll really approach your visitors to like, tweet and +1 your blog posts.

Also, it'll appear when your reader will reach your blog post's footer, which will allow him to share this post after reading it.

As of writing, I'am also using this widget on BWidgets. Hopefully, I'll also add this widget to my other blogs, which will help me to gain more social media attention.

Adding This Widget:

Adding this widget is so simple but a bit lengthy. We'll add this widget on our blog in four simple steps. First one is below:

• Go To Blogger > Template > Edit HTML > Click on "Proceed" > Mark the "Expand Template Widgets" option:

Adding jQuery Script:

If your blog already have a jQuery script, then you can skip this step. Now, after following first step, we have to add jQuery script on our template:

• Search and add below snippet code before </head> tag:

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

Adding Trigger:

This step will work as our widget trigger. Make sure you that "Expand Template Widgets" option is marked:

• Search following code in your template:

<data:post.body/>

• Immediately below it, add the following snippet.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

All Done....Final part time...

Adding Social Sharing Widget:

Finally, it's time for our final step. After this, you can check your blog to see this awesome widget.

• Find and add the below snippet code before </body> tag:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://widcraft.googlecode.com/svn/FloatingSocialSharingWidget.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>          
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

Save your template....It's done :)

Still Not Working?

Widget still not working?? Then just blame it on BIEBER!!! Just kidding,

So, if your template has more than one <data:post.body/> tag then try the last one. Don't forget to leave a comment.....

Customizing Facebook Like Box Widget

The Like Box is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. Almost every blogger is using bunch of Facebook plugins on their blog, which is the easiest way to attract new fans to your Facebook page.

Don't you just hate that default Facebook like box design, which really sucks with that header and footer. Do you want to remove it? Yupp, Digital Inspiration (Oppa Labnol Style! ) has found an amazing way to customize your simple like boxes with some CSS touch.

So, I found two amazing customized Facebook like boxes from Digital Inspiration, which are really great. Below is an image of default Facebook like box, which is so common.

Default Facebook Like Box:

Now, as you can see in above image, which is an image of default Facebook like box, it really sucks. I guess, it's only for blue and plain sites. However, you can generate your page's like box widget at this link. You'll find millions of like boxes around the internet.

Custom Facebook Like Box Style #1:

Finally, we got rid of that ugly header and footer. Also, you can check a pic of mine in above widget, which is located at first block. Me and Eminem (Photoshop Rocks!!!). Anyways, copy the code below and paste it anywhere inside your blog or website:

<style type="text/css">
 .facebookOuter {
    background-color:#F4F4F4;
    width:250px;
    padding:10px 0 10px 10px;
    height:250px;
    border:1px solid #CCCCCC;
  }
 .facebookInner {
    height:250px;
    overflow:hidden;
  }
</style>

<div class="facebookOuter">
 <div class="facebookInner">
  <div class="fb-like-box"
      data-width="245" data-height="290"
      data-href="http://www.facebook.com/bwidgetz"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>         
 </div>
</div>
          
<div id="fb-root"></div>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

 Replace bwidgetz with your Facebook page's username.

Custom Facebook Like Box Style #2:

This one is even more better. As you can see in above image, this widget is customized very well with some beautiful CSS. Also, you can again see an image of mine with Eminem :p

Finally, it's time to share code of this beautiful like box. Copy the code below and paste it anywhere inside your blog or website:

<style>
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
</style>

<div class="facebookOuter" style="float:left;">
<div class="facebookInner">
  <div class="fb-like-box"
      data-width="300" data-height="179"
      data-href="http://www.facebook.com/bwidgetz"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>
 </div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Replace bwidgetz with your Facebook page's username.

More Customization:

The default background color of both Facebook Like boxes is #F4F4F4 but you can use any other web color. Also, if you want to have a more wider or taller Like box for your website, you can need to change the width and height values. All credits on this amazing work goes to Digital Inspiration.

Also, I used Purple Purse fonts on images for this article. Don't forget to leave your comments...

3D Subscription Box Widget For Blogger

I created this subscription widget using CSS Facebook login form, which is available to preview or download here. It look's great and sleek. You can also use this widget on your wordpress blog or on a static HTML page.

It's coded with pure CSS, no images were harmed during creation process. Don't remove credits, and you're free to use or share this widget.

Add This Widget To Blogger:

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

• Paste following code:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
 <h1>Subscribe To Us</h1>
 <input type="hidden" value="YOURFEEDID" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit">
 <p class="login-help"><a href="http://www.bwidgets.com?src=fbform" rel="nofollow">Powered By: BWidgets</a></p>
</form>

<style>
::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:-moz-placeholder {
  color: #bcc0c8 !important;
}

::-webkit-input-placeholder {
  color: #bcc0c8;
}

:-ms-input-placeholder {
  color: #bcc0c8 !important;
}

.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}

.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.login {
  padding: 18px 20px;
  width: 200px;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}

.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}

.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>

Customizations:

In above code replace YOURFEEDID with your FeedBurner feed id. Also, you can change width of this widget by changing width: 200px; with your preferred width.

Don't forget to leave your comments.....

GoDaddy Promo Codes : .COM Domain For 2.95$ (Rs. 158.60)

GoDaddy is back with a superb discount on .COM domains. Get a .COM for just $2.95 (Rs 158.60) w/InstantPage Website. So don't waste your time and score a .COM. You can get a .COM For Rs 158.60 by clicking here.

Why Choose GoDaddy? :

Go Daddy offers everything you need to make a name for yourself on the Web, from domain names and website builders to complete eCommerce solutions. GoDaddy earned their place as the world's #1 ICANN-accredited domain registrar by delivering world-class products at competitive prices and supporting them with industry-best service, delivered 24/7/365. GoDaddy is proud to serve our customers from locations around the world, including Arizona, Iowa, California, Colorado, Washington, D.C., India, Singapore, and The Netherlands.

So go and get a .COM for $2.95 only by clicking here.

Earn More With InfoLinks Affiliate Program

In the past, I posted an article on "Monetizing Your Blog With InfoLinks." Today, we are going to discuss about InfoLinks Affiliate Program, which is a good way to earn more revenue with your blog.

InfoLinks has been running an affiliate program from long, but they never promoted that on their site. Many publishers don't know that there is a InfoLinks affiliate program on InfoLinks’s website.

How To Join InfoLinks Affiliate Program?

To become an InfoLinks affiliate, you have to be an active publisher and have their ad code running on your website. Then you can join their affiliate program by contacting them. They will reply you with information about the program and your affiliate link.

For each publisher who joins the InfoLinks network by clicking your personal referral link, you will be entitled to a one-time referral fee of up to $1,000 per new publisher, as follows

• Small Publisher: $25 (up to 10,000 average net InfoLinks page impressions per day)
• Medium Publisher: $100 (up to 100,000 average net InfoLinks page impressions per day)
• Large Publisher: $1,000 (over 100,000 average net InfoLinks page impressions per day)

InfoLinks Affiliate Program Rules:

These 3 rules are needed to be followed by any publisher:

Publisher’s traffic must have at least 30% from the US. If the publisher has less than 30% of traffic from the US then affiliation fee will be 30% of the sums described above.

The new publisher must be actually new (and not in previous contact with Infolinks or related to any of the Infolinks publishers).

The referral member should remain as a fully active Infolinks publisher with an average of at least 300 daily net impressions for a minimal consecutive period of three months.

How To Track InfoLinks Affiliate Earning:

Good question, I wrote an email to InfoLinks about this, here is their response:

Unfortunately, there is currently no option to view affiliate statistics. However, the earnings made from the affiliate program are added to your total earnings at the end of each month which you can view in the "Payment History" section under the Account tab, in your InfoLinks account.

Join InfoLinks:

Not an InfoLinks publisher? Join InfoLinks with my affiliate link by clicking here. Don't forget to leave your comments...

AJAX Navigation Menu For Blogger

Earlier this month, I posted an article on AJAX page loading effect for Blogger, which was so far the best AJAX trick for a Blogger blog.

AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. AJAX was made popular in 2005 by Google, with Google Suggest.

So, today I'am sharing a very nice Mashable style AJAX drop down menu for Blogger, which is created by W2B. The menu is works just like normal drop-down menu when javascript is disabled, And it will turns to AJAX powered drop-down menu when javascript is enabled.

Add This Menu To Blogger:

• Go To Blogger > Template > Edit HTML > Click on "Proceed."

• Search for ]]></b:skin> and post following css just above it:

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{text-decoration:none;margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAwncprkWmz_NVH6_V7vSerIPXdFxbOvmi9NznbaqL-YseeM-LMIo-irZIMdJ8Fj5LYB2v0GbORQxfIEjgHNpcTuyQ2Q1QgLD7jJcqELgqvEF43K1tVmYoBKST7ZRNpZ3m_xUIGAglAE/s1600/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

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

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

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/AJAXBloggerMenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#w2bajaxmenu').ajaxBloggerMenu({
        numPosts : 4, // Number of Posts to show
        defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFeTajLrpW3Ob3OROSkVTJHcqjYWgEQYiB7xij6-xhs-MlLu4luvA8RGzk2ZUHD_jhY0AaCJ5oPUTCHy4fj7rUwE2Y3yIyczyOFnNJwfdOEDTloXopSafrvBATwoIgLl6cLhTOi0iMN8/s1600/bigthumbnail.png' // Default thumbnail Image
    });
});
</script>

• Save your template....Time for the final and most complicated step, so pay some attention to this.

The AJAX Menu accepts three types of urls. You must use this urls only in the menu. They are Label, Search Query and Label w/ Search Query.

• Label URL: http://yourblogdomain.blogspot.com/search/label/LABELNAME
• Search Query: http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
• Label w/ Search Query: http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

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

• Post following code:

<ul id="w2bajaxmenu" class="w2bmenu">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Example 1</a>
        <ul>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Example 2</a>
        <ul>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
        </ul>
    </li>
    <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

That's IT....Also, don't forget to change your blog's url in above code....

Twitter Cards For Blogger

Twitter Cards show more detail about your posts to give readers a little preview of what they'll see when they click your link. And, the cards work when anyone Tweets a link to your post.

Adding META tags to your blog to allow links to your site to be more informational when tweeted.  Implementing Twitter Card META tags on your site takes five minutes.

In this tutorial I'm going to focus on making a summary card. The other two card types — photo and player — are not included in this tutorial, but you can learn more about them from the official Twitter Cards documentation.

Twitter Card META Tags:

Before starting this tutorial, I wanna discuss about Twitter Card META tags. You can easily setup your blog's Twitter Card by adding several META tags to your blog. As I mentioned above, in this tutorial I'am only going to focus on summary card, which is most important for your blog.

META tags you would use in all card cases include:

• twitter:card - The type of card to be created: summary, photo, or video.
• twitter:url - The URL that should be used for the card.  This will likely be the same URL as the page's canonical link.
• twitter:title - The title as it should display in the Twitter Card.
• twitter:description -  A 200 character summary of the content at the given URL.
• twitter:image - A representative image URL for the content.  In many cases, simply providing your logo's URL will be just fine.
• twitter:site - The Twitter username used by the given site including the '@'
  twitter:creator - The Twitter username of the individual author of the content

Get Your Blog Posts Ready for Twitter Cards:

Twitter Cards use your post's Search Description as your summary, so you'll want to make sure that you've filled it in on each post.

Adding Twitter Card META Tags To Blogger:

Now, I'll show you how to perfectly add these META tags to your blog's template. Don't forget to backup your template.

• Go To Blogger > Template > Edit HTML > Click on "Proceed"

• Once you've opened up your template, find the </head> tag in your template's markup. Enter this markup directly above the </head> tag:

<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@HardeepAsrani' name='twitter:site'/>
<meta content='@HardeepAsrani' name='twitter:creator'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->

• In above code, replace HardeepAsrani with your Twitter handler. Now save your template.

Test Your Markup:

Now, before last step, we'll first check our site's Twitter Card markup by using Card Preview utility so that you can ensure your META tags are used in a valid fashion.

On the tester page, enter the URL of one of your posts (NOT your home page, Twitter Cards only work on post pages) and click "Preview Card".

Applying for Twitter Card Approval:

Twitter requires that your domain be approved before they will allow Twitter Cards for your site;  this is likely to combat abuses like pornography and sites promoting illegal activity.You can apply for your domain by clicking here.

In application form, put bunch of basic information about your blog or site. Submit your application, And soon your Twitter Card will automatically work.

Don't forget to tweet me your blog's link so I may review your Twitter Card. Also, don't forget to leave your comments...

CSS Lava Lamp Menu For Blogger

Yesterday, I found this excellent CSS menu, which bases on "Lava Lamp Menu" concept. Also, this menu is available for download or demo at this link. In September, we shared a jquey based Lava Lamp menu, which was based on jQuery.

This menu is available in three different styles, you can check a demo at this link. This menu is created by Paulina Hetman from Pepsized. This menu is coded so beautiful, and basic mark-up of all three menus are same.

First two menus are pure CSS based and third menu uses a heart and arrow image, which is adorable (Just kidding :p).

Add This Menu To Blogger:

• Go To Blogger > Template > Edit HTML > Click on "Proceed."

• Search for ]]></b:skin> and post following css just above it:

/* --- for all three examples ----*/

.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 480px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
        float: left;
        padding: 1em 0 2em;
    width: 25%;
        text-decoration: none;
      color: #393939;
      -webkit-transition: .7s;
      -moz-transition: .7s;
      -o-transition: .7s;
      -ms-transition: .7s;
      transition: .7s; }
      .nav a:hover {
        color: #c6342e; }

.effect {
    position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

    .nav a:nth-child(1):hover ~ .effect {
      left: 12.5%; }
    .nav a:nth-child(2):hover ~ .effect {
      left: 37.5%; }
    .nav a:nth-child(3):hover ~ .effect {
      left: 62.5%; }
    .nav a:nth-child(4):hover ~ .effect {
      left: 87.5%; }

/* ----- line example -----*/

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white;
  margin-left:-45px;
}

/* ----- dot example -----*/

.ph-dot-nav:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: #c6342e;
  bottom: 40px; }
.ph-dot-nav a:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 38px;
  left: 50%;
  margin-left: -2px;
  background: #c6342e;
  border-radius: 100%; }
.ph-dot-nav .effect {
  width: 10px;
  height: 10px;
  bottom: 36px;
    margin-left: -5px;
  background: #c6342e;
  border-radius: 100%; }

/* ----- heart example -----*/

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypDTU3dQfrADAzdL1jBL-uasgRdoGOi8eoCaWdzAADif6IQ-eV4TxdQkUrE-xWutf4PC_xhsvK0WJBM2iyhTF9qCc1TisIceohG_um9HLBf8vFFoJGvaXH0_Wv-gKHEBIFreWGSlEncg/s1600/heart.png') no-repeat; }
.ph-heart-nav .effect {
  position: absolute;
  bottom: 26px;
  background-position: 0 0;
  height: 8px;
  width: 62px;
  margin-left:-31px; }

.ph-heart-nav a:before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  background-position: -62px 0;
  height: 20px;
  width: 11px;
  margin-left: -11px; }

.ph-heart-nav a:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  background-position: -73px 0;
  height: 20px;
  width: 11px; }

• Save Template....All done with template editing. Now, it's time to edit you layout.

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

• Paste any of the following code:

First Style:

    <div class="ph-line-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Second Style:

    <div class="ph-dot-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

Third Style:

    <div class="ph-heart-nav nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
        <div class="effect"></div>
    </div>

• Save your widget. Now visit your blog and see the css magic.... :)

Don't forget to leave your valuable comments.....:)

Post Views Counter Widget For Blogger

Finally, MBT found a great way to display post view count on Blogger. We will do this by using Firebase. With Firebase you can now create dynamic and data-driven plugins for blogger without worrying about backend development. Firebase's Free plan gives you 10GB Free bandwidth and 5GB Free storage.

The postviews count wont change when you refresh the blog homepage but it will change only when you visit individual posts. This plugin will display views only once pages are visited. It is not synchronized with your Google analytics stats data, therefore it will only display correct views for the new posts that you publish.

Create Your Firebase Account And Database:

First you need to create a Firebase account to use this widget, which is free at this link. Fill up the easy steps sensibly and then once your account has been activated, you must create your first Firebase database.

• Towards the bottom right side of your account, you will find the following submit box:

• Inside this box input your desire firebase name. This generated the following firebase URL: https://example.firebaseio.com.

Installing Postviews Plugin:

• Go To Blogger > Template > Click Edit HTML > Tick the box "Expand widget Templates"

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

• Just above it paste the following CSS code:

    /*-------- Post Views  ----------*/
    #views-container {
    width: 75px;
    float: right;
    }

    .mbtloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5Wn8iV8T3XKzrW6q_bia_k7TKh0Olhkl8t3snEMxjMLXElRyFILWr8vlzqaQyeMx4CCKXU1yifPts2an9fgbsWvzKelvzfq8AzWREJyE_TMDoipuGqvM5Cnb_Mga2hU4lj93XTxL8BE/s1600/loading.gif') no-repeat left center;
    width: 16px;
    height: 16px;
    }

    .viewscount {
    float: right;
    color: #EE5D06;
    font: bold italic 14px arial;
    }

    .views-text {
    float: left;
    font: bold 12px arial;
    color: #333;
    }

    .views-icon{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_xSfbai8v-mrbnf6zQr3oVzBNQOKsIG4lse6IlGh2HQq2IRcMtIo5Ugigv-WFjlqKtmJyOKImqCVGfFlKBqgeMJtIK5UFwe4Mn9LIiQHkFnmxOB2Cgxe3PyP-1cklSbvqVDoiJmgAGE/s1600/postviews.png') no-repeat left;
    border: 0px;
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 0px 2px;
    }

• Now search for </body> and just above it paste the following JavaScript code:

<!-- Post Views Script by BWidgets -->
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://example.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

• Replace the example with your firebase name. Make sure you replace it correctly. Time for the final step.  Find this code:

<data:post.body/>

• Just above it paste the following HTML,

<!-- Post Views Counter by BWidgets-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

• Hit save and you are all done!

Having Trouble?

If you are finding multi occurrences of <data:post.body/> code then choose the first occurrence. Also, this widget will only display correct views for the new posts that you publish. Thanks to MBT for this amazing script.

Adding Disqus Combination Widget To Blogger

Previously, I shared three Disqus widget, you can check all of them at this link. Finally, It's time to share last widget of Disqus widgets series. This is a Disqus Combination widget, which is a combination of all three previous widgets. Nothing much to explain about this. Let's get started. You can also use below code on your html document or wordpress:

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

<div class="heading blue">
            <h2>Community</h2>
        </div>
        <script type="text/javascript" src="http://wwefansnation.disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=grey&default_tab=recent&excerpt_length=30"></script>
    </div>

• Replace wwefansnation.disqus.com with your site's Disqus ID.
• Replace 5 with the number of items your want to display.
• Replace grey with your preferred color.
• Replace 1 with 0 if you want to display moderator's name on this widget.

Disqus Combination Widget For WordPress:

You can download add Disqus Combination Widget to WordPress with this plugin.

Recent Posts With Scrollbar Widget For Blogger

Finally, we are back with another widget with a generator. I was trying to find this widget for my blog since I started blogging, i never got success in searching this widget. Last night, I created this widget using recent-posts-with-titles-only.js script.

This awesome script is created by blogsolute.com, and modified by madtomatoe.com. With this widget you can show upto recent 25 posts of your blog in a small box. Width of this widget is 100%, which means it automatically adjusts on your blog's sidebar. If you're sharing this post then don't forget to give me a backlink.

Below is our Widget Generator with several fields:

Reasons To Buy A Custom Domain For Your Blog

When you start blogging with Blogger or any other other free blogging platform, you get a free subdomain to kick off your blog. Soon all your visitors get familiar with your free subdomain. But when you finally decide to purchase a custom domain you get confused with several questions in mind. You start thinking whether or not you'll lose your spot in Google, reputation, rankings, and more.

You can buy a custom domain as low as $7-$8 from GoDaddy and BigRock for a full year, which is less than your internet and phone bill. Following reasons will tell you why should you buy a custom domain as soon as possible:

Reputation Among Other Bloggers:

Blogs with a custom domain, e.g. .com, .net, .org, are more respected among other bloggers than blogs with sub domains such as .blogspot.com. Nobody takes .blogspot stuff seriously, just like Twitter accounts with default profile picture.

I'd prefer to visit www.bwidgets.com rather than www.widcraft.blogspot.com. It shows that you are taking your work serious by spending some money on the service that you use and you are not just another monkey with a computer (some of them are awesome).

Easy To Remember And Share:

Blogs with a custom domain are always easy to remember. This is the reason why blogs with subdomain don't get much attention on social media, which is important in blogging. A blog with custom domain gets a good amount of traffic from social media.

Blogs with a custom domain are likely to get more shares on social media then blogs with subdomain. Let's face it, we all prefer to put gmail.com on our address bar rather than mail.google.com.

More Earning With Custom Domain:

Some big advertising sites like BuySellAds do not accept subdomains. Also, direct advertisers prefers to advertise their content on a blog with a custom domain. Believe me, you will get more for the same content with a custom domain. Also, never use GoDaddy affiliates with a free domain :p

You Can Use More Services:

That's right, you can use more services with your custom domain, e.g. Google Apps, bitly Custom Short Links, Custom Emails, and more. That's right, your domain provider will provide you one or two free emails, e.g. admin@yoursite.com. It's great to use your own email for your site. Also, you can create a short link service with your custom domain, like go.bwidgets.com.

Unlimited Subdomains:

You can create unlimited subdomains with your custom domain, such as mail.bwidgets.com. You can host your other blogs with your own custom subdomain, which is way better than using .blogspot.com domain. You can also use your subdomain in another services, such as Google Sites, Newsletters, and more.

Boost Up Your Rankings:

As more and more people notice your blog and bookmark and share it, your ranking on SERPs which is search engine results page will increase. Also, after changing your domain, you'll loose your PageRank only at temporary basis. Once Google robots locate all your redirected links, your rankings will be granted back to you on next PageRank update.

Still here? Just visit GoDaddy or BigRock to buy a custom domain for your blog. Don't forget to leave a comment...