Add Css3 Social Media Widget to Blogger Sidebar

blogger social media widget icon set
There is no doubt that social media plays a vital role for growing the blog audience. We always try to get more and more clicks for our blog posts and pages. If you are really serious about your blog then you must add your social media profiles in your template on the right place where your readers can find you easily. But sometimes, we place our social profile accounts on the wrong places where only 10% readers can find it and that's the reason that stops us to get our brand popularity on social network. Have you ever wondered which is the best place for showing the social profiles? Obviously, it's the sidebar. When a readers comes to our blogs they find our social profiles very quickly. And the best functionality of the the sidebar is; it works responsively on every device.

Read Also: 6 Stylish Blockquote Designs for Blogger Blogs
Therefore, today we are going to share how to add Css3 social media widget to Blogger sidebar with stunning hover effects that is created with Css3 and HTML5. It is a beautiful widget that catches your blog visitors attention and thus you can easily gain the popularity for your blogs on social media. Many bloggers do not share the truth about their success and if someone shared it mistakenly, they later removed their useful and beneficial tips from their blogs. I can't understand why this happens? I strongly recommend to share your useful tips and tutorials for newbies if you've one and help them to take their blogs to the next level. So let's start adding this widget to your blog without discussing it further.

To Add The Css3 Social Media Sidebar Widget, Follow The Steps

Step 1. Go to your blogger Dashboard > Template > Edit HTML
Step 2. Click anywhere inside the template editor
Step 3Press Ctrl + F (Windows) and ⌘command + F (Mac)
Step 4. Type ]]></b:skin> in the search bar and press enter key to locate it.
Step 5. Now just before/above the ]]></b:skin> paste the given CSS
/*======== Social Media Widget CSS Starts========*/
#HTML68 {margin:0 0 20px 0;}
#HTML68 .lightsosmed-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.lightsosmed-img{position:relative;max-height:140px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:100%;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}
.lightsosmed-img:before{content:&#39;&#39;;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:100%}
.lightsosmed-float a{background:#8bc34a;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border-radius:3px;box-shadow:3px 3px 3px rgba(0,0,0,0.05);transition:all .3s}
.lightsosmed-float:hover a{background:#7cb342;color:#fff;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}
.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;\a0&#39;;background-color:rgba(0,0,0,0.08);}
.lightsosmed-info h4:before {margin-left:-50%;text-align:right;}
/*======== Social Media Widget CSS End========*/
Step 6. The next step is, to find the </b:section>
Step 7. Paste the following snippets right after/below the </b:section>
<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' version='1' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='N Light' class='img-responsive' height='180' src='https://4.bp.blogspot.com/-jvRiCg0BHgk/VyO7VHzwFDI/AAAAAAAADCw/XAWK-rsio24QMitPfGRJXRFoxFPMWc6eACLcB/s1600/Info%2BArlina.jpg' title='N Light' width='300'/>
<div class='aboutfloat-img'><span class='lightsosmed-float'><a href='https://www.blogger.com/follow-blog.g?blogID=1657654332883632951' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='lightsosmed-info'>
  <h4><span>Knigulper</span></h4>
<p>Knigulper Responsive Social Media Widget</p>
</div>
<div class='lightsosmed-wrpicon'>
<ul class='extender'>
<li class='lightsosmed-icon fbl'><a href='https://www.facebook.com/knigulper/' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='lightsosmed-icon twitt'><a href='https://twitter.com/knigulper' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='lightsosmed-icon crcl'><a href='https://plus.google.com/b/110147552717093083415/+KnigulperBlogspot' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
      </b:widget>
Step 8. Replace the blue text with your own URL/username/text
Step 9. Click save template and you are on the go.

Conclusion
There are so many good things about social network widgets - they help us to grow our blog readers that increases the number of blog posts shares across the network. but additionally posting the unsuitable contents can harm a blogger's reputation in ways that can cause difficulties years later - like when an expected advertiser or a reader does a background check. If a blogger sends a mean spirited tweet as a laugh, it might be very hurtful to somebody else and even taken as a risk.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind