How to add social media icon button hosted in Picasa Web Album for Blogger/Blogspot .





   In this tutorial, I'm going to share on How to add social media icon button hosted in Picasa Web Album for Blogger/Blogspot . 
If you don't have any button, please click this link to download some of my free Social Media Icon.

STEPS

1)Login to Picasa Web .



2) Upload Icon photos in new album and rename it .


2.1) Click "Upload" . to upload new photos .




2.2) Choose Icon from your computer by clicking  "Select photos from your computer".

2.3) Choose photos from your Computer  and click "Open" .



2.4) Rename the folder .





3) Share the album on the web .

3.1) Click edit on the right hand side panel to edit the new album properties.





3.2) Change the folder properties and set the visibility to "Public on the web".



3.3) Save the changes.

4) Edit Blogger/Blogspot layout by adding java or html gadget  .

4.1) Go to "Blogspot>Layout>sidebar>Add new gadget"

4.2) Click the "plus sign" to add HTML/Javascript gadget .



5) Add a title for your new gadget and add the HTML code.

5.1) Add a title .

5.2) Add below code in the content section.



This HTML code will assign attribute  to your Social Icon button and image . The button image is hosted in  Picasa Web Album .



6) Replace the "Social Media Icon link from your Picasa Web Album" with your real Picasa Icon link.

6.1) Choose the Icon button that you just uploaded in your Picasa Web Album.

6.2) On right hand panel, click "Link to this Photo" .

6.3) Tick "image only (no link)" box.



6.4) Copy the "Embed image" link  and replace "Social Media Icon link from your Picasa Web Album" HTML code in your Blogspot/Blogger layout .





7) Replace "page link that you want to show" with your real page link that you want to associate with the button. In this example, I'm linking my Youtube Channel with the Icon button.

7.1) Go to the page that you want to associate with the Icon button and copy the page link.In this example, I'm linking my Youtube Channel .



7.2) Replace "page link that you want to show" with your page link.
8) Save the HTML code .


9) Test Icon button by refreshing your site. 



You can create and link as much page and button Icon in this way .


Read Previous : How to add Google Adsense Custom Search on BloggerBlogspot
Previous
Next Post »