How to Add Different Background Color or Image in Each Blogger Post

When you have multiple authors on a blog and want to make a specific post stand-out, then you can change your posts background color or place a background image behind them, each time is needed. Therefore, this tutorial will show you how to style each post differently by adding some codes in your Blogger posts. (this wont take effect if you have the read more function enabled on your blog)

 Demo

How to Change the Color of the Post Background

When you create a post, switch to HTML, near the Compose tab and add the following code just at the beginning and at the end of your post content.

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

</div>

• add the red line at the BEGINNING of your post.
• add the div tag in blue at the END of your post.
• replace the part in green with your own color (search for colors hex value)
• "Your text here...." is where the Post content goes

Its done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts as well or you can change/remove it later.

Heres the example of the placed code in the Post Edit box:

How to Add a Background Image in a Blogger Post

Add the following code just at the beginning and end of your post content.

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

</div>

• in green, you need to paste the URL address of your hosted picture (use Photobucket, Tinypic etc.)
• the red line has to be added at the beginning of your post.
• the blue part has to be added where your post ends.
• "Your text here...." is where your Post content should be

Now click Publish and you are done.

Read More..

Display post author date labels and comments with icons below post titles

When there are no comments made to your posts, theres a link that says Be the First to comment! and when there is just one comment it says 1 comment so far. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:

Steps:
 
Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:

Step 2. Select the "Expand widgets templates" box

Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):

<div class=post-header-line-1>

If you cant find the code above, look for this one:

    <div class=post-header>

Step 4. Paste the following code below/after the code above:

<font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibni4K6hf9jalTrpsctOB95N96L4vD84kShFA4iijEpNEz5wdf6iTd8u8sc8Zif3y4jXyBvST-UGrhcm3t0iLmoAEX1p8iQ4AYoyDRn8j8mnRozCjWtnQNQt3Ip1f1206xPhAvuhLEr-VT/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><data:post.author/></font> | <font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOX8qPRxdB-bJJa7Nj15gWkBLFqjS2bltsTIfxj_sG91dQIghuAN0CldP8qEQlIyIC8O4366-GwhuecYrCCcXkOdZsD_U6IbUj5JzwVgbON3ngcelTGAKkArEdVetRVZnLL_OWMkJVJ1l/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><data:post.timestamp/></font> | <font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsWSje38aM7O8whHWD5cFgN8uV2bIORF7ySQw4VndJ4NFvZPOf7whpw4iF9mwZDlFaVoEF6i_PKk8xzUc04fsexTAOGvjuscqOAENlcEGcLF8cYCx5TndJ7OJnnhd1QkOiHnBH-ixHsGb/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><b:if cond=data:post.labels>
<b:loop values=data:post.labels var=label>
<a expr:href=data:label.url + &quot;?max-results=8&quot; rel=tag><data:label.name/></a>
<b:if cond=data:label.isLast != &quot;true&quot;>|</b:if>
</b:loop>
</b:if></font>
<span class=post-comment-link style=Float:right;>
        <b:if cond=data:blog.pageType != &quot;item&quot;>
          <b:if cond=data:post.allowComments>
            <a class=comment-link expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick style=background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTeKPl10dph3Q0JzhsbhXXa9AwFfC4kqUWXNfq_8qsncdTmOOrqQLG89oIOPBxGrMcHoGEDpeV_GWNGZ4P14mQCVMw5GzneIro0tMQkDroNlMjxv6-xY65UvxPr0duvXur5VICQOuXcu4/s1600/comment-icon.png) no-repeat;Padding-left:20px;><b:if cond=data:post.numComments == 0>Be the first to comment!<b:else/> <b:if cond=data:post.numComments == 1><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

• Red - Author
• Green - Date
• Blue - Labels
• Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and youre done!

Read More..

How to add an image next to Blogger Post Title

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above.

Show Image Icon before Blogger Post Title

Step 1:

First thing first you have to do is to prepare an image. After that youll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You dont want to see a huge image next to your post title.

Step 2: Go to Dashboard - Template - Edit HTML - Proceed if needed

Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code:

<b:includable id=post var=post>

Step 4. After you found it, click on the left arrow next to it to expand the widgets code

Step 5. Then delete it until you reach to <div class=post-header>:

              <b:includable id=post var=post>
  <div class=post hentry itemprop=blogPost itemscope=itemscope itemtype=http://schema.org/BlogPosting>
    <b:if cond=data:post.firstImageUrl>
      <meta expr:content=data:post.firstImageUrl itemprop=image_url/>
    </b:if>
    <meta expr:content=data:blog.blogId itemprop=blogId/>
    <meta expr:content=data:post.id itemprop=postId/>

    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
      <h3 class=post-title entry-title itemprop=name>
      <b:if cond=data:post.link>
        <a expr:href=data:post.link><data:post.title/></a>
      <b:else/>
        <b:if cond=data:post.url>
          <b:if cond=data:blog.url != data:post.url>
            <a expr:href=data:post.url><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

The code to be deleted:

Step 6:

Paste the following code in the place of the deleted code in Step 5:

<b:includable id=post var=post>
  <div class=post hentry itemprop=blogPost itemscope=itemscope itemtype=http://schema.org/BlogPosting>
    <b:if cond=data:post.firstImageUrl>
      <meta expr:content=data:post.firstImageUrl itemprop=image_url/>
    </b:if>
    <meta expr:content=data:blog.blogId itemprop=blogId/>
    <meta expr:content=data:post.id itemprop=postId/>

    <a expr:name=data:post.id/>
    <b:if cond=data:post.title>
      <table><tr>
        <td class=posttitle>
           <img src=IMAGE-URL/></td>
        <td><h3 class=post-title entry-title itemprop=name>
      <b:if cond=data:post.link>
        <a expr:href=data:post.link><data:post.title/></a>
      <b:else/>
        <b:if cond=data:post.url>
          <b:if cond=data:blog.url != data:post.url>
            <a expr:href=data:post.url><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
        </td>
        </tr></table>
     
      <style>
        h3.post-title {
          margin: 0px !important;
        }
      </style>
   
    </b:if>

Step 7:

Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that youve gotten from Step 1).

Step 8: Save the Template and thats it! Enjoy :)

Read More..

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, choose "HTML/JavaScript"

 Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.

Step 5. Click on Save arrangement.

Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.

Read More..

How to change Blogger Post A Comment Message

In this tutorial i will show you how to replace the Post A Comment text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so lets get started.

How to replace Post a Comment with an image

To replace  "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked in red:

<a expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick>
<data:postCommentMsg/></a>

...and for this one too:

<h4 id=comment-post-message><data:postCommentMsg/></h4>

Step 4. Replace <data:postCommentMsg/> with one of the below images codes:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHQJiijAjvhg4hjd6Iwg1svDiHTT6F53b-WA8GDJS796kUhnmwXvY22S3Dsf8AL7LhDYOevHcxOKp6ALkNQw26aRMkA_CiMsCWSCpd2_lh4lg3TwuhhrvyiTiIBX-DGacUgbBzohNf00/s1600/leave+a+comment.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbO5huXcNQ8iALFrxIkovU-R-lxUch_eDl7-o5ESeqhsig6oe79sRZB5_qxpw9GiNrvHwlV62XKb8WamsPugb1hu24NPCPaxRlNi6Otnq3p8G55ztBLJUaTyMtJq6NppUDQsW-tKJ9ywQ/s1600/Post+a+comment+blogger.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxL4IbwMEAaIWlfqIp1vqiu7jHGd1gaN95uYxZMW1w9_rAV3srL8_PowX7j-FqNCAh4PgoztkD0ZlpEKPWcjPfg5ACF60wgiDYTfq6OdgGKrux7Q6lSSuZ_DrHpXL2BrfQ8by-Rp4mzwl/s1600/animated+comment+arrow.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYx5EMei6FmhVT-BAhcI3zeJaz39qqinLq2QMkDfRhdjNEPlLXePgJV52gJC6divDEN58Ih-Dz6rWUXmtp-ZAD9zfW1-UTALirtw-eJGoQ7px8WyXlwKIPW8VyTXqVcj7Tr7GKCrcqoE-/s1600/leave+a+comment2.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo3AZ6qRuYCRsVhWaPPBWuHxr1XJjiqMcY_poDgmD1aivLBckyr78szia2ebtHQ1L2-9svMS-ZMqyl3bKJvreeOvHRHzYCIj4HXlJhNp4pQ4BrQ0RzXQVcW4cR-nyat7AHWrEZDRlCBTkW/s1600/comment.gif" />

You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it):

<p><data:blogCommentMessage/></p>

Step 6. Save Your Template.

Thats it! I hope you like your new comment form !

Read More..