Widget Box Subscribe atau biasa di sebut Kotak Berlangganan Via Email, sangat wajib di pasang pada web atau blog, Hal ini untuk mempermudah pengunjung dalam berlangganan Artikel via Email.
Banyak bentuk dari kotak berlangganan ini, ada yang model default bawaan dari blogger, atau juga di buat sendiri oleh Pengguna-pengguna yang lebih dahulu mendahului kita,
Nah sebelumnya saya sudah membagikan Box Subscribe (Kotak Berlangganan) dengan posisi di bawah postingan. Namun untuk kali ini saya akan coba membagikan lagi Tutorialnya dalam posisi berbeda dan berbentuk berbeda pula dengan penerapan pada widget. Ada yang istimewa dengan yang satu ini, Untuk Widget Box Subscribe ini menggunakan efek Material Design berbeda dengan sebelumnya hanya biasa saja namun juga cukup menarik tidak kalah dengan yang satu ini.
Nah bagai mana shobat mungkin kalian tertarik untuk menerapkanya di blog atu web kalian???, Jika kalian tertarik kalian bisa mengikuti langkah-langkah penerapanya di bawah ini. Untuk mempercepat pencarian kamu bisa Klik tombol
CTRL
+F
Pada Keyboard kamuWidget Box Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
1. Masuk terlebih dahulu ke blogger>Tema>Edit Html, Nah silahkan kamu cari kode berikut pada Html tadi ]]></b:skin> atau </style> pastekan kode berikut tepat sebelum kode yang di cari.#material-subscribe:hover{opacity:1}#material-subscribe:hover{box-shadow:0 6px 20px #AFAFAF}#material-subscribe{transition:all .4s ease-in-out;padding:20px 30px 30px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:auto;max-width:400px}
.buttonx{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
.buttonx:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.buttonx.red{ background: #d21919;
width: auto;
font-size: large;
}
a:active{color:#22A65A;text-decoration:none;transition: all 0.25s linear;}a:hover{color:#444;text-decoration:none;transition: all 0.5s ease}
input.inputfield,.input-field textarea{background-color:transparent;border:none;border-bottom:1px solid #000000;border-radius:0;outline:none;height:3rem;width:100%;font-size:1rem;margin:0 0 15px 0;padding:0;box-shadow:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;transition:all .3s}
.input-field input:focus,.input-field textarea:focus{border-bottom:1px solid #d21919;box-shadow:0 1px 0 0 #2DCC70}
.input-field{position:relative;margin-top:1rem}
.input-field label{color:#9e9e9e;position:absolute;top:0.8rem;left:0;font-size:1rem;cursor:text;-webkit-transition:.2s ease-out;-moz-transition:.2s ease-out;-o-transition:.2s ease-out;-ms-transition:.2s ease-out;transition:.2s ease-out}
.input-field label.active{color:#d21919;font-size:0.8rem;-webkit-transform:translateY(-140%);-moz-transform:translateY(-140%);-ms-transform:translateY(-140%);-o-transform:translateY(-140%);transform:translateY(-140%)}
@media screen and (max-width:684px){
.buttonx.red { width: auto;}
#material-subscribe{auto}}
Silahkan kamu Save/Simpan Tema
2. Nah sekarang alihkan perhatian kamu ke menu blogger kembali, pindahkan dari Tema menjadi Tata Letak, Silahkan kamu Pilih Tambahkan Widget/Gadget sesuai dengan posisi yang kamu inginkan, Biasanya widget ini di pasang pada bagian Sidebar atau Footer itu terserah kamu.
Pilih Html/Javascript dan pastekan kode berikut pada bagian Html tadi.
<div id='material-subscribe'>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDDzgn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="input-field">
<input class="inputfield" name="email" type="email" required="" class="validate"/> <label for="email" data-error="wrong" data-success="right">Email</label> <input type="hidden" value="IDDzgn" name="uri"/><input type="hidden" name="loc" value="en_US"/> <button class="buttonx red waves-effect waves-light" type="submit"/><i class="fa fa-envelope"></i> Subscribe</button> </div>
</form>
</div>
<div style='clear: both;'/>
Silahkan kamu ganti IDDzgn dengan Id Feedburner kamuNah bagai man shobat mudah bukan. Oky sampe di sini dulu ya tutorialnya salam berjumpa lagi. jangan lupa buat ninggalin jejak di bawah ini.
Baca Juga: Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog