This week is busy with work so I do not have time for additional blog posts. Today we continue with a tutorial on hidden display the title a...

This week is busy with work so I do not have time for additional blog posts. Today we continue with a tutorial on hidden display the title and content posted under the label for you to read old-style Blogger templates do not want to display posts in the traditional way. With this procedure, when readers click on the labels want to see, the post on this label also displays the title only content is hidden, the reader simply click on the notes to open or close the content, much like Peekaboo with style for the new Blogger but there is no abstract. The steps are as follows: Step 1. Back up your current template. Step 2. Add CSS to style. You just copy the code below and insert between the two <style> card </ style>.

  .posthidden {display:none}
.postshown {display:inline}

Step 3. Add JavaScript to the header. You will use the following JavaScript into two <head> and </ head>. This code contains hidden control post.

  <script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
  whichpost.className="posthidden";
  }
else {
  whichpost.className="postshown";
}
}
</script>

Step 4. Eventually you just go to Edit HTML (Edit HTML) find the following code:

    <!-- Begin .post -->
 <div class="post"><a name="<$BlogItemNumber$>"></a>
        <BlogItemTitle>
   <h3 class="post-title">
  <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
    <$BlogItemTitle$>
  <BlogItemUrl></a></BlogItemUrl>
   </h3>
   </BlogItemTitle>

          <div class="post-body">
 <div>
     <$BlogItemBody$>
     </div>
   </div>

And replace with:

   <!-- Begin .post -->
 <div class="post"><a name="<$BlogItemNumber$>"></a>
       <BlogItemTitle>   
  <h3 class="post-title">
 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
         <$BlogItemTitle$>
       <BlogItemUrl></a></BlogItemUrl>
  </h3>
  </BlogItemTitle>
  <span class="posthidden" id="<$BlogItemNumber   <span class="posthidden" id="<$BlogItemNumber$>1">
  amp;gt;1">
     <$BlogItemBody$><br />
  </span>
  <p>
  <a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
  [+/-] Ẩn/Hiện bài đăng này</a>
    </p>
   </div>

Of course you can change the text [+ / -] / hide this post at will. After putting the above code you save your template. Let's see how to display the test blog: thuthuatblog1.blogspot.com. Besides this show, you also know how to post a summary only show and hide content that Khanh was introduced for the old Blogger. Blogger With new style, you can see baihuong lead ago, also showing the same guidelines will be updated in the near future. For each type has advantages and disadvantages. In this way, you do not need to change the structure of the post, but there is not an abstract after the title. But is the benefit that you only need to change once in your template.