Adding New Google+ Badges In Blogger Rolled Out! unique

New Google+ Badges

These are the stylish and fully professional badges which are introduced recently. These are fully changed if we compare them with old ones. Old badges were having add to circle and plus one button but here you'll get the follow and plus one buttons only. Take a look of the below image.

In the above image, you can see the set of latest badges which are recently made. You can see that there are follow buttons instead of add to circle buttons. Another great thing is that, it also shows the total number of followers and we're unable to see the total number in previous badges.

Why To Use These Badges?

I'm strongly recommending you to use these badges because they will give huge profit to you. It will increase the followers or plus ones on your profile which will help you in getting improvement in author rank. They can also help you in getting Google authorship and newbies are eager in getting it. Last thing is that they will help in being more Google friendly that can help for better ranking. If you're already using old badges then replace them because in 90 days, old badges will be removed. So you've three months to do this.

Adding New Google+ Badges In Blogger

So now you're going to implement these in your blog because they definitely are going to help you in many things. It is simple guys. Just follow the simple steps to implement it in blogger.

• Go To Google+ Badges
  
• • First select the profile in the "Google+ User" area.
  • Choose What you want Icon or Badge in features.
  • Here in layout you've two types of layout. Portrait is vertical layout whenever landscape is horizontal. Choose which one you want.
  • Choose width of the badge which may set in the area where you want to implement.
  • Choose the color theme.
  • In the last there some other advanced settings which you can easily set there.
  • Finally, after setting the badge, You'll get the code in the right side below live demo 
  • Copy the code and save it in notepad.
    

• Now Go To Blogger >> Layout >> Add a Gadget
• Choose "HTML/JavaScript"
• Paste The Code In Content Area.
  
• • Hit "Save Button" and That's it.

Read More

fixing Blogger Layout Page Messed Up unique style

Why and How Blogger Layout Gets Messed Up?

There are the several reasons that your layout is getting corrupted while creating the blogger template. The first reason is that you might don't have used the CSS properly and you don't have created the widgets properly. Try to make use of height and width properties in CSS. Sometimes, you edit the template and by mistakenly you removes or corrupt the widget code and in case the layout gets corrupted. If you're coding the template then you will need to concentrate on coding and sometimes you search hours for the error and that is the single semi colon which is missing. 

Fixing Blogger Layout Messed Up While CreatingTemplate

Those were the starting days of coding when I was learning how to code and how to create blogger template. I usually learn everything online in the home because I don't like institutes. While creating template, when I landed into the layout page it appeared messed up and I was shocked that why it get messed up. After the searching, I got the solution of this which I'm going to share with you below.

There is not any big tutorial to fix this but a little tip which I'm going to share with you and this will really help you to design the beautiful layouts. Actually, there is the additional field of CSS for blogger layout same like <b:skin>. And that is body#layout which you can use to rearrange the widgets and create cute layout.

To fix the layout widgets correctly or rearrange them, just go to your template, expand the<b:skin> and just in starting of that write the CSS coding. Let me guide how you can write that CSS to fix layout.

First of all write the additional tag body#layout and after the space write the .class or#id of that widget which you're going to rearrange. Simply, now start the middle bracket {and write the coding for that like width, height, padding, float etc. And in the last don't forget to close that with }. And by this you have to rearrange the every widget. After writing the code it will look like this.

body#layout #widgetID { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here } 
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here } 

After the writing the commands for each widget section save it and see your layout.
Remember :

1. On #WidgetID you've to write the ID or Class of the widget section.
2. These CSS Properties will only work in Blogger Layout Page.
3. That's All!

Read More

BloggerCustom Robots Header Tags Setting

If you are using Blogger to manage your blog then you may probably know that few months ago Blogger engineers had introduced new interface which is having fantastic features. The main thing of that new interface is that there is 'Search Preferences' section added in the settings area. That section helps us a lot to make your blog search engine friendly and to gain handsome traffic from search engines. In our previous posts we discussed about some things of search preferences which were meta description tags, robot.txt file and custom 404 error page but here we're going to discuss about custom robots header tags setting which is also a part of search preferences settings.

Basically, custom robots header tags setting is similar to robots.txt file because these both things are about to tell the search engine's crawler for which area they should index or not. But there is on difference. In robots.txt file we used to write the command and in custom robots header tags we'll need to tick mark some check box. If you tick mark correct fields then there is a chance of getting traffic even more from search engines. This will also help you to increase the visibility of your blog in search results. You can use custom robots header tags correctly with the help of below tutorial. So go and get it now.

Custom Robots Header Tags Setting

• Go To Blogger >> Settings >> Search Preferences
• In The Crawlers and Indexing Section, Edit Custom Robots Header Tags and Tick "Yes" To Enable It.
• Now A Long Box Will Appear Where You Have To Tick Mark The Fields. Tick Mark Some Important Fields With The Help Of The Image Below.

• After Ticking The Fields Properly, Click "Save Changes" and You Have Done!

Can Dogs eat Green Peppers

Read More

Colorful Flat UI Labels for blogger Customized

Improving the appearance of blog like bringing awesomeness and professionalism to blog templates and themes is always best. Because there are several reasons for this like getting approval from big advertising companies such as Google Adsense and BuySellAds. There are several professional templates on the internet which we can use but it might not have uniqueness because they're made for public and everyone can use that. After theme or template, it's also important to have professional widgets such as Labels or Tags widget, Popular Posts widget, Social Sharing, Related Posts etc. If you're enough smart in web designing then you can easily bring professionalism to your widgets but if not then there are also already made awesome widgets for you on the internet. Today, in this post, we're going to do a tweak with our blogs which will beautify our blog theme a little bit. Just today, I've customized label cloud widget for blogger and below I'm going to share it with all.

Colorful Flat UI Labels Cloud Widget

These days Flat UI and Metro designs are mostly trending in web designing. Today, when I came to update Blogger Yard and was about thinking about the topic. I thought why not today I do some customization with Blogger widgets and share it here. Then just started choosing the widget for customization and I came to know that labels cloud widget has been old looking on all blogs so I started doing something new to it. And made this colorful Flat UI label cloud widget. 

So, This is colorful Flat UI label cloud widget in which tags or labels are having multiple colors. That's why we've put "Colorful" word in its name. After this, It's look is inspired from Flat UI designs which is mostly famous these days. The colors which we've used in this widget are also Flat UI colors. Another specialty of this widget is that when someone hovers the mouse on any label it will give a beautiful effect on hover. This widget is customized using pure CSS3 and we've not used any JavaScript or any other heavy programming language which means that it will not affect on the loading speed of your blog. You can have its live demo by looking in the right sidebar of this blog. We're also using it here. So, let's start the tutorial on how can we implement this colorful Flat UI label cloud widget for Blogger.

Step 1. Adding Labels Cloud Widget

• Go To Blogger >> Layout >> Add a Gadget
• Choose "Labels" Widget.
• Make Settings Like The Below Image & "Save" It.

Now the widget has been added into the blog and let's customize the label cloud widget.

Step 2. Customizing Labels Cloud Widget

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTMl and Find For ]]></b:skin>
• Copy and Paste The Following Code Above ]]></b:skin>

/* Flat UI Labels Cloud By Www.BloggerYard.Com ---------------- */

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

• Click "Save Template".
• Congratulations! You've successfully customized colorful Flat UI label cloud widget in your blog.

Read More

you can Create Professional 404 Error Page in blogger

As we're discussing on Blogger's search preferences setting today here I'm back with another amazing tutorial and a professional 404 error page. After reading the title of the post, You've known about our today's topic. So let's begin the discuss. In the past with old Blogger interface we're unable to create a custom error page but now it's possible because now that option is also available in search preferences settings. In the past when someone enters into a not found page, The blogger used to show a message which was extremely different from original blogs. Well, These are old things which are now modern. Those who don't know about 404 Error page can read the below passage to understand it.

What is 404 Error Page ?

It is a web page which is being used by all websites to show the error when someone enters into a broken or not found location. In other words, when you enter an incorrect address then that page appears. Basically, In that page the error message and some options are added for better navigation. Got it ?

Professional Error Page

So, here I've brought a professional 404 error page or not found page for all Bloggers. This page is professional because of it is designed with CSS3 and it contains some great options for better navigation. First of all have a look on it.

LIVE DEMO

• 
  

Features

This page has some good features which I've listed below.

• Full Page Width : This page has full width which will hide your sidebar widgets section and that is what which makes this page more professional.
• User Friendly Message : It contains a user friendly message which will tell your readers that they have entered into an error page.
• Go Back Link (JavaScript Link) : Go back link is also added so that if your readers was reading an article then accidentally he/she clicked on any broken link and with the help of Go back link he/she will get your article back easily.
• Report Problem To Us (Link To Contact Page) : The reason of adding contact page link is that if any page of your blog is deleted then the user may report to you for better service.
• Go To Homepage (Link) : So this is a common homepage link for better navigation.
• Stylish Search Box : We've added an stylish search box in that page you that if your visitor is about to find something then he/she may search it easily with that search box.
• Big 404 Logo : In the last, this page contains a big 404 logo by which let your readers know that they have landed on a broken link or not found page.

How To Install This Page ?

Well, After reading about that professional error page now everybody may want to install it in their blogs. So this is free for everyone and you can easily install it by following the simple steps below.

• Go To Blogger >> Settings >> Search Preferences
• In the Crawlers and Errors Section, Look For Custom 404 Page and Click on "Edit".
• Now a box will appear where you have to paste the following code.

<!-- Blogger Yard 404 Page -->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do one of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a>
      <br/></li>
<li>Search Anything Using Below Search Box</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {

background: #FFF url(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

• Replace "CONTACT PAGE URL" With Your Contact Page Link
• Replace "HOMEPAGE URL" With Your Homepage Link 
• Click "Save Changes" & You Have Done!

Read More

Shareing Your Blog Posts On Google+ In Blogger Automatically 2015-2016

As we all know that Google is improving Blogger platform and introducing new features one by one. There is a good news for everyone who uses Blogger.com as his/her blogging platform that Google has recently introduced a new update by which we can easily share our blogger posts on Google+ automatically. Sharing the blog content on Google+ gives several benefits. First benefit is it drives the traffic from Google+ and secondly if you've the mega blog with a lot of fans on your Google+ profile then they will be get notified whenever you update your blog, this will help to serve your readers better. Third thing is that sharing posts on Google+ brings more power to your Google authorship and also in the search rankings.

Before this feature, there was another option which was being used by many bloggers to socialize their blog content on Google+ and it was that whenever you publish the new post on your blog then the prompt automatically pops up to share that latest post on Google+. Most of bloggers, was being annoyed by this and there was also option to disable that prompt. I think Blogger team has researched on it and found that introducing the automatically share feature will be better instead of prompt option. Well, Let's start the tutorial on how can we enable this latest feature to our blogs.

Auto Share Blogger Posts On Google+

There is not any long tutorial for enabling this feature but the most easiest thing you've to do is just tick mark the box. But here, I'll be guiding you little more informative.

Firstly, You need to connect the Google+ account to your blogger account. I think most of our friends have already connected the Google+ account to their blogger account but just for the newbies, Below screenshot will help them to connect that.

After connecting or reverting to the Google+ profile then you've to enable this latest feature which is about automatically share after publishing. To enable this, Just Go toBlogger >> Google+ and Tick Mark "Automatically Share After Posting".

Congratulations Mate! You've successfully enabled this latest feature. Now whenever you'll publish the new post on your blog then it will be automatically shared. Just publish post now for trying this feature.

Final Words

So friends, This was the quick update in which I've informed my readers about the latest update from Blogger. This is the fantastic feature and everyone must enable this feature just to save the time in sharing posts on Google and it also gives a lot of benefits. Get in touch with us and also subscribe us to know about the latest updates for Blogger. Don't forget to share your views in comments below! Take Care!

Read More

Adding Meta Description In Every Post In 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. That section really contains such great things and from today I'm going to discuss with you on each and every part of search preferences section. Well, So today we're going to learn the first part of search preferences which is Meta Description. In the old interface we were unable to use meta description in each and every post, we only used to add that description to homepage only by manually. But now every one can add it in every post and page without touching any HTML or XML coding. You just need to enable it from search preferences section.

What is Meta Description?

Meta description is an HTML or XML element that describes the web page to search engine's crawler. 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. 

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!

Now here is one problem! If you are using custom blogger template then continue reading this. 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. In order to work properly meta tags with custom blogger templates you will need to insert an short XML code in your template which we will solve this issue. Simple follow the below steps.

• Go To Blogger >> Template >> Edit HTML
• Search For <head> and Paste The Following Code Below <head>

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

• Save Your Template and You have successfully added meta tags for homepage.
• Now let's jump to next step. 

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. Is it not so easy?

Can Dogs eat Green Peppers

Read More

heath-tricks add Horizontal Social Buttons Bar Below Post Title In Blogger

Social networking buttons, plugins and widgets are known as one of the most important things for a blog as it helps in various places like gaining more traffic from social sites, allowing readers to share your posts and many more. Previously, we had shared manysocial and as well as other widgets which are placed in our widget library and today we're going to share another beautiful widget which is going to help you and your blog from many sides.

Horizontal Social Buttons Bar

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. This social buttons bar comes with a title which will help to get more shares and four different buttons from different social sites. These four buttons are Twitter's tweet button, Facebook's like button, Google Plus's +1 button and Stumble Upon's stumble it button. These all buttons are from well reputed social sites which are being used widely in the world and they will definitely help you, me and other or whoever use this, will get good number of traffic towards his blog from these social sites. And there is nothing to do for receiving traffic, you just need to place those buttons on your blog and your readers will automatically do the job if you've some loyal readers. I mean, they will socialize your content which can help you to receive good traffic. Basically, these buttons are built with XML, CSS, HTML and JavaScript which are used by developers of these buttons to prepare them. We've customized the coding of these buttons in such way that they will only load when they're needed and it really helps in improving the page load speed of your blog and it is also important to take a note about it while implementing new things in your blog.

Adding Horizontal Social Buttons Below Post Title In Blogger

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 >> Backup Your Template
• Click Edit HTML and Find For </head> 
• Just Above </head> Paste The Following Code.

<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 (){vara=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 Blogger Yard ----------------------------------- */
#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.

<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! 

Can Dogs eat Green Peppers

Read More

Adding Email Subscription Box In Header With Social Icons

Previously, we've created some widgets which were Socializer Widget, Email Subscription Widget and we  releasedTech Shadow blogger template. In that template we'd created the email subscription widget with social icons in header and here we're going to share that widget with all you guys. This is the best widget to increase the email subscribers instantly and the main thing is it's place. In header, it will be shown to every one and there will be a lot of chances that any visitor may subscribe you through that widget. Even you can see that we've also added the subscription widget in header. Installing this widget in your blog is not so difficult but before the tutorial let me tell you something about that widget.

• Also Read : Tips To Write Quality and Unique Content For Your Blog

Header Email Subscription Widget With Social Buttons

This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget is gonna obviously help you in increasing your email subscribers and social fans because this will be implemented in the header and header is the great place for attracting your visitors for subscribing you.

See Live Demo

• Dont Miss : Tips To Write SEO Friendly Blog Posts

Tutorial

Well, I've told you something about this widget and now you may be want to implement it in your blog. Don't worry you can do this just following the simple steps below.

• Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
• Choose HTML/JavaScript and Paste The Following Code In The Content Box

<style>

 #byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}
  #subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;}
  .subsbox-heading {font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
  .topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_TM85DiVoTtRx9v78rcv32r3eIkUESJQoURQAKJaLuhrhh-CKSL3m2Ap5Lv3lgricfMi1WWMTX-QDeJ1uJwqGbG-Dh0Cn0ctTyzku3jH06olddqE8qP6gUoTzm3gkED8GVMWti6zSwg/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}
  .topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DciElH0MrIUGBhV0yddCmvsve3HoyF3fla-bR-m69KsZ_E2tAFKvtDNbr_UROAKmKEbIrpj0LKRUUEmoQskXLwoRxIhG5xC980390iXite58xH-bw5Pm9vI22OOlobBOXWLMnvCaPlI/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:12px;  margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
  #socialsection {float:left;margin-top:20px;}
  .socialheading{font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
  .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}
.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
</style>

<!-- Top Subsbox By Www.BloggerYard.Com Start -->
<div id='byard-topsubsbox'>
<div id='subscriptionsection'>
<div class='subsbox-heading'>Subscribe For Free Updates!</div>
 <form action='http://feedburner.google.com/fb/a/mailverify?uri=heathtricks' class='byard-subsbox-form' method='post' target='_new'>
  <input class='topsubsboxname' name='name' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Name&apos;;}' onfocus='if (this.value == &apos;Your Name&apos;) {this.value = &apos;&apos;;}' value='Your Name'/>
  <input class='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Email Address&apos;;}' onfocus='if (this.value == &apos;Your Email Address&apos;) {this.value = &apos;&apos;;}' value='Your Email Address'/>
  <input class='topsubsboxbutton' type='submit' value='Sign Up!'/>
 </form>
  <p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We&#39;ll not spam mate! We promise.</p>

  </div>
<div class='socialicons'>
  <div class='socialheading'>Become Our Fan on Social Sites!</div>

<ul>
<li><a href='https://www.facebook.com/heathtricks'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMrtu28qzQ3iBH281jS5eDQIoD0F222kIilXJ87nUFGibLwbHydIZunyj5NcAgCypNZ2I7IBnvr8u3Ag4YlPzpCQfR5tZMqL6BZnWFogd_vYvhfCqxq5IPJ2K39Mnxy8KilrHuzn2B81jr/s1600/facebook_64.png' title='Facebook'/></a></li>
<li><a href='https://twitter.com/heathtricks'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBpcERlTMQZ2Tjz3hMgU3jSnyLk56ouPuBPq8krzICUV8kORU-9ZkFq-pkdYOvjbHK1qj7zCW90FS5NyEipjl0WLbbHtUueyx-Eq78QSKYM20WLwvRBAcCRyBrusUq8rLiq4Ucg_3ILzl/s1600/twitter_64.png' title='Twitter'/></a></li>
<li><a href='https://plus.google.com/101996924620264665717682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGCtmQ3no8w3H5vaCFucwgoz9piOS4XMhEZxxZvpB7ezs8-RRIFU3FVYjhnzJcgr5ISSE4wLV4Lr-mhpW-TTzPL8nKYzo336rG7UJzUqE4WFxUnBxlfV_ZgS6YzHu9umBHc7P80EICUgM/s1600/google-plus_64.png' title='Google +'/></a></li>
<li><a href='http://feeds.feedburner.com/heathtricks'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx_Da_z8IokFoEwhDJixRHj-kHSG83vYSMcqGp4m9L-pnHlOC6auu9w_ivzdDZQejOQqMSiQlC8roGX2YMpedHO3AHN4fhb0vTVS14hyIYW0h5vvAWW3rdTyUmbbXMUxu8wpRV4haQwdMN/s1600/rss_64.png' title='Rss'/></a></li>
<li><a href='http://pinterest.com/heathtricks/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkry2ngveFYeIR8dUMuuDO_Mr0mjm5t03f3gBfffFH0oqZHOM1LRDBl3SoaM_Ta_I_ZEtmHLPcX9j0VCqdMhc2BuH8S80h1WGSkn-UbHor4yfWxAwVGGKhd8pfGX350H7bUlQceVm65ka_/s1600/pinterest_64.png' title='Pinterest'/></a></li>
</ul>  </div>
    </div>
<!-- Top Subsbox By Www.BloggerYard.Com End -->

• Replace The Highlighted URLs With Yours
• Click "Save" and You've Done!

Read More

how to Adding Custom Robots.txt File In Blogger heathtricks

In our previous, we had discussed aboutcreating professional 404 error page and here we're back with another great and most important tutorial for all of you. Today we're going to enable a custom Robots.Txt file in Blogger which can really help you to index your blog in Google faster and it will also make your blog more search engine friendly. Robots.Txt file is used in every website but in the past with old Blogger interface we're unable to add that file in our blogs but now in the new interface which is really amazing with a lot of great features we can enable that file in Blogger. Those who don't know about Robots.Txt file can read the below passage to understand that file.

What is Robots.Txt File ?

That is a simple text file in which the website owner use to write the commands for the search engine's crawler. It means that we can instruct the search engine's crawler with that file that we part of our site can be indexed or not. That commands are written in different coding which is only for search engine's crawler. You can see your robots.txt file just by following the below URL.

http://www.yourdomain.com/robots.txt

 What Areas You Should Disallow For Crawling In Your Blog?

So, This question maybe coming in your mind that which areas of your blog you should disallow for crawling. In fact, You can disallow any area of your blog but there are some important areas for disallowing. If you disallow those areas then you blog will be more search engine friendly and that areas are Search Result pages, Archive pages and labels pages. However, Below I'm giving you an search engine friendly robots.txt file which will help you a lot.

Enable Custom Robots.txt File In Blogger

So, This process is so easy just follow the simple steps below.

• Go To Blogger >> Settings >> Search Preferences
• Look For Custom Robots.Txt Section In The Bottom and Edit It.

• Now a check box will appear tick mark "Yes" and a box will appear where you have to write the robots.txt file. So if you want to use our file then copy the code below and paste it in that box.

User-agent: Mediapartners-Google
User-agent: *
Disallow: /search?q=*
Disallow: /*?updated-max=*
Allow: /
Sitemap: http://www.yourdmomain.com/feeds/posts/default?orderby=updated

• Note : The first line "User-agent: Mediapartners-Google" is for Google AdSense. So if you are using Google AdSense in your blog then remain it same otherwise remove it. 
• Click "Save Changes".

After adding the file now you must be wanted to understand your file that what we have allowed and disallowed. So, I've listed every command with detail below.

Explanations

• User-agent: Mediapartners-Google : So, This is a first command which is for those blogs which are using Google AdSense if you are not using Google AdSense then remove it. In this command, we're telling the AdSense's separate robot that crawl all pages which are having AdSense Ads.
• User-agent: * : Here the User-agent is calling the robot and * is for all the search engine's robots like Google, Yahoo etc.
• Disallow: /search?q=* : This line tells the search engine's crawler not to crawl the search pages.
• Disallow: /*?updated-max=* : This one disallows the search engine's crawler to do not index or crawl label or navigation pages.
• Allow: / : This one allows to index the homepage or your blog.
• Sitemap : So this last command tells the search engine's crawler to index the every new or updated post.

Got It ?

How Can I Add a Command For Disallowing Any Page?

So if you are interested in adding your own command then you can also do it. Here is an example for disallowing the contact page Disallow: /p/contact-us.html . So, first you will need to replace /p/contact-us.html which is other part of the domain with another. It mean you just need to exclude the main domain and just type remain part of the page. Two things you should remember that add your custom command below User-agent: * and per line = per command. If you still have not got it then ask in comments please.

Read More