Cara Membuat Widget Berlangganan Seperti Fletro Pro

Cara Membuat Widget Berlangganan Seperti Fletro Pro

Cara Membuat Widget Berlangganan di Sidebar Blogger Ala Fletro Pro

Pada kesempatan kali ini sekaligus postingan pertama yang ada di coretancode.com, saya ingin berbagi tutorial blogging yaitu cara membuat widget berlangganan di platform Blogger.

Tentu dengan kita membuat widget semacam ini semata-mata bukan hanya untuk gaya, melainkan agar kita tidak kehilangan pembaca setia di blog yang kita kelola. Hal ini bisa dimanfaatkan secara fungsinya yang benar-benar berguna entah untuk blogger pemula ataupun yang sudah senior.

Widget berlangganan kali ini selain mempunyai tampilan yang keren, tapi juga responsive sehingga kalian dapat memasang widget ini pada template apapun yang sedang anda gunakan. Hanya dengan menambahkan CSS pada template, dan widget berlangganan pada sidebar tentu anda sudah bisa menikmati tampilan dari widget berlangganan yang keren satu ini.

Oke, daripada panjang lebar gak jelas mending langsung saja anda menuju ke tutorial untuk cara pemasangannya di Blogger.

Menambahkan Widget Berlangganan di Sidebar Blogger

  1. Pastikan anda sudah login ke Blogger.com
  2. Pada dashboard, pilih menu Tata Letak
  3. Kemudian tambahkan widget HTML/Javascript
  4. Lalu copy dan paste kode dibawah ini ke dalam kotak text editor.
    <div class="widget FollowByEmail" data-version="2" id="FollowByEmail1">
    <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=bloganda/PPjr&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="bloganda/PPjr" />
    <input name="loc" type="hidden" value="en_US" />
    </form>
    </div>
    </div>
    </div>
    Ubah yang telah kami mark menjadi URL Value RSS blog anda.
  5. Simpan.
Sampai disini anda telah berhasil menambahkan widget berlangganan di sidebar tetapi hanya akan menggunakan tampilan default dari blogger. Agar tampilan bisa sesuai dengan yang ada di gambar postingan ini, anda harus menambahkan kode CSS berikut ini ke dalam template yang anda gunakan.

Untuk tutorialnya bisa anda simak dibawah ini, jangan pernah skip agar tidak menimbulkan lagi pertanyaan yang sebenarnya sudah dijelaskan.

Menambahkan kode CSS Widget Berlangganan di Template

  1. Masih pada dashboard blogger, silahkan kalian pilih menu Template > Edit HTML
  2. Kemudian copy dan paste kodenya dibawah ini sebelum kode ]]></b:skin> pada template.
    /* Widget FollowEmail */
    .FollowByEmail{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;}
    .FollowByEmail: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;}
    .FollowByEmail .widget-content{position:relative;z-index:2;font-size:13px;}
    .FollowByEmail h3.title{font-size:13px;margin-bottom:22px;}
    .FollowByEmail .follow-text{display:block;margin-bottom:15px;color:#989b9f}
    .FollowByEmail form{display:block;position:relative;margin:0;}
    .FollowByEmail 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}
    .FollowByEmail input[type=email]:focus{box-shadow:0 2px 4px 0 rgba(9,32,76,.05);}
    .FollowByEmail input[type=submit]{display:none;width:100%;margin-top:12px;padding:12px 18px;border:0;outline:0;border-radius:8px;color:#fff;cursor:pointer;}
    .FollowByEmail 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}
    .FollowByEmail label.email-label svg{fill:#3a7bd5;width:23px;height:23px;}
    .FollowByEmail h3.title:after{content:'';width:20px;height:2px;display:block;margin-top:4px;background:#161617;}
    Anda bisa redesign tampilan sesuka hati dengan merubah kode-kode CSS diatas.
  3. Save Template.
Kurang puas dengan thumbnail yang kami pasang di postingan ini? kalian bisa lihat demo nya atau tampilan detailnya dibawah ini.

Penutup

Apabila ada pertanyaan atau kesulitan memahami artikel ini, anda bisa tanyakan kepada saya melalui kolom komentar yang tersedia di bawah artikel ini.

Mungkin sekian dulu artikel kali ini yang bisa saya berikan, jangan lupa share postingan ini ke sosial media anda jika dirasa bermanfaat dan
Terima kasih
Load comments