How to Open External Links in a New Window in WordPress

In WordPress every time an author wants to add a link in a post they have the option of selecting “open link in new window”. Although doing it manually is an option, there is a better way. By using this plugin you can have all external links open in new windows automatically even if someone forgets to check the box.

Download the plugin : Open External Links in a New Window.

Read : Automatically Open all External Links in a New Window in Blogger 

All you have to do is go and download the plugin. There is no back end so you do not have to worry about setting anything up in the admin panel. Once you have activated it every link will be opened in a new window using JavaScript’s window.open()-function. Not only is this SEO friendly but the code is also XHTML Strict compliant. The best part about this plugin is that when Javascript is disabled in someones browser it doesn’t return any errors but just remains inactive.

Automatically Open all External Links in a New Window in Blogger

In this post I will show you How to Automatically Open all External Links in a New Window in Blogger. Thus preventing your blog readers from leaving your blog and also helps in increasing your overall pageviews and bounce rate. We thought we shall also share the script with all of you.

Automatically Open all External Links in a New Window in Blogger

☛ Go to Blogger > Template
☛ Click "Edit HTML"
☛ Just above </head> paste the following script:
[ Note : To copy below code just move your mouse on code area. You will see
On right side. Click <> to copy code. ]

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
 
});
</script>

☛ Please do not add <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> if you already have jQuery library source code installed on your blog.

☛ Save your template and you are all done!

Best Tips To Get Your Page Discovered On Facebook Easily

A lot of the Pages on Facebook go unnoticed owing to the fact that Facebook only broadcasts your posts to a small percentage of your audience. And unless you spend some money on promotions (which increases the target audience percentage), chances are that you you’ll be struggling to reach even a fraction of your potential. Today, we’ll share some tips that could help you increase your page’s potential without having to pay anything.

Complete your page :

Yes, the first and the foremost (and the most obvious) step. Do not under-estimate it though. Small details matter. Fill out each and every piece of information that is available, and make your page complete. This will not only help people find your content more easily, it will also tell them more about your business/page, which will ultimately drive engagement.

Information you must add includes Category and description, Address, business hours, contact information, web addresses, profile/cover photos, and so on. Make sure you do this before moving on to the next step.

Spread the word! :

Try to reach out to people. Invite your friends to like your page, and visit it often too. Tell them to invite their friends as well. The more the merrier. If you’re a business, make use of your email lists, and invite them to Facebook. Reach out to as many human beings as you possibly can – only a few would respond. Use that as your base for further growth.

Also urge them to visit your page frequently, because if you visit a Facebook Page frequently, the Facebook EdgeRank algorithm will kick in, and will ‘unblock’ broadcasts from that page for you. Otherwise, these updates are only visible to a small percentage. Talking to people personally is a great way to get their attention.

Make use of the newsfeed :

It goes without saying that the newsfeed is the most important thing on Facebook. People interact with the things on their newsfeed – give them a reason to interact with yours. This can be achieved by interesting shares, use of compelling images (extremely important), concise, easy to understand text, and more.

You can also make use of humor, but keep it strictly family safe. People don’t interact with things they might like, but are not comfortable showing up on their walls. So keep it universal.
Important observation: Compare this method with the more aggressive style of using controversial debates as conversation starters. They get people’s attention just as quickly, and people want to interact with such posts, if only to ridicule or defend/attack another. This method can be applied to, but do it at your own expanse. Don’t do it if it could harm your brand’s image.

Evaluate performances :

Monitoring what types of posts are getting good responses is key. Use Page Insights to determine what types of content — videos, posts, questions, etc. — are getting good engagement versus what types aren’t.

To access your Page Insights, go to the center of your Page Admin panel to a section called Insights. Or, you can go to the drop-down menu with the gear below your cover photo and select View Insights.

As you learn what posts are getting the most engagement, make sure you optimise your future posts based on what resonates best with your customers. This is an ongoing learning process but will help you grow engagement with your audience.

Just short of spending money for promotions on Facebook, these tips will help you increase your Page’s reach and grow a larger audience.

How To Add Expanding Photo Stack Effect In Blogger

Today I am explain simple tutorial about How to add Add Expanding Photo Stack Effect for Blogger Images. Every modern browsers support with this effect. You can add this to blogger side bar by re-size images.Im just using CSS3 for this animation effect.Hope you can understand it.if you have any problem regarding to this tutorial let me know.

Click Here To View Demo

How to Add Add Expanding Photo Stack Effect for Blogger

☛ Go to Blogger Dashboard > Layout
☛ Click Add Gadget and select 'HTML/Javascript'
☛ Copy and paste below code.

✺✺✺ [ Note : To copy below code just move your mouse on code area. You will see
On right side. Click <> to copy code. ]

/* The CSS Code for the image starts here blogbeginnerguide.blogspot.com

<style>

#btrix_imgstack{

  width:300px;margin:0 auto;margin-top:2%;

}



#btrix_imgstack a{

  width:288px;

  height:200px;

  position:absolute;

  display:block;

  border:6px solid #f0f0f0;

  border-radius:2px;

  box-shadow:0 0 10px rgba(0,0,0,.3);

  transition:margin .5s;

  -webkit-transition:margin .5s;

}



#btrix_imgstack img{

  width:288px;

  max-height:100%;

}



#btrix_imgstack a:first-of-type{

  margin-top:-5px;

  margin-left:-20px;

  transform:rotate(-3deg);

  -webkit-transform:rotate(-3deg);

}



#btrix_imgstack a:nth-of-type(2){

  margin-top:-5px;

  margin-left:-10px;

  z-index:-1;}



#btrix_imgstack a:last-of-type{

  transform:rotate(3deg);

  -webkit-transform:rotate(3deg);

  z-index:-2;}



#btrix_imgstack:hover a:first-of-type{

  margin-left:-310px;

  margin-top:5px;}



#btrix_imgstack:hover a:nth-of-type(2){

  margin-top:-5px;}



#btrix_imgstack:hover a:last-of-type{

  margin-left:290px;

  margin-top:5px;}



#btrix_imgstack a:first-of-type:hover,#btrix_imgstack a:last-of-type:hover{margin-top:-5px;}

#btrix_imgstack a:nth-of-type(2):hover{margin-top:-10px;}

</style>

<div id="btrix_imgstack">

 

  <a href="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

 <a href="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

  <a href="Post Url Here">

    <img src="Image Url Here" alt />

  </a>

 

</div>

☛ Replace Image Url Here & Post Url Here with your Post URL and Image URL.
☛ Now save your HTML/Javascript'.

You are done. If you have any problem related to this Expanding Photo Stack Effect for Blogger. Just leave a comment.I will help to you.

How I Can Get More Traffic From YouTube To My Blog

YouTube is popularly known for uploading and sharing videos where you can create your own profile and upload high quality, informative videos related to your blog. The final video should be appealing and engaging and should narrate your message to the audience so that they visit your blog to seek more information. If you have selected this platform for promoting your blog, here are some awesome ways in which you can drive traffic from YouTube to your blog.

How I Can Get More Traffic From YouTube To My Blog

☛ Create a YouTube Profile: the first and the most important thing in the process is to create a channel for uploading the videos on the website. Creating a profile in accordance with your blog will help you to a great deal in uploading the videos and promoting them among the potential audience.

☛ Upload Blog relevant videos: another important thing is to create impressive videos related to your blog. The videos should be in accordance to the content discussed on the blog so that the readers can easily be directed to the blog.

☛ Use of keywords and transcriptions: use of keywords and transcription is a great thing for SEO and can help you in boosting your search engine rankings and appear on the first position of the search engine page when a search with a related keyword is done. So, try to identify the commonly used keywords related to your blog and add them to the video description. This will also help people in reaching your post easily and sharing it on other platforms, which in turn
enhances its visibility.

☛ Link the video with the blog: Place the URL of your blog at the end of the description for an appropriate closing. Placing the blog URL will direct traffic from YouTube to your blog successfully.

☛ Allow commenting, sharing and embedding: a good number of positive comments on the video indicate that it is really useful and can catch the attention of visitors. The sharing option enables the visitors to share the video among different communities and platforms thereby enhancing its visibility as well as blog traffic.

☛ Keep updating the videos: in order to gain more traffic, you need to keep updating more relevant videos so that the interested visitors can get more info.

The above discussed tips are really helpful in driving more traffic from YouTube towards your blog. Using the several options available to you wisely will help you to a great deal in getting enormous traffic to your blog.

How to Show Infolinks InTag Ads Below Every Post in Blogger

Infolinks InTag Ads is important to earn more that’s carry huge number of ads view. In our previous post we describe How to Show Infolinks In Tag Ads Below Menu in Blogger . In this post I will show you How to Show Infolinks InTag Ads Below Every Blog Post in Blogger.

How to Show Infolinks InTag Ads Below Every Post in Blogger

☛ First Login to your Blogger Account.
☛ Then go to "Template" Section.
☛ Click "Edit HTML"
☛ Find out one of below code by press Ctrl+F

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

☛ When you find any of those code just copy below Infolinks InTag ads code and paste it after above code.

<input name="IL_IN_TAG" type="hidden" value="2" />

☛ It may look like as

<div class="post-footer-line post-footer-line-">
<div class="post-footer-line post-footer-line-2">
<input name="IL_IN_TAG" type="hidden" value="2" />
<div class="post-footer-line post-footer-line-3">

☛ Now save your Template and you are done.

There are another way

How to add infolinks related tags or InTag ads below each blog post

☛ First Login to your Blogger Account.
☛ Then go to "Template" Section.
☛ Click "Edit HTML"
☛ Find out below code by press Ctrl+F

<data:post.body/>

☛ When you find those code just copy below Infolinks InTag ads code and paste it below <data:post.body/>

<input name="IL_IN_TAG" type="hidden" value="2" />

☛ It may look like as

<data:post.body/>
<input name="IL_IN_TAG" type="hidden" value="2" />

☛ Remember that there are 2 or 3 <data:post.body/> in your template. Just confirm which is working for you.

☛ Now save your Template and you are done.

Recently Google Update Page Rank in 6 December 2013

Those were terrible ways when bloggers and webmaster were waiting for the upcoming Google Page Rank updated but now it seems the wait is over. Hi friends you heard it right on facebook or in any website that google just update the page rank in December 6, 2013. This updated was the most awaited Google page rank update among the bloggers and webmasters and took a lot of time from google side to update page rank after the earlier update on 4 feb 2013. Page Rank is updated with the average of 3 to 4 months but this time, Google has been too late to update the Page Rank.

What is Google Page Rank?

If you’re new to Page Rank and don’t know much about it then let me tell you. Page rank is an algorithm by Google which ranks every website and webpage in 10 Points. So anyone website or blog can get page rank points from 1 to 10 and if someone has got high page rank like between 5 to 10 then it is going to generate many benefit for a particular website. Page Rank basically depends on the Backlinks of website which means if you’ve high number of quality backlinks then there is chance to get high rank in next update. Google Page Rank helps to get better position in Google SERP, faster indexing, increases guest post submissions, attracts advertisers and many more benefits.

How to check Page Rank of your site?

Here is some site which will help you to find out your page rank.

http://www.prchecker.info/check_page_rank.php

http://www.checkpagerank.net/index.php

http://livepr.raketforskning.com/

http://www.prcheckingtool.com/

http://www.topwebsitecheck.com/

https://tools.digitalpoint.com/pagerank

Add Horizontal Social Share Buttons Below Post Title In Blogger

Social share buttons installed on your blog has very great importance to boosting huge traffic. There are many sites of social networking but most using sites is Facebook,Google Plus and Twitter that's why in this widget there are only three Social Sharing buttons, mostly readers are using this three Social Network. Social media website play a vital role in blogging careers. It boost the blog post rank well in search engine without using any social services we wont get a good traffics from social networks sites.
This is the horizontal social sharing button bar which we're going to share today. This looks beautiful in the design as the buttons are placed in good manner and each button is separated in squares.

Add Horizontal Social Share Buttons Below Post Title In Blogger

Demo

Implementing this new horizontal social bookmarking button bar below post title in blogger is not a difficult task but you might need a hint or help if you're newbie so below we're going to guide you step by step on how can we do this.

☛ Go To Blogger >> Template >> Edit HTML
☛ Click  and Find For </head>
☛ Just Above </head> Paste The Following Code. [ To copy please click  < > on right side ]

 <b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>


<style type='text/css'>

/*Social Bar By Blog Beginner Guide ----------------------------------- */
#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>


</b:if>

☛ Click Save Template and You're Half Done!
☛ Now Search For  <div class='post-body entry-content'>
☛ And Above It Paste The Following Code.  [ To copy please click  < > on right side ]

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
 <div class='headingsharer'>
  <h5>SOCIALIZE IT →</h5>
 </div>
 <div class='tweeetero'>
  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
 </div>
 <div class='fbwolo'>
  <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
 </div>
 <div class='g-plusones'>
  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </div>
  <div class='stumblo'>
   <su:badge expr:location='data:post.url' layout='1'/>
  </div>
 </div>
 </b:if>

☛ Click Save Template!
☛ You're Done!

How To Create Stylish Sitemap Page in Blogger

Sitemap is an important part of your Blogger (Blogspot) blog. Sitemap is a list of pages (links) on your website or blog. Auto Updatable HTML Sitemap show your blog reader to latest post update from different categories in your blog. I our site you might have seen Sitemap Page. If you've not seen before then have a look on it now. Sitemap page is not much necessary for search engines but from some sides it's better to have a sitemap page in menu. In this post we're going to share this sitemap page for blogger.

Create Sitemap Page in Blogger

To add stylish sitemap page in Blogger just follow the simple steps given below.

Read : How to Create Auto Updatable HTML Sitemap Page in Blogger
☛ Go To Blogger >> Dashboard >> Pages
☛ Create New Page >> Blank Page

☛ Insert Page Title of Yours Choice.
☛ Go To HTML Tab

☛ Copy The Code Below and Paste There in The HTML Tab.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>


<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.YOURBLOGDOMAIN.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

☛ Replace YOURBLOGDOMAIN With Your Blog Domain.
☛ Click "Publish" Button.

☛ You are Done.

How To Enable Meta Descriptions For Every Blog Post In Blogger

Blogger is now almost popular blogging platform. There are a lot of awesome and effective features are being added to Blogger. As you all of you knows that in the new Blogger interface the search preferences section is added which helps the user to make his/her blog more search engine friendly.In the blogger old interface we were unable to use meta description in each and every blog post, we only used to add that common description to homepage only by manually. But now every one can add it easily in every post and page without touching any HTML or XML coding. You just need to enable it from search preferences section. In this post I will describe How To Enable Meta Descriptions For Every Blog Post In Blogger .

What is Meta Description?

Adding Meta description to each post is very important. Meta description is an HTML or XML element that describes the web page to search engine's crawler. So if you don't add Meta description then Google can't understand your post whats about.

Adding Meta Description In Every Post With Blogger

By default in blogger that is disable so we'll need to enable it after that we can use it. In this section the meta tags will enable for homepage only and the last section of this will show you that how can you use these tags for every post. Simply the follow the below steps.

☛ Go To Blogger >> Settings >> Search Preferences

☛ Look For Meta Tags Section and Tick "Yes" To Enable It.
☛ Now a box will appear where you have to write your meta tag or description. Make sure that it doesn't exist 150 characters.

☛ Click Save Changes! And You are Done.

Adding Meta Tags In Every Post

After enabling meta tags for homepage, it's time to add these tags in every post. Now when you will go to any post editor or create new post, You will see "Search Description" section in the sidebar where you have to simply write your description for that post. This search description section was disabled but after enabling for homepage it is also enable for every post and page.

Write your description for every post in that box and publish it.

How To Add Facebook Like Box without Border in Blogger Easily

In my previous tutorial I describe the easiest way to How To Add Simple Facebook Like Box on Blogger. In this post I will show you How To Add Facebook Like Box without Border in Blogger Easily. If you have a Facebook fan page for your website or blog, you might want to consider adding a Like Box to your website. Facebook is biggest way to promote your blog because everyone uses facebook. Many ways to promote your blog on facebook and facebook fan page is one of them. Adding Facebook Box without border in blogger bring beauty and make the blog more designable. Now lets start How To Add Facebook Like Box without Border in Blogger.

Add Facebook Like Box without Border in Blogger

To show your facebook box gadget with out border in your blogger blog. We have to follow some of the below given steps.

Read : How To Add Simple Facebook Like Box on Blogger
☛ First Login to your Blogger Account.
☛ Then go to "Layout" Section

☛ Click "Add a Gadget" Link where you want to put this Widget.

☛ Select "HTML/JavaScript" tab.

☛ An popup box will be open. paste below HTML/JavaScript code there.

<iframe
src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.faceboo
k.com%2FBlogbeginnerguide&amp;width=292&amp;height=258&amp;show_faces=true&
amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=f
alse&amp;appId=216583408397853" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:292px; height:258px;"
allowtransparency="true"></iframe
src=">

☛ Replace "Blogbeginnerguide" with your facebook fanpage URL.
☛ Increase The width and height values if you want to increase the width or height of gadget layout.
☛ Save your widget now.
☛ You are done.

How to Disable Right Click On Your Blog To Prevent Copy Paste Easily

Every blogger always wanted to prevent copy paste the content from their blog or website. You might have written an article with great efforts and lots of research and other just copy/paste it on their blog. So in this situation what should we do? Don't worry about this. In this post I will show you the most easiest way how to disable mouse right click on your blog or website to prevent copy paste your content.

Disable Right Click On Your Blog To Prevent Copy/Paste

☞ First Login to your Blogger Account
☞ Then go to "Layout" Section.

☞ Click "Add a Gadget" Link where you want to put this Widget.

☞ Select "HTML/JavaScript" tab.

☞ An popup box will be open. paste below HTML/JavaScript code there.

<script language=javascript>
var message = "Disabled By Blog Beginner Guide";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</script>

☞ Replace "Disabled By Blog Beginner Guide" with your own message.


☞ Save your widget now.


☞ You are done.

How to Create Auto Updatable HTML Sitemap Page in Blogger

HTML sitemap is an important part of your Blogger (Blogspot) blog. Sitemap is a list of pages (links) on your website or blog. Auto Updatable HTML Sitemap show your blog reader to latest post update from different categories in your blog. In this post I will show you How To Create Auto Updatable HTML Sitemap Page in Blogger easily.

How To Create Auto Updatable HTML Sitemap Page in Blogger

To create Updatable HTML Sitemap Page in Blogger you have to need follow below steps..

1. First login to your Blogger Account.
2. Now go to "Pages" and Select "Blank Page" from "New page" option.

3. Select HTML page create option.
4. Write a Title "Sitemap" on your blank page title box.

5. Copy and paste below code on text area. { To copy code Just Click < > on Right Side}

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>


<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://blogbeginnerguide.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

6. Replace http://blogbeginnerguide.blogspot.com on your blog URL.
7. Publish your page and you are Done.

I think this post How to create auto updatable HTML sitemap page in blogger will help you to add an HTML sitemap on your Blogspot Blog.

Is It Really Important To Add Meta Tag For Every Blog Post?

Meta tags or Meta Descriptions are the important elements for successful SEO of your blogger blog site as well as any types of website. It is an HTML or XML element that show the short summary of your webpage in search engine's. In other words it tells the information about your web page to search engine's crawler so that search engine may provide your web page in search results on proper place. It also shows in the search results page so that the user may know that what kind of page it is.

In Blogger, there is difficult to adding Meta tags to each and every individual posts that you made. But it is really important to add meta tag for every blog post. In the term of SEO Description, Keywords and other Meta tags are important for every blog post if you need a good page rank in search engines. In WordPress there are lot's of SEO Plugins and they provide to add Individual meta description for every blog post. In early 2012, Blogger (also known as Blogspot) added a feature to its blogging platform that allowed users to add a custom search description to each of their blog posts.

Read : How To Enable Meta Descriptions For Every Blog Post In Blogger
Read : Best And Easiest Way To Add Meta Tags on Blogger

Now here is one problem!. The problem is that sometimes custom blogger templates doesn't work with these meta tags but if you are using blogger default template then it's fine. So in this situation what can we do? Don't worry! there is a solution for this problem.

Just Read : How To Add Meta Description In Every Post In Blogger

How to Create a Border Around Adsense Ads Easily

Google AdSense is a advertising program run by Google that allows publishers in the Google Network of content sites to serve automatic text, image, video, or interactive media advertisements that are targeted to site content and audience. Many of us want to create a border around AdSense ads. In this post I will show you How to Create a Border Around Adsense Ads Easily.

How to Create a Border Around Adsense Ads Easily

To add a border Around Adsense Ads is not so difficult you have to need some change. Just follow below code

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center"> <tr><td align="center"{height: 90px; width: 728px;} class="thead" colspan="2"><center>Advertisements</center></td></tr><tr><td class="alt1" colspan="2" ><span class="smallfont"><center>

Your 728x90 Ad Code Here

</center></span></td></tr></table><br>

Paste your Google AdSense Ad Code on "Your 728x90 Ad Code Here"

You can use this border different ads size. Just change width 728px And height 90px.

How To Show Author Profile Picture In Google Search Results

If you are regular internet user and try to find out anything on google then you noticed that some of the results in google search display author profile picture. If you are also interested to show Author Profile Picture in google search result then this is the right place for you. In this post I will describe the Easiest Way to Show Author Profile Picture in Google Search Results.

How to Display Author Profile Picture in Google Search Results

Step 1: To show Author Profile Picture in google search result at first you need to create a Google Plus Account

Step 2: Then go to your google plus profile page. You will get an Google plus ID from your browser like below

Step 3: Now you will need to add the following code in your site. Replace xxxxxxx with your Google+ profile ID number.


<a href="https://plus.google.com/xxxxxxxxxx/"rel="author"target="_blank">Join me on Google+</a>




How to add this code in your site

If you are using Blogspot, then you will need to go your Blogger Account first. After login your account go
Template >> Edit HTML

Now find out  <head> section by press Ctrl+F

Now paste your code after <head> tag  and save your template.

If you are using WordPress, then you will need to go your WordPress account first. After login your account go
Appearance >> Editor >> Header PHP
Now find out <head> section by press Ctrl+F  Now paste your code after <head> tag and save it.

Step 4: Now go to your Google Plus account Click  "About"  section.

Now find out "Contributor" section like below

Click Edit Button. Add your site link on ‘Contributor to’ .

Now time to check how your article appear in search results. Go to Rich snippets tool and check any URL of your blog. If it shows your pic then you are done. It may take 2-3 weeks to display your picture in search results.

Solution of Why Google Doesn’t show Author Profile Picture on Search Results?

There are several reason that Google may not show your pic in search results which are given below with solution:
1. First reason is that your Google plus profile picture’s size is rectangular. It is difficult for Google bot to make thumbnail of a rectangular size pic. So make it square size. Recommended size is 252 x 252 pixels and format is JPG.

2. Sometimes it requires Google Plus profile link on ‘About Me’ page. So add your profile link on the first line of your ‘About Me’ page. Use code from Step 2 and replace ‘Join me on Google+’ with your Google plus name.

3. Add your site ‘About Me’ page link in both Contributor to and Links section.

I hope now Google will display your profile pic in search results. Let me know if you find any difficulties via comment.

How To Show Infolinks InText Ads Only Posts Content In Blogger

Infolinks is an InText advertising network that is being used by thousands of websites or blog across the world. When we think of Google Adsense Alternatives, There are lots of pay per click in-text advertising programs available that can help you earn some extra income from your website or blog. There are many Google Adsense Alternatives but in my opinion Infolinks is The best Google Adsense Alternatives . Infolinks provides you 4 types of ads like : 1. In Text 2. In Tag 3. In Search 4. In Frame.

If you use Infolinks InText ads on your website or blog it will display maximum 12 ads on a page. Sometimes this ads may show on your site header, sidebar or even footer. Many of us are want to know can I Show Infolinks InText Ads Only Posts Content In Blogger? Then the answer is "YES". In this post I will show you How to Enable Infolinks Intext Ads on Posts Content Only.

For the in text ads integration, by default, there will be inappropriate display of in text ads in unwanted sections of your blog (header description or sidebar titles). It looks untidy to have those ads on header description or sidebar titles. The good thing is that you can control which section of your blog in text ads should display. Infolinks gives you the option to show Infolinks in-text ads only on some selected section of your blog.

How To Show Infolinks InText Ads Only Posts Content In Blogger

1. Login to your Blogger Account
2. Go to Template >> Edit HTML

3. Find out <body> by press Ctrl+F
4. Now copy and paste below code after <body> section

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Infolinks Ad Code Here

</b:if>

5. Replace "Infolinks Ad Code Here" with your code.
6. Now save your template.

You are done.
Now your Infolinks InText Ads will be show only your Posts Content.

How To Add Simple Facebook Like Box on Blogger

Facebook Like Box is an essential widget for any blog or website because facebook is the biggest way to promote your blog. Now a days everyone uses facebook so you can get huge visitor from facebook. Adding Facebook Like Box to blog or website helps in building your blog fame in social network sites . Facebook like box not only brings likes but also increases referral traffic for your blog or website . You can create facebook fan page for your blog or website and increase like for your fan page. In this tutorial I will be showing your how to add facebook like box for Blogger blog or website ?

How To Add Simple Facebook Like Box on Blogger

Steps to Add facebook Like box :

1. Login into your blogger account .
2. Navigate to blogger-->Layout .

3. Click on "Add a Gadget" where you want to show Facebook Like Box and select HTML/Javascript .

4. Now copy and paste the below code in the widget box .

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Blogbeginnerguide&width=300&height=300&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:300px; height:300px;"/></iframe>

5. Replace Blogbeginnerguide in the above code with your facebook page id .
6. Click on save Button in the widget . Once the widget is saved you can find your facebook Like box in your blog .

It is always better to add facebook like box widget in sidebar or footer . You can even change the dimension by changing height and width from the above code .