3 Unique Animated Social Media Icons Widgets for Blogger

Social media are the websites and applications that enable users to create and share content or to participate in social networking. Social media have great impact on blogger traffic. To make sure visitors could reach you through social media sites. Your blog and website should installed inspiring social media icons widget.
Well today I am going to share 3 different CSS3 designed social widgets.
How to add social media icons to blogger? 
Of course adding social media icons to blogger is so easy. This tutorial will help out visitors installing icons. Please follow the below steps.

DEMO DISPLAY

1-Adding Combine CSS:

First of all add the following CSS codes to your blogger skin or template.To install CSS code open blogger> Templates> Edit HTML and past the below below CSS code right before the
]]> </ b: skin>

.social {
  margin: 0.6rem;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  height: 15vw;
  width: 15vw;
  max-width: 4rem;
  max-height: 4rem;
  display: inline-block;
}
.social:hover {
  cursor: pointer;
  border-radius: 0;
}
.social svg {
  height: 100%;
  width: 100%;
  fill: white;
}

.round {
  border-radius: 50%;
}

.rounded {
  border-radius: 20%;
}

[aria-label="twitter"] {
  background-color: #55acee;
}
[aria-label="twitter"]:focus, [aria-label="twitter"]:hover {
  background: #2795e9;
}

[aria-label="facebook"] {
  background-color: #3b5998;
}
[aria-label="facebook"]:focus, [aria-label="facebook"]:hover {
  background: #2d4373;
}

[aria-label="google plus"] {
  background-color: #dd4b39;
}
[aria-label="google plus"]:focus, [aria-label="google plus"]:hover {
  background: #c23321;
}

[aria-label="linkedin"] {
  background-color: #007bb6;
}
[aria-label="linkedin"]:focus, [aria-label="linkedin"]:hover {
  background: #005983;
}

[aria-label="github"] {
  background-color: #383940;
}
[aria-label="github"]:focus, [aria-label="github"]:hover {
  background: #202125;
}

[aria-label="dribbble"] {
  background-color: #ea4c89;
}
[aria-label="dribbble"]:focus, [aria-label="dribbble"]:hover {
  background: #e51e6b;
}

[aria-label="behance"] {
  background-color: #1769ff;
}
[aria-label="behance"]:focus, [aria-label="behance"]:hover {
  background: #0050e3;
}

[aria-label="codepen"] {
  background-color: #383940;
}
[aria-label="codepen"]:focus, [aria-label="codepen"]:hover {
  background: #202125;
}

[aria-label="instagram"] {
  background-color: #3f729b;
}
[aria-label="instagram"]:focus, [aria-label="instagram"]:hover {
  background: #305777;
}

[aria-label="pinterest"] {
  background-color: #bd081c;
}
[aria-label="pinterest"]:focus, [aria-label="pinterest"]:hover {
  background: #8c0615;
}

[aria-label="medium"] {
  background-color: #383940;
}
[aria-label="medium"]:focus, [aria-label="medium"]:hover {
  background: #202125;
}

[aria-label="vine"] {
  background-color: #00B289;
}
[aria-label="vine"]:focus, [aria-label="vine"]:hover {
  background: #007f62;
}

[aria-label="tumblr"] {
  background-color: #36465D;
}
[aria-label="tumblr"]:focus, [aria-label="tumblr"]:hover {
  background: #232e3d;
}

[aria-label="youtube"] {
  background-color: #cd201f;
}
[aria-label="youtube"]:focus, [aria-label="youtube"]:hover {
  background: #a11918;
}

.no-bg .social {
  background-color: transparent !important;
  margin: 0;
}
.no-bg [aria-label="twitter"] svg {
  fill: #55acee;
}
.no-bg [aria-label="twitter"]:focus svg, .no-bg [aria-label="twitter"]:hover svg {
  fill: #2795e9;
}
.no-bg [aria-label="facebook"] svg {
  fill: #3b5998;
}
.no-bg [aria-label="facebook"]:focus svg, .no-bg [aria-label="facebook"]:hover svg {
  fill: #2d4373;
}
.no-bg [aria-label="google plus"] svg {
  fill: #dd4b39;
}
.no-bg [aria-label="google plus"]:focus svg, .no-bg [aria-label="google plus"]:hover svg {
  fill: #c23321;
}
.no-bg [aria-label="linkedin"] svg {
  fill: #007bb6;
}
.no-bg [aria-label="linkedin"]:focus svg, .no-bg [aria-label="linkedin"]:hover svg {
  fill: #005983;
}
.no-bg [aria-label="github"] svg {
  fill: #383940;
}
.no-bg [aria-label="github"]:focus svg, .no-bg [aria-label="github"]:hover svg {
  fill: #202125;
}
.no-bg [aria-label="dribbble"] svg {
  fill: #ea4c89;
}
.no-bg [aria-label="dribbble"]:focus svg, .no-bg [aria-label="dribbble"]:hover svg {
  fill: #e51e6b;
}
.no-bg [aria-label="behance"] svg {
  fill: #1769ff;
}
.no-bg [aria-label="behance"]:focus svg, .no-bg [aria-label="behance"]:hover svg {
  fill: #0050e3;
}
.no-bg [aria-label="codepen"] svg {
  fill: #383940;
}
.no-bg [aria-label="codepen"]:focus svg, .no-bg [aria-label="codepen"]:hover svg {
  fill: #202125;
}
.no-bg [aria-label="instagram"] svg {
  fill: #3f729b;
}
.no-bg [aria-label="instagram"]:focus svg, .no-bg [aria-label="instagram"]:hover svg {
  fill: #305777;
}
.no-bg [aria-label="pinterest"] svg {
  fill: #bd081c;
}
.no-bg [aria-label="pinterest"]:focus svg, .no-bg [aria-label="pinterest"]:hover svg {
  fill: #8c0615;
}
.no-bg [aria-label="medium"] svg {
  fill: #383940;
}
.no-bg [aria-label="medium"]:focus svg, .no-bg [aria-label="medium"]:hover svg {
  fill: #202125;
}
.no-bg [aria-label="vine"] svg {
  fill: #00B289;
}
.no-bg [aria-label="vine"]:focus svg, .no-bg [aria-label="vine"]:hover svg {
  fill: #007f62;
}
.no-bg [aria-label="tumblr"] svg {
  fill: #36465D;
}
.no-bg [aria-label="tumblr"]:focus svg, .no-bg [aria-label="tumblr"]:hover svg {
  fill: #232e3d;
}
.no-bg [aria-label="youtube"] svg {
  fill: #cd201f;
}
.no-bg [aria-label="youtube"]:focus svg, .no-bg [aria-label="youtube"]:hover svg {
  fill: #a11918;
}

body {
  padding: 1.5vw;
  text-align: center;
  font-size: 0;
  margin: 0 auto;
  max-width: 80rem;
}

p {
  color: #383940;
  font-size: 1rem;
  font-family: Sans-serif;
}
p a {
  text-decoration: none;
  color: #55acee;
}

Save template. 
Note:The above CSS code is valid for all type of given social widgets.

2-Header stuff:

Add the following javacript code into your blogger header section. Go to blogger>Template>Edit Html> and past the Javascript code just befor </head>

/*
https://github.com/larsenwork/social.svg.min
*/

function solidToggle(event) {
  event.preventDefault()
  var body = document.getElementsByTagName('body')[0]
  body.classList.toggle('no-bg')
}

save template.

3:Adding Social media icons Widgets to blogger

In this step we will give you html code of three different animated social icons widgets, simply add HTML code into your desired blogger template area.

You can add the social media icons widget into the sidebar by clicking on Layout and then clicking to Add a Gadget in the sidebar area. Choose the HTML/Javascript gadget from the list and paste your code into the widget.

Note: here are three different HTML Codes are given with respective widget screen shots. Add of your desired style widget. 

A-Animated Flat Ui social media icons:

Screen Shot-Animated Flat UI social media icons widget

HTML

<a href="URL" class="social" aria-label="facebook">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/>
  </svg>
</a>

<a href="URL" class="social" aria-label="twitter">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/>
  </svg>
</a>

<a href="URL" class="social" aria-label="google plus">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M487 370c21 129-62 237-195 237-114 0-207-93-207-207s93-207 207-207c89 0 138 54 138 54l-56 54s-29-32-82-32c-71 0-128 59-128 131 0 73 57 131 128 131 81 0 113-58 117-90H292v-71h195zm189-59v59h59v60h-59v59h-59v-59h-59v-60h59v-59h59z"/>
  </svg>
</a>

<a href="URL" class="social" aria-label="linkedin">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13-24 44-50 91-50 98 0 116 64 116 148v170h-96V478c0-36-2-82-51-82-50 0-57 39-57 79v154zM220 164c31 0 55 25 55 56s-24 56-55 56-56-25-56-56 25-56 56-56z"/>
  </svg>
</a>

B-Round Animated Social media icons widgets:

Screen Shot Round Animated Social media icons widgets

HTML

<a href='URL' class="social round" aria-label="github">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M400 139c144 0 260 116 260 260 0 115-75 213-178 247-9 3-17-2-17-13v-71c0-35-18-48-18-48 57-6 119-28 119-128 0-44-27-70-27-70s14-29-2-69c0 0-22-7-72 27-42-12-88-12-130 0-50-34-72-27-72-27-16 40-2 69-2 69s-27 26-27 70c0 100 62 122 119 128 0 0-14 10-17 35-15 7-53 18-76-22 0 0-13-25-39-27 0 0-26 0-2 16 0 0 17 8 29 38 0 0 16 51 88 35v44c0 11-9 16-18 13-103-34-178-132-178-247 0-144 116-260 260-260z"/>
  </svg>
</a>

<a href='URL' class="social round" aria-label="dribbble">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M400 665c-146 0-265-119-265-265s119-265 265-265 265 119 265 265-119 265-265 265zm223-229s-69-22-140-9c30 81 43 161 43 161s82-49 97-152zM488 609s-15-90-48-172c-132 44-179 142-179 142s96 83 227 30zm-256-57c80-128 193-152 193-152s-12-27-19-39c-124 37-232 32-232 32s-8 87 58 159zm-54-198s102 2 210-28c-38-71-84-130-84-130-107 49-126 158-126 158zm169-174s50 65 85 134c84-31 118-83 118-83s-76-78-203-51zm102 167c6 11 20 44 20 44s64-11 157 7c0-85-51-141-51-141s-38 55-126 90z"/>
  </svg>
</a>

<a href='URL' class="social round" aria-label="behance">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M569 532c28 0 49-15 56-33h62c-17 55-55 86-120 86-79 0-132-53-132-135 0-80 57-136 132-136 81 0 130 66 125 153H506c1 41 21 65 63 65zm-282 46H115V224h167c67 0 114 20 114 87 0 40-19 60-48 74 40 11 64 41 64 90 0 72-58 103-125 103zm-10-60c34 0 57-12 57-47 0-36-21-51-56-51h-85v98h84zm288-151c-34 0-57 22-59 55h115c-4-34-21-55-56-55zm-293 0c28 0 48-13 48-42 0-31-23-41-54-41h-73v83h79zm364-120v35H492v-35h144z"/>
  </svg>
</a>

<a href='URL' class="social round" aria-label="codepen">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M140 482V320c0-9 5-15 10-18l238-158c8-5 16-5 24 0l238 158c6.24 3.743 10 12 10 19v158c0 9-5 15-10 19L412 656c-8 5-17 5-24 0L150 497c-9-6-10-11-10-15zm282-278v104l97 65 78-52zm-44 104V204L203 321l78 52zm-193 54v75l56-37zm193 234V492l-97-65-78 52zm22-143l79-53-79-53-79 53zm22 143l175-117-78-52-97 64v105zm193-159v-75l-56 38z"/>
  </svg>
</a>

C-Animated Curved square social icons widget:

Screen Shot Animated Curved square social icons widget

HTML

  
<a href='URL' class="social rounded" aria-label="instagram">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/>
  </svg>
</a>

<a href='URL' class="social rounded" aria-label="pinterest">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M287 681c-9-3-15-77-6-115l38-163s-9-20-9-49c0-46 26-80 59-80 28 0 42 21 42 46 0 28-19 71-28 110-8 33 17 59 49 59 58 0 104-61 104-150 0-79-57-134-138-134-94 0-148 69-148 142 0 28 9.7 57.4 23 74 4 5 5 6 2 17l-8 31s-2 9.5-14 3c-41-22.3-63-78-63-126 0-104 75-199 217-199 114 0 203 81 203 190 0 113-72 205-171 205-55 0-75-38-75-38l-21 78c-11 41-47 102-56 99z"/>
  </svg>
</a>

<a href='URL' class="social rounded" aria-label="medium">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M650 267v328c0 14-12 20-28 12l-139-70 167-270z" fill-opacity=".4"/>
    <path d="M374 360l101-164c4-7 14-10 22-6l153 77-167 270-109-177z" fill-opacity=".6"/>
    <path d="M483 537l-170-85 4-185 166 270z" fill-opacity=".8"/>
    <path d="M317 595c0 14-10 20-23 14l-130-65c-8-4-14-13-14-22V204c0-11 7-17 18-12l149 75v328z"/>
  </svg>
</a>

<a href='URL' class="social rounded" aria-label="vine">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M615 399v58s-27 7-59 7c-41 87-116 163-141 177-16 9-31 9-48-1-31-18-146-114-185-413h84c21 180 73 272 130 341 31-31 61-74 85-121-56-29-91-92-91-165 0-74 43-129 116-129 71 0 109 44 109 120 0 28-6 60-17 85-53 10-72-24-72-24s9-27 9-55c0-35-13-52-32-52-20 0-34 19-34 56 0 76 48 120 110 120 20 0 36-4 36-4z"/>
  </svg>
</a>

<a href='URL' class="social rounded" aria-label="youtube">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/>
  </svg>
</a>

<a href='URL' class="social rounded" aria-label="tumblr">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M570 602c-15 25-66 44-121 44-126 0-194-46-194-144V378h-50c-2 0-3-1-3-3v-98c0-3 4-4 7-5 50-17 77-51 84-110 2-14 14-22 24-22h144c2 0 3 1 3 3v112c0 2 1 3 3 3h80c2 0 3 1 3 3v114c0 2-1 3-3 3h-81c-2 0-3 1-3 3v115c0 11 2 11 4 11h69s2 0 3 3zM440 161h-65s-3-1-4 6c-9 63-38 101-87 121 0 0-4 1-4 4v63c0 2 1 3 3 3h48c2 0 3 1 3 3v141c0 46 27 124 129 124 33 0 66-11 83-27 1-1 0-3 0-3l-20-60c-1-4-3-3-3-3-13 5-26 7-37 7-28 0-44-15-44-45V361c0-2 1-3 3-3h81c2 0 3-1 3-3v-74c0-2-1-3-3-3h-80c-2 0-3-1-3-3V164c0-2-1-3-3-3z"/>
  </svg>
</a>

<br>

<a href='URL' class="social" aria-label="google plus">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M651 363c23.37 168.396-79.705 297-246 297-144 0-260-116-260-260s116-260 260-260c70 0 130 26 175 68l-71 68c-19-19-53-40-104-40-89 0-161 73-161 164s72 164 161 164c104 0 142-74 148-112H405v-89h246z"/>
  </svg>
</a>

<a href='URL' class="social" aria-label="facebook">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M604 170c15 0 26 11 26 26v408c0 15-11 26-26 26H487V452h60l9-70h-69v-44c0-20 6-34 35-34h37v-62s-24-3-54-3c-53 0-89 33-89 92v51h-60v70h60v178H196c-15 0-26-11-26-26V196c0-15 11-26 26-26h408z"/>
  </svg>
</a>

<a href='URL' class="social" aria-label="youtube">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M535 256c118 0 165 1 184 20 14 14 21 43 21 124s-7 110-21 124c-19 19-66 20-184 20s-166-1-185-20c-14-14-21-43-21-124s7-110 21-124c19-19 67-20 185-20zm-357 93c25 0 37 18 37 43v56c0 27-13 43-37 43s-37-17-37-43v-56c0-24 11-43 37-43zm267 111c0 18 4 31 20 31 9 0 17-6 27-17v15h26V351h-26v105c-6 8-10 12-15 12-3 0-5-1-6-5V351h-26v109zm-191 31c-16 0-19-13-19-31V350h26v113c1 4 2 5 5 5 5 0 9-4 15-12V350h27v139h-27v-15c-10 11-18 17-27 17zm415 0c17.997 0 37-8.907 37-50h-26c0 16 0 27-12 27-9 0-12-6-12-19v-25h50v-28c0-28-13-47-38-47-26 0-38 19-38 48v48c0 28 14 46 39 46zm-56-98c0-24-4-44-23-44-9 0-18 6-26 16v-60h-25v184h25v-14c8 10 17 16 26 16 20 0 23-19 23-43v-55zm-221-62v158h27V331h30v-26h-86v26h29zM112 489H84v-76L50 303h29l19 73 19-73h29l-34 110v76zm77-39v-60c0-11-2-18-11-18s-11 7-11 18v60c0 13 3 18 11 18s11-5 11-18zm398-1c0 14-3 19-10 19-4 0-9-2-13-6v-84c4-4 9-6 13-6 7 0 10 4 10 18v59zm69-61c0-13 5-16 12-16 8 0 11 4 11 17v15h-23v-16z"/>
  </svg>
</a>

Description:

Change href='URL' of your social media website profile url. I hope you will found this helpful and working if you have any question regarding Animated social media icons widget for Blogger. Ask your questions in comment. or contact us through contact form. We feel happy when you ask questions. Thank you