Cara Membuat Subscription Box di Blog



Untuk para Blogger yang ingin Blog nya terlihat semakin menarik, banyak yang menambahkan widget Form Berlangganan di blog nya atau biasa di sebut Subscription Box.
Untuk menggunakan Widget ini, tentunya sobat harus memiliki Akun FeedBurner .

Nah, jika sudah selesai, berikut Tahapannya..

Berikut adalah cara-caraya :

1. Login ke akun Blogger milik sobat.
2. Klik Menu Tema / Template
3. Kemudian klik Edit HTML
4. Tambahkan kode berikut di atas kode ]]></b:skin> atau kode pembungkus </style>

/* Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#292929;overflow:hidden;border-top:4px solid #eee;font-family:"Poppins", Arial, sans-serif;} .subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} .subscribe-form{clear:both;display:block;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} .subscribe-css-email-field{background:#fff;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:none;border-radius:4px;font-family:"Poppins", Arial, sans-serif;} .subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:4px;transition:all .6s} .subscribe-css-email-button:hover{background:#37b185;} #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;} #subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s} #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none} #subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s} #subscribe-css:hover p.subscribe-note span:before{width:100%;}

5. Kemudian tambahkan markup berikut di dalam tag pembungkus antara <body>...</body>

Letakkan sesuai dengan selera sobat. Jika saya biasanya menempatkannya di bagian Footer-wrapper. 

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=rismaxid' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=rismaxid&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='rismaxid'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Ganti semua Kode rismaxid atau yang ditandai dengan ID feedburner milik sobat.

Kemudian Simpan tema.







Catatan :
  • Nama Penulis : Paris P. Sitanggang
  • Tanggal Di Posting : Senin, 21 Oktober 2019
  • Referensi : //www.arlinadzgn.com
  • Gambar : //rismaxid.blogspot.com

Kategori :
TUTORIAL BLOG

1 Komentar untuk "Cara Membuat Subscription Box di Blog"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel