Cara Membuat Widget Subscribe Simple Style Dengan HTML/JavaScript Di Blogger

Zen

BLOG, INFO

Saturday, November 5, 2016

Belum ada komentar

Hay sobat blogger semuanya, pada postingan kali ini saya akan membahas tentang html, saya yakin sobat semuanya sudah mengetahui apa itu html apa lagi yang suka blogging pasting sudah hafal apa itu html, jadi saya tidak akan jelaskan apa itu html, di sini saya akan mengajak sobat semuanya berkreasi membuat widget subscribe sendiri dengan HTML/JavaScript, di sini saya akan berbagi simple style subscribe widget yang seperti saya gunakan di sidebar kanan blog ini, dari pada panjang lebar dan kelamaan mendingan kita langsung mulai saja langkah-langahnya

Bahan yang di perlukan

1. Punya blog (tentunya)
2. Notepad++ atau sering di sebut n++ (sebenarnya ini hanya untuk sobat yang ingin restyling saja) selain itu sobat juga dapat menggunakan aplikasi web designer lainnya

Langkah-langkah

1. Copy script di bawah ini ke n++ (jika tidak sesuai keinginan sobat bisa ganti sesuai style sobat sendiri bagi sobat yang belum bisa merubah script html bisa belajar pada artikel berikutnya)
   
   <style> @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .ssb-wrapper { width:275px; text-align:center; background: rgba(0, 128, 128, 0.1); color:black; padding:4px; font-family:calibri; border:2px solid #008080; border-radius:3px; } a.title-wrapper { font-size:24px; text-decoration:none; color:blue; } a.subtitle-wrapper { text-transform:uppercase; } hr.custom-line { color:#008080; margin:5px 4px; } .email-wrapper { position:relative; } .ssb-email { height: 30px; padding: 0px 8px; background: none repeat scroll 0% 0% padding-box rgba(255, 255, 255, 0.9); border-width: 1px; border-style: solid; border-color: #008080; border-radius: 2.5px 0px 0px 2.5px; color: inherit; } .ssb-submit { height: 32px; text-transform:uppercase; -moz-margin-start: -1px; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) repeat scroll 0% 0% padding-box transparent; padding: 0px 5px; border-width: 1px; border-style: solid; border-color: #008080; border-radius: 0px 2.5px 2.5px 0px; color: inherit; cursor: pointer; transition-duration: 500ms; } .ssb-email:focus + .ssb-submit, .ssb-email[autofocus] + .ssb-submit, .ssb-submit:hover { color:#fff; transition-duration: 500ms; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 128, 128, 0.8)) repeat scroll 0% 0% padding-box transparent;; } #more-ssb-wrapper { text-align:center; } #link-img { width:45px; height:45px; margin:0 10px; } #link-img:hover { opacity:.6; -webkit-animation: 1.5s spin 1; animation: 1.5s spin 1; } </style> <div class="ssb-wrapper"> <a class="title-wrapper" href="http://zeputar-informasi.blogspot.com">Wahana Infromasi</a> <hr class="custom-line"><a class="subtitle-wrapper">bagi sobat semuanya yang suka membaca artikel pada blog sederhana ini bisa berlangganan via email</a> <hr class="custom-line"> <div class="email-wrapper"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=WahanaInformasi" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WahanaInformasi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" value="WahanaInformasi" type="hidden"> <input name="loc" value="en_US" type="hidden"> <input name="email" class="ssb-email" autocomplete="off" placeholder="Tulis email di sini..."><input class="ssb-submit" value="Subscribe" title="" type="submit"> </form> </div> <hr class="custom-line"> <div id="more-ssb-wrapper"><a href="https://facebook.com/flukdev"><img id="link-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq98L1BeKNn8Tq3YhQu2EagG2FjT_jNdzfVFq1eMgNT4K0J26lRh5AJMNWd2CckyQ05PF3LuPeyKZ3mfh2MXEsj7mMp2w7IQC4EuOBhz5pfFSWSlPK-5zjfZSis_DMQGo8L-NrXNEHfYs/s1600/facebook.png"></a><a href="https://twitter.com/LarnoYopi"><img id="link-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvSpHJ4RuIlesdysnJC_P-HjuCJc7Pm8qus1N6uk6RfL986N3UQIc5yFntEdliCbFCKpoo8nR8xCf4WhJGvcsZwOeUCzqsmZIRd_LtEBT_N13tl3M7u7y0Ak06a8hGjXpJWKLTVryoZ0/s1600/twitter.png"></a><a href="https://plus.google.com/+larnoyopi"><img id="link-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgi1ga9sqvIdzNAIhHOc-NkSwvMVZKEOlH_vk8b4X3ZS7o_GFvkMGGTcSw7YXXaLfZz9C6PuKddaIrYZ08USRM7qPwsR9bw6iuFBn2S7GAwOx-7UekMCEH8PkdJy2fMWo8garTMwf-yMc/s1600/g%252B.png"></a></div> </div>
2. Sobat juga jangan lupa mengganti link-linknya dengan link milik sobat sendiri
   Tulisan warna merah sobat isi dengan link facebook sobat (fp/ group/ profil)
   Tulisan warna hijau sobat isi dengan link twitter sobat
   Tulisan warna ungu sobat isi dengan link google+ sobat
   Tulisan warna biru sobat isi dengan link feedburner sobat
   Tulisan warna kuning sobat isi dengan kata - kata sobat sendiri
   Tulisan warna cyan sobat isi dengan link website sobat
   Tulisan warna coklat sobat isi dengan judul website sobat
3. Jika sudah selesai sobat masuk ke dashboard blogger sobat lalu masuk ke Layout > Add widget > HTML/JavaScript lalu sobat copy script hasil restilyng sobat ke form di HTML/JavaScript tadi lalu save dan tempatkan di mana sobat inginkan dan save arrangement dan lihat hasilnya dengan membuka blog sobat
4. Selesai

Sekarang waktunya saya untuk berpamitan kepada sobat blogger semuanya, semoga bisa bermanfaat untuk sobat semuanya