I have already shared so many social media widgets with my lovely readers such as Egg Sliding Effect widget and floating social bookmarking widget with easing effect. Today I have a new Smooth Sliding Social Bookmarking Widget for all of you. With this widget you can give link to your social media profiles: Facebook, Twitter, RSS, Google + and Pinterest. See demo below before adding this on your blog.
How to Smooth Sliding Social Bookmarking Widget
- Go to your Blogger Dashboard >> Your Blog >> Layout
- Click On Add a Gadget >> HTML/JavaScript Gadget
- Copy The Following Code and Paste Inside The Gadget
<style>.blogsdaddy-social-slidebox {font: 16px normal 'Denk One', sans-serif;display: inline-block;position: relative;width: 95%;max-width: 200px;padding: 12px;}.blogsdaddy-social-slide {width: 95%;max-width: 280px;padding-top: 8px;padding-left: 8px;padding-right: 8px;}.blogsdaddy-social-slide a {text-decoration: none !important;}.blogsdaddy-social-slide ul {margin-top:-5px;margin: 0;padding: 0;list-style: none;}.blogsdaddy-social-slide ul li {margin-bottom:15px;display: inline;margin: 0;padding: 0;text-indent: 0;margin-left:10px;}.blogsdaddy-social-slide ul li a.facebook {border-left: 65px solid rgba(59, 89, 152, 1);color: rgba(59, 89, 152, 1);-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.facebook p {margin: 2px 20px 0 -50px;display: inline-block;color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-left: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.blogsdaddy-social-slide ul li a.twitter {border-left: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.twitter p {margin: 2px 20px 0 -45px;display: inline-block;color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.twitter:hover {background: rgba(64, 153, 255, 1);border-left: 0px solid rgba(64, 153, 255, 1);color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.twitter:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.blogsdaddy-social-slide ul li a.gplus {border-left: 65px solid rgba(219, 74, 57, 1);color: rgba(219, 74, 57, 1);-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.gplus p {margin: 2px 20px 0 -50px;display: inline-block;color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.gplus:hover {background: rgba(219, 74, 57, 1);border-left: 0px solid rgba(219, 74, 57, 1);color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.gplus:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.blogsdaddy-social-slide ul li a.pinterest {border-left: 65px solid rgba(174, 45, 39, 1);color: rgba(174, 45, 39, 1);-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.pinterest p {margin: 2px 20px 0 -50px;display: inline-block;color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.pinterest:hover {background: rgba(174, 45, 39, 1);border-left: 0px solid rgba(174, 45, 39, 1);color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.pinterest:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.blogsdaddy-social-slide ul li a.rss {border-left: 65px solid rgba(255, 102, 0, 1);color: rgba(255, 102, 0, 1);-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.rss p {margin: 2px 20px 0 -45px;display: inline-block;color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.rss:hover {background: rgba(255, 102, 0, 1);border-left: 0px solid rgba(255, 102, 0, 1);color: #fff;-webkit-transition: all 1000ms ease-in-out;-moz-transition: all 1000ms ease-in-out;-ms-transition: all 1000ms ease-in-out;-o-transition: all 1000ms ease-in-out;transition: all 1000ms ease-in-out;}.blogsdaddy-social-slide ul li a.rss:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}</style><div class="blogsdaddy-social-slide"><ul><li><a class="blogsdaddy-social-slidebox facebook" href="https://www.facebook.com/BlogsDaddy"target='_blank' rel='nofollow'
><p>10K+</p>Facebook </a></li><li><a class="blogsdaddy-social-slidebox twitter" href="https://twitter.com/BlogsDaddy"target='_blank' rel='nofollow'
><p>7K+</p>Twitter</a></li><li><a class="blogsdaddy-social-slidebox gplus" href="https://plus.google.com/117100549673033253859"target='_blank' rel='nofollow'
><p>5K+ </p>Google+</a></li><li><a class="blogsdaddy-social-slidebox pinterest" href="http://pinterest.com/gaganmasoun"target='_blank' rel='nofollow'
><p>3K+ </p>Pinterest</a></li><li><a class="blogsdaddy-social-slidebox rss" href="http://feeds.feedburner.com/BlogsDaddy" target='_blank' rel='nofollow'><p>15K+</p>RSS</a></li></ul></div>
Remember Notes - Replace other Red Highlighted Code's With Your Social Profile URL's as Mentioned Above In Code.
Congratulations: Now you will see this widget on your blog. If you have any question or query related to Smooth Sliding Social Widget then, do not hesitate to leave a comment below we will try to guide you through your problems.
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 follow him on twitter @BlogsDaddy. You can also follow him on Google+.
0 comments:
Post a Comment