Take a look at the bottom of this post. Hover your mouse over the Social Bookmarks displayed there. Do you like this hack? I thought so.
I saw this use of dynamic HTML at one of my favorite websites, Vladstudio. And reverse-engineered it to fit into Blogger Beta.
For starters, I just give you some simple instructions on how to implement this hack. Later on I'll expand on how this hack works and how to tailor it to your needs. If you want to have other services, let me know.
Implementation is easy.
Step 0: Backup your template.
Step 1: Add the following code to the head of your template:
Step 2: Find the following line of code in your template:
and replace it with the code from this file (right-click and save).
Save your template and there you go!
And now for some tech stuff.
At the bottom of the post I have added a 1-row, 2-column table. The left cell contains the text, the right cell displays the icons. The text is between divs with a unique id. The id consists of the string "sbtxt" followed by the post id (data:post.id). Each icon is a link to the specified social bookmark services, and can trigger a onmouseover-event and a onmousout-event. The onmouseover event trigger a call to a javascript showsbtext-function, passing the unique id of the left text-cell, and passing a number from 1 to N, N being the total number of icons. The javascript functions looks for the specified div, and replaces its inner text with another text, such as Add to Digg. The onmouseout-event again invokes this javascript, but now by passing a value of 0 it lets the function display the standard-text.
How to tailor it to your own needs.
You can replace the icons with icons of your own choice. You have to change the links between the -tags to accomodate for that. You could also change the text that is displayed, by downloading the js-file, and changing the string-array to the values you like.
But I am sure that with this way-points layed out for you, most of you will be able to work it out.
If you need help, please let me know!
Completely new to me, and extremely easy to implement are free polls from Pollhost. You can have a poll up and running on your blog withing a few minutes. Just open an account, create your first poll, generate the HTML, and paste it into a Blogger Beta html-page element.
You can have up to 15 polls running, and each poll can have up to 20 answers.
So, let me know which hack is most usefull to you. And if you like other polls, please let me know!
Did you like the Super-Peek-A-Boo post? Then I am sure you will like this improvement as well! After collapsing a post, it auto-scrolls back to the top of the post. That's nice, isn't it? You can see it at work now if you expand and collapse the post you are reading now.
One of the comments I received on the Super Peek-A-Boo post is, that after collapsing a post you end up reading another post, that 'moves up' into view because you collapse the post.
So I sleft a few nights on it, and came up with a very simple solution to this (cosmetic) problem. You need to make 2 slight adjustments.
One is to the 'post'-includable. If you followed my instructions on peek-a-boo posts, you gave the post-body
We will use this id to scroll back to, so by placing it at the top we assure that we scroll back to the top of the post (and not to the top of the body, which would leave out the post title).
Secondly, we need to adapt the javascript hideFull() function, by adding a tiny line of code at the end:
post.scrollIntoView(true);
Thats all to make it work!
In order to adhere to common standards I asked Ramani to update his Hackosphere.js-file to include the new line of code. So be patient until Ramani releases the new file.
Labels
- adsense (1)
- background (4)
- basic (7)
- bookmarks (22)
- browser (4)
- bugs (3)
- button (24)
- change template (10)
- comments (10)
- css (72)
- domain (5)
- email (1)
- facebook (5)
- feed (2)
- feed burner (2)
- feeds (2)
- flash (1)
- fonts (1)
- gadget (8)
- gadgets (8)
- go daddy (3)
- google (6)
- google maps (1)
- hacks (33)
- header (1)
- html (54)
- image (22)
- internet (2)
- java script (36)
- jquery (46)
- meta tags (2)
- mootools (6)
- news (3)
- post (11)
- search box (3)
- seo (7)
- sidebar (1)
- templates (246)
- title (1)
- tools (3)
- tutorials (30)
- twitter (9)
- vista (1)
- web hosting (2)
- widget (42)
- widgets (21)
- windows (1)
- wordpress (3)
My Other Blogs
- Blogger HOWTOs
- Tech HOWTOs
- best BTemplates
- photoshop tuts
- fast earn money
- relax games
- Jquery tips
- best free fonts
- archetictures
- CSS Codes
- Graffiti artworks
- wordpress
- photoshop tuts
- javascript codes
- amazing things
- hq wallpapers
- blogger templates
- online money
- fullfree games
- wallpapers
- wonderfultricks
- blogger howtos
- aflam araby
- arabic mazika
- food designs
- beautiful beta
- games download
- ta7meel bramej
- mp3 albums
- money online
- freefull games
- blogger templates
- photoshop disaster
- how2 forex
- funny motivations
- earn alot of money
- learn howto earn
- electronic circuits
- best games ever
- portable software
- all tv episodes
- online howtos
- free-games
- blogger hacks
- funny videos
- aflam arabic
- online movies
- funniest jocks
- ubuntu tips tricks
- funny pictures
- playing-online
- earn moneyonline
- full games
Copyright © 2008 - Beautiful Beta BLOGGER learning topics - is proudly powered by Blogger