Cara Membuat Widget Kotak Berlangganan Ala El Creative Academy

Cara Membuat Widget Kotak Berlangganan Ala El Creative Academy

Cara Membuat Widget Kotak Berlangganan Ala El Creative Academy

Hai sobat coretancode.com, masih ingatkah kalian dengan artikel pertama blog ini? yups sebelumnya admin sudah pernah berbagi widget serupa hanya saja beda tampilan atau gaya. Oleh karena itu pada kesempatan kali ini, saya akan update widget yang lebih fresh, simpel dan tentunya menarik.

Widget seperti ini sangatlah berguna apabila anda ingin pembaca blog selalu update dan mengetahui semua postingan terbaru anda tanpa mengunjungi link blog kalian. Dengan artian jika anda seseorang yang tidak ingin dirugikan dalam hal blogging maka jangan pasang widget seperti ini.

Kenapa? tentu dengan adanya widget seperti ini di blog anda, para pengunjung tidak lagi harus selalu mengunjungi blog jika ingin update informasi. Jadi sebanyak apapun pembaca diblog anda tidak akan terhitung sebagai pengunjung, tentu hal seperti ini akan merugikan publisher jika blog telah terpasang ads atau yang kita kenal sebagai iklan.

Desain dari kotak berlangganan ini terinspirasi dari blog El Creative Academy, sebelum menuju ke cara pemasangannya, ada baiknya lihat demo widget ini terlebih dahulu.

Demo Widget

Menambahkan HTML

  1. Pastikan telah login ke Blogger.com
  2. Pada dashboard, silahkan kalian pilih menu Tata Letak > dan tambahkan widget HTML/Javascript
  3. Kemudian salin kode berikut ini, dan letakkan pada kotak teks editor yang tersedia.
    <div class='widget FollowByEmail' data-version='2' id='FollowByEmail1'>
    <div class='widget-content'>
    <div class='widget-content-inner'>
    <div class='follow-by-email-content'>
    <h3 class='follow-by-email-title'>Ikuti CoretanCode</h3>
    <p class='follow-by-email-text exceptions'>
    Dapatkan Notifikasi Artikel terbaru langsung melalui Email kalian.
    </p>
    <div class='follow-by-email-inner'>
    <form action='https://feedburner.google.com/fb/a/mailverify?uri=coretancode/PPmr", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
    <input autocomplete='off' class='follow-by-email-address' id='follow-by-email-address' name='email' placeholder='Alamat Email' type='email'/>
    <input name="uri" type="hidden" value="coretancode/PPmr" /> <input name="loc" type="hidden" value="en_US" />
    <input class='follow-by-email-submit' id='follow-by-email-submit' type='submit' value='Langganan'/>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    Keterangan:
    Ubah tulisan yang di marking kuning sesuai keinginan anda
  4. Simpan.

Menambahkan CSS Style Widget

  1. Pada dashboard blogger, silahkan pilih menu Template > Edit HTML
  2. Kemudian cari kode ]]></b:skin>
    Untuk mempermudah pencarian, gunakan tombol pintasan CTRL+F di keyboard.
  3. Lalu salin kode berikut ini, dan letakkan diatas kode pada (langkah no.2)
    #sidebar-wrapper .FollowByEmail{border:.0625rem solid #b7b7b7;padding:20px;border-radius:8px}#sidebar-wrapper .FollowByEmail p{color:#333}.follow-by-email-title{color:#2962ff;font-weight:500}.FollowByEmail .widget-content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;text-align:center}.follow-by-email-address{width:100%;height:40px;font-family:inherit;background:transparent;color:#656565;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 10px;margin:0 0 10px;border:.0625rem solid #b7b7b7;border-radius:.25rem;outline:none}.follow-by-email-address:focus{background-color:rgba(155,155,155,.05);border-color:rgba(155,155,155,.4)}.follow-by-email-submit{font-family:inherit}.follow-by-email-submit:hover{background-color:#0039cb;color:#fff}.follow-by-email-submit{margin-right:.5rem;background-color:#2962ff;color:#fff;border:none;border-radius:.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:2.25rem;min-width:5.5rem;outline:0;padding:7px 15px;position:relative;-webkit-transition:background .4s cubic-bezier(.25,.8,.25,1);-o-transition:background .4s cubic-bezier(.25,.8,.25,1);transition:background .4s cubic-bezier(.25,.8,.25,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-align:center;white-space:nowrap;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:10px;margin-bottom:-10px}
  4. Save Template.

Jika anda masih kesulitan atau gagal menerapkan, anda bisa langsung tanyakan kepada saya melalui kolom komentar yang tersedia dibawah artikel ini.

Mungkin sekian dahulu artikel dari Cara Membuat Widget Kotak Berlangganan Ala El Creative Academy, semoga bermanfaat dan
Terima kasih
Load comments