Metro Style Subscription Widget with Hover Effect for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Metro Style Subscription Widget
Every blogger gives much importance to social subscription, right? In case of me, I give much importance to blogging communities as well as social networking sites. So today, in this post let me wanna share with you guys, a metro style social subscription widget with hover effect that gets inspiration from the Microsofts latest OS Windows 8. Now lets take a look at how to add this metro style social widget to your blog. Before that lets see a demo.

Before we get into this tutorial, I recommend you to take a look on the demo image screenshot provided below that Ive screencast from LS demo blog and get a detailed outline of what were gonna add in your blog right now (metro style social subscription widget seems as below screenshot).


Metro Style Subscription Widget with Hover Effect for Blogger

Please note: As you know, its a sidebar subscription widget. So your blogger sidebar should be at least 300px width. If its smaller than 300px, you can adjust your blogger templates width. Access path: Blogger Dashboard » Template » Customise » Adjust widths » Right sidebar.


 Add Metro Style Social Subscription Widget to Blogger
You can add this widget to your blog via two methods. The first method is One Click Installer. Slightly click on the Add to Blogger button given below and it adds your social subscription widget to your blog automatically.




If you would like to play with your blogger template, can choose the second method, adding this social subscription widget to your blog manually. So, to add this widget to your blogger blogs, kindly follow the steps provided below carefully.

  • Go to Blogger Dashboard » Template
  • Backup your blogger Template before making any changes
  • Click on Edit HTML
  • Check Expand Widget Templates
  • Press Ctrl + F and search the code shown below 

]]></b:skin>

Now copy & paste the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code).

.widget-item-control a {
    display: none;
}
.widget-item-control a {
    display: none;
}
#supportive {
    width: 300px;
    float: left;
    margin-top: 10px;
}
#supportive li {
    position: relative;
    cursor: pointer;
    padding: 0!important;
}
#supportive .facebook,.googleplus,.rss,.twitter {
    position: relative;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    z-index: 5;
    display: block;
    float: left;
    margin: 1px;
}
#supportive .icon {
    overflow: hidden;
}
#supportive .facebook {
    width: 147px;
    height: 150px;
    background: rgba(59,89,152,1) url(https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png) no-repeat center center;
}
#supportive .twitter {
    width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url(http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png) no-repeat center center;
}
#supportive .googleplus {
    width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url(http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png) no-repeat center center;
}
#supportive .rss {
    width: 299px;
    height: 74px;
    background: rgba(59,89,152,1) url(http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png) no-repeat center center;
}
#supportive li:hover .facebook {
    background-color: #3468B6;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .twitter {
    background: rgba(64,153,255,1) url(https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .googleplus {
    background: rgba(228,69,36,1) url(https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}
#supportive li:hover .rss {
    background: rgba(255,102,0,1) url(https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png) no-repeat center center;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
}

Now click Save template and youve added the CSS code in your blogger template successfully. Lets see how to add the HTML code section to your blogger sidebar to see your widget completely. See the below steps.

  • Go to Blogger Dashboard » Layout
  • Click on Add a Gadget
  • Copy & paste the below code in it (leave title column blank, its better)

<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUserID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
</ul>     

Important: You should replace all your social profiles Link URL details. And drag your gadget to top or down, anywhere in your blogger sidebar. Also you can move your gadget to your blogger footer if you want. Finally click Save arrangement and enjoy !

Also see: Hover Style Email Subscription Box for Blogger

Hope you like this metro style social subscription widget and I use simple language and instructions here especially for newbies for those whore not much friendly with blogger. If youve any doubts to clarify, ask via comment or use our contact form. Happy blogging :)