How To Add a Beautiful Social Links for Blogger or Website

Hi, in this post i will explain you how to Add a Beautiful Social Links for Blogger or Website, this widget attract more visitors to Visit / Follow /Like your Social Media Pages...Let me show you a preview of this widgets :

Preview

So if you like this social links let me explain you how to add it in your blog or website.
Step 1 : Go To Blogger.com >> Layout >> Add Html/JavaScript - or any place you want
and copy paste the code bellow

<div class="widgets4free">
<div class="connect-label">Connect with us</div>
<div class="social-links-wrapper">
<a class="circle" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/YOUR-ID-HERE" >
<svg viewbox="0 0 15.2 32"><g><path d="M15.2,11.1H9.6V7c0-1.2,1.3-1.5,1.9-1.5c0.6,0,3.6,0,3.6,0V0L11,0C5.4,0,4.1,4.1,4.1,6.7v4.4H0v5.6h4.1
c0,7.3,0,15.2,0,15.2h5.5c0,0,0-8.1,0-15.2h4.7L15.2,11.1z"></path></g></svg></a>
<a class="circle" target="_blank" rel="noopener noreferrer" href="http://twitter.com/YOUR-ID-HERE">
<svg viewbox="0 0 32.5 28.4"><g><path d="M32.5,3.4c-0.5,0.3-2.2,1-3.7,1.1c1-0.6,2.4-2.4,2.8-3.9c-0.9,0.6-3.1,1.6-4.2,1.6c0,0,0,0,0,0
C26.1,0.9,24.4,0,22.5,0c-3.7,0-6.7,3.2-6.7,7.2c0,0.6,0.1,1.1,0.2,1.6h0C11,8.7,5.1,6,1.8,1.3c-2,3.8-0.3,8,2,9.5
c-0.8,0.1-2.2-0.1-2.9-0.8c0,2.5,1.1,5.8,5.2,7c-0.8,0.5-2.2,0.3-2.8,0.2c0.2,2.1,3,4.9,6,4.9c-1.1,1.3-4.7,3.8-9.3,3
c3.1,2,6.7,3.2,10.5,3.2c10.8,0,19.2-9.4,18.7-21.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1C30.2,6.4,31.5,5.1,32.5,3.4z"></path></g></svg></a>
<a class="circle" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/company/YOUR-ID-HERE" >
<svg viewbox="0 0 31.9 32"><g><path d="M24,8c-5.1,0.1-7.7,3.8-8,4V8h-6v24h6V18c0-0.5,1.3-4.6,6-4c2.5,0.2,3.9,3.5,4,4v14l6,0V15.4
C31.7,13,30.5,8.1,24,8z M0,32h6V8H0V32z M3,0C1.3,0,0,1.3,0,3s1.3,3,3,3c1.7,0,3-1.3,3-3S4.7,0,3,0z"></path></g></svg></a>
<a class="circle youtube" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/channel/YOUR-ID-HERE">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"></path></svg></a>
</div>
</div>
<a href="https://bloggerwidgets4free.blogspot.com" style="display:none">Widgets4free</a> <style>
.widgets4free{display:block;position:relative;margin:0 auto;padding-top:12px;width:285px;height:70px;}.widgets4free .connect-label{margin:-10px 0 20px 0;font-weight:700;color:#de1400;text-transform:uppercase;text-align:center}.widgets4free .social-links-wrapper{margin:12px auto;text-align:center}.widgets4free .social-links-wrapper .circle{display:inline-block;position:relative;border-radius:50%;height:50px;width:50px;margin-top:-10px;transform:translateZ(0)} .widgets4free .social-links-wrapper .circle svg{display:inline-block;position:absolute;fill:#de1400;width:15px;height:15px;top:17px;left:17px} .widgets4free .social-links-wrapper .circle:hover svg{fill:#fff} .widgets4free .social-links-wrapper .circle:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;box-shadow:inset 0 0 0 2px #de1400;transform:scale3d(0.9, 0.9, 1);transition:box-shadow 0.4s, transform 0.4s}.widgets4free .social-links-wrapper .circle:hover::before{box-shadow:inset 0 0 0 35px #de1400;transform:scale3d(1, 1, 1)}.widgets4free .social-links-wrapper .circle:not(:last-of-type){margin-right:12px} .widgets4free .social-links-wrapper .circle span{margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}.widgets4free .social-links-wrapper .circle.youtube svg{width:25px;height:25px;top:12px;left:12px} .widgets4free .social-links-wrapper
.widgets4free .connect-label{text-align:center;margin-top:5px} .widgets4free .social-links-wrapper{display:block;width:auto}
.widgets4free{right:60px;top:30px} .widgets4free .connect-label{display:inline-block;position:absolute} .widgets4free .social-links-wrapper{float:right;margin-top:-5px}.widgets4free{top:0} .widgets4free{right:30px;top:0}.widgets4free .connect-label{display:block;position:relative}.widgets4free .social-links-wrapper{float:none}.widgets4free .connect-label{display:block;position:relative}.widgets4free .social-links-wrapper{float:none} .widgets4free .connect-label{display:block;position:relative} .widgets4free .social-links-wrapper{float:none}
</style>

You have to change The Red with your Facebook Page, The Blue with your Twitter Page, The Green with your Linkedin Page and The Yellow with your Youtube Channel.
Step 2 : Click Save and Enjoy
That's all if you have a question simply comment this post and we will answer you *_*.