Membuat Kotak Berlangganan (Subscription Box) seperti Fletro - Susah Tidur

Membuat Kotak Berlangganan (Subscription Box) seperti Fletro

Membuat Kotak Berlangganan (Subscription Box) seperti Fletro
Membuat Kotak Berlangganan (Subscription Box) seperti Fletro - SusahTidur - Halo kembali lagi bersama saya sekeluarga eh, pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang Cara Membuat Widget Kotak Berlangganan seperti di Template Fletro.

Tutorial ini saya dapat dari tukangredesign.com, terimakasih kodenya mas Ishar. Mendengar kata Fletro, pastinya kalian sudah pernah dengar dong. Yap Template Fletro buatan Muhammad Haki yaitu template yang keren dan beda dengan yang lain, menurut saya gayanya seperti material design seperti flat design ntah apa nyebutnya yang jelas enak dipandang haha.

Saya suka tampilan seperti Template Fletro, gaya gaya di blog saya pun sebagian terinspirasi dari Tempate Fletro. Untuk kalian yang sama seperti saya yang suka gaya-gaya Template Fletro kalian bisa mencoba Kotak Berlangganan seperti Template Fletro di blog sobat, berikut tutorialnya.

Membuat Widget Kotak Berlangganan seperti Fletro

  1. Masuk dulu ke Dashboard Blogger sobat
  2. Masuk Tata Letak > Widget Sidebar > Tambahkan Gadget > Tambah HTML/Javascript
  3. Pada kolom HTML/JavaScript masukkan kode di bawah ini
    <style>
    /* 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;}
    </style>
    <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=Susahtidurzzz&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="Susahtidurzzz" />
    <input name="loc" type="hidden" value="en_US" />
    </form>
    </div>
    </div>
    </div>
    Attention!
    Lihat kode yang saya blok warna biru, silahkan ganti dengan ID Feedburner sobat, bingung? baca dulu : Cara Mendaftar akun Feedburner Terbaru

  4. Lalu Simpan

Dan sudah jadi lah Widget Kotak Berlangganan Seperti Template Fletro, jika masih ada yang belum jelas atau belum paham dalam pemasangan silahkan bertanya di kolom komentar.


Baiklah sekian dulu tutorial tentang Membuat Kotak Berlangganan (Subscription Box) seperti Fletro. Sekian dan terimakasih telah berkunjung ke SusahTidur
"Membuat Kotak Berlangganan (Subscription Box) seperti Fletro"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Membuat Kotak Berlangganan (Subscription Box) seperti Fletro"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel