AllBlogTools.com | Blogger Templates and Tricks

---

How to Add Amazing Social Widgets Posted: 10 Sep 2012 06:50 PM PDT This is another cool social widget for you to integrate in your site. Safeer Ahmed shows you his version called Amazing Social Widgets. Here's how you can add to your Blogger blog: Go to Blogger Dashboard. Go to Layout > Add a Gadget > HTML/JavaScript. Copy and paste the code provided below in the content area. <style> /*social icon By howdoblog.com*/ #head-htb{width:230px ; } #head-htb ul li {list-style :none; padding: 0 0 0 1px; float: left;} #head-htb ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 64px; width: 64px ;border: 0px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyFkrrNGca_WLT6g_7WS9Yo0dNgeG8DhG5M5Is1ywt98oZR7Sgvj_edpkGAlKsXTDU0owGZeAFFUw-RnZ2iw1_508QptpNEYwJzoFKQPAotoMLB_xTGy0q-d5OuuUwgiqjTNwR3P6/s353/Social%2520Media%2520Widget.PNG) no-repeat; display: block;} #head-htb li#fb a {background-position: -210px 0px;margin:0px 0px;} #head-htb li#fb a:hover {background-position: -210px 0px;margin:0px 0px;transform:rotate(30deg); transform:rotate(15deg); -ms-transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -moz-transition-duration: 950ms; -webkit-transition-duration: 950ms; -o-transition-duration: 950ms; } #head-htb li#twit a {background-position: -290px 0px;margin:0px 0px 0px 7px;} #head-htb li#twit a:hover {background-position: -290px 0px;margin:0px 0px 0px 7px;transform:rotate(30deg); transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); -moz-transition-duration: 950ms; -webkit-transition-duration: 950ms; -o-transition-duration: 950ms; } #head-htb li#g a {background-position: 0px 0px;margin:0px 0px 0px -8px;} #head-htb li#g a:hover {background-position:0px 0px;margin:0px 0px 0px -8px; transform:rotate(15deg); -ms-transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); -moz-transition-duration:950ms; -webkit-transition-duration: 950ms; -o-transition-duration: 950ms; } #head-htb li#rss a {background-position: -68px 0px;margin:0px -3px;} #head-htb li#rss a:hover {background-position: -68px 0px;margin:0px 0px 0px -3px;transform:rotate(30deg); transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); -moz-transition-duration: 950ms; -webkit-transition-duration: 950ms; -o-transition-duration: 950ms; } /*Social Icons howdoblog.com */ </style> <div id="head-htb"> <ul> <li id="fb"><a href="YOUR FB URL">Facebook</a></li> <li id="twit"><a href="YOUR TWT URL">Twitter</a></li> <li id="g"><a href="YOUR GOOGLE+ URL">Google+</a></li> <li id="rss"><a href="YOUR RSS URL">RSS Feed</a> </li> </ul> </div> <div align="left"> <font size="0.125"> <a href="http://www.howdoblog.com/2012/08/amazing-social-media-widget-for-bloggers.html"> [Grab This]</a></font> </div> Save. Note: Always make a backup first before doing any customizations in your template. Replace the following with your own URL links: Your FB URL (Facebook fan page) Your G+ URL (G+ profile or blog fanpage) Your TWT URL (Twitter account) RSS FEED LINK (feed links)

Chronicl Thesis Skin’s Social Media Listing Widget Posted: 10 Sep 2012 06:48 PM PDT Would you like to have another different way of showing and sharing your social sites to your site visitors? Try out this social media widget from BlogTipsNTricks. Its design and appearance was based on the WordPress Chronicl Thesis skin. You can find the live demo here. Read and follow the instructions below. In your Blogger dashboard's "Design" section, go to "Layout". Click on "Add a Gadget" and then choose "HTML/JavaScript". Copy/paste the code below: <div> <ul> <li><a href="http://feeds.feedburner.com/chandeepsBlogTips">Subscribe to the RSS Feed</a></li> <li><a href="https://twitter.com/chandeeban">Follow me on Twitter</a></li> <li><a href="https://www.facebook.com/blogtipsntricks">Find me on Facebook</a></li> <li><a href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li> <li><a href="http://in.linkedin.com/in/blogtipsntricks">Connect with me on LinkedIn</a></li> <li><a href="http://www.youtube.com/user/chandeep10">Watch me on YouTube</a></li> </ul> </div> <style type='text/css'> /*<![CDATA[*/ .btnt-chronicl-social {  width: 320px;  margin: -10px;  } .btnt-chronicl-social ul {  margin: 0;  padding: 0;  } .btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; } .btnt-chronicl-social ul li a {   color: #fff;   display:block;  } .btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; } /*]]>*/ </style>     Replace the highlighted portions with that of your own corresponding profile URLs Save the widget and you're done! Hope you enjoy your new social media widget.

You are subscribed to email updates from Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610