Material Design Box Subscribe With Heading

Material Design Box Subscribe With Heading: Baiklah kali ini blog akan coba kembali membahas Tutorial yang bertemakan material design.
Material Design cukup menciptakan aku terpesona sehingga mendorong aku untuk mempelajari Strukture instruksi dalam material design ini. Sebelumnya aku juga sudah pernah membagikan artikle tutorial untuk Box Subscribe/Kotak berlangganan ini dengan memakai efek material design namun ada sedikit perbedaan untuk bentuk dan stylenya.
pada kesempatan sebelumnya aku juga sudah membahas pengertian dari Box Subscribe/Kotak Berlangganan secara singkat namun sanggup mampu di cerna untuk para visitor yang belum mengetahui apa itu Box Subscribe, untuk melihat lebih lengkapnya kau sanggup lihat pada link berikut Widget Box

Baca Juga:
Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog
Cara Membuat Kotak Berlangganan Keren Di Blog

Untuk kalau masih ingin tau dengan hasil demonya, berikut sudah kami sediakan link demonya.

Result

Nah bagai mana tertarik memasangnya di blog kamu??

Material Design Box Subscribe With Heading

1. Silahkan kau masuk ke Blogger>Tema>Edit Html, kemudian silahkan kau pastekan instruksi berikut sempurna di atas instruksi ]]></b:skin> atau </style> silahkan kau cari satu-persatu bebas area kode. Untuk mempercepat pencarian silahkan klik tombol

CTRL

pada keyboard kamu.

 .sidebar-nl .subform1 {    box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);     height: 200px;     box-sizing: border-box;     width: 100%;     padding-bottom: 15px;     border-radius: 2px;} .subtext {margin-top: 10px;     font-size: 15px;     text-align: center;} .subinput1   {  margin: 14px 25px 15px;     width: 81%;     display: block;     border: none;     padding: 10px 0;     border-bottom: solid 1px #03A9F4;     -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);     transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);     background-position: -300px 0;     background-size: 300px 100%;     background-repeat: no-repeat;     color: #106288;     transition: all 0.3s ease-out;} .subinput1:focus, input:valid {   box-shadow: none;   outline: none;   background-position: 0 0; } .subinput1:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {   color: #A9B1C6;   font-size: 11px;   -webkit-transform: translateY(-20px);           transform: translateY(-20px);   visibility: visible !important;   visibility: visible; transition: all 0.1s ease; } .h6-subs {   height: 50px;   width: 100%;   font-size: 18px;   background: #0F98D5;   color: white;   border-radius: 3px 3px 0 0;   box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);   text-align: center;   font-weight: 500; }  .subform {height: 193px;   box-sizing: border-box;   width: 100%;   box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);   padding-bottom: 15px;   border-radius: 2px;   margin: 0 2%; } .subform .h6-subs {   box-sizing: border-box;   padding: 13px 0; } button {       background: #FFFFFF;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     border-radius: 3px;     display: block;     padding: 8px 15px;     color: #5a5a5a;     box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;     transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;border: none;    cursor: pointer;     border-radius: 3px;font-size: 13px;text-align: center;font-weight: 500;     font-family: 'Roboto', sans-serif;     text-transform: uppercase; margin-left: auto;     margin-right: auto; } button:hover {   background: rgba(0, 0, 0, 0.06); }   The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect.  input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {   color: #1abc9c;   font-size: 11px;   -webkit-transform: translateY(-20px);           transform: translateY(-20px);   visibility: visible !important; } .h6-subs {padding-top: 12px;}

2. Nah kalau sudah selesai kini silahkan kau save/simpan template, kemudian pindah hidangan ke Tata Letak>Tambah Gadget/Widget>Html/JavaScript, nah pada kotak area widget silahkan kau pastekan instruksi berikut.

 <div class="sidebar-nl"><form action="https://feedburner.google.com/fb/a/mailverify" class="subform1" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDDzgn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><h6 class="h6-subs">Email Newsletter</h6><p class="subtext">Get Latest Posts Directly Into You Inbox</p><input class="subinput1" name="email" placeholder="Enter Your Email" required="" type="text" /><input class="subinput1" name="uri" type="hidden" value="IDDzgn" /><input name="loc" type="hidden" value="en_US" /><button class='ripple-effect button-center' type="submit" value="Subscribe">Submit</button><br /> </form></div>

Silahkan kau ganti IDDzgn dengan ID FeedBurner Subscribe Via Email kamu

3. Jika Sudah terakhir silahkan kau klik save/simpan, kemudian silahkan kau lihat kembali blog kau untuk melihat hasilnya.

Oky mungkin itu saja untuk tutorial di malam ini, biar tutorial aku sanggup bermanfaat bagi kau semua, salam dunia blogger