Recent Posts using Labels (or Tagcloud)

From Bloggerhacks

Contents

Version

v1.1

Platform

New Blogger Template

Author

LVCHEN

Homepage

http://lvchen.blogspot.com/2007/09/blog-post_16.html (Chinese) http://lvchen716.googlepages.com/rp_eng (English)

License

Attribution-Noncommercial-Share Alike 3.0

Required Skills

User must be confortable with editing Template or adding new widgets to layout.

Optional Skills: Knowledge in basic CSS and Javascript.

Description

Convert you label page element to a nice view "Recent Post".

It also works with Tagclouds.

Change pages by clicking "next" or previous".

Show "Recent Post" under certain tag by clicking the tag in your label list.

You can even customize the appearance of this hack.

Plase Note:This hack use some jQuery JavaScript library. Plase install jQuery if you do not have it in your blog.

Method

Installation: Two Ways

1. Go to http://lvchen716.googlepages.com/rp_eng.

2. Download http://lvchen-recentcomments.googlecode.com/files/adv_label_v1.1en_pack.js and upload to your own web page. Pleae remember, jQuery is necessary for this hack. If you need to download the lastest version of jQuery, please visit jQuery.com. Also, you should use the packed version NOT the GZip version.

Insert the following code into your template head or any 'javascript/HTML' page element

If you have already installed jQuery, only one line is needed. 

   <script type="text/javascript" src="http://yourwebpage/adv_label_v1.1_pack.js"></script>

Please replace 'yourwebpage' to where you place those files.

If you do not have jQuery, please put jQuery in front of my hack. 

   <script type="text/javascript" src=http://yourwebpage/jquery-1.2.1.pack.js></script> 

   <script type="text/javascript" src="http://yourwebpage/adv_label_v1.1_pack.js"></script>

Settings: Settings are optional

One is able to customize this hack by giving specified values to the following variables. 

 tagListSetting.postShow: Posts per page, default is 5. The reasonable value should be 3 to 10.
 You cannot use value larger than 99.
 tagListSetting.labelName: If you have 2 label elements or more (ex: ajax tag, tagcloud,
 and original label), please specifiled which one you want to convert. Default value is 'Label1'.

 tagListSetting.defaultPost: Specify name of your favorite tag and showing only the 
recent posts for that tag. Default value is empty string. 

 tagListSetting.loadingImage: Image and message you want to display while loading this hack,
 feel free to use HTML. Default value is '<img src="http://lvchen716.googlepages.com/2-0.gif"/> Loading...'.

 tagListSetting.headerButton: You wanna hide the header button? No porblem. Just set the value
 to false. Default value is true.

 tagListSetting.tagsShow: You can reveal the list of tags by default. Default is false.

 tagListSetting.dropDown: Make your tags as a dropdown list. If you want to use this hack with tagclouds
 hack, you should set it to false. Default is true.

 tagListSetting.lineHeight: The line height for each list elements. The defaule value is 24.

 tagListSetting.messagesArr:User can define the every text showing in this hack.

 The Default value is ['Recent Post','Choose a Tag','%tagName% %range% , Total %totalNum% posts 
','Prvious','Next','No post found! You may have given wrong tag']

 Please compare what is showing in the widget and change the value accordingly.

There are some additional variables using in the third element (tagListSetting.messagesArr[3]) of this variable. 

 %tagName%: The tag name (category).

 %range%: The posts you are currently viewing.

 %totalNum%: Total number of the posts under certain category

for example: If you want to show 10 posts per page, display posts for tag, "Hack", reveal the list of tags by default, and NOT use doopdown list, you just add the following code AFTER this hack. 

 <script>

     tagListSetting.postShow = 10; 

     tagListSetting.defaultPost = 'Hack'; 

     tagListSetting.tagsShow = true; 

     tagListSetting.dropDown = false; 

 </script>

CSS ID and Class

 #headerBlock: header block
 .buttonStyle: A class for all header buttons
 #postsList: Main block, recent posts are showing here.
 #footerInfo: Footer buttons and info.


The XHTML structure of this hack 

 <div id="label1">
    <div id="headerBlock">
        <span class ="buttonStyle"></span><span class ="buttonStyle"></span>
    </div>  
    List of Tags
    <div id="postsList">
        <ul> <li></li><li></li></ul>
    </div> 
    <div id="footerInfo">
        <a></a><a></a>
    </div> 
  </div>

Sites Using This Hack

http://lvchen.blogspot.com (Chinese)

http://iamserena25.blogspot.com (Chinese)

I don't have any English blog using it yet. If you know any English blog that use this hack please add here

See Also:

Tagclouds

Uncompressed Code

jQuery

If you have any question regarding this hack, please e-mail me: lvchen.blog@m2k.com.tw

Retrieved from "http://editthis.info/bloggerhacks/Recent_Posts_using_Labels_(or_Tagcloud)"
Personal tools
FreshTags