Best view in Firefox and Chrome

About the Author

SubanuHi all.. Shayanthan (alias Subanu) is an Engineering student from University of Moratuwa, Sri Lanka, in the Department of Computer Science and Engineering ...read more »

     Email me       Linkedin


Breeze on Facebook

Display Post Summary hack for blogger

Tuesday, July 14, 2009
Convert Article to PDFPrint ArticleEmail Article to FrinedBookmark this Article


This is a very good blogger hack. You can easly customise your blogger post and the homepage of your blog. This article is you to guide you to customise your blogger home page with an Expandable Post and Display Post Summary hack. This feature was only available in wordpress but now is available in blogger also and its very easy to expand post. Dispaly Post summary on main page of your blogger is now can be added very easily. Lets start the installataion of this hack. Step 1 : Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box. Step 2 : Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<!-- JavaScript Posts Summaries --> <script language='javascript' src='http://shauom.googlepages.com/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://shauom.googlepages.com/jquery.expander.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;.breezeGuideDiv&#39;).expander({ slicePoint: 450, // default is 100 expandEffect: &#39;fadeIn&#39;, expandText: &#39;[...]&#39;, // default is &#39;read more...&#39; userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39; }); }); </script> <!-- End JavaScript Posts Summaries --> Step 3 : Now, we are going to enable this for the home page of your blog. To do so, find this section of code (or similar) in your template: <div class='entry'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> Replace this section of code with the following instead: <b:if cond='data:blog.pageType != "item"'> <div class='breezeGuideDiv entry'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='entry'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </b:if> Thats it. Now save and preview your blog. Its very cool. Feel free to customise more. Enjoy it. Note : * Please upload the Javascript file to your server. Because I can't assure that it will be always in my server. Its your deauty to have it with you. [ http://shauom.googlepages.com/jquery-1.2.3.pack.js ] [ http://shauom.googlepages.com/jquery.expander.js ] * Before started to do this hacking work, please have a backup of your own templet. It will help you from unwanted mulfunction of your blog.

Read these Articles :

0 comments:

Why Breeze

This is a new technological rhythm in the web. It blooms like a Breeze in your technological face with more than 75 technoligical atricles and guidences.

Contact Me
Contact Me Send an Email Facebook Account LinkedIn profile Twitter/Shayanth
Share And Save
Social Share with Twitter Facebook Share Add to Google Save on Delicious
Get Updates

The RSS will facilitate you to get the updates from Breeze. Click Here to redirect to the RSS link.

Designed by Posicionamiento Web | Bloggerized by GosuBlogger | Blue Business Blogger | Customized by SHAUOM