Material Design Box Subscribe With Heading

Material Design Box Subscribe With Heading: Baiklah kali ini blog ID Dzgn akan coba kembali membahas Tutorial yang bertemakan material design.
Material Design cukup membuat saya terpesona sehingga mendorong saya untuk mempelajari Strukture kode dalam material design ini. Sebelumnya saya juga sudah pernah membagikan artikle tutorial untuk Box Subscribe/Kotak berlangganan ini dengan menggunakan efek material design namun ada sedikit perbedaan untuk bentuk dan stylenya.
pada kesempatan sebelumnya saya juga sudah membahas pengertian dari Box Subscribe/Kotak Berlangganan secara singkat namun dapat bisa di cerna untuk para visitor yang belum mengetahui apa itu Box Subscribe, untuk melihat lebih lengkapnya kamu bisa 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 jika masih penasaran 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 kamu masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode berikut tepat di atas kode ]]></b:skin> atau </style> silahkan kamu 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 jika sudah selesai sekarang silahkan kamu save/simpan template, lalu pindah menu ke Tata Letak>Tambah Gadget/Widget>Html/JavaScript, nah pada kotak area widget silahkan kamu pastekan kode 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 kamu ganti IDDzgn dengan ID FeedBurner Subscribe Via Email kamu

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

Oky mungkin itu saja untuk tutorial di malam ini, semoga tutorial saya bisa bermanfaat bagi kamu semua, salam dunia blogger ID Dzgn