We all post images with in our posts, and some times we need to label this images, but not all of us can use graphic editors or don’t just have the time to do it, so we’ll learn in this tutorial how to label our images using a small code with out using any photo editing soft wares.
you can look at the following image to see how the label will look like,
My Label
you can try to select it to make sure.
the code to do it is too easy but to use it you need to know
1. Image width and height in pixels.
2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)
Now when you going to write your post, you must
notice that on the post writing window there are two modes, Compose and Edit Html.
Check the following image.
 |
 |
And enter the next code,
|
and here is what you will need to change in the code,
width: Put your image width
height: Put your image width
background:url(Image URL Here) Put your image url without any spaces
color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here
font-size:30px Change 30px to any size you want.
line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom
text-align:center you can move your text by changing center to left or right.
My Label Just enter your label here.
That’s it. now go back to Compose mode to continue your post,
Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code
filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75; |
|
My Label
i with this tutorial can help you. and if you need any help, leave a comment here.
0 Responses to Adding Labels to blogger (blogspot) images with hovering text