7 Cara Mempercepat Loading Blog Agar Jadi Lebih Ringan

Kali ini saya ingin membagikan tips agar blog kamu jadi lebih ringan dengan mempercepat loading blog, kebiasaan blogger indonesia yang tidak terlalu mengerti pentingnya kecepatan loading blog di mata google, bukan hanya content yang di utamakan pada blog namun kecepatan loading juga perlu di utamakan.

Blog yang enteng dan ringan diakses akan memudahkan pengunjung dalam menikmati setiap konten yang kita sediakan, itulah sebabnya sangat berpengaruh terhadap SERP., Ya klo koneksi internet sedang lambat masih bisa di maklumi saja namun apa jadinya bila koneksi stabil namun blog saat di muat cukup memakan waktu yang lama, sebaiknya anda harus mulai berbenah.

Nah yang kali ini saya akan bahas mungkin di luar sana juga sudah banyak yang pembahasanya dengan topik yang sama, namun di sini saya akan lebih memperjelas untuk 7 Cara Mempercepat Loading Blog Agar Jadi Lebih Ringan.

Berikut adalah situs web penyedia tools  untuk memastikan berapa skor kecepatan loading blog yang sedang kamu kelola.

                       GTMetrix
                       Google PageSpeed Insights

Gambar Screenshot Untuk Score Kecepatan Loading Blog ID Dzgn Via Google PageSpeed Insights & GTMetrix

Score Speed Via Google PageSpeed Insights

Score Speed Via GTMetrix

Nah biasanya seorang pengunjung situs kalo yang di kunjungi membutuhkan waktu yang cukup lama maka pengunjung tidak segan-segan mengambil tindakan: Klik tombol close/pindah ke situs lain, back mencari situs lain, menunggu sampe prosses loading selesai.
Nah itu adalah kebiasaan pengunjung begitu pula saya☺, jika semua itu terjadi kemungkinan kualitas blog kamu akan menurun, apalagi situs yang di kunjungi pengunjung tidak lebih dari 10 detik itu sudah di anggap sampah google/spam.

Ada beberapa hal yang harus kamu lakukan jika tidak ingin situ/blog kamu terabaikan pengunjung begitu saja.
Pastikan kamu memilih Template/theme yang benar-benar sudah teruji keringananya perhatikan juga untuk ukuran gambar yang kamu publish, meskipun hanya gambar jangan kamu anggap itu hal yang tidak akan mempengaruhi kecepatan loading sebuah situs.

Untuk lebih jelesnya simak beberapa point yang harus kamu pahami agar blog yang kamu kelola kecepatan loadingnya bisa menjadi lebih ringan.

7 Cara Mempercepat Loading Blog Agar Jadi Lebih Ringan

1. Gunakan Template / Theme yang Ringan
     Hal pertama yang harus kamu pastikan adalah memilih Template/Theme yang ringan, dengan menggunakan template yang ringan. jadi kalo kamu sudah memastikan blog kamu menggunakan template yang sudah betul-betul teruji keringananya, kamu tidak perlu lagi melakukan compress pada HTML, CSS, dan Java Script lagi.

2. Melakukan Compress/Memperkecil Ukuran Gambar Sebelum Di Upload 
    Jika kamu sudah menggunakan template yang menurut kamu ringan namun masih saja tetap terasa lambat saat loading, lakukan commpres gambar sebelum di upload. kamu bisa menggunakan tools situs Tinypng yang menyediakan jasa compress gambar dengan gratis secara manual, atau bisa menggunakan software gambar bawaan microsoft office.
Ukuran gambar yang ideal 90-200kb dengan format JPG, PNG dan juga GIF.

3. Maksimalkan Widget Blog
    Disini maksud saya adalah maksimalkan widget blog, bukan berarti pasang widget sebanyak-banyaknya. cukup dengan maksimalkan keguanaanya untuk blog yang di kelola.
Terkadang banyak pengguna yang baru-baru menekuni dunia blogger, banyak yang mementingkan asumsi tampilan yang berlebihan tampa tau pengaruh buruknya.

4. Menghapus Script/CSS bawaan Blogger
    Jika sudah menggunakan template yang ringan namun masih saja kecepatan loading terasa berat, bisa saja faktornya adalah Script/css bawaan blogger yang masih di muat sehingga memperlambat kecepatan loading situs blog yang kamu kelola.
Silahkan kamu search di google untuk cara menghapus atau menghilangkan Script/css bawaan blogger, sudah banyak situs yang menyediakan tutorialnya.

5. Hindari Script/CSS Yang Terkena Render Blocking
    Biasanya jika blog di check pada situs tools Google PageSpeed Insights sering muncul saran-peringatan "Harus Diperbaiki" (Should Fix) "Remove Render-Blocking JavaScript/CSS". Itu akan memperlambat kecepatan loading blog, ini biasanya terjadi pada link Css untuk Font awesome dan
Script Jquery atau lainya,

6. Pasang Iklan Sewajarnya
    Ini juga kadang banyak terjadi di kalangan pengguna blog, tidak terlalu mementingkan pengaruh buruk dari banyaknya iklan yang di pasang pada situs blog yang di kelola. mereka kadang hanya mementingkan penghasilan yang bisa di dapat dari banyaknya iklan yang di pasang.
kemungkinan jika pemasangan iklan yang berlebihan akan menimbulkan efek buruk terhadap situs blog: Tampilan akan jadi berantakan, Pengunjung tidak betah berlama-lama berkunjung, Loading jadi lambat. Jika kamu mengejar uangnya tampa mementingkan kecepatan loading, dan pengunjung silahkan kamu pasang iklan banyak-banyak.

7. Jangan Salah Pilih Hosting
Bagi anda yang punya rencana berpindah ko wordpress silahkan anda pertimbangkan betul hal ini.
Hosting adalah salah satu faktor penting yang sangat berbengaruh bagi kecepatan loading situs blog.
Baiknya kamu memilih jasa hosting yang sudah terbukti, atau baca dulu reviewnya jangan asal-asalan, atau kamu bisa juga menanyakan ke blogger-blogger lain yang sudah menggunakan wordpress selft-host.

Nah mungkin sampe di sini saja untuk 7 Cara Mempercepat Loading Blog Agar Jadi Lebih Ringan semoga bisa mmemberikan manfaat kepada orang banyak, kalo ada kata-kata yang salah dalam pengetikan mohon di maklumi terimakasi.

Cara Merubah Tampila Warna Address Bar Di Browser Mobile Sesuai Dengan Loyout Blog

Hallo kali ini blog ID Dzgn akan coba mengupas tutorial blog yang mungkin kalian belum ketahui atau mungkin sudah, bagi yang belum mengetahui mungkin masih penasaran dengan tutorial yang saya bagikan kali ini. Tutorial kali ini adalah: Cara Merubah Tampila Warna Address Bar  Di Browser  Mobile Sesuai Dengan Loyout Blog , Nah pastinya sobat ID Dzgn pernah mengunjungi situs web dalam tampilan mobile, nah di addres bar browser pasti terkadang kamu bingung karena addres bar warnanya berbeda dengan tampilan situs web lain, jika kamu pengguna blogger kamu bisa merubah tampilan warna addres bar situs kamu sesuai dengan keingan kamu, caranya pun tidak terlalu ribet hanya harus menambahkan tag untuk merubah warnanya pada setiap tampilan browser mobile yang berbeda.

Baca Artikel Ini

Nah di atas adalah gambar demo yang memperlihatkan perbedaan warna addres bar pada browser mobile, langsung saja ke tutorial pemasanganya di bawah ini!

Cara Merubah Tampila Warna Address Bar Browser Smartphone Sesuai Dengan Loyout Blog

1. Silahkan buka Blogger>Tema>Edit Html, lalu pastekan kode berikut tepat di atas kode </head> untuk mepercepat pencarian silahkan klik tombol

CTRL

+

F

Pada keyboard leptop kamu

<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#0048b4' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#0048b4' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#0048b4' name='apple-mobile-web-app-status-bar-style'/>(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

2. Sekarang silahkan kamu Save/Simpan dan buka situs web kamu pada tampilan mobile dan lihat hasilnya.

Untuk mengganti warna silahkan kamu ganti kode warna #0048b4 sesuai dengan keingan kamu.

Nah bagai mana shobat mudah bukan, ya caranya cukup mudah dan simple menurut saya. Semoga Tutorial Blog di atas bisa bermanfaat buat kamu, jangan mudah menyerah teruslah melangkah tampa rasa lelah (Kata Bijak) Terimakasi.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

Hallo sobat blog ID Dzgn, kali ini saya akan coba membagikan tutorial untuk: Material Design Membuat Tombol Back To Top Effect Ripple Di Blog, sudah hampir satu bulan saya tidak membuat postingan artikle untuk sobat semua, maklum akhir-akhir ini saya kena demam (Males Ngeblog) kalo ada yang mungkin punya solusi untuk penyakit saya ini tolong di bagikan yaa di kotak komentar di bawah.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog: Back To Top pada blog digunakan untuk memudahkan pengunjung untuk men-scroll posisi dari bawah laman postingan ke atas sesuai dengan efek animasi keyframe yang di gunakan. Tombol back to top ini akan muncul bila scroll mouse atau scroll vertikal di geser ke bawah.
Tombol ini juga biasanya akan menambah kesan menarik tampilan web/blog sehingga tampilan akan terlihat prefesional di mata pengunjung, Hampir seluruh pengguna blog dan website menggunakan tombol back to top ini namun dengan tampilan yang berbeda-beda.
Nah yang kali ini saya bagikan adalah tombol back to top material design yang menggunakan effect ripple, jika kurang jelas silahkan lihat gambar demonya di bawah ini.

Tertarik membuatnya?? Yuk intip cara membuat dan memasangnya di bawah!!☺

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

1. Silahkan kamu buka Blogger>Tema>Edit Html lalu cari kode ]]></b:skin> pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard leptop kamu.

#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#2196F3;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#1976D2;color:#fff;box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#BackToTop.active{transform:scale(1)}.ripplelink{border:1px solid rgba(0,0,0,0.12);position:relative;overflow:hidden;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .65s linear;-moz-animation:ripple .65s linear;-ms-animation:ripple .65s linear;-o-animation:ripple .65s linear;animation:ripple .65s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.kbrd{border-radius:3px;border:1px solid #a3a3a3;box-shadow:1px 0 1px 0 #FFF,0px 2px 0 2px #D3D3D3,0px 2px 0 3px #888;box-sizing:border-box;display:inline;font-family:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;margin:0 5px;padding:1px 5px;text-transform:capitalize;vertical-align:baseline}

2. Jika sudah selanjutnya silahkan kamu pastekan kode berikut tepat di atas kode </body>

<div class='ripplelink' href='#' id='BackToTop'><i class='fa fa-angle-up'></i></div>
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
//<![CDATA[
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

3. Terakhir silahkan kamu save/simpan tema

Nah jika 3 tahap di atas sudah kamu lakukan sekarang coba kamu lihat hasilnya di blog kamu.
Mungkin hanya itu saja yang saya bisa sampaikan pada artikle tutorial kali ini, semoga bisa bermanfaat buat kamu terimakasi.

Ini Cara Mudah Mengatasi Pesan Error "Sayangnya Aplikasi Telah Berhenti" Pada Smartphone Android

Ini Cara Mudah Mengatasi Pesan Error  "Sayangnya Aplikasi Telah Berhenti" Pada Smartphone Android: Baiklah kali ini saya akan coba membagikan sedikit Tips yang mungkin bisa membantu kamu dalam mengatasi masalah aplikasi "Sayangnya Aplikasi Telah Berhenti" pada smartphone android kamu, terjadinya aplikasi yang berhenti tiba-tiba biasanya di sebabkan oleh kecilnya kapasitas ukuran RAM (Random Acces Memory), Aplikasi yang kurang kompstible, File cache yang jumblahnya menumpuk, dan masih banyak lainya yang bisa menyebabkan terjadinya masalah ini.
Nah dari beberapa penyebab yang bisa memicu terjadinya aplikasi berhenti secara tiba-tiba di atas, apakah ada salah satu yang mungkin sebelumnya terjadi sehingga smartphone android kamu saat kamu buka ada aplikasi yang mungkin berhenti secara tiba-tiba?

Mengatasi Masalah Aplikasi Android Yang Tiba-tiba Berhenti

Nah untuk solusi masalah pesan error yang muncul saat mebuka aplikasi yang bertuliskan "Sayangnya Aplikasi Telah Berhenti" atau “Unfortunately, App Has Stopped” nah tips untuk mengatasi masalah ini yang saya berikan kali ini memang tidak menjamin keberhasilan 100%, namun setidaknya anda mencoba Langkah-langkah yang saya berikan untuk mengatasinya, karena sebelumnya saya juga pernah mengalami masalah yang sama dan saya sudah mencobanya 100% work, namun mengingat spesifikasi android yang Berbeda-beda tidak menjamin kemungkinan pada smartphone android kamu akan berhasil.
cara mengatasinya dari cara mudah dan sederhana yaitu membersihkan file cache pada aplikasi yang timbul pesan error , sampe dengan melakukan factory reset.

Langkah 1: Menghapus File Cache Aplikasi

Buka menu Pengaturan » Setelan Tambahan » Manajemen Aplikasi » Cari “Nama Aplikasi” » Kemudian tap “Hapus Cache”.

Langkah pertama yang harus kamu lakukan adalah menghapus file cache semua aplikasi yang ada pada android kamu, gunakan Clean Master, CClenar atau aplikasi semacamnya yang mampu menghapus file cache dengan mudah dan cepat, jika sudah menghapus file cache saran saya kamu langsung melakukan "RESTAR" pada semartphone android kamu, agar ponsel kamu di segarkan kembali dalam mode restar atau "Muat Ulang". jika sudah melakukan itu sekarang silahkan coba buka kembali aplikasi yang tadinya muncul  pesan error , nah Mudah-mudahan sudah tidak terjadi masalah seperti yang terjadi sebelumnya tadi.

Langkah 2: Paksa Berhenti Dan Menghapus Data Aplikasi

Pada langkah-langkah kedua ini silahkan kamu Hapus Paksa data aplikasi yang ada pada android kamu, cara ini biasanya sangat ampuh untuk mengatasi masalah aplikasi yang macet, atau error dan kali ini bisa kamu coba untuk mengatasi masalah yang kamu alami,

Buka menu Pengaturan » Setelan Tambahan » Manajemen Aplikasi » Semua » Cari “Nama Aplikasi” » Kemudian tap “Paksa Berhenti” dan “Hapus Data”.

Nah di sini kamu harus ingat Menghapus data aplikasi bukan menghapus aplikasi yang terinstal melainkan menghapus data aplikasi yang di simpan oleh aplikasi tersebut.
Solusi ini di harapkan bisa mengatasi Pesan Error yang muncul pada saat aplikasi di buka.

Langkah 3: Update Aplikasi

Pada langkah ini kamu bisa coba untuk me-ngupdate kembali jika versi baru tersedia, cara ini akan menghilangkan bugs yang rusak atau biasanya terjad error. Untuk langkah updatenya juga di butuhkan koneksi internet yang cukup cepat, kamu bisa me-ngupdate aplikasi via playstore atau aplikasi sejenisnya yang menyediakan pelayanan yang sama seperti playstore.

Langkah 4: Uninstal Dan Melakukan Instal Ulang Aplikasi

Buka menu Pengaturan » Setelan Tambahan » Manajemen Aplikasi » Cari “Nama Aplikasi” » Kemudian tap “Hapus Instalasi”.

jika 3 cara di atas tidak mampu mengatasi masalah yang timbul kamu bisa coba untuk uninstal dan melakukan instal ulang dengan aplikasi yang baru, masalah ini sudah terbilang cukup serisu jika 3 langkah solusi di atas masih belum memberikan hasil untuk mengembalikan aplikasi kamu secara normal. nah pada langkah ini kamu harus uninstal (Copot Pemasangan) aplikasi kamu lalu instal dengan yang baru, cara ini biasanya ampuh karena file aplikasi akan terganti dengan yang baru namun kamu jangan lupa untuk melakukan pembersihan file sampah dan me-restar ulang terlebih dahulu smartphone android kamu

Langkah 5: Factory Reset

Buka Menu Pengaturan » Cadangkan & Setel ulang » Kembalikan Kepengaturan Pabrik » Setel Ulang Telepon » Masukan Sandi Pemulihan » Konfirmasi

Apabila 4 solusi diatas tidak berhasil, terpaksa kamu harus mengambil jalan pintas yaitu me-reset ulang smartphone android kamu ke pengaturan awal pabrik, sebenarnya cara ini bukanlah cara terbaik untuk mengatasi masalah yang terjadi karena semua data akan hilang pada smartphone kamu.
sebelum kamu mengikuti langkah ini pastikan kamu sudah melakukan BACKUP semua berkas file: Vidio, Musik, Gambar, Dokument,  Aplikasi, dan file lainya yang penting bagimu untuk melakukan factory reset.

Nah Gambar Screnshoot langkah-langkah di atas saya lakukan pada sistem operasi android Lolipop versi:5.1 nah kalo kamu menggunakan smartphone dengan sistem android versi lain kamu hanya harus menyesuakin sendiri
Jika timbul masalah fatal lain kami tidak bertanggung jawab untuk itu.

Nah dari beberapa langkah solusi untuk Mengatasi Pesan Error "Sayangnya Aplikasi Telah Berhenti" Pada Smartphone Android Kamu semoga bermanfaat dan bisa membantu, meskipun langkah-langkah di atas tidak menjamin keberhasilan 100% namun tidak ada salahnya kamu mencobanya dan lihat hasilnya.
Sekian dari saya semoga bermanfaat untuk  Ini Cara Mudah Mengatasi Pesan Error  "Sayangnya Aplikasi Telah Berhenti" Pada Smartphone Android, jika ada kata yang tidak berkehenang di hati mohon maaf.

Cara Memasang Kotak Iklan di Blog

Cara Memasang Kotak Iklan di Blog - Pada kesempatan ini Saya akan membahas mengenai tutorial membuat kotak iklan di blog yang berukuran 125x125 pixels. Mungkin Anda sudah mengetahui bahwa kegiatan menulis artikel di blog kini tidak lagi hanya sekedar pelepas hobi atau mengisi kekosongan waktu. Membuat blog dan memanagenya dengan baik dan benar juga dapat menghasilkan materi berupa uang yang sebagian besar para blogger menjadikannya sebagai salah satu mata pencaharian.

Selengkapnya »

Tag Kondisional Blogger Terbaru

Berikut ini adalah Tag Kondisional Blogger Terbaru yang bisa sobat tambahkan pada tema untuk membungkus kode tertentu.

Selengkapnya »

Review Payclick, Jaringan Iklan yang Ramah untuk Pemula

Bagaimana cara terbaik menghasilkan uang dari situs Anda di tahun 2017? Saya katakan saja dari awal kepada Anda, jawabannya bukanlah Adsense. Inilah kenapa saya menulis review Payclick ini. Sebelum saya menjelaskan mengapa saya memilih menggunakan PayClick sebagai sumber penghasilan utama saya dan bukan jaringan iklan lain yang “lebih populer dan mapan”, ada beberapa hal dasar lainnya yang perlu Anda ketahui.

Apa itu PayClick?

PayClick adalah sebuah jaringan iklan yang mungkin saat ini pun Anda sudah tahu, atau setidaknya pernah mendengarnya. Sekarang PayClick menjadi jaringan iklan yang berdasar pada “format native ad atau iklan native”.
Selengkapnya »

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

+

F

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