Cara Buat Subscription Widget Blogspot

- March 03, 2018

Subscription Widget atau Widget Langganan E-mel adalah bentuk langganan untuk sidebar blogger yang disediakan oleh feedburner, widget ini membantu pengunjung yang berminat untuk mendapatkan update terkini dari blog anda melalui e-mel.

Pelawat hanya memasukkan alamat e-mel mereka dan kemudian klik pada butang "Langgan" dan kemudian, mereka akan mendapatkan semua kemas kini blog anda terus ke Peti Masuk e-mel mereka. Widget ini bukan sahaja meningkatkan trafik tetapi juga membantu untuk mengembangkan komuniti pembaca setia anda.

Manfaat Widget Langganan E-mel
Peti Langganan E-mel juga dianggap sebagai cara terbaik untuk mempromosikan laman web. Widget langganan membantu anda dalam mewujudkan komuniti pembaca aktif dan meningkatkan trafik blog anda. Lebih banyak trafik = Lebih banyak pendapatan AdSense. Widget ini membantu anda untuk menyampaikan siaran terkini kepada pelanggan anda dengan serta-merta melalui E-mel, dan bahagian terbaik widget ini ialah anda akan mendapatkan pautan media sosial percuma di dalamnya yang akan membantu anda untuk berhubung dengan pelanggan anda melalui saluran media sosial.

Cara Tambah Widget Berlangganan E-mel Kepada Blogger
Malah blogger menyediakan widget langganan E-mel untuk blogger tetapi itu tidak begitu menarik sebagai kotak langganan e-mel bergaya bergaya dengan integrasi media sosial. Widget langganan e-mel kustom menyediakan perkhidmatan langganan e-mel serta perkhidmatan media sosial.

Berikut adalah beberapa widget langganan terbaik untuk blogger, so...pilihlah mengikut reka bentuk blog anda dan ikuti langkah-langkah yang diberikan di bawah:

Widget 1

Sila copy paste kod widget 1 dibawah:

<style type="text/css">
.hbzsignup-form {
    background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
}

.hbzform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}

.hbzemailform {
    margin: 120px auto 5px;
    width: 215px;
}

#hbzemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
    margin-right: 5px;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 12px;
    vertical-align: top;
    display: inline-block;
}
#hbzemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    display: inline-block;
}

#hbzemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hbzsocial-icons {
    margin: 20px 0 0;
    overflow: hidden;
    display: block;
    text-align: center;
}

.hbzsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}

.hbzsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}

.hbzsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}

.hbzsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}

.hbzsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}

.hbzsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
    background-color: #333; 
}

.hbzsocial-like {
    display: block;
    text-align: center;
}

.hbzsocial-like tbody, .hbzsocial-like tbody tr {
    display: block;
}

.hbzfb-likes {
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
}

.hbztw-follow {
    display: inline
}

</style>

<div>
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <p>Sign Up for Email Updates</p>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
    <input id='hbzemailbutton' title='' type='submit' value='Sign up'/>
   </form>
  </div>
 </div>

 <div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <table class='hbzsocial-like'>
  <tbody>
   <tr>
    <td class='hbzfb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </td>
    <td class='hbztw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </td>
   </tr>
  <tbody>
 </table>
</div>

Widget 2

Sila copy paste kod widget 2 dibawah:

<style type="text/css">
.hbzsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}

.hbzemailform {
    width: 239px;
    margin: 10px auto;
}

.hbzform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px "trebuchet MS","Tahoma";
}

#hbzemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: #F0553B;
    border: 1px solid #F0553B;
    color: #FFF;
    height: 34px;
    border-radius: 0px 7px 7px 0px;
    margin-left: -4px;
    font-weight: 600;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}

.hbzsocial-like {
    background: transparent url("https://3.bp.blogspot.com/-2hqsqwGQg2M/VsCLsiFb2sI/AAAAAAAAAMY/7jkBsN8tVIg/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}

.hbzfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.hbztw-follow {
    display: block;
    margin-left: 152px;
    position: absolute;
    margin-top: 89px;
    box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
    height: 20px;
}
</style>

<div class="hbzsub">
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Get Posts In Your Inbox</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
<table class='hbzsocial-like'>
  <tbody>
   <tr>
    <td class='hbzfb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </td>
    <td class='hbztw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </td>
   </tr>
  </tbody>
 </table>
</div> 
Custom emaill subscription widget for blogger with social media integration
Copy to clipboard<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
    width: 240px;
    margin: 10px auto;
}

#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}

.hbzsignup-form {
    margin-top: 15px;
}

.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998; 
}

.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced; 
}

.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39; 
}

.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027; 
}

.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12; 
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>
Stylish email subscription box
Copy to clipboard<style type="text/css">
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
    
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
    
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
    
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    
    .hbzsignup-form {
        margin-top: 15px;
    }
    
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
   
    .hbzsocial-icons ul li a {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class="hbzsub">
    <div class="hbzsube">Join Our Free Newsletter</div>
    <div class='hbzsignup-form'>
        <div class='hbzemailform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form>
        </div>
        <div class="hbzsube">Sociliaze with Us</div>
        <div class="hbzsocial-icons">
            <ul>
                <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
                <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
                <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
                <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
                <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div style="width: 230px; margin: 0px auto;">
            <div id="fb-root"></div>
            <script>
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>
            <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

Widget 3

Sila copy paste kod widget 3 dibawah:

<style type="text/css">
.hbzsub {
    background-color: #1E293B;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgb(30, 41, 59);
}

.hbzemailform {
    width: 239px;
    margin: 10px auto;
}

.hbzform-inner h4 {
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 10px;
    font: bold 18px/40px "trebuchet MS","Tahoma";
}

#hbzemailbox {
    background-color: #FFF;
    border: 1px solid #FFF;
    border-radius: 7px 0px 0px 7px;
    height: 20px;
    padding: 6px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: #F0553B;
    border: 1px solid #F0553B;
    color: #FFF;
    height: 34px;
    border-radius: 0px 7px 7px 0px;
    margin-left: -4px;
    font-weight: 600;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #1E293B;
    border: 1px solid #FFF;
    box-shadow: 0 0 5px #ddd;
}

.hbzsocial-like {
    background: transparent url("https://3.bp.blogspot.com/-2hqsqwGQg2M/VsCLsiFb2sI/AAAAAAAAAMY/7jkBsN8tVIg/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
    width: 250px;
    height: 120px;
    margin: 10px auto;
}

.hbzfb-likes {
    margin-top: 90px;
    margin-left: 20px;
    position: absolute;
    display: block;
    box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.hbztw-follow {
    display: block;
    margin-left: 152px;
    position: absolute;
    margin-top: 89px;
    box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
    height: 20px;
}
</style>

<div class="hbzsub">
 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Get Posts In Your Inbox</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
<table class='hbzsocial-like'>
  <tbody>
   <tr>
    <td class='hbzfb-likes'>
     <div id="fb-root">
     </div>
     <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
     </script>
     <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
     </div>
    </td>
    <td class='hbztw-follow'>
     <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
     </script>
    </td>
   </tr>
  </tbody>
 </table>
</div> 
Custom emaill subscription widget for blogger with social media integration
Copy to clipboard<style type="text/css">
.hbzsub {
    background-color: rgb(87, 98, 105);
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
    text-align: center;
    color: rgb(255, 255, 255);
    font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
    width: 240px;
    margin: 10px auto;
}

#hbzemailbox {
    background-color: #798187;
    color: #FFF;
    width: 208px;
    border: 1px solid #697780;
    padding: 15px;
    text-align: center;
    height: 18px;
    box-sizing: content-box;
}

#hbzemailbutton {
    background-color: rgb(243, 93, 92);
    border: 1px solid rgb(215, 84, 83);
    color: rgb(255, 255, 255);
    width: 240px;
    font: bold 16px "trebuchet MS","Tahoma";
    padding: 15px;
    text-align: center;
    height: 50px;
    margin: 10px auto;
    cursor: pointer;
}

#hbzemailbutton:hover {
    background-color: #E64C4B;
    border: 1px solid #BF4A49;
}

.hbzsignup-form {
    margin-top: 15px;
}

.hbzsocial-icons {
    overflow: hidden;
    text-align: center;
    border-bottom: 1px solid rgb(133, 133, 133);
    width: 230px;
    display: block;
    margin: 20px auto;
}

.hbzsocial-icons ul {
    margin: 0px auto !important;
    text-align: center;
    padding: 0px !important;
    display: inline-block;
}

.hbzsocial-icons ul li {
    background: transparent none repeat scroll 0% 0% !important;
    border: medium none !important;
    float: left;
    list-style-type: none !important;
    padding: 0px !important;
    margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
    display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 34px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s;
    width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
    background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
    background-color: #3b5998; 
}

.hbzsocial-icons ul li.social-twitter a {
    background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
    background-color: #00aced; 
}

.hbzsocial-icons ul li.social-gplus a {
    background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
    background-color: #dd4b39; 
}

.hbzsocial-icons ul li.social-pinterest a {
    background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
    background-color: #cb2027; 
}

.hbzsocial-icons ul li.social-rss a {
    background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
    background-color: #F87E12; 
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
  <ul>
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
   <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
   <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
  </ul>
 </div>

 <div class='hbzsignup-form'>
  <div class='hbzform-inner'>
   <h4>Subscribe to my Newsletter</h4>
  </div>
  <div class='hbzemailform'>
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='[Your Blog uri]'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
    <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>
Stylish email subscription box
Copy to clipboard<style type="text/css">
    .hbzsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }
    
    .hbzsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
    
    .hbzemailform {
        width: 235px;
        margin: 10px auto;
    }
    
    #hbzemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    
    .hbzsignup-form {
        margin-top: 15px;
    }
    
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
   
    .hbzsocial-icons ul li a {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    
    .hbzsocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
        background-color: #cb2027;
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
</style>
<div class="hbzsub">
    <div class="hbzsube">Join Our Free Newsletter</div>
    <div class='hbzsignup-form'>
        <div class='hbzemailform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form>
        </div>
        <div class="hbzsube">Sociliaze with Us</div>
        <div class="hbzsocial-icons">
            <ul>
                <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
                <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
                <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
                <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
                <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div style="width: 230px; margin: 0px auto;">
            <div id="fb-root"></div>
            <script>
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s);
                    js.id = id;
                    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>
            <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
                </div>
            </div>
        </div>
    </div>
</div>

***Sila Copypaste kod widget 1, 2 dan 3 ->>>KLIK SINI<<<-

Step by Step: Bagaimana Untuk Tambah Widget Berlangganan Baru ini untuk Blogger

Langkah 1. Masuk ke akaun Blogger anda, kemudian pergi ke Layout> klik pada pautan 'Add Widget' di sebelah kiri.

Langkah 2. Pilih HTML / JavaScript dari pop-up window> kemudian copypaste kod widget di dalam kotak kosong tersebut. Kemudian klik Save.

Langkah 3. Konfigurasi Kotak Langganan.

Ganti [Blog anda uri] dengan Blog Uri anda yang pada dasarnya adalah tajuk Feed anda.

Anda boleh mendapatkannya dengan melawat https://feedburner.google.com/dan kemudian pergi ke Publikasikan-> Langganan E-mel dan cari nilai jenis anda dalam kotak yang diberikan.
Contohnya: http://feedburner.google.com/fb/a/mailverify?uri=yourfeedburnerid dan <input name = 'uri' jenis = 'hidden' value = 'AkuPakarBlogspot' />
Gantikan url [Fb] dengan URL halaman Facebook anda. Contohnya: https://www.facebook.com/yourFBid

Gantikan [Twitter url] dengan URL halaman twitter anda. Sebagai contoh: http://www.twitter.com/yourtwitterid
Gantikan [Google+ url] dengan halaman Google+ atau URL akaun anda. Contohnya: https://plus.google.com/113564048655860710355

Gantikan [RSS url] dengan URL RSS anda. Sebagai contoh: http://feeds.feedburner.com/yourfeedburnerid
Gantikan [url Pinterest] dengan URL pinterest anda.
Ganti [Twitter Username] dengan nama pengguna akaun twitter anda. Contohnya: @ shah28
Ganti [Nama Halaman Fb] dengan Nama Halaman Facebook anda. Contohnya: shah28

Nota: Kelajuan Sidebar minimum diperlukan - 230px.

Langkah 4. Klik Save.

Selesai...

Sekarang pelawat blog anda akan dapat melanggan blog anda dengan mudah dengan menggunakan Subscription widget tersebut.

Selamat mencuba...

Search This Blog

Aku Pakar Blogger

Penulisan SEO: Tip, Alat dan Teknik

Cara Buat Subscription Widget Blogspot

Comments

Post a Comment

Popular Posts

Apakah Maksud Kelajuan Internet Mbps dan Kbps

Cara Hack Wifi Password Guna Telefon/ Smartphone/ Apps

Bagaimana Ketahui Phone Kena Hacked

Cara Membuka UnLock Pattern Android, PIN Kata Laluan

Cara Padam Akaun Instagram