Cara Membuat Widget Subscribe Flat UI Responsive Di Blog

19:14:00
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(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/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.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

15 Comments

Muhamad Syaiful 14 February 2015 at 22:04
This comment has been removed by the author.
Umraici , 17 February 2015 at 05:24

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,

Renaldy Ramadani 17 February 2015 at 15:02

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

Blogger Seni 21 February 2015 at 15:38

Mantaf Gan :D

Lanjutkan Posting Artikel Keren Dan Bermanfaat :D

opi pandutama 21 February 2015 at 15:39

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

Zoomx Satriyo 22 February 2015 at 00:15

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

Renaldy Ramadani 22 February 2015 at 14:34

:2thumbup Yoi gan

Renaldy Ramadani 22 February 2015 at 14:35

:2thumbup thanks gan sarannya

Renaldy Ramadani 22 February 2015 at 14:36

:2thumbup yoi gan silakan di coba

Jellygamatgoldg31 10 March 2015 at 11:50

nice artikelnya sangat bermanfaat :) saya tunggu artikel lainnya
k

Renaldy Ramadani 10 March 2015 at 12:25

:2thumbup

Obat Darah Tinggi 3 April 2015 at 11:13

Terimakasih banyak sob, sangat membantu sekali artikelnya..

Renaldy Ramadani 4 April 2015 at 11:26

:2thumbup yoi gan

profesor-for-all 4 August 2015 at 14:46

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

Renaldy Ramadani 4 August 2015 at 21:34

yoi gan sama2 :2thumbup