Cara membuat subscribe box responsive di blog - Nanda Network

Cara membuat subscribe box responsive di blog

Nandanetwork.com cara membuat subscribe box di blog responsive dan ringan dengan CSS dan HTML. Secara harfiah mungkin kita semua sudah mengetahui apa itu subscribe box, berasal dari bahasa ingris “Subscribe” yang artinya berlangganan sedangkan box “kotak” jadi dapat diartikan sebagai sebuah kotak berlangganan

Memasang widget subscibe box responsive dan ringan sangat berguna bagi blog anda, karena pengunjung bisa mendaftarkan email mereka untuk mendapatkan pemberitahua terbaru tentang update artikel anda. dengan sistem, pembaca suatu situs website anda mendaftarkan email mereka sebagai pelanggan tetap dan pembaca setia situs anda melalui kotak berlangganan atau subscribe box widget di blog tadi, dengan begitu setiap kali seorang pemilik blog atau anda melakukan update artikel, maka secara otomatis pemberitahuan akan dikirimkan keemail pelanggan secara otomatis, yang artinya ini sama seperti fitur subscibe pada chanel youtube

Selain itu, dengan memasang widget subscribe box diblog dapat mempercantik tampilan situs website anda dan terlihat lebih profesional,tapi perlu bagi anda untuk memasang kotak subscribe yang responsive, artinya tampilan akan tetap bagus baik dilihat didesktop maupun layar phonsel atau android


Cara Membuat Dan Menerapkan Subscribe Box Responsive

Kali ini nadnanetwork ingin membagikan script kode subscribe box dengan css dan html responsive dan tentunya ringan untuk dipasang diblog anda,sehingga tidak membuat loading blog menjadi lama dari yang sebelumnya. Ikuti langkah dan tahapan singkat dibawah ini untuk memasang kotak berlangganan di blog

  • 1 Buka dasboard Blogger > Tema > Edit HTML
  • 2 Letakkan kode CSS subscribe box di atas kode <style>
 /* Subscribe Box Widget Responsive By  Share Nandanetwork.com */
#subscribe-css-nandanetwork{font: normal 100% "Proxima Nova", Proxima Nova, Proxima Nova;position:relative;padding:20px 0;margin:0 20px;overflow:hidden;border:1px solid #e8e8e8;border-radius:5px}
.subscribe-wrapper{color:#DB4437;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;float:right;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0 10px;width:auto;overflow:hidden}
.subscribe-css-nandanetwork-email-field{color:#ccc;margin:10px 0;padding:15px 20px;width:50%;outline:none;border:1px solid #89c9fa !important}
.subscribe-css-nandanetwork-email-button{background:#DB4437;color:#FFFFFF;cursor:pointer;font-weight:700;padding:15px 30px;margin-left:15px;text-transform:none;font-size:16px;border:none;transition:all .6s}
.subscribe-css-nandanetwork-email-button:hover{background:#4285f4}
#subscribe-css-nandanetwork p.subscribe-text{color:#4285f4;margin:7px 10px 0;text-align:center;font-size:170%;font-weight:400;line-height:1.3em}
#subscribe-css-nandanetwork p.subscribe-text b{font-weight:bold}
#subscribe-css-nandanetwork p.subscribe-text span{font-weight:400;font-style:italic;text-transform:lowercase}
#subscribe-css-nandanetwork p.newsby{color:#89c9fa;text-align:center;font-size:11px;margin:0 auto 10px;padding:0;font-weight:400;letter-spacing:1px}
#widget-stuff{margin:25px auto 5px;position:relative;padding:0 20px 20px;border-bottom:1px solid #ddd;list-style:none}
@media screen and (max-width:480px){
.post h2 {font-size:175%}
.to_top{float:none;}
.footer-left{width:100%;margin:0}
#subscribe-css-nandanetwork{margin:0 15px !important}
}
@media screen and (max-width:414px){
.post h2 {margin:0 15px;padding:10px 0 4px}
.breadcrumbs{margin:15px 15px 3px}
.subscribe-css-nandanetwork-email-button{margin-left:0 !important}
}
  • 3Terapkan kode HTML berikut tepat diatas kode <article> atau ditempat yang anda inginkan.
 <div id="subscribe-css-nandanetwork">
<p class="subscribe-text"><b>SUBSCRIBE</b>
<span>TO</span> OUR NEWSLETTER</p>
<p class="newsby">Delivered by FeedBurner</p>
<div class="subscribe-wrapper">
<div class="subscribe-form">
<form action="https://feedburner.google.com/fb/a/mailverify?uri=nandanetwork" class="subscribe-form" method="post" onsubmit="window.open ('https://feedburner.google.com/fb/a/mailverify?uri=nandanetwork', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" value="nandanetwork" type="hidden"><input name="loc" value="en_US" type="hidden"><input autocomplete="off" class="subscribe-css-nandanetwork-email-field" name="email" placeholder="Enter your Email"><input class="subscribe-css-nandanetwork-email-button" title="" value="submit" type="submit"></form>
</div>
</div>
</div>
</div>
  • 4Simpan Template

Pengaturan : Ganti kode yang ditandai dengan ID akun
feedburner blog anda. Pada script HTML anda bisa menerapkannya ditempat yang anda inginkan, seperti diatas credit link dan sebagainya
Oke,demikian tips dari nandanetwork kali ini yang membahas bagaimana caranya membuat widget subscribe box di blogspot dengan mudah dan responsive.

0 Response to "Cara membuat subscribe box responsive di blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel