Widget Berlangganan Email Dengan Ikon Media Sosial Untuk Blogger


Melanjutkan postingan yang sebelumnya, widget Berlangganan Email / Subscribe box kali ini agak berbeda dari yang sebelumnnya karena dilengkapi dengan ikon sosial media.

Selain itu terdapat juga thumnail yang bisa kamu gantikan dengan gambar kamu sendiri.

Untuk memasangnnya di situs web kamu ikuti panduan langkah demi langgkah berikut ini:

1. Menuju ke Dashaboard blog kamu Tema > Edit HTML

Widget Berlangganan Email Dengan Ikon Media Sosial Untuk Blogger

2. Temukan kode ]]></b:skin> Copas kode di bawah ini diatasnya

form.emailform {
    margin: 20px 0 0;
    display: block;
    clear: both;
}

.emailtext {
    width: 50%;
    height: 30px;
    padding: 0 0 0 15px;
    border: 1px solid #CCC;
}

.ebutton {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 17px;
    cursor: pointer;
    border-radius: 0px;
    background: #e83511;
}

Save

3. Masih di blogger, temukan Tata letak > Tambahkan Gadget > pilih  > HTML/JavaScript

4. Lalu pastekan Script dibawah ini:


<div class="widget-content">
    <div style="border: 1px solid #cccccc; padding: 1mm;background: #F9F9F9;">
        <center><br/><span style="font-size: 20px;font-weight: bold; text-transform: uppercase;color: #e83511;line-height: 1;font-family: 'Source Sans Pro', sans-serif;">Subscribe by E-mail</span><br/><span style="font-size: 13px; margin-bottom: 15px;color: #555;font-family: 'Source Sans Pro', sans-serif;line-height: 1.5em;">Join Over 2 Million+ Fans</span><center><img src="URL GAMMBAR KAMU" style="margin: -8px 10px -8px 2px; margin-top: 10px; margin-right: 10px; margin-bottom: -8px; margin-left: 2px; width: 100px;"/></center>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"target="popupwindow"class="emailform"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID feed Kamu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="hidden" value="ID feed Kamu" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/><input type="text" value="Enter your email..." name="email" class="emailtext" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}"/><input type="submit" class="ebutton" value="SignUp" title="" alt=""/>
        </form>
        <br/><br/><center><span style="font-size: 18px; text-align: center;color: #393939;font-weight: bold;transition: all .3s;font-family: 'Source Sans Pro', sans-serif;">HANGOUT WITH ME:</span><center>
        <div style="margin-bottom:5px; border-top: 1px solid #cccccc; padding: 3px; text-align: center;margin-top:10px;"></div>
        <div style="text-align: center;">
            <a href="URL Facebook (akun fanspage atau pribadi)" target="_blank" title="Like/Follow"><img border="0" src="https://2.bp.blogspot.com/-hTavmcqNx3g/WBK6fgkhUBI/AAAAAAAAGxs/9wdu_ZoY6EEfPOkLBzL-BAt6S5gl1N0XwCLcB/s1600/facebook.png" style="border: medium none; position: relative;" //></a><a href="URL Twitter" target="_blank" title="Follow Me"><img border="0" src="https://1.bp.blogspot.com/-5VDiDVQm4m4/WBK6hNHG-dI/AAAAAAAAGyE/FLPMQbcqZV0zYTIt4v8Wv3b5qRIrb6v8wCLcB/s1600/twitter.png" style="border: medium none; position: relative;" //></a><a href="URL Google +" target="_blank" title="Follow Me"><img border="0" src="https://3.bp.blogspot.com/-sri_rHoELUU/WBK6fzO1IpI/AAAAAAAAGxo/39KSfa7Ayq4Hglg9ONLK5gqMXWdhrXCdQCLcB/s1600/google-plus.png" style="border: medium none; position: relative;" //></a>
            <a href="URL Instagram" target="_blank" title="Follow Me"><img border="0" src="https://1.bp.blogspot.com/-n-UoYMNVNtw/WBK6gZ5-wRI/AAAAAAAAGx4/nNj-MfNaTyQCwrgm9L1q1LqbbmIQGKFpQCLcB/s1600/instagram.png" style="border: medium none; position: relative;" //></a>
            <a href="URL Youtube" target="_blank" title="Subscribe"><img border="0" src="https://4.bp.blogspot.com/-a8d1vICdBxQ/WBK6hLfNOOI/AAAAAAAAGyA/rBE-mtZFsMMdiSmDNwo0nB9ipFgM27cGwCLcB/s1600/youtube.png" style="border: medium none; position: relative;" //></a>
        </div>
        </center></center>
        <span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 10px; font-style: italic; background-color: rgb(255, 255, 255); ">By <a href="https://www.iamtomys.online/" target="_blank" title="iamtomys">Iamtomys</a></span>
        </center>
    </div>
</div>

NOTE: Ganti "Iamtomys" dengan id feedburner kamu dan isi URL sosial media.

Save

Demo For Subscribe Box

Mungkin hanya sekian, semoga kamu menyukai widget Berlangganan Email ini dan memutuskan untuk membagikan artikel ini kepada teman kamu. kamu juga bisa menjumpai saya di Facebook ataupun Twitter.

0 Response to "Widget Berlangganan Email Dengan Ikon Media Sosial Untuk Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel