How To Customize Blogger Blog Using Template Designer

Adding css to our template makes our blog more pretty to look but sometimes we face encounter especially if we are new in using the new Blogger template design. We find difficulty in searching this code ]]></b:skin>. But don't worry because there is still another and more easy way of putting the css code in your template and that this through Template Designer.

(Supposing that you are going to add borders to your sidebar and below is the set of code).

.sidebar h2 {

border-top:1px solid #000000;
border-right :1px solid #000000;
border-bottom :1px solid #000000;
border-left :5px solid #000000;

margin- top;0
margin- right;0
margin- bottom;0
margin- left;0
padding:0 0.2em;
line-height:1.5em;
}

Simply follow the steps below;

Step 1. Go to your Blogger Dashboard >> Customize

Step 2. Click Advanced then scroll down and select Add CSS

Step 3. At the right side is a blank field, this is intended for the css area. Paste the css code above in this place.

Step 4. And finally click the Apply to Blog button

Note:

• You can only access or edit those CSS using this technique whom you added manually in your Blogger Template,meaning not the default one.
• There's  no need to put the tag <style> paste your css here</style>.
• If you replace or change a new template on your blog, all the css that you  have added will be automatically be deleted.

Hope  this tutorial is helpful to you in some other ways. God Bless Pal! 

How To Add Widget Beside Post Body

In this post, I will teach you how to add any widget, it would be an ad or any code (recent comment widget, facebook like box, popular posts widget and the like) that you want to place just beside your written article or post body section of your blog/site. Have a look at the image below.

*Adding Widget Beside Post Body Individually

Step 1. Go to Blogger >>New Post or (select another post)
Step 2. Copy the code below and paste it above your written post/article (it should be in the top most corner) .

<div class="widget-beside-post" style="clear: left; display: inline-block; float: left;height: 400px; margin: 12px 20px -50px 0px; width: 234px;">Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....</div>

Example below:

<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=  https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&amp;width=234&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;" style="background: #fafafa; border: 0 solid #ddd; height: 337px; overflow: hidden; width: 234px;"></iframe>
</div>

In the above example, I used my facebook like box widget to appear beside my written article. 

Step 3. Save/Publish/Update your work.

*Adding Widget/Ad To All Your Written Articles/Posts Automatically

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML ( have a back-up of your template)
Step 2. Find the code below, choose the third occurrence of the code

<data:post.body/>

Step 3. Just above the code in step 2, paste the code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div></b:if></b:if>

Step 4. Save your Template and your done!

Simple Customization:

• Change left to right if you want to position the widget in the right side of your post.


• Adjust the width  "234px" and the height" 400px" of your widget depending on your likeness.

Easy and Simple! isn't it?

If you have problems encountered in following this tutorial, you can leave your comment below. Your thoughts are highly valued here in MBS.

Always Say A Prayer!