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

September 21, 2020 February 05, 2021

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 Mrskt.com*/
  #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); } }
 /* End Of Css mrskt.com*/

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('https://feedburner.google.com/fb/a/mailverify?uri=SaurabhDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');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!

Email Subscription Widget

ThemeIdn

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.

Post a Comment