The HTML Code :
- Go to Blogger Dashboard
- Template -> Edit HTML -> Proceed
- Tick Expand Widget Templates and then search for--
<data:post.body/>
And just below it paste the following code :
<!-- Zoom-In Social Follow Us Widget by Digitalhubinc.com -->
<b:if cond='data:blog.pageType == "item"'>
<div id="cenbox">
<div class="zoombox">
<p>FOLLOW US ON</p>
<button class="facebook"><a href="FB URL" target='_blank' rel='nofollow'>facebook</a></button>
<button class="twitter"><a href="Twitter URL" target='_blank' rel='nofollow'>twitter</a></button>
<button class="gplus"><a href="Google+ URL" target='_blank' rel='nofollow'>google+</a></button>
<button class="pinterest"><a href="Pinterest URL" target='_blank' rel='nofollow'>pinterest</a></button>
</div>
</div>
</b:if>
<!-- Zoom-In Social Follow Us Widget by Digitalhubinc.com -->
Replace the highlighted text with your respective URLs.
The CSS Code :
Now the meat on the skeleton.
- Go to Blogger Dashboard
- Template -> Edit HTML -> Proceed
- Search for ]]></b:skin> and just above it paste the following code.
/** Zoom-In Social Follow Us Widget by Digitalhubinc.com **/
#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;
}
/** Zoom-In Social Follow Us Widget by Digitalhubinc.com **/
Some other changes you may make in the widget:
- Change rgba(56, 29, 0, 1) to change the background color
- Change #fff to change the font color
"If you want to have some fun, then try changing 15px 10px to create some different hover effects. If you want to know how to add more buttons, then read further or else you can directly jump to the conclusion part."
How to add more Buttons? :
Adding more buttons is pretty easy. For this tutorial we will be adding an RSS button in this widget. Just follow the steps.
Add button in HTML :
In the existing HTML of this widget just added the following line to get one more button.
<button class="rss"><a href="URL" target='_blank' rel='nofollow'>RSS</a></button>
The class name can be anything you want it to be, but just make sure you don't have that class already.
Add the CSS for new button :
Now in the CSS part you need to add the following piece of code for your extra button.
.zoombox button.rss{
background: rgba(255,102,0,1);
color: #fff;
}
If you have a different class name, then don't forget to replace rss with your class name. Now to change the color of the button replace rgba(255,102,0,1) with your color.
End.
