Pure CSS & HTML Based Social Follow Widget

Thousands of social bookmarking plugins / widgets available on the Internet for your blog or website. But I made ZoomShare widget in a simple way. Zoom Share is one of the few CSS and HTML based widget. At our BlogsDaddy lab, we spend lot of to come up with this beautiful widget. We made it without using any Javascripts.

The smooth effect comes with the help of CSS3 such as border-radius, box-shadow and transition. These CSS3 effects are only visible in Firefox, Chrome, Safari and other CSS3 supporting browsers. Let's start the tutorial:

You May Like To Read:

1. Add Social Buttons With Hover Effect In Blogger Blog
2. Add Black Gloss Social Sharing Buttons To Your Blogger Blog

Live Demo

How To Add Social Follow Widget

• Go to Blogger Dashboard
• Template -> Edit HTML -> Proceed
• Tick Expand Widget Templates and Search Below Code

<data:post.body/>

• Just Below Of Above Code Paste The Following Code 

<div id="cenbox">

<div class="zoombox">

    <p>Subscribe Us</p>

    <button class="facebook"><a href="https://www.facebook.com/BlogsDaddy" target='_blank' rel='nofollow'>Facebook</a></button>

    <button class="twitter"><a href="http://twitter.com/BlogsDaddy" target='_blank' rel='nofollow'>Twitter</a></button>

    <button class="gplus"><a href="https://plus.google.com/u/0/106217413057730068740" target='_blank' rel='nofollow'>Google+</a></button>

    <button class="pinterest"><a href="http://pinterest.com/gaganmasoun" target='_blank' rel='nofollow'>Pinterest</a></button>

</div>

</div>

Note: Replace The Highlighted Text With Your Respective URLs.

Now Follow Give Steps and Add CSS Code

• Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed
• Press Ctrl+F and Search For ]]></b:skin>. Just Above It Paste The Following Code.

#cenbox {

    position: relative;

    z-index: 9999;

    margin: 20px 0;

    text-align: center;

    font-size: 1.1em;

    font-family: 'Iceland', cursive;

}

.zoombox {

    display: inline-block;

    padding: 15px;

    border-radius: 3px;

    background: rgba(56, 29, 0, 1);

    -webkit-box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.3);

    box-shadow: 8px 8px 10px 0px rgba(0, 0, 0, 0.3);

    color: #fff;

    opacity: 0.9;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

    filter: alpha(opacity=90);

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

}

.zoombox:hover {

    opacity: 1.0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    -webkit-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    -moz-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    -ms-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    -o-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

    transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

}

.zoombox p {

    color: #fff !important;

    font-weight: 700;

}

.zoombox button {

    padding: 8px;

    border: 0px;

    -webkit-box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.2), inset 0 -4px 0px rgba(0, 0, 0, 0.2);

    box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.2), inset 0 -4px 0px rgba(0, 0, 0, 0.2);

    vertical-align: top;

    font-size: 1.1em;

    font-family: 'Iceland', cursive;

    -webkit-transition: padding 0.3s, background-color 0.3s;

    -moz-transition: padding 0.3s, background-color 0.3s;

    -ms-transition: padding 0.3s, background-color 0.3s;

    -o-transition: padding 0.3s, background-color 0.3s;

    transition: padding 0.3s, background-color 0.3s;

}

.zoombox button:hover {

    padding: 15px 10px !important;

    background: #eee !important;

    color: #222 !important;

}

.zoombox button a {

    color: #fff;

    text-decoration: none;

}

.zoombox button:hover a {

    color: #222 !important;

}

.zoombox button.facebook {

    background: rgba(59, 89, 152, 1);

    color: #fff;

}

.zoombox button.twitter {

    background: rgba(0, 171, 236, 1);

    color: #fff;

}

.zoombox button.gplus {

    background: rgba(228,69,36,1);

    color: #fff;

}

.zoombox button.pinterest {

    background: rgba(174, 45, 39, 1);

    color: #fff;

}

Customization:

• Change rgba(56, 29, 0, 1) To Change The Background Color
• Change #fff To Change The Font Color

Need Any Help?

If you need any other help for this widget then ask via comments. In few days I will present more amazing stuff with my dear newbies as well as the CSS geeks. Stay Blessed and God Bless..!!!

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.