This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.Automatic Count and Vote ButtonBefore you do that though, you would want to take note of the following:-1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-
Add digg to your blog
The result will be this:-If you want to have the button at the top left corner of your post, change the alignment.
Pictures in html......
Q: Ever wonder that css can stretch a background image? So no matter what the monitor size the background image always stretches to meet the requirements?
A: There is no way to stretch or control the size of a background image using css. However, you could use the background, background-attachment and background-repeat porperties to achieve an alternative result…
Watch browser support for these though!
Well, CSS1 and CSS2 still can’t do the magic yet, but CSS3 can! Here’s how:-
The ‘background-size’ property
Is ‘background-stretch’ a better name?
Specifies the size of the background images. The section “Layering multiple background images” defines to which image of the ‘background-image’ property each of the comma-separated values applies.
If a comma-separated value has only one part (not counting the keyword ’round’), the second part is set to ‘auto’. Of the two parts, the first one refers to the width, the second to the height of the corresponding background image. The addition of the keyword ’round’ indicates that the width and height are approximate, as explained below. ’round’ on its own is equivalent to ‘auto auto round’.
The size of an image is established in two steps. The first step derives sizes as follows:
auto
The size that keeps the background image’s original aspect ratio. Additionally, if the other part of the value is also ‘auto’, the image has its intrinsic size.
A specific size.
The percentage is relative to the width or height of the area given by ‘background-origin’.
Negative values are not allowed. A size of zero is allowed, but causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)
If the given size is accompanied by the keyword ’round’, and the computed value of ‘background-repeat’ is repeat for the horizontal and/or vertical direction, there is a second step: The UA must reduce the width, resp., height so that the image fits a whole number of times in the background area. In the case of the width:
If X ≠ 0 is the width of the image (i.e., the specified length or percentage, or the intrinsic width if the ‘background-size’ is ‘auto’) and W is the width of the background area, then the rounded width X’ = W / ceil(W / X)
The height is analogous. ceil() is a function that returns its argument if it is a whole number, otherwise the next bigger whole number.
If the width is reduced because of this formula, the aspect ratio is not retained, not even if the height was specifed as ‘auto’ and the vertical repeat as ‘no-repeat’. Ditto if the height is reduced.
Should ’round’ be specified for width and height separately? It then becoems possible to round in one direction and keep the aspect ratio in the other. E.g., instead of allowing the keyword in ‘background-size’, it could be one of the possible values in ‘background-repeat’: [ repeat space no-repeat round ]{1,2}.
Is ’round’ the right word? How about ‘~’ in front of the number, or ‘approx’ or ‘about’?
Is it better allow the size of the image to be rounded up as well as down?
Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:div { background-image: url(plasma.png);background-size: 100%;background-origin: content}
The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:p { background-image: url(tubes.png);background-size: 50% auto;background-origin: border}
This example forces the background image to be 15 by 15 pixels:para { background-size: 15px;background-image: url(tile.png)}
This example uses the image’s intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.body { background-size: auto;background-image: url(flower.png)}
The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.p { background-image: url(chain.png);background-repeat: repeat-y;background-size: 20% 30% round; }
A: There is no way to stretch or control the size of a background image using css. However, you could use the background, background-attachment and background-repeat porperties to achieve an alternative result…
Watch browser support for these though!
Well, CSS1 and CSS2 still can’t do the magic yet, but CSS3 can! Here’s how:-
The ‘background-size’ property
Is ‘background-stretch’ a better name?
Specifies the size of the background images. The section “Layering multiple background images” defines to which image of the ‘background-image’ property each of the comma-separated values applies.
If a comma-separated value has only one part (not counting the keyword ’round’), the second part is set to ‘auto’. Of the two parts, the first one refers to the width, the second to the height of the corresponding background image. The addition of the keyword ’round’ indicates that the width and height are approximate, as explained below. ’round’ on its own is equivalent to ‘auto auto round’.
The size of an image is established in two steps. The first step derives sizes as follows:
auto
The size that keeps the background image’s original aspect ratio. Additionally, if the other part of the value is also ‘auto’, the image has its intrinsic size.
A specific size.
The percentage is relative to the width or height of the area given by ‘background-origin’.
Negative values are not allowed. A size of zero is allowed, but causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)
If the given size is accompanied by the keyword ’round’, and the computed value of ‘background-repeat’ is repeat for the horizontal and/or vertical direction, there is a second step: The UA must reduce the width, resp., height so that the image fits a whole number of times in the background area. In the case of the width:
If X ≠ 0 is the width of the image (i.e., the specified length or percentage, or the intrinsic width if the ‘background-size’ is ‘auto’) and W is the width of the background area, then the rounded width X’ = W / ceil(W / X)
The height is analogous. ceil() is a function that returns its argument if it is a whole number, otherwise the next bigger whole number.
If the width is reduced because of this formula, the aspect ratio is not retained, not even if the height was specifed as ‘auto’ and the vertical repeat as ‘no-repeat’. Ditto if the height is reduced.
Should ’round’ be specified for width and height separately? It then becoems possible to round in one direction and keep the aspect ratio in the other. E.g., instead of allowing the keyword in ‘background-size’, it could be one of the possible values in ‘background-repeat’: [ repeat space no-repeat round ]{1,2}.
Is ’round’ the right word? How about ‘~’ in front of the number, or ‘approx’ or ‘about’?
Is it better allow the size of the image to be rounded up as well as down?
Here are some examples. The first example stretches the background image independently in both directions to completely cover the content area:div { background-image: url(plasma.png);background-size: 100%;background-origin: content}
The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:p { background-image: url(tubes.png);background-size: 50% auto;background-origin: border}
This example forces the background image to be 15 by 15 pixels:para { background-size: 15px;background-image: url(tile.png)}
This example uses the image’s intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.body { background-size: auto;background-image: url(flower.png)}
The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded.p { background-image: url(chain.png);background-repeat: repeat-y;background-size: 20% 30% round; }
Subscribe to:
Comments (Atom)