-->

Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz

Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz - Hallo sahabat blogger, apa kabar dengan anda hari ini ? semoga baik-baik saja dan sehat selalu. Pada kesempatan kali ini saya akan coba membuat tutorial bagaimana cara memasang kotak berlangganan feed burner atau biasa disebut subscriber box seperti pada template viomagz. widget ini menurut saya sudah wajib ada pada halaman blog anda. agar memudahkan para pengunjung blog anda agar bisa terus menerima notifikasi jika anda baru saja mempublish sebuah artikel yang masih fresh.

Baca Juga : Cara Membuat Efek Sudut Melengkung (Round Corner) Dengan CSS di Halaman Blog

Widget Subriber Box ini juga sebenarnya sudah ada di gadget blogger, akan tetapi dari segi tampilannya menurut saya kurang keren dan menarik. ada salah satu widget subcriber box yang menurut saya keren dan menarik, yaitu widget subscriber box pada templae viomagz. anda bisa lihat contoh widget subscriber box di bawah postingan ini.

Nah, bagi anda yang ingin memesang widget subcriber box atau widget berlangganan pada template blognya. silahkan anda ikuti langkah-langkah di bawah ini.

Berikut adalah Cara Memasang Kotak Berlangganan Feed Burner (Subscriber Box) Seperti Viomagz :

  • Masuk terlebih dahulu ke akun Blogger anda dan masuk ke menu Dashboard
  • Pilih Tema atau Template > Edit HTML
  • Silahkan anda copy script CSS di bawah ini dan letakan di atas kode [[></b:skin> atau </style> 

/* SUBSCRIBER BOX */
.berlangganan-box input.submit-email[type="submit"], .berlangganan-box input.email-address[type="text"] {
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.berlangganan-box {
background: #6dd5ed;
background: linear-gradient(to right, #5b86e5, #36d1dc);
color: #ffffff;
padding: 15px;
margin: 20px 0;
border-radius: 3px;
text-align: center;
}
.berlangganan-box p {
margin:15px 0;
}
.berlangganan-box input.email-address[type="text"] {
width: 60%;
padding: 10px;
text-align: center;
border-radius: 2px;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"] {
background: #fff;
padding: 10px 15px;
border-radius: 2px;
color: #777777;
border: none;
outline: none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background: #777777;
color: #fff;
cursor: pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #fffcd2;
}

  • Selanjutnya copy lagi script HTML di bawah ini dan letakan di atas kode </article>

<!-- subsriber box --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='berlangganan-box'>
<form expr:action='&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath' method='get' target='_blank'>
Berlangganan update artikel terbaru via email:<br/>
  <br/>
<input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/><br/>
<input name='uri' type='hidden' value='Serieswans'/>
<input name='loc' type='hidden' value='en_US'/>
<br/>
<input class='submit-email' type='submit' value='Submit'/></form>
</div>
<br/>
  <div class='clear'/>
</b:if>

Sedikit tambahan dari saya, jika anda ingin merubah warna backgroundnya menjadi warna gradient.

Silahkan ikuti langkah-langkah di bawah ini :

  • Silahkan anda cari kode berikut

background: #6dd5ed;
background: linear-gradient(to right, #5b86e5, #36d1dc);

  • Ganti dengan kode di bawah ini

background:-webkit-linear-gradient(right,#3b8d99 ,#6b6b83 ,#aa4b6b );
background:-moz-linear-gradient(right,#3b8d99 ,#6b6b83 ,#aa4b6b );
background:-o-linear-gradient(right,#3b8d99 ,#6b6b83 ,#aa4b6b );
background:-ms-linear-gradient(right,#3b8d99 ,#6b6b83 ,#aa4b6b );

  • Maka hasilnya akan seperti ini
    Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz
    Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz

Atau anda bisa menggunakan efek animasi gradient color, caranya sebagai berikut :

  • Silahkan ganti kode background di atas dengan kode di bawah ini

background: linear-gradient(-45deg, #12c2e9, #c471ed ,#f64f59 ,#aa4b6b);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

  • Selanjutnya copy Script CSS di bawah ini dan letakan di atas kode [[></b:skin> atau </style>

#berlangganan-box{background: linear-gradient(-45deg, #12c2e9, #c471ed ,#f64f59 ,#aa4b6b);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

  • Terakhir silahkna simpan tema atau template
  • Maka hasilnya akan seperti di bawah ini.
    Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz
    Subsriber Box - Animasi Gradient Color
Jangan lupa, silahkan anda ganti kode warna #3b8d99 ,#6b6b83 ,#aa4b6b dengan kode warna yang anda inginkan. silahkan kreasikan terserah anda.

Baca Juga : Cara Memasang Tombol Load More Post Ringan di Blogger

Nah, Mungkin itu saja tutorial kali ini mengenai Cara Memasang Kotak Berlangganan (Subscriber Box) Seperti Viomagz. jika anda masih kebingungan atau memiliki pertanyaan terkait postingan di atas, silahkan berkomentar di bawah dan jika anda merasa postingan ini bermanfaat, silahkan bagikan ke teman-teman ataupun media sosial anda. terima kasih
Next
Previous

Related Posts

Show comments
Hide comments

0 Komen

Posting Komentar

  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

x
Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!