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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6jdvuG1j-W1XyRzpPX3pB4LjGFom7J51HkJDvCVeigGoAgZ0B_bYrTPZCl_5GLd3kvg38nagCuHGkvSEkc0GJmj6p6xZKhV1JQWu8TX0B_mz-8qJVe0TEwOxSAxNHbR8L6p7RmbT_8lvl/s0/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