Display Post Summary hack for blogger
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() { $('.breezeGuideDiv').expander({ slicePoint: 450, // default is 100 expandEffect: 'fadeIn', expandText: '[...]', // default is 'read more...' userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </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.
This Articles was posted on 4:11 AMTuesday, July 14, 2009
|
Labels:
Algorithms,
Blogger,
JavaScript
|
0 comments:
Post a Comment