How to Add Css3 Social Media Widget to Blogger Sidebar

There is no doubt that social media plays a vital role in 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 in the wrong places where only 10% readers can find it and that's the reason that stops us to get our brand popularity on the social network.

Pay attention: How to Add PopUp Email Subscribe Widget to Blogger

Have you ever wondered which is the best place for showing the social profiles? Obviously, it's the sidebar. When a reader 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.

Check out: 6 Stylish Blockquote Designs for Blogger Blogs

Demo

Click here

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

1. Go to your blogger Dashboard > Template > Edit HTML
2. Click anywhere inside the template editor
3. Press Ctrl + F (Windows) and ⌘command + F (Mac)
4. Type ]]></b:skin> in the search bar and press Enter key to locate it
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21klYhVdeqI-vC5FRB1l4nMjcUnvoD5vkgWkb7uTw3n1OZLP9N82EmM9Zy-NuTkeBeoMSZDyQeEzSmuhLYyNgqq2nAy0KxkFym0F43d4VImIqvwvyAulKZ32qHdvoKmELWsnUI_JV0fna/s1600/Info+Arlina.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>

6. Replace the blue text with your own URL/username/text
7. 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.

Share this post