CSS3 Social Subscription Buttons with Sliding Effect


Best Movies Sites: TOP 10 MOVIE WEBSITES


css3 social subscription buttons
Would you like to add different type of social subscription widget to your blog or website? Here let me wanna share social subscription buttons with sliding effect. It’s made with pure CSS3 without using even a single image. In these buttons youll be able to useGoogle+ with +1, twitter, Facebook & Email Me subscriptions. Each button has their own professional color with awesome sliding effect. So here’s the tutorial thatll walk you through all the steps in greater detail.

To give you an idea, here’s the screenshot of different styles of this sliding social subscription buttons. As I mentioned above each button has their own professional color also with hover text. If you would like to feel this buttons in action, can check out LS demo blog. Thus you’ll get an idea of what we’re gonna make right here.

Sliding Social Subscription Buttons - Demo Screnshot

Sliding Social Subscription Buttons

 How to Add this Sliding Buttons to your Blog  
Here is the CSS3 code snippet which actually provides both skin and sliding effects for this buttons. There's no need of any customization that you have to do in this CSS3 snippet. So you’ll be able to download this CSS3 code by clicking the “Download CSS3 Code Snippet” link as you see below and download the whole CSS3 code snippet of this sliding buttons (The CSS3 code llbe in a .zip format. So extract it all and use).

Social Subscription Buttons with Sliding Effects - Download CSS3 Code Snippet

You can also fiddle with the CSS3 to change the font name, dimensions, hover colors etc, if you know a little bit of programming. 

Now let’s see how to add the downloaded CSS3 code snippet to your blogger template. Below are the simple steps which you have to follow.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ¬

]]></b:skin>

Add the downloaded CSS3 code just Above/Before above searched code and save your Template. The following HTML codes are not allowed to use in your blog post. So you'll be able to add it as follows.

  • Go to Blogger Dashboard > Layout
  • Click on Add a Gadget 
  • Copy & paste the below code in it

<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE + 
          <g:plusone size="small" annotation="none" 
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter" 
      href="http://twitter.com/labstrike" 
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook" 
      href="http://www.facebook.com/labstrike" 
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email" 
      href="mailto:Your Email ID" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
  
  var po = document.createElement('script');
  
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>

Please Note: Before saving your Gadget please do change ‘Web URL(line no:8) with your blog’s home page URL and labstrike (line no:15 & 24) with both your Twitter and Facebook user names. Also replace ‘Your Email ID(line no:33) with your Email ID.

Along with this, it’s necessary to change hover text with your own desired text – For eg: “LABSTRIKE on Twitter”.


Hopefully this method is a little special for those who seek different social subscription widget. So share this post and if you face any trouble, never feel hesitate to mention via comment. Kindly respect the efforts. Happy blogging:)