Blogging Tutorial

Installing ads under posts - As informed in the previous post that blogger now has supported read more system, Kang Rohman remind you that my old posts related to “read more” function and code are no longer useful to be implemented in your blogger blogs. Those posts have been out of date and needs updating. One of the old posts to be updated is how to install ads under posts. Why does Kang Rohman highlight this thing? Because on post about Blogger Read More System yesterday, many commentators are worried about their Under-Post ads will not work properly again.

One to be remembered that this technique is not for only installing the ads, but also for installing banners, messages, subscription information, and others that are placed under posts. You also should know that the ads would not appear in the homepage, but under posts when the posts are displayed full by clicking the “Read More” link.

The technique used is usually as below:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Or some are like this:

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Both are right because the additional code <p>…</p> is HTML code for paragraph or for making different lines. To install the ads, messages, or anything else, you have to add the additional code like this:

<div class='post-body entry-content'>
<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<p> Your ads code, banners, alert or anything paste in here! </p>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

It’s very easy, right? So you do not need to worry about Blogger Read More system, because you can adapt.

Need to remember, some ads codes such as Adsense, Adbrite, and others cannot be installed directly there, but you need to parse it. For this trick, you can read my old post about Placing Google Adsense Under The Posting.

Still confused how to install ads under posts? Below is the trick to make you easy to practice:

1. Please log in to Blogger with your ID
2. Click Layout
3. Click Edit HTML tab. Then backup your template first
4. Check the small box next to “Expand Template Widget”

   

5. Find this code:
   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   

6. Please add the code in red and green printed:

   <div class='post-body entry-content'>
   <data:post.body/>

   <b:if cond='data:blog.pageType == "item"'>

   <p> Your ads code, banners, alert or anything paste in here! </p>

   </b:if>

   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

7. Click SAVE TEMPLATE button
8. Done

For techniques related to New “Read More”, Kang Rohman will try to write at the next posts.

As we know that now Blogger has supported the function to cut off the article or known as Read more function. But recently, the automatic Read more is more popular because the automatic Read more will cut off the posts automatically without doing anything.


If you want your blog has the automatic Read more function, you can follow the easy steps below. Even Kang Rohman has discussed it previously in another blog, at blogtemplate4u.
The following are the steps:

1. Login to blogger with your ID.
2. Click Layout
3. Click Edit HTML
4. Click Download Full Template and backup your template to anticipate if error occurs.
5. Tick the small box beside the words Expand Widget Templates.
   
   
   
6. Copy and paste the JavaScript below exactly above the code </head>
   
   
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script> 

   
   
   
   Or you can download this script: download
   
   
   
   
7. Find the code <data:post.body/> on your template (tips: press Ctrl + F on your keyboard then write <data:post.body/> and hit Enter).
8. Remove the code and change with the code below:
   
   
   
   
   
   
   
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   </b:if>

   
   
   
9. Click SAVE TEMPLATE.
10. Done

By installing the script, your posts will be cut off automatically by the Read more function. Something interesting from this script is that it will create a thumbnail from the image that you include in your post.


In additional, you can adjust the value of the code below to fit your posts height.


summary noimg= 430 – the height of article’s cutting without image

summary img=340 – the height of article’s cutting with image




Enjoy!

Customizing the display of Read More – Since news about Read More system in blogger is still hot, talking about that can be still interesting, so Kang Rohman, at this chance, wants to try to deliver a description about how to customize the text “Read More” into more interesting one than before.

By default, the display of “Read more »" is like this:

 

The font will adopt the font in your template setting. The color of the link will be the same as the link you use. The display of the “Read More” is actually customizable. You can create your own text or image to replace the default text as above so that your blog can be more beautiful overall.

As the basic knowledge for you, below is the code of Blogger read more:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

 

By knowing the basic code, we can create our own “Read More” variations.

 

• To make Read More appear on the right

By default, “Read more” will appear on the left, but if you want to display it on the right, you can add the code like this:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 

</div>

</div>
    </b:if>

 

Or if you like installing at CSS, you can add like this:

Place above the code ]]></b:skin>

.readmore { float:right;padding: 10px 0px 5px 0px; }

 

and place this in the body:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div class='readmore'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 

</div>

      </div>
    </b:if>

 

• To make “Read More” printed in Bold

To make “Read More” printed in Bold, you only add the code <strong> … </strong> or <b> … </b>. e.g. :

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
      </div>
    </b:if>

 

• To make “Read More” with post title

Your “Read more” can be displayed with post title, and the code would be:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;&#8594;&#160;
<data:post.title/></a>
      </div>
    </b:if>

 

• To make/replace “Read More” with banner

If you think your text of “Read more” is not so interesting, you can replace it with the button or banner, e.g.:

 

The code format would be:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
      <a expr:href='data:post.url + &quot;#more&quot;'><img src='YourImageURL' alt='read more'/></a>

</div>
    </b:if>

 

The real example as below:

 

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
       <a expr:href='data:post.url + &quot;#more&quot;'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBSKt9CTt5wsfChB4oHFY5cJrg0QdbrQTaFy4sLluXjrDaZtd4ncW2LAOOB5uvrFE5C-tpylaSDftJEPMMnohAXEXugefXCnVVB_VCasKxqSpe8g2y1rQaJcX3fetQd8qtmwQa6sU1jo/[1].png' alt='read more'/></a>

      </div>
    </b:if>

 

And you can create tens or thousands of Read More variations to beautify your blog. Now if you are still upset with that, the following are the steps:

 

1. Please login to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Check the small box next to “Expand Template Widget”

   

5. Find the code similar to:

   <div class='post-body entry-content'>
         <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

    

6. Please replace the above code with your creations as Kang Rohman explain above.
7. Click SAVE TEMPLATE button
8. Done

Happy creating!