SEO Tips & Tricks by Sanjay Choubey

Simple and beautiful author box for Blogger

July 31, 2013 By Sanjay Choubey 8 Comments

Admin/Author Box Below Every Blogger Post :

Hi friends, welcome to my New post, This post is all about placing an author box below each post in Blogger. Placing an Author/Admin below every post will increase your interaction with your readers since new readers can easily see your social profiles and can get connected with you. that is why this is a perfect widget for increasing overall blog traffic.

Read : How to place html code box in Blogger

Author box below Blogger posts

Benefits Of This Widget:

Looks simple which can be used in every Blogger template
Can customize own author Image
You can also place the links for all social networks like twitter,facebook and Google+.

How to install :

Go to Blogger Dashboard
Click on template
Click on edit html
Press cntl+f and find the code ]]></b:skin>
Now place the following code above it

.author_info { float: right; width: 573px; padding: 10px; border: 1px solid #e0e0e0; margin-bottom: 15px; margin-top: 15px; background: #eee; } .author_info h3 { margin-bottom: 10px; } .author_photo { float: left; margin: 0 0 0 10px; } .author_photo img { margin-right: 10px; border: 1px solid #e0e0e0; }

Again search for <div class=’post-footer-line post-footer-line-1′> and place the following code below it and then click on save.

<b:if cond=’data:blog.pageType == "item"’>
<div class=’author_info’>
<div class=’author_photo’>
<img alt=’author’ src=’http://lh3.googleusercontent.com/-AEjwZp9w37s/UNSIMPc2PcI/AAAAAAAAA7M/JjHAI3AjFFI/h120/images.jpeg‘/></div>
<h3>About the Author</h3> This article is written by: <b>YourName</b> – who has already written <b>30</b> articles for <a href=’https://sanjaychoubey.com/‘>YOUR-BLOG-NAME</a> Your Name . Catch him on <a href=’http://twitter.com/ersnjy‘ target=”_blank” rel=”no follow”>Twitter</a>, <a href=’http://www.facebook.com/a1bloggerseo’ target=”_blank” rel=”no follow”>Facebook</a> or <a href=’your e mail ID‘>email</a> him <br> </br> <br> </br>
YourName's <a href=’https://sanjaychoubey.com/’>Blogger tips</a><br style=’clear:both;’/>
</div>
</b:if>

You need to change the urls as shown in red color, with your urls. and also you have to change the words and sentences which are in Blue colors with your own. Just customize it with your choice, and click on save. you will see the changes made. as a beautiful author box has started showing below each Blogger post. Thanks for giving your time. Take care.!

Another cool email subscription box widget for Blogger

July 29, 2013 By Sanjay Choubey 10 Comments

Blogger subscription box

Hello friends, I am back with another Blogger widget. which is an email subscription box. In past I have shared the related posts how to install email subscription box below Blogger posts and stylish email subscription box Blogger. Purpose of placing this widget here is to give more options for my readers who can select a widget according to her/his requirement. If this widget suits in your template, i will recommend you to add this widget since it will enhance your overall blog beauty.
How to install :

Go to Blogger Dashboard
Click on layout
Select add an html/javascript gadget
Place the code given below
Replace my feedburner id a1bloggerseo (highlighted with yellow color )with yours
Click on save . You are done.!

email subscription widget for blogger

<!–CODE STYLING BY a1bloggerseo.com–>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */ display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}
::-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: 80%;
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: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.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>
<!–ELEGANT SUBSCRIBE BOX ENDS a1bloggerseo.com –>
<center>
<form action=”http://feedburner.google.com/fb/a/mailverify” class=”login” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=a1bloggerseo‘, ‘popupwindow’, ‘scrollbars=yes,width=70%,height=520’);return true” target=”popupwindow”>
<h1> SUBSCRIBE TODAY</h1>
<img align=”LEFT” alt=”Smiley face” src=”http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png” height=”48″ width=”48″ />
<center>
<span style=”color: white; font-size: small;”><span style=”line-height: 25px;”> Sign up and receive our free Newsletter  </span></span>
</center>
<input name=”uri” type=”hidden” value=”a1bloggerseo” />
<input autofocus=”” class=”login-input” name=”email” placeholder=”Email Address” type=”email” />
<input name=”loc” type=”hidden” value=”en_US” />
<input class=”login-submit” type=”submit” value=”Subscribe” />
</form>
</center>

Add facebook offical like and send button below every Blogger post

July 28, 2013 By Sanjay Choubey 10 Comments

Hello friends today i will share the official like and send button widget for Blogger. I recently has posted social sharing widget below every post title. This is an another useful widget which should be used by bloggers due to its small coding and hence light weight so that Blog loading time will not affected. Below post title or at the bottom of posts, we need social sharing buttons. As we know facebook is the best social network for us, Adding a like and send button will give advantage to us by increasing the number of readers.

Facebook like and send widget for Blogger

Install facebook offical like and send button below every Blogger post

you can and this simple widget in your blog too.All you need is to follow these simple steps:

Go to Blogger Dashboard
Select your blog and click on template
Click on edit html
Now search for <data:post.body/> you will see 3-4 such codes. you need to check in which the code is working. In my case it’s the third code.
Now place the following code before <data:post.body/> if you would like to place the facebook like and send buttons just below post title. If you would prefer to show the buttons below posts just place the below code after <data:post.body/>

Finally save the template. You are done.!

List of top Professional Looking Stylish social subscription widgets for Blogger

July 26, 2013 By Sanjay Choubey 10 Comments

Awesome Looking Blogger social Networks Gadgets :

Social sites are one of the best source of traffic for your website. It enhances your site’s online reputation. There are many new viewers come to your sites by searching there queries, A good Blogger must shows a social network gadget in his Blog so that Readers can be connected with the website’s updates by liking social pages and profiles.

Install All in one Social Widget for Blogger

I am sharing some awesome look Blogger social network widget. You can install any of the widget for your blog. follow these steps for installing the Blogger gadget on your blog.

Go to Blogger Dashboard.
Select your blog and click on layout
Select add an html/javascript
Select any of the social network widget from below and paste it
Click on save and drag it where you want to show it in your blog.

<style type=”text/css”>

#UT-ssw-wrap

{

height:250px;

width:250px;

background:url(https://3.bp.blogspot.com/-Mun6TvBk3ws/UbSb8AtHSkI/AAAAAAAAApM/9tMv13YQmgQ/s1600/background.png) repeat;

color:#009;

font-family:Georgia, “Times New Roman”, Times, serif;

padding:3px;

border:1px solid #dcdcdc;

box-shadow: 1px 1px 2px #000;

}

#UT-ssw-icons-wrap

{

text-align:center;

height:50px;

padding: 5px 0px;

}

.UT-ssw-icons

{

height:40px;

width:40px;

float:left;

margin-left:15px;

margin-bottom:10px;

}

.UT-ssw-icons:hover

{

opacity: .7;

filter:alpha(opacity=70);

height:40px;

width:40px;

cursor:pointer;

}

.UT-ssw-lbl

{

color:#0F4794;

font-weight:bold;

text-align:center;

padding: 2px 0px 10px 0px;

}

.UT-email-field

{

-moz-border-radius:4px;

-webkit-border-radius:4px;

background:#fff url(https://1.bp.blogspot.com/-aN-9NuB-9t0/UbSeXzRF5II/AAAAAAAAApc/bn-lNSJ6VaY/s1600/icons.png) no-repeat 0 -27px;

border:1px solid #dcdcdc;

border-radius:4px;

color:#444;

margin:0 0 15px;

padding:10px 40px;

width: 166px;

}

#UT-ssw-submit

{

height:30px;

width:100px;;

background:#0F4794;

color:#FFF;

font-weight:bold;

text-align:center;

margin-left: 70px;

border-radius: 10px;

}

</style>

<div id=”UT-ssw-wrap”>

<div class=”UT-ssw-lbl”>Be in touch!!</div>

<div id=”UT-ssw-icons-wrap”>

<a href=”https://www.facebook.com/a1bloggerseo”target=”_blank” rel=”nofollow” title=”Like us”>

<img src=”http://4.bp.blogspot.com/-M-Oo98iERWY/UaRAbxTMUvI/AAAAAAAAAl0/aRVei7LDdeQ/s1600/Facebook.png” class=”UT-ssw-icons” alt=”FB”/>

</a>

<a href=”https://www.twitter.com/ersnjy”target=”_blank” rel=”nofollow” title=”Follow Us”>

<img src=”http://3.bp.blogspot.com/-N0J8rtp0-rI/UaRAcmQ3TAI/AAAAAAAAAmU/pHfp_FBKAJU/s1600/Twitter.png” class=”UT-ssw-icons” alt=”TW” />

</a>

<a href=”https://plus.google.com/u/0/102186620539628606324″target=”_blank” rel=”nofollow” title=”Follow us”>

<img src=”http://4.bp.blogspot.com/-1WxFAITv3gk/UaRAb_ID9sI/AAAAAAAAAl8/kS_YK-2Rjfk/s1600/Google+.png” class=”UT-ssw-icons” alt=”G+”/>

</a>

<a href=”http://feeds.feedburner.com/a1bloggerseo”target=”_blank”>

<img src=”http://1.bp.blogspot.com/-ypamIXUZMq8/UaRAcYh7rwI/AAAAAAAAAmM/h7C6rUhIqrQ/s1600/RSS.png” class=”UT-ssw-icons” alt=”RSS”/>

</a>

</div>

<div class=”UT-ssw-lbl”>Get my Upcoming posts directly<br /> in to your Inbox</div>

<inpUT type=”text” class=”UT-email-field” name=”email” aUTocomplete=”off” placeholder=”Enter your email address”/><br />

<inpUT type=”hidden” value=” a1bloggerseo ” name=”uri”/>

<inpUT type=”hidden” name=”loc” value=”en_US”/>

<inpUT type=”submit” value=”Subscribe” id=”UT-ssw-submit”/>

</form>

</div>

<style type=”text/css”>
        #UT-ssw-wrap
        {
            height:250px;
            width:250px;
            background:#F2F2F2;
            color:#009;
            font-family:Georgia, “Times New Roman”, Times, serif;
            padding:3px;
            border:3px solid #734E76;
            border-radius: 5px;
        }

        #UT-ssw-icons-wrap
        {
            text-align:center;
            height:50px;
            padding: 5px 0px;
        }

        .UT-ssw-icons
        {
            height:40px;
            width:40px;
            float:left;
            margin-left:15px;
            margin-bottom:10px;
        }

        .UT-ssw-icons:hover
        {
            opacity: .7;
            filter:alpha(opacity=70);
            height:40px;
            width:40px;
            cursor:pointer;
        }

        .UT-ssw-lbl
        {
            color:#734E76;
            font-weight:500;
            text-align:center;
            padding: 2px 0px 10px 0px;
        }

         .UT-email-field
         {
             -moz-border-radius:4px;
             -webkit-border-radius:4px;
             background:#fff url(https://1.bp.blogspot.com/-aN-9NuB-9t0/UbSeXzRF5II/AAAAAAAAApc/bn-lNSJ6VaY/s1600/icons.png) no-repeat 0 -27px;
             border:1px solid #dcdcdc;
             border-radius:4px;
             color:#444;
             margin:0 0 15px;
             padding:10px 40px;
             width: 166px;
         }

         #UT-ssw-submit
         {
            height:40px;
            width:150px;;
            background:#734E76;
            color:#FFF;
            font-weight:bold;
            text-align:center;
            margin-left: 42px;
            border-radius: 10px;
         }
    </style>
     <div id=”UT-ssw-wrap”>
        <div class=”UT-ssw-lbl”>Subscribe to Us!!</div>
        <div id=”UT-ssw-icons-wrap”>
            <a href=”https://www.facebook.com/a1bloggerseo” target=”_blank”rel=”nofollow” title=”Like us”>

                <img src=”http://1.bp.blogspot.com/-rom0fP44ejo/Ucl-v1Bu20I/AAAAAAAAAsA/2Ywu0ZE_j9o/s1600/facebook-v3.png” class=”UT-ssw-icons” alt=”FB”/>
            </a>
          <a href=”https://www.twitter.com/ersnjy“target=”_blank” rel=”nofollow” title=”Follow Us”>

            <img src=”http://4.bp.blogspot.com/-p6SV9eQtPEI/Ucl-wXggpLI/AAAAAAAAAsE/oEtli0Ob1Vw/s1600/twitter-v3.png” class=”UT-ssw-icons” alt=”TW” />
            </a>
            <a href=”https://plus.google.com/u/0/102186620539628606324” target=”_blank” rel=”nofollow” title=”Follow us”>

            <img src=”http://1.bp.blogspot.com/-Uy19r1CpVog/Ucl-vYYftQI/AAAAAAAAArw/gDDxoH2mlg8/s1600/google+-v3.png” class=”UT-ssw-icons” alt=”G+”/>
            </a>
            <a href=”http://feeds.feedburner.com/a1bloggerseo” target=”_blank”title=”Subscribe Us”>

            <img src=”http://1.bp.blogspot.com/-9mP99wndEk0/Ucl-v09LxKI/AAAAAAAAAr0/aaxYZQUsPrY/s1600/rss-v3.png” class=”UT-ssw-icons” alt=”RSS”/>
            </a>
        </div>
        <div class=”UT-ssw-lbl”>Get Pro TUTorials directly<br /> in to your Inbox</div>
        <form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=a1bloggerseo‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
            <inpUT type=”text” class=”UT-email-field” name=”email” aUTocomplete=”off” placeholder=”Enter youremail address”/><br />
            <inpUT type=”hidden” value=”a1bloggerseo” name=”uri”/>
            <inpUT type=”hidden” name=”loc” value=”en_US”/>
            <inpUT type=”submit” value=”Subscribe” id=”UT-ssw-submit”/>
        </form>
    </div>

        <img src=”http://1.bp.blogspot.com/-_qBJVgAxEbo/UZoKVuUCwaI/AAAAAAAAAjE/lNCevc0tuIA/s1600/Googleplus-bs.png” class=”UT-Social-Icons UT-margin”/>
        </a>
        <a href=”http://feeds.feedburner.com/a1bloggerseo“>
        <img src=”http://3.bp.blogspot.com/-TZMaBiooQxU/UZoKV2_vHdI/AAAAAAAAAjI/teSxXGB4VtU/s1600/RSS-bs.png” class=”UT-Social-Icons UT-margin”/>
        </a>
    </div>
    <div class=”UT-label”>
        Subscribe to our RSS Feeds
    </div>
    <form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=a1bloggerseo‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
     <div>
        <div class=”UT-left” style=”margin-top:30px;”>
                <div>
                <inpUT type=”text” name=”email” placeholder=”Get Updates Via Email” class=”UT-inpUTs” style=”width:150px;”>
                <inpUT type=”hidden” value=”a1bloggerseo” name=”uri”/>
                <inpUT type=”hidden” name=”loc” value=”en_US”/>
                </div>
        </div>
        <div class=”UT-left”>
            <img src=”http://4.bp.blogspot.com/-Ci6P54Gtvvg/UZoKW26sbeI/AAAAAAAAAjg/eRhopwvs8xo/s1600/sub-rss.png” height=”80″ width=”80″ style=”margin-top:8px;”/>
        </div>
        <div clear:both;></div>
    </div>
    <div style=”margin-top:-10px;”>
        <inpUT type=”submit” value=”Subscribe” class=”UT-inpUTs” id=”UT-subs”/>
    </div>
    </form>
</div>

How to customize :

Replace https://www.facebook.com/a1bloggerseo with your own facebook address.
Change https://www.twitter.com/ersnjy with your own twitter id.
Reaplace the g+ url https://plus.google.com/u/0/102186620539628606324 with your own id.
a1bloggerseo is my feed id you have to change it with yours. there are three occurrence for the feedburner id. change those with your own feedburner id.

If you having any issue, Fell free to ask to me in the comment section.

Touch me social networking widget for blogger

July 24, 2013 By Sanjay Choubey 4 Comments

Stylish Horizontal Social profile button for Blogger

We need to add a beautiful widget for showing all our social sites profiles so that people can be in touch. There are many widget. In past i have shared a beautiful all in one blogger widget
This widget will be horizontal and it is very useful in the blogger side bar and in footer area. so if your template need a beautiful social sharing widget, i will recommend you to use this gadget.

Also read : Face book like box in Blogger

Benefits :

Simple and cute look
Color changes when ever mouse goes on it
Horizontal in size which makes easy for Bloggers to use it side bar areas.

How to install it :

Go to Blogger Dashboard
Click on layout
Click on add a gadget and select add html/javascript widget
Paste the following code and click on save

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

How to Customize :

Change a1bloggerseo(Which is after uri=) with your own feedburner id.
Change google+ profile https://plus.google.com/u/0/102186620539628606324 with your owns.
Change http://www.facebook.com/a1bloggerseo with your own facebook profile.
Change http://www.twitter.com/ersnjy with your own twitter profile id.

You have done. if you have any issue kindly ask to me in the comment section.