Post Titles Only in Blogger Page

blogger title post
In order to display only the post titles in homepage, you can follow the instructions below:
  • Please login to blogger with your ID
  • Click Design. design in blogger
  • Click Edit HTML. edit html in blogspot
  • You’re suggested to backup first by clicking Download Full Template. backup template in blogger
  • Find the code ]]></b:skin>
  • Copy and then paste the code below, exactly below the code ]]></b:skin>
    <style type='text/css'>
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
         <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         .post-body{display:none;}
         </b:if>
         </b:if>
         </style>
        
  • Click SAVE TEMPLATE.
  • Done. See the result.
It’s very easy, isn’t it? Well, installing the above code still leaves some elements such as post date, comment, etc. If you want nothing left there unless the post titles, you may use the below code.
<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body, .post-footer, .jump-link, 
     .post-timestamp, .reaction-buttons, 
     .star-ratings, .post-backlinks, 
     .post-icons, .date-header{display:none;}
     </b:if>
     </b:if>
     </style>
    
If you have used above code but there is still any element to be left, it may be caused by your template code, which does not meet the blogger standard. To solve it, you have to know the structure of your template.
If you use Firefox internet browser, you can install Web Developer add-ons where you can download at add-ons for firefox to know the structure of a blog easily.
Now Kang Rohman thinks that you have installed the Web Developer add-ons on your firefox, so please open your blog (blog that you will edit as this article). Click Information menu and select Display Div Order.
div order
Automatically, you will find the div structure of your template. Example:
div structure
From the image, it’s seen that post date and comment are placed in the div element.
.databarleft
.datebarright
So, the code to use will be as follow:
<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
     .post-body, .databarleft, .datebarright{display:none;}
     </b:if>
     </b:if>
     </style>
    
I hope it’s easy to understand.

Artikel Yang Berhubungan:

Tidak ada komentar:

Informasi Umum - Kumpulan Artikel Bebas Baca © 2009 - Bookmarking