√ Cara Membuat Newsletter Rainbow

Cara Membuat Newsletter Rainbow

Tuesday, January 25, 2022

Membuat Widget Subscribe/Newsletter Rainbow Simple - Artikel blog anda ingin selalu di ikut para pengunjung blog, manfaatkan fitur feedburner. Ya salah satu cara untuk meningkatkan pengunjung blog adalah dengan memanfaatkan fasilitas Mail Subscribe dari feedburner. Dengan begitu apabila banyak orang yang mengikuti blog ada dengan fasilitas langganan via email gratis ini semakin besar pula nantinya trafik kunjungan blog anda

Sebenar untuk membuat widget subscribe di blogger cukuplah gampang, yaitu dengan memilih widget "Ikuti lewat Email" dari menu Tata letak pada dasbor akun blogger. Namun tampilkan yang cukup sederhana mungkin saja kita ingin mengubah sehingga menarik para pengunjung untuk mengikuti langganan via email ini.

Berikut ada 2 widget CSS Simple

Pertama masuk ke Dashboard Blogger > Tata Letak > Tambah Gadget > pilih HTML/JavaScrip dan pastekan scrip dibawah ini.

1. Newsletter Social Media Responsive


<!--
Subscribe Box by fajardjoekerz.com
Original Post:https://www.fajardjoekerz.com/
-->
<div id="Subscribebox">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz','popupwindow','scrollbars=yes,width=550,height=520');return true" target="popupwindow">
        <input name="email" class="email" placeholder="Contoh:nama@mail.com"/>
        <input name="uri" type="hidden" value="fajardjoekerz" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
    </div>
  </div>
  <div class="socialsubcribe__">
    <div class="socialsubcribe">
      <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><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"></path></svg></a>
      <a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><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"></path></svg></a>
      <a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><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" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><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"></path></svg></a>
   <a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><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"></path></svg></a>
    </div>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Rubik:300" rel="stylesheet">

Simpan kode CSS dibawah ini diatas </style>


/*
Subscribe Box by fajardjoekerz
Original Post: https://fajardjoekerz.blogspot.com/2019/09/kotak-subscribe-email.html
*/
#Subscribebox {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}
#Subscribebox .email__ {padding:15px 15px 5px;}
#Subscribebox .email {margin:auto; color:#555; text-align:center;}
#Subscribebox .email:before {content:''; 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("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#Subscribebox .socialsubcribe__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}
#Subscribebox 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;}
#Subscribebox form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}
#Subscribebox 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;}
#Subscribebox 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;}
#Subscribebox button:hover, #Subscribebox button:focus {background-color:#1d2129;}
#Subscribebox button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}
#Subscribebox .socialsubcribe {width:100%; text-align:center;}
#Subscribebox .socialsubcribe svg {width:20px;height:20px;margin-top:7px}
#Subscribebox .socialsubcribe svg path {fill:#fff}
#Subscribebox .socialsubcribe 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;}
#Subscribebox .socialsubcribe a:last-child {margin-right:0px;}
#Subscribebox .socialsubcribe a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}
#Subscribebox .socialsubcribe .facebook{background:#3a579a}
#Subscribebox .socialsubcribe .twitter {background:#00abf0}
#Subscribebox .socialsubcribe .googleplus {background:#df4a32}
#Subscribebox .socialsubcribe .youtube {background:#cc181e}
#Subscribebox .socialsubcribe .instagram {background:#992ebc}
#Subscribebox .socialsubcribe .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); }
}
BODY {max-width:800px; padding:50px; margin:auto; font-family: 'Rubik', sans-serif; font-size:14px; font-weight:300;}2

Demo Click here

2. Newsletter Rainbow simple

<div class="rainbow"> 
<div id="subscribe-css"> 
<div class="subscribe-wrapper"> 
<h2>Newsletter</h2> 
<p>If you like articles on this blog, please subscribe for free via email.</p> 
<div class="subscribe-form"> 
<form action='https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> 
<input name="uri" type="hidden" value="Fajardjoekerz" /> 
<input name="loc" type="hidden" value="en_US" /> 
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/> 
<input class="subscribe-css-button" title="" type="submit" value="Submit" /> 
</form> </div> </div></div></div> <style> 
.rainbow{background:#2e87e7;background:linear-gradient(45deg,rgba(255,101,165,1) 0,rgba(255,101,165,1) 13%,rgba(255,107,154,1) 35%,rgba(255,134,106,1) 100%);position:relative;z-index:0;overflow:hidden;padding:0;border-radius:5px}
#rainbow{padding:0}
#rainbow h2{color:#fff;padding:0;border:0;margin:0 auto 10px auto}
#rainbow h2:before{display:none}.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}
.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}
.subscribe-wrapper p{color:#fff;margin:0;font-size:13px}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:8px;width:100%;border:0;outline:0;font-size:13px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}
.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}
.subscribe-css-button{background:transparent;color:#fff;cursor:pointer;font-weight:500;padding:10px;text-transform:none;width:100%;border:1px solid;border-radius:3px;outline:none;font-size:13px;transition:all .3s}
.subscribe-css-button:hover{background:#fff;color:#2e87e7;border-color:#2e87e7}
 </style>

Demo Click here

> https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz
> <input name="uri" type="hidden" value="Fajardjoekerz" />
> Yang bertanda merah ganti dengan id feedburner kalian.

3. Newsletter Rainbow

<div class='sbox wow rubberBand'>
<center>
<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyZnKsyO-XQmuevkU6-xn9ExYYga_Pu7FBqRuoBKukpi1-i1hbK2BuyQX6-xWBqBfX6-ewmqZgJ_WECQCzhck9eTEafUdofzn2bypjI4_zlgY3zAc_IYjaelWxVvgzNfXrvLB9CwZybp0/s1600/email.png' width='150px'/></span><br/>
</center>
<span>Newsletter</span><br /><br />
<span class='small'>Join our newsletter to get secret tips directly in your inbox!</span><br /><br />
<center>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>
<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='fajardjiekerz'/>
<input name='loc' type='hidden' value='en_US'/></form><br />
<br /><br />
</center></div>
<style>
/* https://fajardjoekerz.blogspot.con*/
//@media(max-width:400px) {.sbox{width:109%!important;}}
//@media(max-width:1024px) and (min-width:400px)  {.sbox{width:106.5%!important;}}
.sbox {background:#009abe;text-align:center;width:100%;}
.sbox span {color:#fff;font-family:roboto;font-size:27px;}
.sbox .small {font-size:18px;}
input.boxinput::placeholder {color:#fff;}
.sbox .hatespam {font-size:15px;}
.sbox .boxinput::placeholder {color:#fff;}
.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}
.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}
.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}
.sbox {border-radius:8px!important;padding:0!important;border:none!important;}
.sbox .widget-content {margin:0!important;}
#sidebar-wrap .widget {overflow-x:hidden;}
.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}
.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}
.sbox .boxinput {border-radius:2px!important;}
</style>

Demo Click here

> https://feedburner.google.com/fb/a/mailverify?uri=fajardjoekerz
> <input name="uri" type="hidden" value="Fajardjoekerz" />
> Yang bertanda merah ganti dengan id feedburner kalian.

Jika sudah diganti dengan id feedburner kalian kemudian simpan widget kalian.

Demikian Cara membuat Newsletter Rainbow simple