This widget is fully customize with CSS and HTML so it's easy to install and also it works very smoothly.We also use some little bit code of JavaScript in the end of codes, that is only for smoothness of colors and for giving the sharpness on them, and also reduce the weight of CSS and HTML codes and it will give a professional look to your blog and it's also perfect to attract the visitors and easily you can increase your members.
Add Blackino Pro Social Bookmarking Widget
- Login to Blogger > Dashboard
- Click on Drop Down Menu and select Layout
- Add a HTML/JavaScript Gadget
- Paste below code in it.
<style>
.wgbanner {
margin-left:15px;
margin-top:10px;
}
.wg-vl {
margin-top:7px;
}
#wg-social-hover {
position:relative;
width:240px;
height:400px;
background:#554e4c url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUN1klk41OFVJdObkqeGg2SDbwH83N-KDcXnc4M8fPKcz454pfnVxs3ZqEfl50v-wlXP12VSlVP7YIr3vLsrEovyztlq_kFGEH7_M6Z0U5cKq-bKJtIsIGx6CnFUwEg4OGlpG1_YmcB4/s1600/vintage.png);
}
#wg-social-hover #title {
font-family:'Open sans';
font-size:28px;
color:#fff;
font-weight:600;
text-align:center;
line-height:1.1em;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
margin:30px 20px 0;
}
#wg-social-hover #title span {
display:block;
font-size:14px;
line-height:1.5em;
margin-top:10px;
font-weight:400;
}
#wg-social-hover #links {
position:absolute;
bottom:0;
width:100%;
}
#wg-social-hover a {
display:block;
height:42px;
line-height:42px;
color:#fff;
font-size:12px;
background:rgba(0,0,0,0.08);
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;
padding:0 20px;
}
#wg-social-hover a:hover {
background:rgba(0,0,0,0.15);
text-decoration:none;
}
#wg-social-hover a.twitter:hover {
background:#79dbff;
}
#wg-social-hover a.facebook:hover {
background:#6e9bee;
}
#wg-social-hover a.google:hover {
background:#00be00;
}
#wg-social-hover a.pinterest:hover {
background:#cb2027;
}
#wg-social-hover a.rss:hover {
background:#ffae42;
}
#wg-social-hover a span {
height:15px;
line-height:15px;
width:15px;
text-align:center;
margin-right:20px;
font-size:13px;
border-radius:99px;
background:rgba(0,0,0,0.1);
padding:5px;
}
#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;
margin-right:21px;
text-align:center;
display:block;
opacity:0.9;
color:#796f6c;
font-size:40px;
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;
padding:30px 0;
}
.home-highlight:hover {
color:#3a3534;
text-decoration:none;
background:rgba(0,0,0,0.1);
}
.home-highlight-title {
font-size:13px;
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;
margin:7px 0 0;
}
.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;
height:1px;
background:#161414;
margin:5px auto 0;
}
.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;
font-weight:400;
margin:0;
}
.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;
background:#fff;
border-radius:2px;
padding:6px;
}
#featured-theme-slider .flex-control-nav {
position:absolute;
top:-20px;
left:-54px;
}
#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;
position:absolute;
top:50%;
-moz-transition:background .3s ease-in-out 0;
opacity:0.15;
border-radius:4px;
margin:-30px 0 0;
}
#featured-theme-slider .flex-direction-nav li .flex-prev {
left:-90px;
}
.home-highlight p,#featured-theme-slider .flex-direction-nav {
margin:0;
}
</style>
<div id="wg-social-hover">
<div class="wgbanner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHaZybKabqND1dkwwQ4qtuwO6hWzFMxNuIzbzpuycImQieNlev_LhL-z_Fa2LDURVGGRkfww2QNW8MfZxeHZXNrjaykSefiK7WR6PJO51ljJLWCbCrd7xLqBVAymsIlBdnJBW3J_xlUY/s1600/SUB-BAN.png" /></div>
<div id="links"><a href="http://twitter.com/WidgetGenerator" class="twitter" title="Twitter" target="_blank"><div class="wg-vl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3ngZQJgirMwRKY40vmO635Tx0rmkaAHWT5XC5TsU5Pbea4uTt0kZkeOuAjWQhyphenhyphenOzMbpu4-qxXV6PnkJRcv2mpgqow4sYVYgg-i5NrtU8leCLyrNN1C5T5Su62f_7rrkzJYiI3BlpxZE/s1600/twitter.png" /></div></a>
<a href="http://www.facebook.com/WidgetGenerators" class="facebook" title="Facebook" target="_blank"><div class="wg-vl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj996DZoZ6X3LAliky0Sftu3ErB6knC89gBTuOk5QcrILvkrMGjRZxy4qCDlc649pMRULLfWDe99GS3wUcG6MZAEHCj87YEOLv4JI4Gl20y_xeUPu2XovAQWHNVgieE8ueP-e0CTQGEMBM/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/107877224551351252870" class="google" title="Google Plus" target="_blank"><div class="wg-vl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNpiTbYsXJkHNNHhYU23YqKf-PyMDpKoNfiqp86THk2yNKA0YAfwZTbYer9g9XpJdMX4hDcqGia7A-uJFXsHlE4M8jv2ZNe1exFUpGGkN3wckmMch5gFzd-xvqCAYrcP162IMUPf5Rfo/s1600/google.png" /></div></a>
<a href="http://pinterest.com/WidgetGenerators" class="pinterest" title="Pinterest" target="_blank"><div class="wg-vl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1A1k-qh-1TWJTNjEQf504qQvr4311bnzAF9hwc7krPViYA3WVco6SGX7PPFvzO36wn8okJ1uHu0M4MSiLA_gB_vEfkbrI8DXBbJ_GfbwaWiawiHIyoAufotm8WVrhGHHkGcHzFHIl7jc/s1600/pin.png" /></div></a>
<a href="http://feeds.feedburner.com/WidgetGenerators" class="rss" title="Feedburner" target="_blank"><div class="wg-vl">
<script language="javascript">
document.write( unescape( '%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%79%4F%45%5A%51%54%37%69%74%37%34%2F%55%4B%39%77%43%6C%43%50%77%70%49%2F%41%41%41%41%41%41%41%41%49%50%51%2F%45%4B%34%43%42%39%32%78%51%39%38%2F%73%31%36%30%30%2F%72%73%73%2E%70%6E%67%22%20%2F%3E%3C%2F%64%69%76%3E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E%3C%2F%64%69%76%3E%20%20%20%20%0A%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%30%70%78%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%38%70%78%3B%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%20%61%6C%69%67%6E%3A%72%69%67%68%74%3B%0A%20%20%20%20%20%20%22%3E%0A%20%20%20%20%3C%61%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%23%44%33%44%33%44%33%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%77%69%64%67%65%74%67%65%6E%65%72%61%74%6F%72%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3E%57%69%64%67%65%74%20%3C%2F%61%3E%3C%2F%73%70%61%6E%3E' ) );
</script>
- Now Save Your Widget and Say Bingo.
Make Changes....!
- Replace it WidgetGenerators with your social usernames (FOUR TIMES)
- Replace it 107877224551351252870 with your Google + id
0 comments:
Post a Comment