WordPress Follow Widget

Today we are going to show you how to quickly implement a wordpress follow widget on your site. After this tutorial you will end up with the following widget.

itcuties.com - WordPress Follow Widget

itcuties.com – WordPress Follow Widget

Note that this tutorial’s code only renders social pages icons. The background of the widget comes from your theme styles. Let’s begin.

Step 1. Upload icons

The first step is to upload the following icons to your wordpress site.

facebook google_plus twitter youtube rss

Remember uploaded image URLs because you will need them in the next step.

Step 2. WordPress follow us widget code

  1. Navigate to Appearance, Widgets page in the Admin Panel
  2. Add a Text widget to your site
  3. Admin Console -Appearance, Widget page

    Admin Console -Appearance, Widget page

  4. Enter the following code in the Text widget changing image URLs and links to the social pages to those that you use
  5. <style>
       .follow_column li {
           display: block;
           float: left;
           margin: 0;
           padding: 1px;
       }
       
       .follow_column a {
           border: medium none;
           bottom: 5px;
           display: block;
           float: left;
           height: 48px;
           outline: medium none;
           padding: 0;
           position: relative;
           text-indent: -9999px;
           width: 48px;
       }
           
       .follow_column .rss a {
           background: url("http://dev.itcuties.com/wp-content/uploads/2013/01/rss.png") no-repeat scroll 0 0 transparent;
       }
           
       .follow_column .youtube a {
           background: url("http://dev.itcuties.com/wp-content/uploads/2013/01/youtube.png") no-repeat scroll 0 0 transparent;
       }
           
       .follow_column .google_plus a {
           background: url("http://dev.itcuties.com/wp-content/uploads/2013/01/google_plus.png") no-repeat scroll 0 0 transparent;
       }
           
       .follow_column .facebook a {
           background: url("http://dev.itcuties.com/wp-content/uploads/2013/01/facebook.png") no-repeat scroll 0 0 transparent;
       }
           
       .follow_column .twitter a {
           background: url("http://dev.itcuties.com/wp-content/uploads/2013/01/twitter.png") no-repeat scroll 0 0 transparent;
       }
    </style>
    
    <ul class="follow_column">
       <li class="youtube">
           <a href="http://www.youtube.com/user/itcuties">YouTube</a>
       </li>
       <li class="facebook">
           <a href="http://www.facebook.com/itcuties">Facebook</a>
       </li>
       <li class="google_plus">
           <a href="https://plus.google.com/u/0/111721154647400808775/posts">RSS</a>
       </li>
       <li class="twitter">
           <a href="http://twitter.com/itcuties">Twitter</a>
       </li>
       <li class="rss">
           <a href="http://www.itcuties.com/feed/">RSS</a>
       </li>
    </ul>
    

Download this sample code here.

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Java by Example App is available at Google Play Store NOW