Cara Membuat Subscribe Box Responsive Pada Footer Viomagz

Subscribe Box merupakan widget yang berfungsi untuk memberitahu pengunjung ketika kita melakukan update artikel terbaru pada blog yang dikirimkan melalui email. Dengan begitu pengunjung bisa berkunjung kembali ketika ada artikel terbaru pada blog yang dia subscribe.

Subscribe Box juga bisa meningkatkan pengunjung dan juga memberikan dampak yang positif terhadap blog. Untuk kalian yang masih belum memasang widget ini maka kalian harus segera mencoba untuk memasangnya.

Disini saya akan memberikan tutorial Cara Membuat Subscribe Box Responsive Pada Footer Viomagz dengan desain yang lumayan keren.

Langsung saja ke tahap pembuatannya.

1. Pergi ke Tema > Edit HTML dan cari kode ]]></b:skin>.

2. Letakkan kode ini tepat di atas kode tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#fff;overflow:hidden;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#e8eaf6;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#F9690E;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#D35400;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#000;font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya kalian cari kode seperti ini.

<div id='footer-widget-container'>
   <div class='footer-widget' id='footer-widget'>
<!-- social media button start -->
<ul class='nav-social'>

<!-- facebook -->
<li>
<a aria-label='facebook' class='fb-s' href='https://www.facebook.com/' rel='noopener nofollow' target='_blank'>    
<svg viewBox='0 0 24 24'>
<path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/>
</svg>     
</a>
</li>
<!-- facebook end -->

<!-- instagram -->
<li>
<a aria-label='instagram' class='ig-s' href='https://www.instagram.com/XXXX' rel='noopener nofollow' target='_blank'>
<svg viewBox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/>
</svg>    
</a>
</li>
<!-- instagram end -->

<!-- twitter -->
<li>
<a aria-label='twitter' class='tw-s' href='https://twitter.com/' rel='noopener nofollow' target='_blank'>
<svg viewBox='0 0 24 24'>
<path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'/>
</svg>      
</a> 
</li>
<!-- twitter end -->

<!-- linkedin -->
<li>
<a aria-label='linkedin' class='ld-s' href='https://linkedin.com' rel='noopener nofollow' target='_blank'>
<svg viewBox='0 0 24 24'>
<path d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z'/>
</svg>    
</a> 
</li>
<!-- linkedin end -->

<!-- youtube -->
<li>
<a aria-label='youtube' class='yt-s' href='https://youtube.com/c/XXXX' rel='noopener nofollow' target='_blank'>
<svg viewBox='0 0 24 24'>
<path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'/>
</svg>     
</a> 
</li>
<!-- youtube end -->

</ul>
<!-- social media button end -->
   </div>
  </div>

4. Kalian ganti dengan kode seperti ini.

<div id='subscribe-css'>
<p class='subscribe-note'>Subscribe</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=faishalkc' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=faishalkc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='coretanzone'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='Submit' value='Submit'/></form>
</div>
</div>
</div>

5. Silakan ganti dengan username FeedBurner yang kalian miliki kemudian Simpan Template dan seperti inilah hasilnya.

Penutup

Sekian dulu pembahasan kita kali ini dan semoga bisa menambah wawasan bagi kita semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA PAYPAL Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    1. subscriber box ini sangat penting untuk mendapatkan pembaca blog setia, tapi banyak blogger sayangnya masih sedikit yg memasang.

      BalasHapus
      Balasan
      1. pengunjung jarang ada yang subscribe juga sebenarnya

        tapi untuk ane sih perlu banget kalau gak mau bolak balik ngecek artikel

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel