Kembali ke Portfolio renaldyrr.com

Cara Membuat Widget Subscribe Flat UI Responsive Di Blog

Cara Membuat Widget Subscribe Flat UI Responsive Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips dan trik blogging untuk Anda yaitu cara membuat widget subscribe Flat UI responsive di blog, untuk membuatnya silakan agan untuk mengikuti beberapa cara berikut ini;


Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode </b:skin> dengan cara
Ctrl
+
F
,


4. Copy script di bawah ini lalu paste tepat di atas kode </b:skin>,

 #subscribe-css { padding : 5px; background : #16a085; }
.subscribe-wrapper { color : #fff; background : #807A7A; font : 13px; font-family : &#39;Oswald&#39;, Tahoma, Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center; border-radius : 3px; }
.subscribe-form { background : #807A7A; clear : both; display : block; margin : 10px 0; overflow : hidden; } form.subscribe-form { clear : both; display : block; margin : 10px 0 0; width : auto; overflow : hidden; }
.subscribe-css-email-field { background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7FwUGfw5CIvPqR5Pd1vU9BeITy6QZbK3KSE7QYjNl3aJrqBspMcdEgaEuTCKUt4wBXDL-yaF4AK1E8Ru_O1zEH8aA0snmn-qehAvJTJO_pIwVxKHCTrZWgijXy0gmjHSSKB5nB1k6wwm/s1600/sprites.png) 1px -27px no-repeat #eee; color : #444; margin : 0 0 15px; padding : 12px 40px; width : 100%; border : none; }
.subscribe-css-button { background : #000000; color : #fff; cursor : pointer; font-weight : 700; padding : 10px; text-transform : none; width : 100%; border : none; font-size : 16px; transition : all 0.3s ease-in; }
.subscribe-css-button:hover { transition : all 0.3s ease-in; background : rgba(0, 0, 0,0.2); } 


5. Lalu simpan,

6. Setelah Anda simpan, pada menu dashboard pilih menu tata letak, lalu pilih tambahkan gadget, setelah itu pilih menu html / javascript,


7. Copy script di bawah ini lalu paste pada kolom html / javascript,

 <div class="subscribe-wrapper">
<p>Ikuti blog ini dengan memasukan Email Anda dibawah ini lalu konfirmasi Email Anda! Terima kasih</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri= RenaldyWays', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="1359348936">
<input name="uri" type="hidden" value="RenaldyWays" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address " />
<input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" />
</form>
<p><a href="http://feeds.feedburner.com/RenaldyWays"><img src="http://feeds.feedburner.com/~fc/RenaldyWays?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div></div> 


Jangan lupa untuk mengganti ID Feedburner Saya dengan ID Feedburner Anda "RenaldyWays"!


8. Simpan dan lihat hasilnya.




Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.
tamat ✦
Bagikan
Catatan pinggir

Obrolan pembaca 13

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Artikelnya gk semua keliatan jadi susah baca, kehalang sama menu disampingnya, pixel 1280x800, apalagi klo notebool 10"in bakalan hancur lagi ni, menunya gk kehidden,

    ReplyDelete
    Replies
    1. :2thumbup thanks gan atas sarannya :3 akan saya perbaiki lagi agar lebih nyaman gan blognya :thumbup

      Delete
  3. Mantaf Gan :D

    Lanjutkan Posting Artikel Keren Dan Bermanfaat :D

    ReplyDelete
  4. bermanfaat sekali gan, walaupun terlalu banyak penghalang buat baca artikel agan..tpi asli keren

    ReplyDelete
  5. Coba dulu ah..biar banyak yang subcribe..thanks bro..

    ReplyDelete
  6. nice artikelnya sangat bermanfaat :) saya tunggu artikel lainnya
    k

    ReplyDelete
  7. Terimakasih banyak sob, sangat membantu sekali artikelnya..

    ReplyDelete
  8. SUKSES, gan!
    saya sudah pasng di blog dan ternyata tampilannya bagus banget dan cocok dengan lay out di blogspot saya...
    Thanksnya infonya...

    ReplyDelete

Post a Comment

  • Sopan & saling menghargai
  • Tanpa link promosi atau spam
  • Komentar yang melanggar akan dihapus

Cari tulisan

Pantau tulisan baru

Paspor Pembacaku

Setiap kali kamu membaca sebuah tulisan sampai tanda tamat ✦, topiknya mendapat stempel. Kumpulkan semuanya untuk menjadi Penjelajah Arsip.

Data paspor disimpan di browser-mu sendiri, tidak dikirim ke mana pun.