Skip to main content

Cara Membuat Subscribe Box Di Blog

Cara Membuat Subscribe Box Di Blog
Cara Membuat Subscribe Box Di Blog - Pada kali ini kita akan membuat subscribe box atau kotak berlangganan responsive di blog. Subscribe box atau subscription box merupakan sebuah widget dimana pengunjung blog bisa mendapatkan update terbaru dari blog kita dengan cara mendaftarkan emailnya ke formulir yg terdapat dalam widget tersebut. Setelah berlangganan, pengunjung tersebut akan dikirim email pada saat ada postingan terbaru dari blog kita. Membuat subscribe box pun dapat menciptakan backlink dari setiap email pelanggan, otomatis ini juga dapat meningkatkan seo blog. Berikut cara membuat subscribe box di blog.

Demo

CSS Subscribe Box

  • Login ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan salah satu CSS subscribe box dibawah ini tepat diatas kode ]]></b:skin>.

Subscribe Box Style 1

.subscribe-box{border:1px solid #eee;border-radius:4px;color:#fff;background:#eee;font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzGnP7FYVqobKgPkykSzE1yDKe0FCt75mGCoERN3o34A5csP15ZibR5CQbqHedDdZ2PCmYnG9XFCviifOwew4g831ktk-O7FmCWaGzPNI7BzYU3rM4fOvLsbbi33H3k6dJ4G4tQEHlSg4/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color:#ff5848;background-image:-webkit-linear-gradient(top,#ff5848,#FC3D2B);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}

Subscribe Box Style 2

.subscribe-box{border-radius:4px;color:#fff; background:#00aa9f ; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzGnP7FYVqobKgPkykSzE1yDKe0FCt75mGCoERN3o34A5csP15ZibR5CQbqHedDdZ2PCmYnG9XFCviifOwew4g831ktk-O7FmCWaGzPNI7BzYU3rM4fOvLsbbi33H3k6dJ4G4tQEHlSg4/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #333; background-image: -webkit-linear-gradient(top,#333,#323);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:0;font-size:16px}

Subscribe Box Style 3

.subscribe-box{border-radius:4px;color:#fff; background:#eee; font-size:12px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none;font-weight:500}form.subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-box-email-field{outline:none;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzGnP7FYVqobKgPkykSzE1yDKe0FCt75mGCoERN3o34A5csP15ZibR5CQbqHedDdZ2PCmYnG9XFCviifOwew4g831ktk-O7FmCWaGzPNI7BzYU3rM4fOvLsbbi33H3k6dJ4G4tQEHlSg4/s1600/sprites.png) no-repeat 1px -27px;color:#444;margin:0 0 15px;padding:12px 40px;width:100%;border:none}.subscribe-box-email-button{outline:none;background-color: #4d90fe; background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);color:#fff;cursor:pointer;font-weight:700;padding:10px;text-transform:none;width:100%;border:none;font-size:16px}
  • Kemudian klik simpan

HTML Subscribe Box

Ada banyak opsi dimana posisi paling efektif meletakkan atau memasang subscribe box yg dapat dijangkau oleh pengunjung blog seperti di sidebar blog, di bawah postingan ataupun membuat popup subscribe box.

Subscribe Box Di Sidebar

  • Login ke akun Blogger.
  • Klik tata letak pada dashboard.
  • Lalu tambahkan element/add gadget dan pilih HTML/Javascript.
  • Copy dan pastekan html di bawah ini.
<div class='subscribe-box'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=TypePedia' class='subscribe-box-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=TypePedia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='TypePedia'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-box-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-box-email-button' title='' type='submit' value='Subscribe Now !'/></form>
</div>
  • Klik simpan

Membuat Subscribe box Di Bawah Postingan

  • Login ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan salah satu CSS subscribe box diatas tadi tepat dibawah kode <div class="post-footer-line post-footer-line-1">.
  • Kemudian klik simpan
Demikianlah tutorial mengenai cara membuat subscribe box atau cara membuat kotak berlangganan responsive di blog. Semoga artikel ini dapat bermanfaat bagi kita semua dan dapat memperbanyak jumlah pelanggan blog anda. Jangan lupa like atau share.
Labels:

Comments

Post a Comment

Popular posts from this blog

10 Jembatan Paling Terkenal Di Dunia

10 Jembatan Paling Terkenal Di Dunia - Jembatan merupakan sebuah sarana untuk menyeberangi sungai ataupun lautan. Jembatan paling terkenal di dunia berikut mungkin adalah jembatan terpanjang, jembatan tertinggi di dunia. Banyak wisatawan dari penjuru dunia datang hanya untuk melihat maupun berfoto diatas jembatan ini. Berikut adalah 10 jembatan paling terkenal di dunia . 1. Jembatan Golden Gate, Amerika Serikat Jembatan paling terkenal pertama adalah jembatan Golden Gate. Jembatan Golden Gate (Golden Gate Bridge) menghubungkan antara San Fransisco dengan California. Jembatan ini memiliki panjang keseluruhan sekitar 2.727 meter dan tinggi 230 meter diatas permukaan laut. Jembatan Golden Gate dibuka pertama kali pada tahun 1937 dan merupakan jembatan paling terkenal serta menjadi daya tarik wisata paling populer di San Francisco. 2. Jembatan Menara, Inggris Jembatan paling terkenal kedua adalah jembatan Menara. Jembatan Menara (Tower Bridge) dibangun pada tahun 1886 dan ...
Post a Comment
Read more

10 Danau Paling Unik Di Dunia

10 Danau Paling Unik Di Dunia - Danau adalah sebuah genangan air yg besar dan memiliki kedalaman yg cukup untuk kehidupan hewan air. Kebanyakan danau hampir sama persis di seluruh dunia, namun berbeda dengan danau paling unik dibawah ini. Danau unik ini memiliki warna, bentuk dan keadaan yg unik sehingga masuk kedalam daftar danau terunik. Penasaran, berikut 10 danau paling unik di dunia . 10 Danau Paling Unik Di Dunia Danau Hillier, Australia Danau paling unik pertama adalah danau Hilier. Danau Hillier atau sering disebut Pink Lake (danau merah muda) adalah sebuah danau air garam yg terletak di pinggiran laut Goldfields-Esperance, Australia. Danau Hillier dengan panjang 600 meter dan lebar 250 meter memiliki keunikan karena airnya yg berwarna merah muda. Banyak pendapat mengatakan warna merah muda pada air danau tsb disebabkan oleh alga atau konsentrasi air asin yg sangat tinggi. Namun airnya tidak selalu berwarna merah muda, tergantung suhu, salinitas dan kondisi cahay...
Post a Comment
Read more

Cara Membuat dan Memasang Twitter Button Di Blog

Cara Membuat dan Memasang Twitter Button Di Blog - Memasang twitter button merupakan cara cepat untuk mendapatkan pengunjung dari Twitter. Dengan hanya satu klik, pengunjung dapat membagikan postingan anda ke timeline mereka, follow akun twitter anda, serta menggunakan hastag dari blog anda. Ada 4 macam twitter button yang dapat anda pasang pada blog anda seperti, Twitter Share button , Twitter  Follow button , Twitter  Hastag button serta Mention button . Mungkin sudah banyak tutorial yang menjelsakan bagaiamana cara memasang twitter button di blog, tapi kali saya akan menjelaskna ulang karena akhir-akhir ini twitter button pada blog saya sering tidak muncul. Ini mungkin juga di sebabkan oleh link dari para webmaster tentang twitter button sudah usang. Nah, Bagaimana cara memasangnya simak langkah-langkah di bawah ini. Cara Memasang Twiter Share Button 1. Membuat twitter share button Kunjungi situs twitter button . Kemudian centang Share a link . Hasilnya seperti gamba...
Post a Comment
Read more