Hello bloggers, hope everyone are doing good. We all know that there are unlimited benefits available in social media platforms for promoting our blog/ website. Today we will learn and add an unique social media widget in our blogger blog which is looks like windows 8 titles. In this widget you can link up your social media profiles. (RSS feed, Facebook, Twitter, Google Plus, LinkedIn, YouTube, StumbleUpon and Pinterest.) This is an extra colorful attraction to concentrate your readers for subscribing. I have already applied it to our test blog. So, before you apply it on your blog, you can simply watch a demo.
ALSO REED: How To Customize Blogger's Comment Box To Get More Comments?
1. Sign in to Blogger blog
2. Click on your blog title
3. Click Layout from left side menu
4. Choose a suitable widget position and click Add a Gadget
5. Select HTML/Javascript
6. Now simply paste the below codes in the box
<style>
/*---ShineMat Windows 8 Style Social Widget---*/
.sm-win-eight-social{
background: transparent;
width:300px;
}
.sm-win-eight-social li{
position:relative;
cursor:pointer;
padding:0px;
list-style:none;
}
.sm-win-eight-social .smrss,.smfacebook,.smtwitter,.smgoogleplus,.smlinkedin,.smyoutube,.smstumble,.smpinterest {
z-index:8;
float:left;
margin:2px;
display:block;
position:relative;
}
.sm-win-eight-social .smrss{
background: #F98509 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gOMxAQz_AwIk2jdQlcaVMXcq5bTYjueA0TpioQ1ELVbMVtXoPrnbmdb6RqmOHwL5FaENhKd_v1Mc2wIt1cNu7TB8_yT02whLihWbHhEEoTJobJEH41xIv1zrozbawTuPvgcyzTg1J4I/s60/shinemat-rss-feed-icon-n.png) no-repeat center;
width:140px;
height:143px;
}
.sm-win-eight-social .smfacebook{
background: #2E89F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiuCckuFE1SGBmMS2JYD_y9KHASJOyDViMnkszm5Er-bmicrXyXrijXv7flX1XDmde6Pv_BkYAjhK01fKmBdhKHnO0roR9VofSANs96LEoV501DJS5c5TcbWRsoFZBI4Z3gbihatZf4Ao/s37/shinemat-facebook-icon-h.png) no-repeat center;
width:68px;
height:70px;
}
.sm-win-eight-social .smtwitter{
background: #6EB921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHctw0TjkJUuquXRvcAU3YZVgPHbUXMBvQyz_DuuJ_5Z1Lmi0syCg4Nxd18zaBwdtAC621KD_-QltS-i4l3ZqaOw0dHspWY4QGY3iyI1q5EjRffsI4pSnjYhZ6Z4V4NiAQz3Nq0fFnL3U/s50/shinemat-twitter-icon-n.png) no-repeat center;
width:69px;
height:70px;
}
.sm-win-eight-social .smgoogleplus{
background: #5533AE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OTIydxUdtNs5xooBjn0kNaJHEc_wHwIibRw4rGB1VDhcaybM8kyiNhdfeIT2b2unfFPPib85ultLopGYnExe8HaR5c-vI5TEQ0zMlR5xIiMtj3Ih_CyTIekzgMYevcW2fttXCUm9dus/s40/shinemat-googleplus-icon-n.png) no-repeat center;
width:68px;
height:69px;
}
.sm-win-eight-social .smlinkedin{
background: #0097BD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9mpzhg0JDwEkTm6R6gvJlPMu8wPoK-hkGZlnaAQhpe0-lrpQyuBTlPoPNpJ8IaBbzoL5r_9dwOczVEm151f8aiGizkpyMeybVtR4IQOOEqvzwWe6XT-mzj5Xq_i3JvsdAyAEfo8TzZA/s30/shinemat-linkedin-icon-n.png) no-repeat center;
width:69px;
height:69px;
}
.sm-win-eight-social .smyoutube{
background: #e64a41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMgHdIFwpNMJIRIv-gtHZeuoBuNPDWKoW7k_1OBTVOyI1XbtGkFjNMmosteNnvQpAwp2zdkR7Om9wKa75WvH2cVpr_Cw4D78-2mVTQqynZ4FBCM4Lx9Lq-fAFkMH7eIp0139_3SAlvmo/s80/shinemat-youtube-icon-n.png) no-repeat center;
width:285px;
height:69px;
}
.sm-win-eight-social .smstumble{
background: #FA05EC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dDpSGN_NF2-ywqLQkNXjpj2IucwnZXYBcUuMwVOKIeH4wvTFNeCW7T_R8MM9Sp_LIQDfNhoSI21LE8C3sv75OqQca6AcvF-CAN0yTCAFMKVvN5Ec_-k0btE-jnt4aw0o3NuLrPExBRk/s50/shinemat-stumbleupon-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social .smpinterest{
background: #0B54A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBd5xg0x56xxEQbDwu2zVwrPENg0aLv1l6Ui9Q4J_q0lHgftLaWn8CtFyyyCc9C-c0J7sjXThcjeTWQunEwYuuycGY3x5e_zBQhuz72SVZ0WRXUJzOTtDCPzhinL9mybQobVAc4hPyRU/s38/shinemat-pinterest-icon-n.png) no-repeat center;
width:141px;
height:69px;
}
.sm-win-eight-social li:hover .smrss{
background: #F98509 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy10CXBsjW4iW3IW3Dw1GGh96AmyCpW1lwAQHZwvUWQ8kh29AjmX6japTyumnuaFnb7klOMSyAqe_asKZkDk9lu5_omjJiS-bC-1Adc7VL1wAYtaZybt7RtBvk5v6vS4x5uPZQWtekeFU/s70/shinemat-rss-feed-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smfacebook{
background: #2E89F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqg4i6mfujh2D0VcZHANSezpM0auTughYR8c1Or1lOoK3KwClDy2CwY8Y1Oov8IAVruttL0YsfWFNkkZNN_xdCZILz0UW-I_7mjiVIaSCDbzbpVf9QcY-C7qKOG8_4l1yrEQ2az9fkY6U/s56/shinemat-facebook-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smtwitter{
background: #6EB921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhjrDBtMEzVALu2ssm2IeWINDv-oOcTu-ktw-jwMog45mYnmavJmFZq8dSF65K1vo439tZGxddyfU1EFqm9dxui-72asMVbiskXDNUKOwDKstDv0m201grUuBQKFo9VSyyfknsIobHdk/s60/shinemat-twitter-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smgoogleplus{
background: #5533AE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2knKY-F_TZu674Fsu5AzkP3sS7Ohbusf3zVbsWbTXXXn16kxmPCztE2L_1toz7Q-7ckSVU-0-b05yiV1bsbktb8VJf34V4Hx1ajTcZ67DAaBImypq6sOL_x3xOGIxNY9X9yqgYoGJP7U/s50/shinemat-googleplus-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smlinkedin{
background: #0097BD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBhwc3EMIggHUL0ju2BKNQsDTb8WYjHWmiQqZc5U9i3Zqaw3MB4Slxvxo0ctVs-417uudn2HiYBwSmzY9nxam9Sh5g-q0my2f9sw3BZxYltTT8RPPdjIL-7bm7mO9FfoHK4fIYlNIe9k/s40/shinemat-linkedin-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smyoutube{
background: #e64a41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcorwQpDBpLJAxR8pdNq393OlhScfHrp4AFtQK_Sfm4JP57uMy7XZUvEUPuCaEYBnW_rxh-tg2xH12S_K3BER1Er0bcaIJrmwhm7AcoKtnkzR_KFT03Ybk19p0UKTtNtS83LKGXGYsZk/s100/shinemat-youtube-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smstumble{
background: #FA05EC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11oRB_sVj2dHR7EDqC54Ktt0E0rfdwshpG4MgoUtW5ho0-nyGNRvG6UHA48X4esc5u3Y6BaCTG4vykUdypyDqifEU7yVWea0MPQYz24WJTAgZfDvT7MnBzuURy_7dCWaxVsEublvu4Ic/s60/shinemat-stumbleupon-icon.png) no-repeat center;
}
.sm-win-eight-social li:hover .smpinterest{
background: #0B54A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43xtrMY4L6osL_ER-z3igwmpU-GSLjW2h6IMI-cNUo9EcT2ZAp-Pbpv_zo1oEguHEi_j60dz_BobMJenyuRU0pCsGkp4JRPM46eoy3IzkRSxq9UfxDckOObV3wj2afSTAX1YZs1-4-7w/s51/shinemat-pinterest-icon.png) no-repeat center;
}
</style>
<div class="sm-win-eight-social">
<li><a class="smrss" href="http://feeds.feedburner.com/RSS-USERNAME"></a></li>
<li><a class="smfacebook" href="http://www.facebook.com/FACEBOOK-USERNAME"></a></li>
<li><a class="smtwitter" href="http://twitter.com/TWITTER-USERNAME"></a></li>
<li><a class="smgoogleplus" href="https://plus.google.com/G+PROFILE-ID"></a></li>
<li><a class="smlinkedin" href="https://www.linkedin.com/LINKEDIN-USERNAME"></a></li>
<li><a class="smyoutube" href="http://www.youtube.com/YOUTUBE-USERNAME"></a></li>
<li><a class="smstumble" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME"></a></li>
<li><a class="smpinterest" href="http://pinterest.com/PINTEREST-USERNAME"></a></li>
</div>
7. Replace the following areas with your own details...
▪ Replace RSS-USERNAME with your blog's RSS feed link.
▪ Replace FACEBOOK-USERNAME with your Facebook username.
▪ Replace TWITTER-USERNAME with your own Twitter username.
▪ Replace G+PROFILE-ID with your Google Plus profile ID.
▪ Replace LINKEDIN-USERNAME with your LinkedIn username.
▪ Replace YOUTUBE-USERNAME with your Youtube username.
▪ Replace STUMBLEUPON-USERNAME with your Stumbleupon username.
▪ Replace PINTEREST-USERNAME with your Pinterest username..
8. Now click Save button to done everything.
9. Reload your blog to see this nice widget is working on your blog.
If any problem you will face please do not late to let me know. I will assist you with smiles.
Have Fun Pals.
Post a Comment
Please DON'T spam here. Spam comments will be deleted just after our review.