Our Network Websites:      All India TodayTech Know Bits - Invest In IndiaIndia - Food And Travel GuideHowTo For IndiaCars Of India

Add Floating Icons of Social Media

To have icons of social media is of extreme importance today. Readers are able to share the content of our site with the social media site, it results into a heavy traffic on the blog responsible. This is why we need to choose the location of icons very seriously. Our prime focus should be on (a)Visibility and (b) Access to the reader

Importance of Social bookmarking:

Under the influence of point (a) & (b), Best suited location for the icons of Social Media would be either left or right of the blog page. A reader can see it very clearly and can easily access it just by a click.

The Steps below will teach you how to add a Floating Icon of any Social Media in a blog written on a WordPress  theme.

Adding Floating Icons of Social Media:

1.Login to WordPress threw Admin panel. Among thesis options available click on “Custom File Editor”.

2.Once you are on “Custom File Editor” screen Click drop down menu and select “custom_functions.php” and then click on  “Edit Selected File”.

3.Paste the given code in custom_functions.php and “Save”.

01.function floating_social_icons() {

02.if (is_single())

03.{ ?>

04.<div class=”float-social-icon”>

05.<a href=”http://twitter.com/techiemania” target=”_blank”class=”twitter”>TechieMania on Twitter</a>

06.<a href=”http://www.facebook.com/pages/Techie-<;span id=”IL_AD7″ class=”IL_AD”>Mania</span>/103130853069010″target=”_blank” class=”facebook”>TechieMania Fan Page</a>

07.<a href=”http://www.youtube.com/sathishvaratharaj“target=”_blank” class=”youtube”>TechieMania YouTube Channel</a>

08.</div>

09.<?php }

10.}

11.add_action(‘thesis_hook_before_header’, ‘floating_social_icons’ );

The above mentioned codes are applicable for You Tube, Twitter and Facebook sites. In case if you need more, just paste the above codes as many times as required in between the two diversions.

Note: Replace the profile link given in example with your link.

4.From drop down menu select “custom.css” and then click “Edit Selected File”.

5. Add the codes given below in custom.css and save it

1./*Floating Social Media Icons*/

2..float-social-icon{ background: transparent; width: 3.2em;position: fixed; top: 40%; left: 0.25%; }

3..float-social-icon a { display: block; text-indent: -9999px;height: 32px; outline: none; }

4..float-social-icon .twitter { background:url(‘http://www.techiemania.com/wp-content/uploads/2010/09/twittericon.png‘) }

5..float-social-icon .facebook { background:url(‘http://www.techiemania.com/wp-content/uploads/2010/09/facebookicon.png‘) }

6..float-social-icon .youtube { background:url(‘http://www.techiemania.com/wp-content/uploads/2010/09/youtubeicon.png‘) }

The above code proves perfect in fixing the Floating Icons of Social Media on left side of the blog page.If the Floating Icons of Social Media is needed at right side, just replace left with right in the above code.

Note: Replace the URL path given in the sample code with the one you need by image upload path.

Thesis proved to be an excellent WordPress theme with several features and benefits for SEO.

You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply