Today’s featured Blogger widget design comes from Rehmat Alam, and he shares it with us in the form of a social sharing widget. His widget’s design is based on the user interface of Microsoft’s latest OS (Windows
known as Metro style.Now you can also now bring a bit of that Windows 8 touch and feel into your Blogger blog as well using Alam’s Metro-style inspired social sharing widget design.
NOTE: This tutorial assumes that your sidebar’s width is at least 300px. If it’s any smaller than that then you might have to do some minor adjustments by editing your template’s CSS code.
To install is quite easy. Just follow the steps below:
- Log in to your Blogger dashboard and go to the Design section.
- Head over to ‘Template’ and click on Edit HTML.
- Place a check inside the Expand Widget Templates box.
- By pressing Ctrl+F, look for ]]></b:skin> inside your blog’s template code.
- Copy/paste the following code below just above ]]></b:skin> and then save your template.
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgup_oD6IlZFe4izdKEbrb_3UDMv-DviGHmkQLkByverRQdbm9gk6df1d54iWo745ic7IK3SJvY94X5apOxaxoPRG2GJ2lFhA-5VxujnshhGElV3yvf_d6UogTRwKtFSWtW78uw2J4VeXKi/s1600/Twitter.png) no-repeat center center;
}
#supportive .googleplus {
width:148px;
height:74px;
background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXTMMByYMmiroxnr5wsJjzP6pDD2kSHjjxG6SDZMya3epixhY-UZJqKRE9J9vglHPju5LbLOSDzLVg9jwpG8-7O3ka4dthUPPsMLe8gOBFTB4hTGMy_gZ6ImjOHY4-g1-eHOabtCApdkN/s1600/google+plus.png) no-repeat center center;
}
#supportive .rss {
width:299px;
height:74px;
background:rgba(59,89,152,1) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhunH4OCh4ODT3mGSZH08vcZ2vrNbVRcdYxwEWgecHe79L5DMG19R6OxDAg3H06OpY2lNm4VGQH62cn8nSCm5Iice-3WI7m9uGmzzdGWeE1O0WAk0ihgBBtUHkbxQzMVWpEkcc2pcGw5V/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 head over to Layout and click on an Add a Gadget button.
- Select HTML/JavaScript and copy/paste the code below.
<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>
- Replace the all the necessary info (highlighted in red) according to your own URL/user details.
- Save the widget and you’re done!
0 comments:
Post a Comment