Posted By

michellebracken on 03/14/12


scroll display wordpress icons social phpfooter

Versions (?)

Who likes this?

2 people have marked this snippet as a favorite


How to add your own social icons as scrolling buttons to your WordPress Site:

 / Published in: HTML

How to add these as scrolling buttons to your WordPress Site:

Upload each individual image to your ftp or to a free image hosting server and copy the url of each image location. Add the following code to the footer.php of your WordPress Site by clicking on the Editor button under Appearance on your Dashboard and then clicking on the Footer.php in the right hand column. I would put it toward the bottom, and make sure that you don’t accidentally add it inside of another div. Switch out the “Your Image Urls” with the urls that you just saved, and of course make sure to switch out the link urls to your actual contact links. Also, make sure that each titles matches each image. (This is very important, so that when someone scrolls over your facebook button, the words Facebook appear – or whatever text you put there.) The code I’ve given above has the display dimensions that you see in the image above. You can change how they appear, however, by editing the pixel numbers and choosing whether you want them to appear on the left or right hand of the screen, and whether you want them to appear on the top or bottom of the screen. NEVER, EVER copy and paste directly from here or anywhere on the web. Put the code into a text editor first, and ensure that all of the quotation marks are facing the proper direction and that there are no extra spaces.

  1. <div>
  2. <a style="display:scroll;position:fixed;top:10px;right:10px;" title="RSS" href="YOUR RSS FEED URL HERE"><img src="YOUR RSS IMAGE URL HERE"/></a>
  3. <a style="display:scroll;position:fixed;top:80px;right:11px;" title="Twitter" href="YOUR TWITTER PAGE URL HERE"><img src="YOUR TWITTER IMAGE URL HERE /></a>
  4. <a style="display:scroll;position:fixed;top:147px;right:9px;" title="Contact" href="YOUR EMAIL ADDRESS"><img src="YOUR CONTACT IMAGE URL HERE" /></a>
  5. <a style="display:scroll;position:fixed;top:212px;right:8px;" title="Facebook" href="YOUR FACEBOOK PAGE URL HERE"><img src="YOUR FACEBOOK IMAGE URL HERE" /></a>
  6. </div>

Report this snippet  

You need to login to post a comment.