×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Widget Berlangganan Seperti Fletro Pro di Blogger

Jagoanredesign - Kali ini saya akan memmbagikan sebuah tutorial Cara Membuat Widget Berlangganan Seperti Fletro Pro di Blogger anda pasti tidak asing lagi dengan sebuah widget berlangganan blog. Setiap blog saya kunjungi pasti memiliki widget tersebut.

Cara Membuat Widget Berlangganan Seperti Fletro Pro di Blogger

Kotak Berlangganan atau Subscribe Box merupakan widget yang berfungsi untuk memberitahu pengunjung mengenai update artikel terbaru pada blog kita melalui email. 

Fletro Pro adalah template yang dibuat oleh Jago Desain dan sedang banyak digunakan saat ini.

Cara Membuat Widget Berlangganan Seperti Fletro Pro di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Widget Follow Fletro Pro by Jagoan Redesign */
.JagoanRedesignFletro{position:relative;padding:15px;background:rgba(255,255,255,.98);border-radius:8px;box-shadow:0 4px 12px 0 rgba(9,32,76,.05);margin-top:20px !important;overflow:hidden;}
.JagoanRedesignFletro:after{content:'';display:block;position:absolute;bottom:0;right:0;width:100px;height:100px;background:rgba(0,0,0,.025);border-radius:100px 0 0;}
.JagoanRedesignFletro .widget-content{position:relative;z-index:2;font-size:13px;}
.JagoanRedesignFletro h3.title{font-size:13px;margin-bottom:22px;}
.JagoanRedesignFletro .follow-text{display:block;margin-bottom:15px;color:#989b9f}
.JagoanRedesignFletro form{display:block;position:relative;margin:0;}
.JagoanRedesignFletro input[type=email]{width:100%;padding:11px 55px 11px 18px;outline:0;border:0px solid #ebeced;border-radius:6px;box-shadow:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background-color:#f7f7fc}
.JagoanRedesignFletro input[type=email]:focus{box-shadow:0 2px 4px 0 rgba(9,32,76,.05);}
.JagoanRedesignFletro input[type=submit]{display:none;width:100%;margin-top:12px;padding:12px 18px;border:0;outline:0;border-radius:8px;color:#fff;cursor:pointer;}
.JagoanRedesignFletro label.email-label{position:absolute;top:0;right:0;padding:8.5px 0;display:inline-block;width:55px;height:39px;text-align:center;cursor:pointer}
.JagoanRedesignFletro label.email-label svg{fill:#3a7bd5;width:23px;height:23px;}
.JagoanRedesignFletro h3.title:after{content:'';width:20px;height:2px;display:block;margin-top:4px;background:#161617;}

5. Selanjutnya anda SIMPAN TEMA.
6. Kemudian anda masuk ke menu TATA LETAK > silahkan anda pilih dimana anda anda letakkan Widget > klik ADD GADGET.
7. Kemudian pilih HTML/JAVASCRIPT dan Letakan kode dibawah ini didalamnya. 

<div class="widget JagoanRedesignFletro" data-version="2" id="JagoanRedesignFletro1">
<h3 class="title">
Follow by Email
</h3>
<div class="widget-content">
<div class="follow-by-email-inner">
<label class="follow-text" for="email-input">Subscribe to our newsletter and stay updated !</label>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=JagoanRedesign&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input autocomplete="off" class="follow-by-email-address" id="email-input" name="email" placeholder="Alamat Email" type="email" />
<input class="follow-by-email-submit" id="email-submit" type="submit" value="Dapatkan notifikasi email" />
<label class="email-label" for="email-submit">
<svg viewbox="0 0 32 32"><path d="M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z"></path><path d="M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z"></path></svg>
</label>
<input name="uri" type="hidden" value="JagoanRedesign" />
<input name="loc" type="hidden" value="en_US" />
</form>
</div>
</div>
</div>

Silakan ganti dengan Username Feedburner anda pada kode yang sudah saya tandai

8. Selanjutnya anda SIMPAN dan Selesai.


Nah, itu adalah tutorial Cara Membuat Widget Berlangganan Seperti Fletro Pro di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.

Semoga artikel ini bermanfaat buat anda semuanya dan saya juga berterima kasih kepada kalian yang sudah Berkunjung di Jagoan Redesign.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

1 Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel