At the previous post, I have explained how to install Facebook Profile Badge in blog. The display of Facebook Profile Badge consists of two types, the vertical and horizontal. By default, the display of Facebook Profile Badge looks like the image below:
Now can the default display be changed with the more interesting one as we desire? The answer is yes. To see the example of Facebook Profile Badge resulting from the change, Click here.
In order to change the default display of Facebook Profile Image, follow these steps:
- Please create the image describing your profile by using the editor image software such as Adobe Photoshop, Corel Draw, others with the size not over the size of your blog’s sidebar.
- If you finish creating the image of your facebook profile, please save it as jpg, jpeg, gif or png.
- Upload the profile image (you can use blogger hosting to store the image by publishing it on a trial blog), then copy the URL of the image. Right click the image that appears on your trial blog, and then click View Image. On the bar address, copy the URL.
- Login to blogger with your ID
- Click Layout on the Dashboard
- On the Page Element, click Edit on the gadget where your Facebook Profile Badge is installed. Find the red-printed URL at the codes below, and then paste your new Facebook Profile Image you have copied to change the red-printed URL. The following is the code of my Facebook Profile Badge:<!– Facebook Badge START –><a href=”http://www.facebook.com/people/Kang-Abeh/1512015215″ title=”Kang Abeh's Facebook profile” target=”_TOP” style=”font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal;font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;”>Kang Abeh’s Profile</a><br /><a href=”http://www.facebook.com/people/Kang-Abeh/1512015215″ title=”Kang Abeh's Facebook profile” target=”_TOP”><img src=”http://badge.facebook.com/badge/1512015215.520.1812951701.png” alt=”Kang Abeh's Facebook profile” style=”border: 0px;” /></a><br /><a href=”http://www.facebook.com/badges.php” title=”Make your own badge!” target=”_TOP” style=”font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal;font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;”>Create Your Badge</a><!– Facebook Badge END –>
- Do not forget to save it, and see the result.
You can see the code of my Facebook Profile that I have modified below:
<!– Facebook Badge START –><a style=”font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 13px; font-variant: normal;font-style: normal; font-weight: normal; color: #ffffff; text-decoration: none;” href=”http://www.facebook.com/people/Kang-Abeh/1512015215″ target=”_blank” rel=”nofollow” title=”Masukkan KA sebagai temanmu”>Mau jadi teman Kang Abeh di Facebook? Klik Photo saya ! </a><br/><br/><a href=”http://www.facebook.com/people/Kang-Abeh/1512015215″ target=”_blank” rel=”nofollow” title=”Kang Abeh's Facebook profile”><center><img alt=”Kang Abeh's Facebook profile” style=”border: 0px;” src=”http://lh3.ggpht.com/_Kf0VfDhIWEY/SfR4wb319EI/AAAAAAAAABI/ZAyDDAc4sLE/my-face-book_thumb%5B2%5D.png?imgmax=800“/></center></a><!– Facebook Badge END –>
Happy creating and good luck.
Update : The Example from blog-tutor-net.blogspot.com was removed and moved to here.
Related posts:
2 Responses
nice tips,,i try it,,look my blog.thanks
sandirsw91@gmail.com