How to add social profile button in sidebar on Blogger or WordPress

Copy

Hi dude, welcome to our pixabin blog. Let us see how to add a social profile button in sidebar on Blogger or WordPress.

the social bar is maximumly used by many websites. because this is very important to all website runners. yes, this feature helps to make more followers on our social platforms using your website visitors.

What is a Social bar?

A social bar is a simple showcase of showing your social profiles.

its means your website user wants to follow your website on other social platforms (like youtube, Instagram and etc..) this social bar directly helps to find and follow your social profile.

that's all this is a meaningful reason for this social bar.

Pros and Cons of this Social profile bar script

Pros

fast loading script
clean interface
attractive look
SVG Icons used for this
No need for Integration to another icon platform like fa-fa-icons

Cons

you want to add more social icons. it is really difficult for begginers. because this is built by SVG Icon not a Fa-Fa-Icon for fast loading. ( Not a big this time many SVG icons are free for many platforms)

How to set up this script on your website

this setup separately we created two platforms on blogger and WordPress. if you not this guide please see our Video Guide.

Blogger Guide,

Go to the blogger admin dashboard
next, go to the layout section and find sidebar or footer section
Next, add a new javascript widget on the sidebar or footer section
After, copy our social bar script and paste it on your javascript widget
save all things
now your social bar is Ready.

WordPress Guide,

go to your WordPress admin dashboard
after finding the widgets section on the WordPress admin dashboard sidebar
Next, find the sidebar section on your WordPress widget section
add new javascript widget and add our social bar section on your widget
save the changes.
Ready !!!


<div class ="social-frame">
    <a href="https://cloudraft.blogspot.com/" class="social-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#3b5998"  stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a> 
    <a href="https://cloudraft.blogspot.com/" class="social-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#00acee"  stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
</a>
    <a href="https://cloudraft.blogspot.com/" class="social-btn"> 
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#ff0000"  stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon fill="#fff" points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
</a>
    <a href="https://cloudraft.blogspot.com/" class="social-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="#0e76a8"  stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
    <a href="https://cloudraft.blogspot.com/" class="social-btn">
<svg xmlns="http://www.w3.org/2000/svg"  viewbox="0 0 48 48" width="34px" height="34px"><radialgradient id="yOrnnhliCrdS2gy~4tD8ma" cx="19.38" cy="42.035" r="44.899" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#fd5"/><stop offset=".328" stop-color="#ff543f"/><stop offset=".348" stop-color="#fc5245"/><stop offset=".504" stop-color="#e64771"/><stop offset=".643" stop-color="#d53e91"/><stop offset=".761" stop-color="#cc39a4"/><stop offset=".841" stop-color="#c837ab"/></stop></stop></stop></stop></stop></stop></stop></radialgradient><path fill="url(#yOrnnhliCrdS2gy~4tD8ma)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z"/><radialgradient id="yOrnnhliCrdS2gy~4tD8mb" cx="11.786" cy="5.54" r="29.813" gradienttransform="matrix(1 0 0 .6663 0 1.849)" gradientunits="userSpaceOnUse"><stop offset="0" stop-color="#4168c9"/><stop offset=".999" stop-color="#4168c9" stop-opacity="0"/></stop></stop></radialgradient><path fill="url(#yOrnnhliCrdS2gy~4tD8mb)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20	c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20	C42.014,38.383,38.417,41.986,34.017,41.99z"/><path fill="#fff" d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5	s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"/><circle cx="31.5" cy="16.5" r="1.5" fill="#fff"/><path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12	C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"/></path></circle></path></path></path></svg>    
</a>      
</div>
  <style>
.social-frame{
  display: flex;
  flex-direction: row;
  
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: auto;
  position: relative;
   box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001,
   inset 0px 0px 0px 0px #fff9,
   inset 0px 0px 0px 0px #0001,
   inset 0px 0px 0px 0px #fff9,        
    inset 0px 0px 0px 0px #0001;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
   border-radius: 10px;
}

.social-btn{
  height: 35px;
  width: 35px;
  border-radius: 3px;
  background: #e0e5ec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001,
   inset 0px 0px 0px 0px #fff9,
   inset 0px 0px 0px 0px #0001,
   inset 0px 0px 0px 0px #fff9,        inset 0px 0px 0px 0px #0001;
 transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 16px;
  color: rgba(42, 52, 84, 1);
  text-decoration: none;
}
.social-btn:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
} </style>

Custom Modification

Convert https://cloudraft.blogspot.com/ to your social media links.
Do you want to change social bar size or color? just, edit the "social-frame" CSS script on this Social bar Script.
Do you want to change social icon size or color? Just edit the "social-btn" CSS script on this Social bar Script

Video Guide

Final Words

we hope this script helps you. if you like this Social bar script and if you want more information like this please do follow the blog on google news, telegram, and youtube. thank you for reading this article.

Pixabin Official