How to Change Width of Body, Post and Sidebar in Blogger

Changing  the width of  body, post and sidebar in Blogger blog is a must in order to make some changes that would be advantageous to your part. First in line is you can put a  wider stuffs/widgets on your sidebar  especially for  your Adsense ad to increase its click through rate (CTR). Secondly, you can add a  larger image size  in your posts which gives your blog a better and professional looks.
change width of body post and sidebar


I had tried to search the tag like " #Outer-Wrapper " ,  "#main-wrapper " and  " #sidebar-wrapper" but none of these code is present in my Blogger's Template so I decided to use the most easy way in changing the width of  my blog's body  and sidebar through  Blogger Template Designer. This technique is safe and more comfortable to use. Without much words to say let us now follow the very simple steps below.

Changing Width of Body and Sidebar in Blogger


Step 1. Go to your Blogger Dashboard >> Template >> Back-up
Step 2. Click Customize
Step 3. Hit  the Adjust widths button. Here, you can adjust the width of your entire blog and its sidebar depending upon your likeness.
change width of post body snd sidebar

Step 4.  Now hit the Apply to Blog button
change width of blog post body snd sidebar


Adjust the width of post by putting CSS


Copy the code below and paste it above the code ]]></b:skin>

.post { background: #fff; margin: 0px 0px 35px;
width:680px;
padding: 10px 15px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
box-shadow: 1px 3px 4px rgb(188, 188, 188);
}
Note: 
In my own blog which has an entire width of 1100px and a sidebar of 320px, the most  fit post width is 680px. Just change the value 680px depending upon your entire blog's width. You can immediately see the effect since the preview page is located  in the bottom part of it.

Let me hear your thoughts about this article on how to change width of body, post and sidebar in your blog?
Happy Blogging Buddies ;-)

Optimize H1,H2 & H3 heading tags for better seo in Blogger


One of the basic SEO tips that a goal-oriented blogger must apply in his HTML document is the proper use of HEADER Tags. As we all know that there are six (6) heading tags namely: - H1, H2, H3,H4, H5 and H6. Among these six tags, H1 tag is the most important tag followed by H2, H3 and so on. By default (not yet customized) Blogger uses H1 tags for the blog title (ex. Bloggingtips and trix), H3 for post titles (ex. How To Add Hover Effect To Images In Posts) and H2 for sidebar titles (ex. Popular Posts!). Having proper weighted headings is really important from an SEO perspective since search engines use headings to get an idea  or summary of what your post is all about and this article will help you to assign heading tags based on its importance.
proper use of heading tags for better seo

How to use heading tags


The most important part of your article are the headings and it should be wrapped with the proper heading tags in order to be seo friendly. The most important heading on the page should we wrapped in an H1  tag. For your post page, the most important heading is  the title (post title) of the blog entry.


Observe the example below:


<h1>Your Blog Title (ex. Blogging Tips and Trix</h1>

<h2> Your post title (ex. How To Add Hover Effect To Images In Posts </h2>

<h2>Sidebar Gadget title (ex.Popular Posts!)</h2>

<h3>Second post's title (ex. Putting Hover Effect To All Post Images)</h3>

How to use the Blogger Post editor page in designating  Header tags


Step 1. Go to Blogger Dashboard >> Click Post
Step 2. Switch your Blogger Post editor's page in HTML mode.
Step 3.  Hit the button that shows Normal as shown in screenshot below and click on either “Heading” (<h2>), “Subheading” (<h3>), or  “Minor heading” (<h4>) in the toolbar depending the importance of your header. You can also verify if you had added the header tags correctly by switching Blogger Post editor's page in HTML mode.
optimize header tags in blogger

You can visit this link to view more on how to use Header tags in Blogger. 
Let me hear your feedbacks and experiences in using Header tags in Blogger. Peace Buddies!

7 Reasons Why Bloggers Fail To Make Money

reasons why bloggers fail to earn money
I believed that making money via blogging takes a lot of time and  the moment that we will stop what we had started makes the whole thing a pretty useless one. Try to ask ourselves these two questions.
1. Do I make enough money from my blog/site?
2. Do I deserve the money that I have received from my blog?
It is hard to accept the fact that some of us don't make enough of it and yes we deserved the gain that we got from our blogs wether it is high or low . There are things that we made a few months or years ago that had become incredibly ineffective or inefficient that lead of what we are now today! The worst of all those things is if we give up and stopped blogging completely. What an horrible decision! Isn't it?

"There's always a rainbow  after a heavy rain"

My dear, blogging  is one of the best source of descent income nowadays! Try to evaluate your blog from the highest part  to the lowest part of it. Examine all the sides if it is user's friendly or not. Then ask again if "Why I am not making money right this moment?"

Below might be the answer for that question:

1. Design Is a MUST!


We always read article online that we should always make articles which are unique, full of sense and new to our readers but is your blog's design really gowith your content? Perhaps NO! There is one element that you probably forgot and that is  DESIGN. Assuming that you landed a certain a blog and you found out that it is poorly desinged, would you even bother to read the content?  Perhaps no, am I right? Chances are you'd just leave and think that the page was under construction or a spam. If your blog isn't well designed even if you write  a terrific article, your visitors will fly away and look for another which is more professional in looks.

Try to look the basic things in blogging like your image size, fonts. These are common mistakes but it has a big impact to your career. Make sure that  your images are inline with the topic and the  texts are  easy to read, and people will read it. It's really that simple thing.

2. Bloggers Forget The Main Purpose.


Basically the main reason why we write is to share what we have in our minds. And sad to say that this was being forgotten by majority of us. Earning money through it is just a secondary reason . Blogging is a way to share what we have know and let the world know also via internet.

In the first place, if people are happy with your articles written in return the will also pay you unconsciously.

3. User's Can't Navigate Your Site


Does your site contains navigation bar to make your them (readers) stay long in reading some related articles?. From the name itself (WEBSITE) which means a set of related web pages served from a single web domain. A website is not just a single page, but rather a series of pages that link together. Don't let your readers find difficult to navigate your site or else they  will not stay long and consequently loss them slow by slow. Make your customers satisfied and treat them as VIP.

Also read:
How to create sitemap for Blogger?
Adding Google Custom Search Engine Box Beside Menu Bar/ Navigation Bar 
Blogger Notification Bar With Up and Down Closeable Button

Utilize your most popular posts to increase your blog traffic by creating navigation bar entries  on it. Add drop-downs for categories and tags. Make sure there's a clear and click-able "home" button. In other words, make sure that you can get essentially anywhere on the site, no matter your current page.

4. You Don't  Pleased Your Blog  Readers And Advertisers


You will not earn if you don't have any readers or customers and at  the same time if you don't even one advertisers promoting their products through your blog. Selling stuff is on of the most effective and easiest way to make money  via blogging these days. Your readers are your potential clients for it. You can use your blog in big extent to inform and entertain them, and in small scale to steer them towards the  products that you promote. It is an equilibrium that has worked  between bloggers and advertisers seeking to make more money than is available through CPM  ( cost per impression) costadvertising.

As usual customers find it easy if they will not fill out many extra forms and take only fewer steps to add an item to a cart and finish an order in a very short period of time. Offer them more ways to pay like Pay pal but there are also alternative ways to pay online. Offering mobile payments is another way to make things easier for your customers. Ease leads to sales. It's the  the no.1 lesson any online businessperson should never forget.

5. Practicing  Black Hat SEO Than  Better SEO For Your Site To Rank In Google


Before, during the early part of  this 21st century there was a gold rush on the internet. Google had risen to prominence since she was driving obscene amounts of traffic. If you ranked highly for a commercial search term, you were almost guaranteed sales. Of course, when the company  (Google) realized all the money  the people were making within its ecosystem, they decided to make it much more difficult to rank for highly commercial search terms. Here comes now the different SEO to make our sites more visible than to our competitors. Those who practiced Black  Hat SEO have been penalized by Google and bloggers who  still uses them in these days are continue to be penalized. If  you not rank as highly as before, it is highly recommended that you follow Google's guidelines for high quality sites to gain back those prestige  status. At the end  we will be thankful to Google for the potential sales it can bring -- if we do it right.

6. You Are Hiding Yourself To People


Sounds bad buddies but it is true that sometimes we forget to show our selves publicly. As customers they tend to buy something if they  know the source of it  like the manufacturers, the country where it was made and the store where it was sold.  Big names (brands) have a huge advantage here. They're instantly recognized, and so people trust them more naturally than those names which are not so popular with their ears. When you're a blogger  especially an newbie one  and try to sell products or even services on your site, you have to be forthcoming with people. So  select a picture of yours which  looks visitors' friendly. Tell a full story on your About page. Not just what you do, but who you are. Provide your email address. Contact forms just don't cut it and link to all of your social profiles like facebook, twitter, google plus etc. The more people get to know you, the more they will  trust their money to you.

7. Don't Follow  Advertisers TOS


Some Bloggers  felt depressed or even ended their career once they are banned  by their ads advertisers for violating their respective terms and conditions (TOS).Don't force yourself to earn easy money by practicing techniques which are not in line with the rules of your advertisers because it is also unfair  to their part to pay money which doesn't deserve to be yours! Don't be jealous with other bloggers  instead  but make them as your inspiration.

Also Read:
Basic Tips to Avoid Adsense Account Banned (Updated)

If you're not making  money with your blog,  perhaps you're failing at one of the points listed above. As far as I've seen, they're the biggest reasons why bloggers fail to make money online.
DON'T BE ONE OF THEM!

Let me know your own experienced  on making money online or if  you have any other reasons that blogger fail to make money please share it below.
Happy Earning Bloggers!!!

HTML and CSS Previewer for Blogger

Please use our HTML and CSS Previer/Generator to view your applications instantly.
Step 1. Insert your CSS code between the <style>......</style> and HTML after it <style> </style>......... as shown in the table below.
Step 2. Finally, Click the Preview button to see your css/html application.
Step 3. Click the Clear button to add another set of  CSS and HTML, then repeat the steps/procedures above (this step is optional).

HTML Editor and CSS Generator




How To Add Responsive Slider Widget For Blogger Blog

Adding responsive slider widget for your Blogger blog is necesssary especially if you want to have a better user experience. They can use the silder button (next-previous) to select the image with a corresponding post that link on it. This slider is easy to use and to customize so that you can adjust it according to your likeness.
add responsive image slider for blogger

Also read:

Add Responsive Slider Widget For Blogger Blog


Step 1. Go to your Blogger Dashboard >> Layout >> Add A Gadget, then choose HTML/JavaScript
Step 2. Paste the code below inside it.

<style type='text/css'>
.btt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
.rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
ul.rslides:hover .rslides_nav {  display: block;  }
.prev {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
</style>
<script type='text/javascript'>
/*<![CDATA[*/
  $(function() {
    $(".rslides").responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 3000,
      nav: true,
      pause: true,
      prevText: "Previous",
      nextText: "Next",
      navContainer: "ul.rslides",
    });
  });
/*]]>*/</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'>
</script>
<div class="btt-slider">
<ul class="rslides">
<li><a href="http://bloggingtipsandtrix.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

Note: If your blog already have a jQuery Plugin then remove the highlighted code.
(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

Customization:


Replace http://bloggingtipsandtrix.blogspot.com/ with your  own link.
Then Replace http://img-url.com/ with the image link you want to show in the slider. Click here how to get the image link.
Step 3. Save the widget and you're done buddies. See now  your blog with its responsive image slider.( =D
Hope you learned something with this tutorial and Stay tuned with our coming posts!
Reference: btnt

Add Multi Menu Tabs Widget in Blogger Sidebar

Hello guys, I wanna share you a trick about adding Multi Menu Tabs Widget in  your Blogger sidebar. This widget looks similar to Wordpress blog and therefore it is more good looking. Some features here are:
  • You can add as many widgets as you want inside a single tab/line.

  • Beautiful and highly customizable CSS.

  • Jquery effects are added this time to the tab views.
add wordprees multitab widget in blogger

Without much word to say, let us now learn how to add this professional looking tab widget into your Blogger sidebar . Don't worry dear because we will make this tutorial easy and simple to install.

How To Add this Multi Tabbed Widget To Blogger?


We will divide tutorial  into   three easy parts which are:

  • Adding  JQuery and JavaScript to your Blogger templates

  • Adding the CSS

  • Adding the HTML

Adding the JQuery and JavaScript to your Blogger Templates


Step 1. Go To Blogger >> Design >> Edit HTML ( Backup your template for reference)
Step 2. Search for
]]></b:skin>
Step 3. Just below or after that code in (Step 2) paste this code
Step 4. Save your template and your halfway done!

Adding the CSS


Step 1.  Inside your template, again  search for  the code below
]]></b:skin>
Step 2. Just above it paste the code below,


/*---- Multi Tab Widget for Sidebar  by BTT ----*/

.BTT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.BTT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.BTT-tabs li:first-child{margin:0}
.BTT-tabs li a{color:#fff;background:#158aee;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;border-radius:5px;-webkit-box-shadow: 0 -2px 30px #1751ff;
box-shadow: 0 2px 6px #1751ff;
border-top: 1px solid #1484fc;
border-bottom: 1px solid #1484fc;}
.BTT-tabs li a:hover,.BTT-tabs li a.BTT-tabs-current{background:#8168FD;color:#fff;text-decoration:none}
.BTT-tabs-content{border: 1px dotted #ddd}
.BTT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Adding the HTML


Step 1.  Search/look for  the code below
<div id='sidebar-wrapper'>

or
<div class='column-right-inner'>

Step 2. Just below that code in step 1. paste the code below,

<div class='BTT-tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                $(&quot;ul.BTT-tabs-widget-BTT-id li:first a&quot;).addClass(&quot;BTT-tabs-current&quot;).show();
                $(&quot;.BTT-tabs-content-widget-BTT-id:first&quot;).show();
                $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).click(function() {
                    $(&quot;ul.BTT-tabs-widget-BTT-id li a&quot;).removeClass(&quot;BTT-tabs-current a&quot;);
                    $(this).addClass(&quot;BTT-tabs-current&quot;);
                    $(&quot;.BTT-tabs-content-widget-BTT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='BTT-tabs BTT-tabs-widget-BTT-id'>
<li><a href='#widget-BTT-id1'>About</a></li>
<li><a href='#widget-BTT-id2'>Blog Archive</a></li>
<li><a href='#widget-BTT-id3'>Follow by Email</a></li>
</ul>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                    
</div>
<div style='clear:both;'/>                      
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                      
</div>
                     
<div style='clear:both;'/>
<div class='BTT-tabs-content BTT-tabs-content-widget-BTT-id' id='widget-BTT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<div style='clear:both;'/>
You can replace About Me, Blog Archive and Follow by Email with your Widget Titles that you will be adding.

Step 3.  Now Go To Page Elements and you will see something like the screenshot below,
add multitab widget ti blogger sidebar


Let me know how you find it?

Hope this tutorial help you in some other ways. Peace and blessings buddies =D
Credits from: MBT