Tuesday, 7 October 2014

How to add stylish Social Media Icons to a Blog


Share This Post:

Advertisements


Social media buttons are very efficient tool to increase your daily visitors or pageviews. With the help of social media buttons your visitors can follow you on their favorite social networking site for example; twitter, Facebook, Linkedin etc. Moreover, you can share your new posts on these sites to  grow your audience. In today’s scenario every blogger should do everything for the publicity of their Blogs. Adding stylish social media buttons may lure visitors to add you in their social media profile. If you are providing useful information to your visitors then its obvious that they will follow you to get more valuable information from your site. So, it would be a great idea to link your blog with social networking sites. You can add social media buttons below or above the blog posts or you can put them anywhere in your blog where you want to show them. Here we have explained step by step procedure to add attractive social media icons to a blog/site:-


Step 1:- First of all, Go to iconarchive.com and from the Homepage of iconarchive select Browse and then Categories. Thereafter, select Social Network icon and choose any icon from the list which you want to add on your blog.To save your favorite icon as PNG click on PNG as shown in screenshot and then click on Save as. Save icons for Facebook,Twitter,Linkedin,Youtube etc.

Add stylish Social Media Icons to a Blog

Step 2:- Now its time to put these icons on any site to get Direct link of icons image. So,this time go to photobucket.com.If you have already an account on photbucket then simply Login to photobucket otherwise create a new user id on photobucket to upload your icons. After login to photo bucket click on Upload to upload icons as shown in screenshot.

Add stylish Social Media Icons to a Blog 1


Step 3:- After uploading icons on photo bucket next step is to save icon url.To do this go to saved icons and then click on Share link.

Add stylish Social Media Icons to a Blog

Copy Direct link and paste it in MS word or anywhere else. Copy other icon’s direct links also and save them.

Add stylish Social Media Icons to a Blog 2

Step 4 :- Now copy below code and paste it in MS word or anywhere else. First of all, paste below code 4 times or more according to number of social media buttons for example; if you want to add four social media buttons then paste this code four times.

<a href="Url of social media site"><img src="image/icon url" /></a>


Example; Url of my twitter profile is https://twitter.com/maapslove  and Url of twitter icon is http://i1375.photobucket.com/albums/ag448/maapslove/Twitter-icon_zpse49803d1.png . So i pasted url of my twitter account and icon (which I got from photobucket) in above code. Repeat the same for other social networking(Facebook,Linkedin,Youtube etc) site’s buttons

<a href="https://twitter.com/maapslove"><img src="http://i1375.photobucket.com/albums/ag448/maapslove/Twitter-icon_zpse49803d1.png" /></a>

After doing everything your final code will be look like this:-

Add stylish Social Media Icons to a Blog 3



Step 5:- Go to Blogger Dashboard then Layout. Click add a Gadget and Paste the button code in gadget. Thereafter, save your gadget and see preview of your Blog. Before exit click on Save arrangement.

                                                                      OR


To show these buttons below or above the posts:-
  1. Go to Template.
  2. Edit Template.
  3. Find this code  <data:post.body/> in template by pressing Ctrl+F keys from the keyboard.
  4. Thereafter, Paste the buttons code (which you have made) above or below this code  <data:post.body/>.
  5. Paste buttons code everywhere where you find  above code.
( If you want to show the buttons above the posts then paste the buttons code above  the <data:post.body/>  or paste the code below  to show buttons below the posts.

Warning:- Please save backup of your blog before doing this.We are not responsible for any type data loss.

Advertisements



No comments:

Post a Comment

Have a question? Just ask in comment box!