Belajar Membuat Widget Email Langganan Blogger dengan Mudah

Dalam pembahasan kali ini admin akan memberikan panduan tentang pembuatan widget berlanganan email dari bawaan blogger.com.

Untuk konsep segi model tampilan mimin akan mengambil dari sisi simple dan termudah saja untuk dipelajari.

Maka langkah yang perlu Anda pahami dipembahasan ini cukup kode HTML & CSS tanpa JavaScript.

Apa Manfaat Kontak Berlangganan Email? 

Pada dasarnya fungsi dari langganan email ini adalah untuk memudahkan orang lain untuk mengikuti informasi terbaru dari Anda lewat email.

Dan ini sangat berguna bagi pelaku bisnis digital maupun pemilik blog untuk mendapatkan anggota.

Mulai Membuat Email Subscribe

Silahkan Anda salin kode wigdet HTML dikolom bawah ini yang disediakan oleh blogger.com.

<b:widget id='FollowByEmail1' locked='true' title='Enter your email to get the discon theme Bukablog.' type='FollowByEmail' visible='true'>
    <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <b:include name='content'/>
    </b:includable>
    <b:includable id='content'>
      <div class='widget-content'>
        <span class='before-text'><data:skin.vars.followByEmail/></span>
        <div class='follow-by-email-inner'>
          <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>
            <input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
            <input class='follow-by-email-submit' expr:value='data:messages.subscribe' type='submit'/>
            <input expr:value='data:feedPath' name='uri' type='hidden'/>
            <input name='loc' type='hidden' value='en_US'/>
          </form>
        </div>
      </div>
    </b:includable>
  </b:widget>

Pengertian :

Widget tampilan kontak email blogger ini bisa Anda tentukan sesuai urutan jumlah Angka.

Dibagian ID [ FollowByEmail1 ] sesuai urutan.

Biasanya jika sudah ada widget email langganan diblog maka Anda harus merubah ID angkanya agar tidak terjadi duplikasi | Error.

Salin lagi kode CSS dibawah ini.

.FollowByEmail .widget-content {
    position: relative;
    background: #fff;
    overflow: hidden
}
.FollowByEmail .before-text {
    font-size: 13px;
    line-height: 1.5em;
    margin: 0 0 15px;
    padding: 0 30px 0 1px;
    overflow: hidden
}
.FollowByEmail .widget-title h3 {
    color: #111;
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 18px
}
.FollowByEmail .follow-by-email-inner {
    position: relative
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    width: 100%;
    height: 36px;
    color: #777 ;
    font-size: 14px;
    font-family: inherit;
    padding: 0 12px;
    margin: 0 0 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    transition: all .17s ease
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    width: 100%;
    height: 36px;
    font-family: inherit;
    font-size: 11px;
    color: #fff;
    background-color: #222;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    margin: 0;
    border: 0;
    transition: background .17s ease
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover {
    background-color: #111
}

Penjelasan: 

Pada dasarnya untuk sebuah desain / tampilan widget email langganan ini ada banyak macam modelnya.

CSS diatas mimin buat dari segi tampilan yang mudah untuk dipelajari.

Belajar Merubah Tampilan

• Untuk menggubah warna kolom Anda bisa edit .FollowByEmail .widget-content { background-color: #222}
• Menggubah warna garis kolom formulir email edit .FollowByEmail .follow-by-email-inner .follow-by-email-address {border:1px solid #ccc }
• Menganti warna tombol, edit .FollowByEmail.follow-by-email-inner .follow-by-email-submit { background-color: #222}

Cukup mudah bukan? 

Tapi perlu Anda ketahui jika bagi Desainer Web, untuk membuat kolom kontak email langganan ini biasanya perlu memakan waktu 4 / 5 jam dalam menentukan tampilan demi mendapatkan tampilan yang menarik.

Bukan masalah sulit membuat desainnya, tapi lebih menuju ke UI / UX yang menarik untuk dilihat.

Cara Memasang Widget

Karena ini adalah sebuah kode widget HTML maka untuk peletakan dalam template blogger harus sesuai dari blogger.com.

Kode widget HTML diatas tidak bisa Anda letakan disembarang tempat. 

Misalnya di dalam area kerangka HTML postingan, HTML kepala tema, HTML navigasi & icon pencarian.

Anda hanya bisa memasang dibagian seleksi area section sebagai berikut :

Posisi dibawah Artikel Template

<b:section class='main' id='main' showaddelement='yes'/>

Posisi dibagian Sidebar

<b:section class='sidebar' id='sidebar' showaddelement='yes'/>

Posisi kaki Template

<b:section class='footer' id='footer' showaddelement='yes'/>

Jika Anda meletakan kode widget HTML diluar area <b:section> maka akan mendapatkan peringatan error saat disimpan.

Untuk merubah kode widget HTML blogger Anda harus mengerti bagian HTML.

Kelebihan dari Langkah Ini

Anda bisa memasangnya otomatis lewat tata letak dan tidak perlu mengedit bagian - bagian HTML.

Jika Anda ingin yang versi standar tanpa terikat dengan data dari blogger.

Silahkan Anda salin kode HTML.

<div class='FollowByEmail'>
	<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=ID_FEED_BURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
	<p>Text Keinginan Anda:</p>
<p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p>
<input name='uri' type='hidden' value='NamaAnda'/>
	<input name='loc' type='hidden' value='Indonesia'/>
	<p><input class='submit-email' type='submit' value='Text_Anda'/></p>
	</form>
</div>
                                          

Anda bebas menentukan posisi kolom email langganan didalam template blogger.

Tapi Anda harus mengeditnya secara manual dan tidak bisa otomatis merubah / menghapus di menu tata letak.

Kata Penutup

Sampai tahap ini Anda sudah belajar memahami tentang pembuatan widget email langganan blogger atau kolom kontak email HTML.

Jika dari Anda ada yang kurang mengerti dengan penjelasan mimin diatas, jangan ragu untuk menulis pertanyaannya dikomentar. Yang nanti mimin bantu jawab agar Anda benar-benar bisa mempelajarinya.

Berbagi :