HackingUniversity - Hacks . Tricks . How-To's

19 December 2012

Glossy Black Social Subscribe Buttons for Blogger Blogs

glossy-black-iconsSo here you go with another set of subscribe buttons that you can use in your blogger or wordpress blog without any kind of problem, so you just need to add some set of codes and you will be ready for displaying your social links with these glossy icons. So now these icons include no JavaScript for hover zooming effect but it’s the magic of the CSS so it will not take any time for loading out these ones.

The instructions provided below are for blogger blogs but these will work in wordpress so you can paste the CSS in one place and html code in another as you normally do with all your gadgets. So I won’t show any instruction’s for wordpress blogs.

  1. Go to Blogger > Template > Edit HTML.
  2. Press Ctrl + F and search for ]]></b:skin> & paste below CSS above it.

    .bubblewrap li{
    width: 60px;
    .bubblewrap li img{
    width: 50px; /* width of each image.*/
    height: 50px; /* height of each image.*/
    margin-right: 4px; /*spacing between each image*/
    -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
    -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
    .bubblewrap li img:hover{
    -moz-transform:scale(1.8); /*scale up image 1.8x*/

  3. Now just Save your Template.
  4. Now navigate to Blogger > Layout > Add Gadget.
  5. Choose HTML/JavaScript and add below code into it.

    <ul class="bubblewrap">
    <li><a href="https://plus.google.com/u/0/xxxxxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="http://1.bp.blogspot.com/-nShwpxKs2QA/UM3BUKd-jQI/AAAAAAAAF8w/T8BjuWllJVU/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>
    <li><a href="http://www.facebook.com/xxxxxxxxxxxxxx" target='_blank' rel='nofollow'><img src="http://3.bp.blogspot.com/-DdXKgR250PU/UM3BS3Gtb2I/AAAAAAAAF8o/-n7bz_hTfmY/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>
    <li><a href="http://www.digg.com/xxxxxxxxxxx" target='_blank' rel='nofollow'><img src="http://2.bp.blogspot.com/-_LSlpWoIO58/UM3BRsSj0vI/AAAAAAAAF8g/oOWj0xC9aF4/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li>
    <li><a href="http://www.twitter/xxxxxxxxxxx" target='_blank' rel='nofollow'><img src="http://1.bp.blogspot.com/-hKDGv3m-OVQ/UM3BX36PaqI/AAAAAAAAF9E/lXpT5Mdvx1I/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>
    <li><a href=http://feeds.feedburner.com/xxxxxxxxxxxxx target='_blank' rel='nofollow'><img src="http://1.bp.blogspot.com/-WXrH-N_sH4s/UM3BW3OE2eI/AAAAAAAAF9A/mVaMVGHmpXk/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>

  6. Now just change the blue xxxxx with your own personal website usernames, that’s it now enjoy guys have fun using these sharing buttons. via - bloggertrix.com