Email Subscription widget With Animated Social Icons for blogger by SaurabhDesign.

Email Subscription widget With Social Icons.

Steps To Add Email Subscription with Animated Social Follow Button in Blogger.

• Login to Your Blogger Dashboard 
• GOTO Theme Section 
• Click on Edit HTML 
• NOW,Search " ]]></b:skin>  "
• And Paste The Below CSS Code above that tag.

/* Email SubsBox with Social icons by SaurabhDesign*/

  

 #stsocialemailsubs {width:300px; height:auto; background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%); border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px} #stsocialemailsubs .email__ {padding:15px 15px 5px;} #stsocialemailsubs .email {margin:auto; color:#ff0000; text-align:center;} #stsocialemailsubs .email:before {content:&#39;&#39;; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url(&quot;https://www.flaticon.com/svg/static/icons/svg/3306/3306630.svg&quot;) center center / 50px no-repeat;} #stsocialemailsubs .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;} #stsocialemailsubs form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;} #stsocialemailsubs form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url(&quot;https://www.flaticon.com/svg/static/icons/svg/1057/1057100.svg&quot;) no-repeat; content:&#39;&#39;;} #stsocialemailsubs input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;} #stsocialemailsubs button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;} #stsocialemailsubs button:hover, #stsocialemailsubs button:focus {background-color:var(--color-hover);} #stsocialemailsubs button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M2,21L23,12L2,3V10L17,12L2,14V21Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) no-repeat; content:&#39;&#39;; vertical-align:-3px;} #stsocialemailsubs .medsos {width:100%; text-align:center;} #stsocialemailsubs .medsos svg {width:20px;height:20px;margin-top:7px} #stsocialemailsubs .medsos svg path {fill:#fff} #stsocialemailsubs .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;} #stsocialemailsubs .medsos a:last-child {margin-right:0px;} #stsocialemailsubs .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);} #stsocialemailsubs .medsos .facebook{background:#3a579a} #stsocialemailsubs .medsos .twitter {background:#00abf0} #stsocialemailsubs .medsos .googleplus {background:#df4a32} #stsocialemailsubs .medsos .youtube {background:#cc181e} #stsocialemailsubs .medsos .instagram {background:#992ebc} #stsocialemailsubs .medsos .pinterest {background:#e60023} @-webkit-keyframes ignielRing{ 0% { -webkit-transform: rotateZ(0); } 1% { -webkit-transform: rotateZ(30deg); } 3% { -webkit-transform: rotateZ(-28deg); } 5% { -webkit-transform: rotateZ(34deg); } 7% { -webkit-transform: rotateZ(-32deg); } 9% { -webkit-transform: rotateZ(30deg); } 11% { -webkit-transform: rotateZ(-28deg); } 13% { -webkit-transform: rotateZ(26deg); } 15% { -webkit-transform: rotateZ(-24deg); } 17% { -webkit-transform: rotateZ(22deg); } 19% { -webkit-transform: rotateZ(-20deg); } 21% { -webkit-transform: rotateZ(18deg); } 23% { -webkit-transform: rotateZ(-16deg); } 25% { -webkit-transform: rotateZ(14deg); } 27% { -webkit-transform: rotateZ(-12deg); } 29% { -webkit-transform: rotateZ(10deg); } 31% { -webkit-transform: rotateZ(-8deg); } 33% { -webkit-transform: rotateZ(6deg); } 35% { -webkit-transform: rotateZ(-4deg); } 37% { -webkit-transform: rotateZ(2deg); } 39% { -webkit-transform: rotateZ(-1deg); } 41% { -webkit-transform: rotateZ(1deg); } 43% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(0); } } @-moz-keyframes ignielRing{ 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes ignielRing{ 0% { transform: rotate(0); } 1% { transform: rotate(30deg); } 3% { transform: rotate(-28deg); } 5% { transform: rotate(34deg); } 7% { transform: rotate(-32deg); } 9% { transform: rotate(30deg); } 11% { transform: rotate(-28deg); } 13% { transform: rotate(26deg); } 15% { transform: rotate(-24deg); } 17% { transform: rotate(22deg); } 19% { transform: rotate(-20deg); } 21% { transform: rotate(18deg); } 23% { transform: rotate(-16deg); } 25% { transform: rotate(14deg); } 27% { transform: rotate(-12deg); } 29% { transform: rotate(10deg); } 31% { transform: rotate(-8deg); } 33% { transform: rotate(6deg); } 35% { transform: rotate(-4deg); } 37% { transform: rotate(2deg); } 39% { transform: rotate(-1deg); } 41% { transform: rotate(1deg); } 43% { transform: rotate(0); } 100% { transform: rotate(0); } } 

  

CSS  Code Direct Download From GDrive

• Now,Paste the below Html code in the "html widget of blogger"where you want to show this widget.

<!-- Subscribe Box by SaurabhDesign -->

<div id='stsocialemailsubs'>

  <div class='email__'>

    <div class='email'>

      Subscribe Our NewsLater and Get Updates in Your Inbox!

      <form action='https://feedburner.google.com/fb/a/mailverify?uri=SaurabhDesign' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=SaurabhDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

        <input class='email' name='email' placeholder='eg.YourID@mail.com'/>

        <input name='uri' type='hidden' value='SaurabhDesign'/> <input name='loc' type='hidden' value='en_US'/>

        <button type='submit'/>

      </form>

    </div>

  </div>

  <div class='medsos__'>

    <div class='medsos'>

      <a class='facebook' href='https://m.facebook.com/SaurabhTechn' rel='nofollow noopener' target='_blank' title='Facebook'><svg viewbox='0 0 24 24'> <path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>

      <a class='twitter' href='https://mobile.twitter.com/saurabh_techn' rel='nofollow noopener' target='_blank' title='Twitter'><svg viewbox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>

      <a class='youtube' href='https://m.youtube.com/c/SAURABHTECHNOLOGY' rel='nofollow noopener' target='_blank' title='Youtube'><svg viewbox='0 0 24 24'><path d='M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z'> </path></svg></a>

      <a class='instagram' href='https://www.instagram.com/youtube_saurabhtechnology/' rel='nofollow noopener' target='_blank' title='Instagram'><svg viewbox='0 0 24 24'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/></svg></a>

   <a class='pinterest' href='https://www.pinterest.com/saurabh_techn/' rel='nofollow noopener' target='_blank' title='Pinterest'><svg viewbox='0 0 24 24'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg></a>

    </div>

  </div>

</div>

HTML  Code Direct Download From GDrive

• Change  " SaurabhDesign " with your Feed Burner Id.

  And also change social media link 

Now,All Done!