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:
- Add Social Buttons With Hover Effect In Blogger Blog
- Add Black Gloss Social Sharing Buttons To Your Blogger Blog
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
Note: Replace The Highlighted Text With Your Respective URLs.<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>
- 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
0 comments:
Post a Comment