Showing posts with label Blog Comment. Show all posts
Showing posts with label Blog Comment. Show all posts

Friday, February 4, 2011

Create a different background in each post

Do you know that you can create a different background in each post? How to setting up a blog with a different background in each post? Here they are. I only choose this post using a different background, to make it as an example.
By following below steps you can do it easily.


1. Change setting on the Posting Formatting


  • On the blogger dashboard, go to page element, click on Setting
  • Go to Formatting (sub tab of Setting)
  • Go to line item Post Template and will find a text box (default is empty)
  • Paste below code 
<div style="background:url(IMAGE_LINK_URL) no-repeat;">
</div>
  • Once done ==> save
  • IMAGE_LINK_URL mean is the source of the image
  • Be remember that the image must stored in web hosting. Use free one such as Google Docs or Photobucket 
  • In this post I did used SHARE ICON which already availiable in istockphoto.
2. Do posting

  • Write your post as usual
  • Do not forget to change the IMAGE_LINK_URL above to your image URL by do editing in Edit HTML (tab beside Compose in posting page)
  • Do not remove the bracket before and after IMAGE_LINK_URL
  • Example; "background:url(http://www.xxxxxx/xxxx/xxxx) no-repeat;"
  • If you want to repeat the background image more than 1 time, change the

<div style="background:url(IMAGE_LINK_URL) no-repeat;">
         to

<div style="background:url(IMAGE_LINK_URL) repeat-y;">

  • Click preview to see yours blogs posts


Now the background image is appear but it not center in location. To make it center, add below (in blue).

<div style="background:url(IMAGE_LINK_URL) center repeat-y;">

Cheer friends .. hope this blog tips will help you how to make blog.

Rotate the avatar image in comments post

You can set up your own blog with the avatar image in the comment section rotate not in straight stand. Below shown as an example;


How to do it?
  • Go to page element
  • Edit HTML and find below
.avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}

  • If having problem to find it, just press F3 or CTR-F and paste  .avatar-image-container img
  • Change the angle (355deg) to your desire angle.
If it is not in the HTML script, copy above and paste just before 
]]></b:skin>
 Like below
.avatar-image-container img {
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
}
]]></b:skin> 
Once complete, save and preview.
Now you can create a blog site with a fancy look comment.



Related Posts Plugin for WordPress, Blogger...