UrduBloggingHub | Informatvie Blog About SEO & Blogging: The 6 Really Obvious Ways To Customize Blogger Posts Better That You Ever Did

This is complete guide for customizing posts area in blogger. In this guide we will discuss about customizing post font, adding border around posts, customizing post title, adding shadow around posts, customizing headings inside the posts, adding share buttons to posts etc. It is very simple guide, you can easily customize blogger posts with help of this guide.

Customizing Post Font:

In this part of the tutorial you will learn about changing font of the text in the post body.

Step 1: Login to your blogger Dashboard.

Step 2: Select Template option and Click on Edit HTML option.

Step 3: In the Template code find following code.

.post {

Step 4: Now paste following code just below the above code and Save the template.

font-size:14px ;font-family:Georgia;

Note : You can Change the value of font-family and font-size according to your choice.

Customizing Font of Post Title In Blogger:

Step 1: In your blog’s template code find following code.

h3.post-title {

Some code here……

}

Step 2: Replace above code with following code.

h3.post-title {color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:1.1em;padding-bottom:5px;text-shadow:#64665b 0px 1px 1px;;font-size:32px;}

Step 3: Save and Preview your blog to see new changes.


Note : You can change the font color, size and family according to your choice.

Adding Border Around Blogger Posts:

Step 1: In your template code find following code.

.post {

Step 2: Paste following code just below the above code.

border:1px solid #dcdcdc;
padding:13px;

Note : You can change border color, type and size according to your choice.

Adding Shadow Around Blogger Posts:

Step 1: In your template code find following code.

.post {

Step 2: Paste following code just below the above code.

HTML Code:

box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;

Note : You can change shadow color and size according to your choice.

Customizing Headings Inside The Posts

Step 1: In the Template code find ]]></b:skin>

Step 2: Paste following code just above it and save the template.

HTML Code:

.post-body h1
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:26px; padding-left:20px;;
}
.post-body h3
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:22px; padding-left:20px;;
}
.post-body h2
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:24px; padding-left:20px;;
}
.post-body h4
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:20px; padding-left:20px;;
}
.post-body h5
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:18px; padding-left:20px;;
}
.post-body h6
{
margin-left:-20px;
color:#333;font-family:Helvetica,Arial;font-weight:bold;line-height:40px;;padding-bottom:5px;text-shadow:0 1px 0 #FFF;font-size:16px; padding-left:20px;;
}

Note: In the above code you can change font color, font family and font size according to your choice.

Adding Share Buttons Below Blogger Posts:

Addthis share buttons for blogger

Step 1: Find <data:post.body/> in your template code.

Step 2: Paste following code just below it and save the template.

HTML Code:

<!-- AddThis Button BEGIN -->
    <br/>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51bafe4d7ce14f20"></script>
<!-- AddThis Button END -->

Now,you have successfully customize your blogger blog post.

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)