How to add social networking gadget blogger

In this tutorial I will explain how to add a gadget to include social networks where we can find all the readers of our blog.

For the tutorial example where this will create a gadget show icons of social networks where we can find blog readers and a link to your user profile. In this example the social networks that will include are:

1. Twitter

2. Facebook

3. Google+

4. Linkedin

5. Youtube

6. metroblog

Social media plugin

The gadget blogger social networks will be as follows in your blog:

Example: Create gadget in our Blogger with social networks we use. When a reader of our blog, click on any of the icons of our profile page is displayed.

Step 1 We went to the section of our design blogger.

Step 2 At this time a page displaying a visual representation of our blog is displayed opens.

Step 3 For the current example I created the social networking gadget on the right side panel, in that panel click on the Add a Gadget.

Step 4 At this point a window where you can select the type of gadget you want to add appears.

Step 5 Under the Basics tab select the option HTML / Javascript

Step 6 When selecting this option a page where you configure the gadget social networks opens as 

follows:

- Title: Write the title you want to be displayed when viewing the gadget social networks. In my case I put "Follow me on social networks."

- Content: Space for putting the HTML code that we want to show the gadget in social networks, in our case we put the following:

// Icono y link a tu perfil de twitter

<a href=' URL twitter ' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-HoByHzmab00/T-WiFnncFXI/AAAAAAAAAuM/eIStHRliy7Y/s000/twitter.png" title='twitter'/></a>

// Icono y link a tu perfil de facebook

<a href=' URL facebook ' target='_blank'><img alt='facebook' src="http://4.bp.blogspot.com/-KGUfFpIGxDo/T-WiF2abbMI/AAAAAAAAAuU/YUHVZnWeTAQ/s000/facebook.png" title='facebook'/></a>

// Icono y link a tu perfil de google+

<a href=' URL google+ ' target='_blank'><img alt='google plus' src="http://4.bp.blogspot.com/-FbyQUvCfcsc/T-WiGWwdzZI/AAAAAAAAAuc/23NBI95QlmY/s000/gplus.png" title='google plus'/></a>

// Icono y link a tu perfil de Linkedin

<a href=' URL linkedin ' target='_blank'><img alt='linkedin' src="http://3.bp.blogspot.com/-HPHUoa0ufsw/T-WiGqwz3YI/AAAAAAAAAuk/MEYc0chl5zs/s000/linkedin.png" title='linkedin'/></a>

// Icono y link a tu perfil de Youtube

<a href=' http://www.youtube.com/user/masetru ' target='_blank'><img alt='Youtube' src="http://static.tiendy.com/shops/mimomimascota/theme/assets/icono_youtube.png" title='Youtube'/></a>

// Icono y link a tu perfil de Metroblog

<a href=' http://NombreUsuario.metroblog.com/ ' target='_blank'><img alt='Metroblog' src="http://blog.mp3.es/wp-content/uploads/2013/03/metro-last-light.png" title='Metroblog'/></a>

In the above code you will have to replace the text URL twitter, facebook URL, URL URL linkedin google + and the URL of your profiles on each of these social networks.

We could customize the gadget code social networks in many ways, I will propose the following:

- Customize the contents of the meta tag title .

- Modify the contents of the meta tag alt .

If you enjoyed the article on adding social networking gadget blogger you can visit one of our sponsors, with this you will help me keep the blog and can write more articles.

Share on Google Plus

About M Shahid Sani

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.