Cara Membuat Subscribe Box Responsive Pada Footer Viomagz

Cara Membuat Subscribe Box Responsive Pada Footer Viomagz

Faishal Hady

Mei 08, 2020

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.

Faishal Hady