2 Cara Membuat Widget Subscribe Box Keren Di Blog

Zona Internetku No Comment September 17, 2018

Cara Membuat Widget Email Subscribe Box Keren Di Blog. Email Subscribe Box atau kotak berlangganan adalah widget yang bisa di kategorikan dalam label penting, karena dengan memasang widget yang satu ini maka pengunjung blog bisa dengan mudah berlangganan postingan terupdate dari blog kita secara otomatis yang akan dikirim ke alamat email mereka.

Jadi intinya widget subscribe box bisa mendatangkan pengunjung yang sudah berlanggganan dengan blog kita.

Cara Memasang Widget Email Subscribe Box Yang Keren Di Bawah Postingan Dan Di Sidebar Blog

Dan ini adalah tutorial singkat mengenai cara memasang subscribe box di bagian yang kalian inginkan, seperti di bawah / atas postingan blog ataupun di sidebar / footer blog

1. Membuat Widget Subscribe Box Di Bawah Atau Di Atas Postingan Blog

Untuk tutorial ini merupakan tutorial untuk memasang subscribe box yang bisa di letakkan di bawah ataupun di atas postingan blog kalian.
1. Masuk ke dalam blog kalian
2. Pilih menu "Tema" dan klik "Edit HTML"
3. Selanjutnya cari kode <data:post.body/> dan letakkan salah satu kode di bawah ini di atas <data:post.body/> untuk meletakkan subscribe box berada di atas postingan, jika ingin meletakkan subscribe box di bawah postingan maka letakkan kode widget subscribe box di bawah kode <data:post.body/>

Subscribe Box Ala Simple Blue Light Responsive

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clear'/>
<div id='subscribe-box'>
<p>Silahkan isi email kalian disini untuk mendapatkan info terbaru dari kami</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=ZonaInternetku&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
  <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
  <input class='submitbutton' type='submit' value='Submit'/>
  <input name='uri' type='hidden' value='ZonaInternetku'/>
  <input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>

<style>
#subscribe-box{background:#0a2f77;padding:20px}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 20px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{padding:12px 0;color:#bcc4ca;border:none;font-size:14px;margin-bottom:16px;width:100%}
#subscribe-box .emailfield input:focus{color:#7f8c8d;outline:none}
#subscribe-box .emailfield .submitbutton{background:rgba(0,0,0,0.1);color:#fff;margin:0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(0,0,0,0.45);color:#fff;cursor:pointer}
</style>
</b:if>

Simple Widget Subscribe Box

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subscribe-box'>
<p>Silahkan isi email kalian disini untuk mendapatkan info terbaru dari kami</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=ZonaInternetku&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
  <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
  <input class='submitbutton' type='submit' value='Submit'/>
  <input name='uri' type='hidden' value='ZonaInternetku'/>
  <input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>

<style>
#subscribe-box{background:#26A65B;padding:20px}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 20px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{line-height: 15px;color: #bcc4ca;border: none;font-size: 15px;width: calc(100% - 85px);padding: 10px 0;margin: 0;}
#subscribe-box .emailfield input:focus{color:#7f8c8d;outline:none}
#subscribe-box .emailfield .submitbutton{background:rgba(0,0,0,0.1);color:#fff;margin:0;width:80px;letter-spacing:.5px;text-transform:uppercase;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(0,0,0,0.45);color:#fff;cursor:pointer}
</style>
</b:if>

4. Ok, jika kalian sudah meletakkan salah kode tersebut di atas atau di bawah kode <data:post.body/> maka jangan lupa untuk klik "Simpan Perubahan"
Sekarang kalian bisa melihat hasilnya dengan melihat salah satu postingan artikel blog kalian

Baca juga :
Trik Membuat Widget Label Blog Menjadi Keren
Trik Memodifikasi Widget Arsip Supaya Keren
Cara Mengubah Widget Popular Post Menjadi Keren

2. Membuat Widget Subscribe Box Di Sidebar Atau Footer Blog

Di tutorial selanjutnya saya akan tunjukkan untuk cara memasang widget email berlangganan di bagian sidebar ataupun bagian footer pada blog kita.
1. Masuk ke dalam blog kalian masing masing dan pilih menu "Tata Letak"
2. Selanjutnya kalian klik "Tambahkan Gadget" dan pilih widget"Ikuti Lewat Email"
3. Setelah itu kalian simpan widget tersebut
4. Masuk ke dalam menu "Tema" dan klik "Edit HTML"
5. Kemudian letakkan salah satu kode berikut ini di atas kode </b:skin> atau </style>

Subscribe Box Ala Simple Blue Light Responsive

/* Widget subscribe box */
.FollowByEmail .widget-content{padding:10px;background-color:#0a2f77}
.FollowByEmail .follow-by-email-inner{position:relative}
.FollowByEmail .follow-by-email-inner table tbody tr td{width:100%;float:left;overflow:hidden}
.FollowByEmail .follow-by-email-inner table tbody tr td .follow-by-email-address{padding:7px 0;margin:7px 0;color:#011727;font-size:14px;width:100%;border:none}
.FollowByEmail .follow-by-email-inner table tbody tr td .follow-by-email-submit{background:rgba(0,0,0,0.45);color:#fff;margin:0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s;padding:0;border:0;font-size:12px;cursor:pointer;height:30px}

Simple Widget Subscribe Box

/*Widget subscribe box*/
.FollowByEmail .widget-content{padding:10px;background-color:#3cbe72}
.FollowByEmail .follow-by-email-inner{position:relative}
.follow-by-email-inner form{margin:0}
.follow-by-email-inner table{margin:0}
.FollowByEmail .follow-by-email-inner table tbody tr td{width:calc(100% - 80px);float:left;overflow:hidden}
.FollowByEmail .follow-by-email-inner table tbody tr td:nth-child(2){width: 80px;}
.FollowByEmail .follow-by-email-inner table tbody tr td .follow-by-email-address{padding:7px 0;margin:7px 0;color:#011727;font-size:14px;width:100%;border:none}
.FollowByEmail .follow-by-email-inner table tbody tr td .follow-by-email-submit{background:rgba(0,0,0,0.45);color:#fff;padding:7px 0;margin:7px 0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s;border:0;font-size:12px;cursor:pointer;height:30px}

6. Setelah selesai silahkan kalian klik "Simpan Tema" dan lihatlah hasilnya

Sekian tutorial mengenai Cara Membuat widget subscribe email box yang keren di sidebar dan di bawah postingan yang dapat saya sampaikan, sekian terima kasih

Promo Menarik