Styleism Hover Effect Social Widget

Blogger.com is that place where every one try to stylize their blogs with awesome widgets, an the great feature of blogger platform is that every one can customize their blog according to their desire choice, that is why adding any widget to blogger is very easy.As a blogger my advice to you is keep your blog/website simplest, but it should be stylized and beautiful and thus it will help you to engagement of your visitors with your blog & money.Surely add some necessary widgets on your blog such as Facebook Like Box, Email Subscription widget and such other relevant to this.So today I have bring a very attractive Styleism Hover Effect Social Widget  which you will like IN SHA ALLAH. Styleism widget look like this

I've created this widget by HTML and CC3 coding. This widget will attract your user to visit your blogs' social profiles i.e Facebook page, twitter etc.This widget is faster as your blog mean it will be loaded faster.

Features of Styleism Hover Effect Social Widget

This widget is full of features we have added following features into this widget which will force your reader to check your social profiles.

• It has Stylish Look.
•  It is included all social profiles buttons.
• Easy to Customize .

Now It's Time to add this widget to your blog

Log in  to your blogger dashboard → Layout → Add Widget →HTML/Java Script and paste the following below code in it.

<!--Styleism Social Widget by (www.probloggingcafe.blogspot.com)-->
<div id="mbl-social-hover">

<div class="tota2"><img src="http://3.bp.blogspot.com/-VjCNk4hkVug/UlUipxpT_HI/AAAAAAAAAUA/2W4UBEGjErQ/s1600/subscribeus-probloggingcafe.blogspot.com.jpg.png" /></div>

<a href="https://www.facebook.com/ProBloggingCafe" class="facebook" title="Like Us on FB " target="_blank"><div class="tota"><img src="http://2.bp.blogspot.com/-EKfwnTf4FEY/UlUk8XAYK0I/AAAAAAAAAUs/qFZJLjm_kCQ/s1600/facebook-probloggingcafe.blogspot.com.jpg.png"  /></div></a>

<div id="links"><a href="http://twitter.com/abbasizaibi" class="twitter" title="Follow us on Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-2j5uNVMWB4o/UlUjK0h51eI/AAAAAAAAAUQ/g6bdILMwuWU/s1600/twitter-probloggingcafe.blogspot.com.jpg.png" /></div></a>

<a href="https://plus.google.com/u/0/116584889067969030899" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-FG2WRGZ3ho0/UlUit-jCH-I/AAAAAAAAAUI/44Rlcick5C0/s1600/google-probloggingcafe.blogspot.com.jpg.png" /></div></a>

<a href="http://pinterest.com/zaibabbasi" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-pZtYZwi7mhI/UlUjzT6gv-I/AAAAAAAAAUg/S2E2XpVNmbU/s1600/pinterest-probloggingcafe.blogspot.com.jpg.png" /></div></a>

<a href="http://feeds.feedburner.com/ProBloggingCafe" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://2.bp.blogspot.com/-Wd14oB3XsnI/UlUjrByeJyI/AAAAAAAAAUY/vozwNz2y0d4/s1600/rss+feeds-probloggingcafe.blogspot.com.jpg.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c  url("http://3.bp.blogspot.com/-IkByAkJr5Do/UlUimYemnJI/AAAAAAAAAT4/tw5zl0AF2pM/s1600/vintage-probloggingcafe.blogspot.com.jpg.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

Customization
for customization of this widget you have to change following Links with your own links

1. Change this link https://www.facebook.com/ProBloggingCafe with your facebook page link.
2. Change this link http://twitter.com/abbasizaibi with your twitter link.
3. Change this link https://plus.google.com/u/0/116584889067969030899 with your Google Plus Page Link.
4. Change this link http://pinterest.com/zaibabbasi with your pinterest profile link. 
5. Change this link http://feeds.feedburner.com/ProBloggingCafe with your Blogs's Feedburner address.