Widgets Need To add After Create a Blog

After a long time research on important Blogger Widgets today i decided to share my some blogger widgets post which a new blogger have to add this after creating their new blog.

If you use blogspot/blogger because your current blogging program then you definately have got positive aspects to work with google own widget/product and add them to your blog. It is a Its more safe practices, therefore I suggest you always use Blogger official widget. On the other hand, not all widget you will need hear upon Blogger widget. You should use 3rd party widget, however always be the code source is trusted and harmless. After all, you never want virus or even spyware on the design, would you?.: D.

Some Import Blogger Widgets List are as Follow:

Add Google+ RSS Feed Widget For Blogger

Contact Us Form In Blog Embed code

Add Social Media Share Button Below Post In Blogspot

Embed Google+ Posts in Blogger

Best Stylish Design for Label and Categories Widget

Stylish Subscription Widget In Blogger

Author-Box with Social Connection

Add Page Navigation To Blogger Blog

Add Multipul Related Post Widget & LinkWithin For Blogger

These are some important widget you need to install after create a new blog i am researching on more widgets when i got more widget i will update this post accordingly please hit a comment for my appreciate. :)

Read More

Floating Social Media Widget for Blogger

After my previous articles about Css Animated Menu Widget for Blogger today i am going to share A beautiful and distinctive custom Widget for who have Blogs with limited space. Sensitive to touch the mouse, after automatically opens that touched a category.

So let's See The Tutorial How to add Floating Social Media Widget For Blogger 

LIVE DEMO

• Go to Blogger Dashboard
• Click on Drop & Down Menu of your blog
• Click layout >> and click Add a Gadget >> Html/Javascript 
• Then paste the below code on it

<style type="text/css">
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;  
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitB_HFivOjRVHQxlu-iM-VywqahyphenhyphenyDv5zdykB-ij5V0ep1UmCNkw2oGPRJ2MJgiTi-bWw6k4hRSbMsnm2bZhwHBAZ53NNOJ4KrQc2efy_-csCNKm18ytrXdJN2_iW7WtlDDiu35wuyBPQ/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHmCURbgaG0YYqlezwBksTEPrcVD9niozBkpRqsNV3zVorN2m7Cp6H8diQKNmbYHIjtsUfhGPMoyO3Cq7aUhAhSIu0QDMoQqmhvwJQHVy2Vyohl8jjAhrFyMz6SoGtJdtxswCLHzscNo/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_Ox00f26MsY-B13LRF3lJnDEpe-OjesXmJkPgfH_hqXBpzzcqNpEZEdvLXoDNOucHqu3bCTUZ15b6vwX-lBfoTJsFIoZ1hym4OJ6la_UN7kA68cEBGOlsShVAzs43OLCfnAVsibiaGg/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7T6LoCBthPxwKAuTwV_HqspOC1ZQ2RrOae9bukOFudA0tvZUjLQckjuphTXl7Mhb7TvT4b-M97Lene7rC_0I4VPLiyDiiNu_ECzxm3YHxPL0oUzJtYt1hoa3vaICkTff0hjDsIPEbXo/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLRWH-OBdSnQnDxLeyva3wNIv8XZYY07fvw2qP20RLAvXCTmvWAZaNfRaJggu0PaKp06dDo09LrJKi5Maieer-pPNMu2r_J4PTcJ1RMwnsbX22PrJLjC3TBJHqC-sgoQgwQwUHYPXbow/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<br />
<ul id="social">
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="googleplus"><a href="#" title="Google Plus"></a></li>
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="rss"><a href="#" title="Rss"></a></li>
<li class="pinterest"><a href="#" title="Pinterest"></a></li>
</ul>

• Save It. 

View your blog this widget will appear correctly if you facing some problem then leave a comment below.

Read More

Social Buttons With Hover Effect for Blogger

Give your readers a chance to show you how much you care about the Blog desing, or how good your article is, to raise the social media likes.

You may also read my previous article about Css Animated Menu Widget for Blogger.

Live Demo 

Just Follow These Simple Steps

• Go to Blogger Dashboard
• click on your blog drop & down menu
• Click layout >> Add a gadget >> Html/Javascript
• Then paste the following code in Html box

<style>
.social-contain {
 float: left;
 margin-bottom: 20px;
 text-align: center;
 width: auto;
 }

ul#social {
 position: relative;
 margin:0 auto;
 }

ul#social li {
 float: left;
 margin-right: 2px;
 list-style:none;
 }

ul#social li:last-child {
 margin-right: 0;
 }

ul#social li a {
 display: block;
 }

.soc-fb {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) 0 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-fb:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) 0 -58px;
 }

.soc-twi {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -58px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-twi:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -58px -58px;
 }

.soc-gp {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -116px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-gp:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -116px -58px;
 }

.soc-pin {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -174px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-pin:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -174px -58px;
 }

.soc-rss {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -232px 0;
 position: relative;
 width: 58px;
 height: 58px;
 }

.soc-rss:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9piCKRx_NM8BYP22dnNnMfthnupzmQKoKEP5PcvQ5hFtw4GuSdw9MhspyXQrVq3W8K_M43T9TUP9i2hvTwW873ngnOlEjrCP63RYEPU7-4Cv0Nu2G8kedIZJSR8WsL1XrAzAgoad5pbc/s1600/social-but.png) -232px -58px;
 }
</style><br />
<br />
<div class="social-contain">
<ul id="social">
<li><a class="soc-fb" href="#" target="_blank"></a></li>
<li><a class="soc-twi" href="#" target="_blank"></a></li>
<li><a class="soc-gp" href="#" target="_blank"></a></li>
<li><a class="soc-pin" href="#" target="_blank"></a></li>
<li><a class="soc-rss" href="#"></a></li>
</ul>
</div>

• Save It.

You have done if you need more info please let me know i will help you.

Read More

How To Add SEO friendly Meta tags for blogger

After my previous article about How To Add Favicon in Blogger Tutorial today i am going to share How To Add SEO Friendly Meta Tag For Blogger (Blogspot) Blog.

Meta tags are very important factor for blogger. It's provide our blog details to search engines crawler.It is like as a SEO work.

Lets See How To Put Meta Tags in Blogger For SEO

Step 1.
Login to Blogger >> Go to Dashboard >> Template >> Edit Html

Step 2.
Find the following code [Tip: Press  Ctrl+F anywhere in template editor]

<head>

Step 3.

After this tag paste the following code.

<meta content='Your Blog Description' name='description'/>
<meta content='Keyword1,Keyword2,Keyword3' name='keywords'/>
<meta content='Author Name' name='Author'/>
<meta content='Author Email Address' name='Email'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='Language Name' name='language'/>
<meta content='Country Name' name='country'/>
<meta content='blogger' name='generator'/>

Step 4.
Replace all the RED words with your own need.
Click on Save Template .

You have done if you face any problem to intall this tag in your blogger blog please let me know in comment i am glad to see your comments here. :)

Read More