BLOGGER TIPS & TRICKS

Tell your Blog to Load Fast with Lazy Load Script

2013-03-27T20:58:00.000-07:00

The most annoying thing in most of the blogs I feel is the loading time. I hate sitting and waiting for all images to load and I can start view properly. It looks like we have only few images to load and icons on our page. But the fact is there are so many images in our template , specially in hacked templates. Sometimes it happens growing our blog also increases the loading time.

You must have read so many articles to reduce loading time of blog . Anyone of them worthy? May be Or you have seen some blogs or sites which use to load their images only when they are required. Sounds intelligent. Isn’t it? Here I am sharing with you the secret for this. A small piece of code can help you here.
The name is Lazy Load Plugin .

This script will load images only which is displayed onto the present screen. Scrolling further will load the other images as well.
Get it now !
Just copy the code below and paste in your header section or find </head> tag in your template and paste above it.

<script charset=’utf-8′ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/><script src=’http://bnote.googlecode.com/files/jquery.lazyload.js’ type=’text/javascript’/>
<script charset=’utf-8′ type=’text/javascript’>
$(function() { $("img").lazyload({placeholder : "http://bnote.googlecode.com/files/grey.gif",threshold : 200});});
</script>

It might take a little to work as programmer are working with it for better performance with all the latest browsers.

How To Increase Blog Loading Speed

2013-03-02T23:57:00.001-08:00

Today I will give you one trick by which you can Increase your blog speed.This trick is very easy you don't need any SEO trick or tips to increase blog page loading speed just paste simple JavaScript in your blog html and enjoy fast loading blog.

Increasing Blog Speed

Go To Blogger Dashboard
Click on Template Tab.
Now click on Edit HTML button
Find (Ctrl + f) </head>
Paste below code above </head> tag

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "http://beautifulbloggerwidgets.googlecode.com/files/grey.gif",threshold : 200});
});
</script>

Now save your template and you are done. Refresh your site to see the result.

MULTICOLOR SOCIAL SHARING WIDGET

2012-12-30T10:04:00.002-08:00

Social media subscription widgets are most important part of any blog or website. In this tutorial I will show in simple steps how to add the social subscription widget to your WordPress or Blogger blog.
This is very attractive because of multicolor. Four different colors for every social network. It include nice hover style. you can link with RSS, Facebook, Twitter and StumbleUpon. Lets look at the tutorial.

Multicolor Social Subscription Widget

Add Multicolor Social Subscription Widget To Blogger Blog

Go to Dashboard > Design > Page Elements.
Click Add A Gadget. In New Window, Select HTML/Javascript .
Copy The Code Given Below and Paste It Inside The Box.
Save The Gadget

Add Multicolor Social Subscription Widget To WordPress Blog

Go to Dashboard > Appearance > Widgets > Available Widgets
Drag Text Widget Into a Sidebar.
Paste In The Code.
Save Widget & Its Done

Code For Multicolor Social Subscription Widget

<style type="text/css">
.blogsdaddy-social-widget {
width: 340px;
margin-top: -10px;
border:0px solid #000000;
}
.blogsdaddy-social-widget ul {
margin: 0;
padding: 0;

}
.blogsdaddy-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.blogsdaddy-social-widget ul li a {
color: #fff;
display:block;
}
.blogsdaddy-social-widget ul li a:hover {
color: #c9c9c9;
}
.blogsdaddy-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.blogsdaddy-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }

.blogsdaddy-social-widget ul li .rss {
background:
url("http://4.bp.blogspot.com/-5BrA-1aX4ps/UNwns0iTmNI/AAAAAAAAlYo/KeQIQ-YZ5VQ/s1600/blogsdaddy-Rss.png")
no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .twitter {
background:
url("http://1.bp.blogspot.com/-06e7KEMC9Rs/UNwnvbnhToI/AAAAAAAAlY8/fuhLsmzUnow/s1600/blogsdaddy-twitter.png")
no-repeat scroll 2px center #59a5d9;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .facebook {
background:
url("http://1.bp.blogspot.com/-nyp7eNLXJ58/UNwntjSOz8I/AAAAAAAAlYs/s6_6a8LQz8A/s1600/blogsdaddy-facebook.png")
no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .stumbleupon {
background:
url("http://3.bp.blogspot.com/-bX-6axJzrWc/UNwnucxI9YI/AAAAAAAAlY0/qq6r6usd6wQ/s1600/blogsdaddy-stumbleupon.png")
no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}
</style>
<div class="blogsdaddy-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/topbloggertrickstk" target='_blank' rel='nofollow'>Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/blogsdaddy"
target='_blank' rel='nofollow'>>Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogsdaddy"
target='_blank' rel='nofollow'>>Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/gaganmasoun"
target='_blank' rel='nofollow'>>Stumble on Stumbleupon</a></li>
</ul>
</div>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email RSS you only need to replace your feedburner ID with your own. Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/YourId with YourId being the ID.

ANGRY BIRD SOCIAL SHARING WIDGET FOR BLOGGER & WORDPRESS

2012-12-30T09:58:00.001-08:00

Social sharing widgets are very useful for blogs, with these widgets bloggers can get huge quality traffic for their blogs. You all are know about "Angry Birds" very well. Today, I'm going to share social sharing widget related to Angry Birds.
You can add this widget to your blog easily. This widget contains 5 different color Angry Birds: G+, Facebook, YouTube, Twitter and RSS feed.

How To Add Angry Birds Social Sharing Widget To Blogger Blog

Go to Dashboard > Design > Page Elements.
Click Add A Gadget. In New Window, Select HTML/Javascript .
Copy The Code Given Below and Paste It Inside The Box.
Save The Gadget

How To Add Angry Birds Social Sharing Widget To WordPress Blog

Go to Dashboard -> Layout -> Widgets -> Available Widgets
Drag Text Widget Into a Sidebar.
Paste In The Code.
Save Widget & Its Done

Code For Angry Birds Social Sharing Widget

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="https://profiles.google.com/118121786688701820900" rel='nofollow' target='_blank'>
<img src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="https://www.facebook.com/pages/topbloggertrickstk/116130148554956" rel='nofollow' target='_blank'>
<img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.youtube.com/YOUR YOUTUBE USERNAME" rel='nofollow' target='_blank'>
<img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/Abhidinvader" rel='nofollow' target='_blank'>
<img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/topbloggertrickstk" rel='nofollow' target='_blank'><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

Remember Note: Replace yellow highlighted URLs with your own social profile links.

ADD SUBSCRIPTION BOX BELOW EVERY POST

2012-12-29T04:10:00.001-08:00

Here I'm presenting RSS subscription box with no images or complex scripts. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!

Add it to Blogger

Go to Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widget Template" box
Search for this,

<data:post.body/>

Just below it paste this code,

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='topbloggertrickstk'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Now make these changes,

Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
Now replace http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace topbloggertrickstk with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk

Save your template and you are all set!

ADD MULTI-COLUMN FOOTER WIDGET

2012-12-29T03:47:00.001-08:00

This new widget is footer widget which can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better.

Add the Multi Column Footer Widget To Blogger-

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,

Go To Blogger > Design > Edit HTML
Backup Your Template
Search for ]]></b:skin>
Just above ]]></b:skin> paste the code below,

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Now search for </body> and paste the following code just above </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

Save your template and you are done!

Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,

You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.

In order to reduce or increase the overall width of the widget simply change width: 960px;

If you wish to decrease the number of widgets to three then simply delete this part of the code,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace lowerbar# with lowerbar5.
After you have added the fifth column then remember to change width: 23%; with width: 17%;
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard.

ADD COOL SLIDESHOW BAR WITH NAVIGATION

2012-12-29T03:17:00.000-08:00

Hey guys, hope you all are fine. In today's tutorial we will get know how to add a cool and awesome looking slideshow bar with navigation feature. Slideshow bar is much useful when we are presenting our most popular post, or the post which we want to highlight to our viewers. It can just also be used to give slideshow of simple pictures which you like. So lets begin with the detailed steps.

How to add the Slideshow to blogger?

The methods as usual are more easy than you can imagine. Follow up,

Go To Blogger > Design
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
<style>
#slider {
    position:relative;
}
#slider img {
        position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/s400/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}
.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/s400/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size:16px;
    padding: 10px 0px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
.clear {
    clear:both;
}
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:89;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
.nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
</style>
<div id="slider">

<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="Description Goes Here" />
<img src="URL Of Image" alt="" title="#htmlcaption" />
</div>
<!—Write Descriptoon With Links In this Part—>
<div id="htmlcaption" class="nivo-html-caption">
Cool na? :) Now Learn How to create one by <a href="http://www.topbloggertricks">Clicking here</a> </div>

<br/>
<br/>

How To Customize the Slider?

Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"
If you wish to add effects to text or use a link then use title="#htmlcaption" instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.
Note: Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial.

How To add More Images?

To add another image simply paste the code below just above </div>

<img src="URL Of Image" alt="" title="Description Goes Here" />

ADD MENU TAB WIDGET TO BLOGGER LIKE WORDPRESS

2012-12-29T03:08:00.001-08:00

This tutorial will teach you how to add multi-tab widget. The best thing about this widget is that you can add as many widgets as you want inside a single Tab which you could not do previously. Beautiful CSS and Jquery effects are added this time to the tab views and I have tried again to make its installation as easy as possible. So do not delay any further and learn how to add a professional looking tabber widget to your free Blogger blogs.

Add this Multi Tabbed Widget To Blogger-

1- Adding the JQuery and JavaScript to your Blogger templates

Go To Blogger > Design > Edit HTML

Backup your template

Search for ]]></b:skin>

Just below it paste the following code –> MBT Menu Tabs JavaScript

Save your template

Done!

2- Adding the CSS

Inside your template search for ]]></b:skin> again
Just above it paste the code below,

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Simply replace #A46F38 with the HexaDecimal Color code of your template so that the tabs may blend perfectly into your template.

3- Adding the HTML

Now Search for <div id='sidebar-wrapper'>
Make sure the widgets box is unchecked.
Just below <div id='sidebar-wrapper'> paste the code below,

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(".MBT-tabs-content-widget-MBT-id").hide();
                $("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
                $(".MBT-tabs-content-widget-MBT-id:first").show();
                $("ul.MBT-tabs-widget-MBT-id li a").click(function() {
                    $("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
                    $(this).addClass("MBT-tabs-current");
                    $(".MBT-tabs-content-widget-MBT-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>

Please Replace Subscribe, Latest Tricks and Search with your Widget Titles that you will be adding.
4. Now Go To Page Elements. You will see something like this,

Start adding your widgets and after you have added all your widgets then simply view your blog to see it in action.

Source-Mybloggertricks

COOL BLOGGER NOTIFICATION BAR

2012-12-29T02:49:00.000-08:00

This tutorial deals with the cool notification bar which works best by grabbing readers attention and helps you to focus readers towards important deals, announcements or any story. It functions on pure JQuery light-weight functions and is compatible with all major browsers including IE9.

Custom, unique and non-commercial plugins are always better then public designs. HelloBar is now too common and used everywhere and you may not like the limited design customizations offers provided by them along with their logo on the plugin. HelloBar also requests URL redirection and you need to register to use it. Scripts are stored at Hellobar server and the browser needs to send a request in order to display it on your blog or site. Really not appropriate if you don't like redirection and attribution links.

Blogger Notification bar requires no registration and provides far better design flexibility. The scripts are less than 6KB in size and fully hosted at your server. You can change its look and theme to any color that may blend your layouts. Every single element is well structured and can easily be configured. A perfect tool to play with.

Installing Notification Bar on blogger

You may follow the easy steps mentioned below in order to add the widget to your blogger blogs. Same procedure will work for any other platform like WordPress.

Go To Blogger > Template
Backup your template
Click Edit HTML
Search for <head>
Paste the following scripts just below it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script language='JavaScript'>
//<![CDATA[
var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,
showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},
_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],
showAfter:0,
keepHidden:true,
duration:300,
closeable:true,
height:40,
borderSize:1,
easing:_0x519b[7]});} );
//]]>
</script>

Next search for ]]></b:skin>

Just above it paste the following styles

#bloggernotificationWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}

#bloggernotification {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
background: none repeat scroll #2E2F2E;
position: relative;
box-shadow:0px 1px 3px #666;
z-index: 9998;
text-decoration: none;
color: #cccccc;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
border-bottom:2px solid #fff;
}
#bloggernotification a{
text-decoration: none;
color:#FFFC00;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}

#bloggernotification a:hover{
text-decoration: underline;
}

#bloggernotificationWrap #closebloggernotification{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat 0 center;
cursor: pointer;
}

#bloggernotificationWrap #closebloggernotification:hover{
background-position: -21px 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification{
background-position: right 50%;
}

#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{
background-position: -42px 50%;
}

#bloggernotificationWrap #openbloggernotification{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
background: #2E2F2E;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:0px 1px 3px #666;
}

#bloggernotificationWrap #openbloggernotification span{
display: block;
width: 21px;
height: 34px;
background: url(http://4.bp.blogspot.com/-vtzv7UVG0ro/UN2vJXK7WII/AAAAAAAAIX8/KqX3rdH4g8Q/s400/light.png) no-repeat right 50%;
}

Make these Design changes if you wish:

To change the background color of the bar simply edit #2E2F2E
To change text color edit #cccccc
To change hyperlink color edit #FFFC00
To change anything else, just post me your query in the comment form below! :)

8. Finally to make the bar appear just add the following code below <body>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>

Write Your Notification Message Here

<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>

<br/><br/>

Save your template and you are all done!

Creating links

To create links inside the notification bar use the following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

You must add the class='link' , which is required by the script.

Source-Mybloggertricks

BEST BLOGGER DIRECTORIES

2012-12-28T09:26:00.003-08:00

Blogger directories are like database of blogs with a much higher page rank and Alexa rating. Some directories are like a social network for bloggers with a pretty large audience . Updates from blogs are shown on daily basis on your personalized profile. This way your blog post appear which other people might visit thus adding some more page views. Blogs are also ranked and if you really have a good blog you will have a higher rank thus increasing the probability of having more page views. Below is the list of the top 20 directories that you must add your blog to.

Top 20 Blogger Directories

1-Blog Catalog

Page Rank:7
Alexa Rating:605
Registration Required: Yes

2-Technorati

Page Rank:8
Alexa Rating:915
Registration Required:Yes

3-Blogs

Page Rank:7
Alexa Rating:1345
Registration Required:No

4-Blog Lines

Page Rank:9
Alexa Rating:2049
Registration Required:Yes

5-Bloggernity

Page Rank:7
Alexa Rating:32097
Registration Required:Yes

6-BlogsRanking

Page Rank:6
Alexa Rating:18650
Registration Required:Yes

7-Piazzo

Page Rank:6
Alexa Rating:26607
Registration Required:No

8-Boing Boing

Page Rank:8
Alexa Rating:1818
Registration Required:Yes

9-RedTram

Page Rank:6
Alexa Rating:6040
Registration Required:No

10-BlogHub

Page Rank:6
Alexa Rating:34191
Registration Required:Yes

11-Blogged

Page Rank:6
Alexa Rating:4550
Registration Required:No

12-BlogVille

Page Rank:5
Alexa Rating:45888
Registration Required:No

13-BlogPulse

Page Rank:6
Alexa Rating:17852
Registration Required:Yes

14-TopBlogArea

Page Rank:5
Alexa Rating:12327
Registration Required:Yes

15-Ontoplist

Page Rank:5
Alexa Rating:19618
Registration Required:Yes

16-Weblogalot

Page Rank:6
Alexa Rating:63704
Registration Required:No

17-Bloggapedia

Page Rank:6
Alexa Rating:27819
Registration Required:No

SEARCH ENGINE OPTIMIZATION

2012-12-28T09:17:00.000-08:00

What is Search Engine Optimization (SEO) ?
SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. SEO thus helps you get traffic from search engines. Thus to get more traffic to your website you need to get your website rank higher which requires search engine optimization.

SEO makes your blog appear in organic search. Blogger does SEO itself but their are further tips that can help you improve your blog rating. Below are some techniques that you should follow to drive more traffic.

Meta Tags

Meta tags give a short description about your post. These Meta tags appear in the search result with your post.

Social Network Page

Social network pages can be important in driving more traffic to the blog. If you don't have a social network page, make it now and also add a social plugin to your blog.

Submit a Sitemap To Google Webmaster

Submitting a sitemap helps to index the pages on your blog. Click on the link to find how to add sitemap.

Rich and Unique Content

The content on your blog must be unique and well presented. Copy pasted material does not help to increase the rank of your blog.

Blogger Directories

Add your blog to blogger directories. One of the top directories is Technorati

Avoid Links on Homepage

You should not post too much links on your home page. For example the archive gadget. Too many links make it unfriendly for search engines.

Alt Tags in Images

Image search can be a efficient way of bringing more traffic. Search engine can not directly know about the images on your blog. For search engines to know the type of images on your blog you need to add a alt tag to every image that provides the description about your image.

Link To Your Blog Posts

You can ask your friends to have links to your blog . So that when ever spider crawls their blog, it will also crawl your link.

ADD FACEBOOK LIKE BUTTON IN BLOG POSTS

2012-12-28T07:12:00.001-08:00

How To Add Facebook Like Button In Blogger Post?

1. Go to your blogger “Template” section.
2. Click “Edit HTML” and then “Proceed”.
3. Tick/check “Expand Widget Templates”.
4. Press Ctrl + F and search this <data:post.body/> tag.
5. Copy the code below and paste after or before <data:post.body/> tag.

Standard Code:

<b:if cond=’data:blog.pageType != "static_page"’>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:35px;’/></b:if>

Box Count Code:

<b:if cond=’data:blog.pageType != "static_page"’>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=65"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:55px; height:65px;’/></b:if>

Button Count Code:

<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:90px; height:21px;’/></b:if>

Customization:

You can change the font style see the following.

font=lucida%2Bgrande
font=segoe%2Bui
font=tahoma
font=trebuchet%2Bms
font=verdana

You can change the color scheme see the following.

colorscheme=light
colorscheme=dark

You can change the heigth and width see the following.

width:90px;
height:21px;

You can change the “Like” to “Recommend” by changing the following.

action=like
action=recommend

You can change “show_faces=false” to display the face.

show_faces=false
show_faces=true

You can remove “Send” button see the following.

send=true
send=false

Note:

If you want to add this below blogger post title search this

<b:if cond=’data:blog.pageType != "static_page"’>

tag and paste the after that tag.

ADD FLOATING WIDGET FOR BLOGGER

2012-12-28T06:56:00.004-08:00

Hey friends hope you all are fine. As we all know floating widget is an awesome idea to make the visitor attention on that. Many of us are aware of the social sharing widget with floating touch, but if you want to add you own material on that floating tab then you will get to know how to make that after this tutorial. This tutorial deal with the Css trick. Now lets begin with the steps.

How To Add Css Code?

Login to your Blogger account.
Go to your blog “Template” section.
Click “Edit HTML” and then “Proceed”.
Press CTRL+F and search this ]]></b:skin> tag.
Copy the css code below and paste it before ]]></b:skin> tag.
Click “Save Template” and done! ready for the next step.

Css Code:

#topbloggertricks {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

How To Add Widget Code?

Now from your blog, go to “Layout” section.
Click “Add A Gadget” and then “HTML/JavaScript”.
Add the widget code below into text area section.
Then save. Remember this don’t put a title into title area.
Visit your blog.

Widget Code:

<div id=”topbloggertricks”>Widget Code Here</div>

Note:

Remove/Replace the “Widget Code Here” with your widget code.

Customization:

You can change “bottom” with “top” , and “left” with “right” , or what ever position you like (vice-versa).

IMPROVE YOUR BLOG LOADING TIME

2012-12-27T05:30:00.000-08:00

Blog with slow loading may affect you site from getting new readers and it can also unfavorably affect your overall Google rankings. If your blog loads very slowly then you must have to think over it , for that you just have to optimize your blog speed on application of which you will also get good traffic. For this, their are a few points you should kept in mind.

Use a free web analyzer to determine where your bottlenecks are.

A couple good sites for this are Pingdom and GTMetrix. These will test your site speed and list out all your elements so you can see which ones are taking the longest to load. From there you can decide how to improve your speed.

Move JavaScript to the bottom of your template.

This doesn't actually make your blog load any faster, but it gives the illusion of it because browsers cannot load any other elements such as images at the same time as a script. So moving them to the bottom allows your other elements to load and render on screen first making the user think your site is faster.
To do this, go to Template > Edit HTML and place your scripts just before the closing </body> tag in your template. Or place your scripts in a widget at the bottom of your footer.

Reduce the amount of posts in your Home Page.

This one is important especially if your posts are image intensive and you don't use Jump Breaks to separate your posts.
Go to Design > Page Elements > Edit your Blog Posts to change the number of posts.

Reduce your image sizes.

The most common ways to do this are to save your images with a lower quality; or crop and scale them down to the exact size you want displayed on your blog with Photoshop instead of scaling them with HTML.
You can also use this handy web tool Yahoo! Smush.it to further optimize your images.

Reduce the amount of gadgets/widgets

Gadgets and widgets offer cool features to enhance your blog but having too many of them can slow your blog down to a crawl. This is true especially if you are using third party widgets. Sometimes these use scripts and code that are hosted on slow servers. Check them in a web analyzer to see if they are holding your site up.

HOW TO ADD SCROLL-BARS TO BLOG POST

2012-12-27T03:45:00.000-08:00

Although many of us are very much aware about the read more button to make the post to virtually shrink but if you want to show the whole post on the same page without increasing the page height then the first thing comes is scroll bars. In this tutorial you will get to know how to place all post under scroll bars automatically.

FOLLOW THE BELOW MENTIONED STEPS:

Log into Blogger account

Go to Template -> Edit HTML and scroll to this code.

Add the portion shown in red:

.post {
height:200px;
overflow:auto;
}

This will give you scroll-bars to every post:-

Scroll-bars within Blog Post:
Sometimes, you may not want to have the scroll-bars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scroll-box, you have to first define a class within the style-sheet.

For example, we can insert in the style-sheet this code to specify the maximum height and width of the scroll-box. Once the text overflows this setting, scroll-bars will automatically appear:-

.scrollbox {
height:100px;
width:400px;
overflow:auto;
}

Save the template. Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode.

Add these tags (shown in red) before and after the part of the text that you want to enclose within the scrollbox.

<div class="scrollbox">TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scroll-box, like this:-

Adjust the size of the scrollbox in the style-sheet accordingly. You can also consider having a HTML text box to enclose certain text.

CONVERT BLOGGER TEMPLATE INTO A BLANK PAGE

2012-12-25T20:53:00.000-08:00

Many of new bloggers are now designing their blog according to their own need and creativity. Which also improves their blog appearance for visitors and simultaneously their blog traffic increases. In this tutorial I'll teach you how to convert your blogger blog completely into a blank page. After which you can customise your blog design freely.

Steps To Install the Theme:

Go To Blogger Dashboard
Create a New Test Blog
Give it a title and address
Choose the Simple Template and not Dynamic Views
Next Navigate to Template > Edit HTML > Proceed
Replace all the code inside the editor with the 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[
#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; '>

<center><p><a href='http://www.topbloggertricks.tk'>BLOGGER TIPS AND TRICKS</a>© 2012.</p></center>
</div>
</body>
</html>

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.

ADD PAGE NAVIGATION TO BLOGGER

2012-12-25T03:08:00.000-08:00

Page Navigation is very helpful to navigate the posts in your blog,and it helps your readers to move deep archive. It can include Beautiful page navigation in your blog. Here i give a small step-By-step guide to add this to your blog . Myself also included this navigation in my blog.Have a Look at it. :)

Copy the CSS Code Below and Paste it in HTML code before </b:skin>

div.pagination {
font-size: 11px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
padding:2px;
background-color:#c1c1c1;
}

div.pagination a {
padding: 2px 5px 2px 5px;
margin: 2px;
background-color:#c1c1c1;
text-decoration: none; /* no underline */
color: #000;
}
div.pagination a:hover, div.pagination a:active {
background-color:#99ffff;
color: #000;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin: 2px;
font-weight: bold;
background-color: #fff;
color: #303030;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin: 2px;
background-color:#c1c1c1;
color: #797979;
}
Now Search for :

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

Now add Below Code after the above Code.

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>
}

Now Save it .And refresh your Blog.

LOCK/ UNLOCK WIDGET IN BLOGGER

2012-12-24T21:12:00.002-08:00

By default almost widgets in blogger blogs are editable. By Clicking the edit button, you can either perform edit, remove or cancel functions. You may have observed that some widgets can not be removed from page elements for example theHeader widget which lets you add a background image to your header or add your site logo. All those widgets which can not be removed are LOCKED and we learn today how to UNLOCK those widgets. We will also learn how to LOCK any widget we want so that it could only be edited but not removed.

How To LOCK/UNLOCK a Widget in Blogger?

Go To Blogger > Design
You will see many widgets in your page element section. Get the ID of the widget you want to remove. You can get the widgetID by placing your mouse cursor at the Edit link of that specific widget. You will see a link appearing near the status bar of your Mozilla/Chrome browser like this,

Simply note down the widgetID which in my case is HTML12. You widget ID is one that appears between widgetid= and &action

The Widget that you want to lock looks like this in UNLOCK mode,

UNLOCK MODE:

You can clearly see that there are three buttons which are REMOVE, CANCEL andSAVE

Now we want to delete the REMOVE button so that the widget could only be edited but not removed.

Now go to Blogger > Design > Edit HTML

Backup your template

Search for your widget ID. (In my case I will search for HTML12

You will find a code similar to this,

<b:widget id='HTML12' locked='false' title='Subscribe Now!' type='HTML'/>

Now to LOCK the widget simply let locked to true

Save your template and Your Widget is now LOCKED.

Go to Page Elements section and you will see that your widget has no REMOVE button now.

LOCKED MODE:

To UNLOCK the widget back, simply repeat the same process and change locked to false

That's all! Have fun.

Source-MYBLOGGERTRICKS

MERRY CHRISTMAS WIDGET- WISH YOUR VISTORS

2012-12-24T20:57:00.001-08:00

As Christmas is nearing , Every blogger will be thinking of wishing there users and there family. This makes the bloggers to be friendly with there visitors.There are many Christmas decorative widget for blogger which can make your blog to load slow and give ugly appearance.That goodies also make your post unreadable to your users .Do you want to wish your users or make them to get away from your site??
So to avoid this, I come with a new widget which wishes your users beautifully and attractively.This is fast loading and does not increase your blogs load time.This widget is user friendly as it comes with closeable button too.This also make your blog professional! Live preview can be viewed in this blog.want on for you blog also? Just follow these simple steps.

How to install this widget in your blog?

Go to Blogger and open your dashboard.
Go to layout menu and open a new desirable widget box and paste this codes in that.

<style>#announcement{
width: auto;
font:bold 15px Trebuchet MS;
border: 2px solid #FF0000;
border-radius: 20px;
margin: 0 40px 5px 40px;
text-align: center;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FF0000;
background-color: #F9EAD4;
background-image: url('http://4.bp.blogspot.com/-XqBZUMNDtMY/UNW9y52-TTI/AAAAAAAAAcA/2TiGYFgDBSA/s1600/two_christmas_bells_ringing_ty_clr.gif');
}
</style>
<script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#announcement").remove();
});
$("#announcement").fadeOut(800).fadeIn(800)
.fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>
<div id='announcement'>
<a class='close' href='#close' style='float: right;'><img border='0' src='http://cdn1.iconfinder.com/data/icons/nuvola2/16x16/actions/button_cancel.png'/></a>
<center>
Wish You a Merry Christmas to All our Visitors and Their Family.
</center></div>

GET INDEXED BY GOOGLE RAPIDLY

2012-12-22T08:52:00.006-08:00

Brand new blogs / websites can take up to four weeks to get indexed by Google. After entering Google index, their updates can take up to five days before indexed. With search engine optimizations (SEO), brand new blogs / websites can take only four days to enter the index, while later, their updates are indexed in five minutes. How about yours?

Do you want to get indexed by Google fast and faster? You will need SEO then. Unfortunately, SEO are an advanced science, and some people even consider it something more complicated, namely art. It takes time and energy to understand and master it, and later on apply it. If you don’t have the time to be an SEO expert, just follow these three steps:

Add SEO meta tags

Meta tags are the ID card of your website. It dramatically reduces the amount of time needed by the process of indexing. Meta tags must be placed in head section of a website (not body section). More specific, between and tags, usually in your template.

Submit your URL to Google

After submitted, Google will include your URL in a list for the Google-bot to crawl. The bot will then collect some information about your website, and submit it to Google index. If you have added the meta tags, relax.

To submit your URL to Google, click here.

Submit your sitemap to Google

Sitemap is very important for Google in indexing your update, once your site enters its index. After submitted, Google will use your sitemap to monitor the changes of your website. If it finds a change, its bot will collect the new information and add it to Google index.

To submit your sitemap to Google, you need to access Google Webmaster Tools (login). Add your website and verify it as soon as possible. Then choose the menu “Sitemaps” from “dashboard”, and then use the address box to submit your sitemap. Done.

After doing these three steps,Kindly wait for view days and There will great changes in blog traffic and search engine ranking.

SOCIAL BOOKMARKING WIDGET [CHRISTMAS SPECIAL]

2012-12-22T08:12:00.001-08:00

Hey friends, Christmas is on its way..:) Wish you a very Happy Christmas in advance.

Here I'm providing you the code for attractive social bookmarking gadget on the occasion of Christmas. So without wasting your precious time here is the detailed steps which you have to apply on your blog.

In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose "Edit Html".
Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code.

</head>

Copy and Paste the following code Directly Above / Before </head>

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

Find the following piece of code in your blogs Html:

</body>

Now Copy And Paste This Code Directly Above / Before </body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script>
</div><a href="http://www.topbloggertricks.tk/">Blogger Tips And Tricks</a>

Click Save Template.

ADD AUTHOR BIO WIDGET AT BOTTOM OF EACH POST

2012-12-20T05:01:00.001-08:00

Bloggers are increasing day by day with new blog concepts. To show the content owner detail their is no widget provided by blogger so here is the proper method how you can attach Author/ Admin Bio Box after every post.

The main things that this widget takes your Gravatar profile picture so you don't need to upload any other photo. With the help of this, it look like a pro author widget. As you know, Blogger updates guest author features so I am also working on it for guest blogger but still you can use it in your blog.

Steps to add Author Bio Profile widget

Go to Blogger->Design->Edit HTML

Backup your template

Expand Widget Templates

Search for the following code

<div class='post-footer-line post-footer-line-1'>

Just below it paste the following code

<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:100%; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
    #author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
        #author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px
#CCC; padding:3px;}
        #author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
        #author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
        #author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
        * { margin:0; padding:0;}
#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("http://3.bp.blogspot.com/-YDfIvg3KYeE/T3AvpW2Gy0I/AAAAAAAABKw/zPiGkaX1V4I/s1600/gp-icon.png") no-repeat 0 0px; color: #666; font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}

</style>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author Name"'>
<div id="postauthor">
<div id="author-info">
<img alt='' src='http://www.gravatar.com/avatar/8619b5a3d8adc89e68ea2ec07d7d6838?s=80&d=&r=G' height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow TopBloggerTricks on <strong> <a href="http://twitter.com/TopBloggerTricks" rel="nofollow" >Twitter </a> </strong>. Subscribe to <strong> TopBloggerTricks feed via <a href="http://feeds.feedburner.com/TopBloggerTrickstk" rel="nofollow" >RSS</a> or <a href="http://feedburner.google.com/fb/a/mailverify?uri=TopBloggerTrickstk&loc=en_US" rel="nofollow" > EMAIL </a> </strong>to receive instant updates.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTopBloggerTricks&send=false&layout=button_count&width=120&show_faces=false&action=like&colorscheme=light&font&height=21&appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/TopBloggerTricks" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @TopBloggerTricks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://plus.google.com/118121786688701820900" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if>
</b:if>

Edit Author Name with your Eject Profile Name. (Important )

Edit RSS URL, E-mail URl and Twitter ID.

Edit all Social Media Links (Dark Words) with yours.

Change your Gravatar Profile Picture URL

Save template and Visit your blog.

Source- ProbloggingTools

ICECREAM SOCIAL SHARING WIDGET

2012-12-19T08:55:00.000-08:00

A very awesome and professional social sharing widget for blogger which can be added below every post of your blog and it works perfectly with blogger and you can also add it on your other websites like Wordpress, Joomla, Webs, etc.This Widget contains a spinning effect on mouse hover.

Add Social Sharing Ice Cream Widget

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog

Now Click on Edit HTML > Proceed > Expand Widget Templates

Press Ctrl + F and search the code shown below.

<div class='post-footer-line post-footer-line-1'/>

If you can't find above code then Search below code

<div class='post-footer-line post-footer-line-1'>

Now Paste Below Code Just After after it.

<b:if cond='data:blog.pageType == "item"'> <style> p#socialicons img { -moz-transition:all .7s ease-in-out; -webkit-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; -ms-transition:all .7s ease-in-out; transition:all .7s ease-in-out; } p#socialicons img:hover { -moz-transform:rotate(50deg); -webkit-transform:rotate(50deg); -o-transform:rotate(50deg); -ms-transform:rotate(50deg); transform:rotate(50deg); } </style> <center><p id='socialicons'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-XmSntQOIMyU/UMboMT1kIBI/AAAAAAAADy0/ON2qRa2c0h8/s1600/facebook.png' title='Share on Facebook'/></a> <a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-vELuuVPmNxY/UMboN9BwEoI/AAAAAAAADy8/my3_MonGuhA/s1600/twitter.png' title='Share on Twitter'/></a> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-CBqn4Bd8WTM/UMboK93lMZI/AAAAAAAADys/t4hM-ltZXPs/s1600/digg.png' title='Share on Digg'/></a> </p></center></b:if>

Save Your Template.
Say Bingo and You are Done.

24 BLOG DIRECTORIES YOU SHOULD SUBMIT YOUR BLOG

2012-12-19T08:09:00.001-08:00

Gaining exposure for your blog is critical to building a following and revenue. To get that it’s time to list your blog in one or more directories. So i have decided to give to list of 24 blog directories to submit your blog.

There re many paths of building links but few are as easy to implement and cost effective as submitting to blog directories. And a link juice makes for a growing blog.

Here are 24 directories you need to know about:

1. Bloggeries

is one of the most respected blog directories. The layout is clear and concise, and readers are able to find what they are looking for in a snap.

2. Best of the Web Blog Search

remains a powerful tool for sharing your blog, especially since this director’s very selective, listing only mature and valuable blogs. A link from here is majestic.

3.Blogio

stores plenty of quality blogs, and it sports solid on-site search.

4. Blog Pulse

features a powerful community element, on-site analytics, and a clean design. The “submit” page is a bit tricky to find, so here’s the quick link.

5. Blogged.com

is an interesting mix of a directory and a Google News type site that is fed by the blogs listed with Blogged. And it’s free to list your blog.

6. Blog Catalog

features a vast number of categories, from “academic” to “writing”, while offering the ability to search by country, language or user. It has a no-frills design, but offers convenient access through a simple blog registration.

7. Globe of Blogs

has too many features to list. Only non-commercial blogs are accepted. The site may be busy, but I like being able to narrow my search by title, author or subject.

8. Blog Hints

features over 100 categories. The site is very picky about which blogs are included, and those that are listed are presented via a visual interface that shows the site’s design and page rank. This makes Blog Hints the perfect site for finding link-swapping partners.

9. EatonWeb Blog Directory

is a powerful list. The fee, currently $34.99, pays for a review of your blog.

10. While the design and infrastructure have changed somewhat over the years, Blog Search Engine

remains one of the most selective blog directories on the web. Membership has its privileges.

11. The blogs at the top of Bloglisting

are fun, colorful and catch the attention of the reader. Bloglisting displays the page-ranking blogs, which is a helpful tool when determining with whom you want to exchange links.

12. The ultimate directory of British blogs

isn’t focused on location, but on the culture. It is asked that bloggers be genuinely “Britished.”

13. Blog Universe

has a layout that’s easy to navigate and, although the content is limited, it’s an all-around good directory worthy of submission.

14. Bloggernity

is a crisp, clean and easily navigated site. It’s low ad-to-content ratio has helped solidify its reputation as a quality directory.

15. Blogging Fusion

boasts over 60 categories, including family-focused blogs. Blogging Fusion has an good number of listings, and it also has visitor stats.

16. Bloggapedia

has an interesting and eye-catching homepage. Readers are easily connected to top blogs and new posts. Innovative categories, a colorful design and its blogger tool kit make this directory a hit.

17. Spillbean

is a well-designed directory with categories such as “health,” “society,” “Internet,” and “personal.”

18. OnToplist.com

is a free, manually-edited directory that reads the RSS feed of your blog. You can also use the site’s social features, article directory, and other great tools to build your blog.

19. Blogflux

is organized and clear with a strong social element.

20. Bigger Blogs

is intertwined with a business directory and an article directory, giving you access to several powerful tools in one location.

21. Technorati’s blog directory

is well-respected and spans more than 30 categories.

22. Blogarama

has a strong base of blogs and a solid text-ad system for its front page.

23. Hitgrove

features a good expose in Indian schools and colleges

24. Blog Digger

is a strong search tool, especially for local blog listings.

This above list is full of juice where you can add your blog url and earn lots of directory entries.

There are countless more directories at your disposal.

BLOGGER TIMELINE TEMPLATE

2012-12-19T01:45:00.000-08:00

One of the most popular layout trends nowadays is the use of a timeline. Social networking sites like Facebook, Tumblr, Google+, etc. have introduced it and this type of design has increased rapidly.
Biyan of Dzignine isn’t going to be left behind by the trend. Here’s a share of his latest template creation for Blogger/Blogspot users.

Simply called Timeline, this unique concept is an inspiration to the famous timeline which displays your work, interests, blogs, video posts, and everything posted in a timeline look.

The layout design is sleek and clean that definitely gives a radiant, attractive feel towards the readers.

You can check out this cool template and download it here.