How to Make Related Articles "Picture and Description"

How to Make Related Articles "Picture and Description" - In the review this time I will share a bit of information which in my previous review on the blog tutorial also review the Make Recent Posts (Latest Posts) Thumbnail.

So, any blog or website definitely needs to connect related articles review article that same category, and the presence of related articles also help users find your article and certainly will add your article to the visitor.
Here are the steps Create Articles

     First one must first login to your account Blogger
     Then the next step please go to menu templates, edit HTML and check expand widget template
     Find the code </ head>
     Then paste the following code right above it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <style type='text/css'>
          #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
          #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
          #relpost_img_sum:hover         {background:none;}
          #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
          #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
          #relpost_img_sum li:hover      {background-color:#F0ECE9;}
          #relpost_img_sum .news-title a {color:#2C6BA8;}
          #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
          #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
          #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
     </style>
     <script type='text/javascript'>
          var relnojudul = 0;
          var relmaxtampil = 10;
          var numchars = 200;
          var morelink = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>
5. The next step that is looking for one of the codes below:

<data:post.body/>
Description:
Usually there are 3-4 above code, then look for the code to 2 or 4. Depending on your template formation. or the code below:
<div class='post-footer'>
6. Paste the code below, under the above code:
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div id='related_posts'>
              <h4>Artikel Terkait</h4>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
              </b:loop>
              <ul id='relpost_img_sum'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </b:if>
If you have done the above and the last step you will do that and try to save your template preview then see the results.

Thus my review on How to Make Related Post Picture and Description and hopefully useful.

No comments:

Post a Comment