Hôm nay:

Tài chính doanh nghiệp

Tin cập nhật

4 tháng 11, 2007

Special effects for Peekaboo posts!

Yesterday, I thought my most popular hack, Peekaboo posts, needs a makeover. A while back, I received a comment that the post expands too quickly when you click "Read more" link. I thought this could be something to improve upon. How about some special effect like Fade In/Fade Out? You got it! I have integrated the popular javascript effects library script.aculo.us with our peekaboo posts. You can see it in action in my test blog. If you click on "Read more", the full post appears gradually from nowhere and it fades in nicely if you click "Summary only".

You gotta have it in your blog, right? You can have it with very few changes to your template. I spent a few hours on this and surpassed some limitations of script.aculo.us and (bugridden) IE to get this working in Firefox, IE and Opera. Just follow these steps if you have already installed peekaboo posts in your blog.

Step 1: Add these lines before the /head tag.

If your blog's background color is anything other than white, you need to change the peekaboo_bgcolor appropriately for it to work properly in IE. Since most blogs have white background, it should work as it is.

Step 2: Find this portion of code and remove the line shown in red.

That's it! Go ahead and impress your readers. Scriptaculous has many more effects like slide down/up, drap/drop etc which I will try to make use of in the future. If you liked this, help me spread the word about bvibes.com (which has 170+ registered users now) by adding the bvibes button to your sidebar as described here.

Nguồn: hackosphere.blogspot.com
no image
  • Mặc định
  • Facebook Comments

0 nhận xét:

Đăng nhận xét

NỘI QUY KHI BÌNH LUẬN :
» Không sử dụng những từ ngữ thô tục, thiếu văn hoá
» Không Spam. Được chém gió thoải mái
» Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Chèn link bằng thẻ: <a href="Link" rel="nofollow">Tên</a>
» Tạo chữ <b>đậm<b> và <I>Ngiêng<I>
» Mọi thắc mắc xin liên hệ qua Email,

Cảm ơn bạn đã để lại nhận xét!

Top