Recent Posts using Labels (or Tagcloud)
From Bloggerhacks
m (→Sites Using This Hack) |
m (→CSS ID and Class) |
||
| Line 85: | Line 85: | ||
#headerBlock: header block | #headerBlock: header block | ||
| - | .buttonStyle | + | .buttonStyle: A class for all header buttons |
| - | #postsList | + | #postsList: Main block, recent posts are showing here. |
| - | #footerInfo | + | #footerInfo: Footer buttons and info. |
| - | The structure of this hack | + | The XHTML structure of this hack |
<nowiki><div id="label1"> | <nowiki><div id="label1"> | ||
| Line 104: | Line 104: | ||
</div> | </div> | ||
</div></nowiki> | </div></nowiki> | ||
| - | |||
==Sites Using This Hack== | ==Sites Using This Hack== | ||
Revision as of 18:40, 21 September 2007
Contents |
Version
v1.1
Platform
New Blogger Template
Author
Homepage
http://lvchen.blogspot.com/2007/09/blog-post_16.html (Chinese)
English reader welcome
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 Steps only...
1. Please download http://lvchen-recentcomments.googlecode.com/files/adv_label_v1.1en_pack.js and upload to your own web page.
2. Plase insert the following code into your template head or any 'javascript/HTML' page element
<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>
Please replace 'yourwebpage' to where you place those files.
If you have already installed jQuery, please insert the second one only.
<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: Post per page, default is 5.
tagListSetting.labelName: If you have more than 1 label widgets, please specifiled which one
you want to convert. Default value is 'Label1'.
tagListSetting.defaultPost: Give specific tag name for showing recent posts under that tag
rather than showing general recent posts. Default value is empty space.
tagListSetting.loadingImage: Image and message while loading, feel free to use HTML. Default
value is '<img src="http://lvchen716.googlepages.com/2-0.gif"/> Loading...'.
tagListSetting.headerButton: User can decide to use header button or not. Default value is true.
tagListSetting.tagsShow: User can decide whether showing list of label by default. Default is false.
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, default tag is 'Hack' and show list of tag by default, just add the following code after this hack.
<script>
tagListSetting.postShow = 10;
tagListSetting.defaultPost = 'Hack';
tagListSetting.tagsShow: true;
</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:
If you have any question regarding this hack, please e-mail me: lvchen.blog@m2k.com.tw
