From nothing to something

Tuesday, July 18, 2017

Membuat Subscription Box Seperti Template eL diablo

Pada artikel kali ini saya akan membagikan widget subscription box atau widget kotak berlangganan seperti template eL diablo, untuk demonya kalian bisa lihat di blog demo template eldiablo atau kalian bisa klik tombol demo dibawah ini.
Nah jika kalian tertarik untuk memasang widget ini di sidebar blog kalian silahkan ikuti langkah-langkah dibawah ini.

Membuat Subscription Box Seperti Template eL diablo

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>
/*Subscribe Box*/
  #subscribebox{background:#F8F8F8;padding:20px;}
  .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
  #subscribebox p{color:#888;font-size:15px;text-align:center;font-weight:700}
  .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
  .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
  .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
  .follow-subscribe-social ul li:last-child{margin:0}
  .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
  .follow-subscribe-social ul li a:hover{color:#212121}
  form.subscribe{margin-top:-7px}
  form.subscribe input{display:block;width:100%}
  .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(0,0,0,0.01);text-align:center;color:rgba(0,0,0,0.4);font-weight:bold}
  .subscribe-email:focus{outline:0}
  form.subscribe .placeholder{color:#cacaca}
  form.subscribe input:-ms-input-placeholder{color:#cacaca}
  form.subscribe input::-webkit-input-placeholder{color:#cacaca}
  form.subscribe input:-moz-placeholder{color:#fafafa}
  form.subscribe input::-moz-placeholder{color:#fafafa}
  .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#888;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
  .subscribe-button:hover{background-color:#999}
  .subscribe-button:focus{outline:0}
3. Masuk kebagian Tata Letak > Tambah widget di sidebar > Pilih Menu HTML/Javascript.
4. Salin kode dibawah ini dan simpan diatas kolom konten.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
5. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini.
Demikianlah tutorial tentang Membuat Subscription Box Seperti Template eL diablo sampai ketemu lagi di artikel selanjutnya.