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 suda...

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.

COMMENTS

Nama

APK,2,Auto visitor,1,BackLink,3,Blog,52,Blogger,28,Browser,13,Eng,7,Feature,1,Font Awesome,1,Gadget,4,Ind,44,Info,40,Internet,7,JQuery,8,Layanan,5,Motifasi,7,News,9,Online Money,2,Pendidikan,2,Pengelolaan,8,Plugin,3,Review,3,SEO,31,Template,9,Tips,30,Tutorial,43,Video,2,Widget,9,
ltr
item
Nanda Network: Cara membuat subscribe box responsive di blog
Cara membuat subscribe box responsive di blog
http://devgrow.s3.amazonaws.com/assets/images/subscribe-big.gif
Nanda Network
https://www.nandanetwork.com/2018/07/cara-membuat-subscribe-box-responsive.html
https://www.nandanetwork.com/
https://www.nandanetwork.com/
https://www.nandanetwork.com/2018/07/cara-membuat-subscribe-box-responsive.html
true
772157882416128223
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy