Caranya Membuat Widget Langganan Maknakel Keren + Praktis Dibuat

Sebuah website yang terkenal pasti mengatakan layanan berlangganan Maknakel untuk para pengunjung setianya ialah dengan widget langganan Maknakel. Banyak sekali trik membuat widget langganan Maknakel , namun kali ini yang bakal Jaka berikan ialah Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dipasang diblog kamu.

Widget langganan Maknakel bakal sangat membantu kau dalam menjaga traffic pengunjung gres dan pengunjung setia kau , lantaran mereka mampu menerima isu Maknakel terbaru dari blog kau sehingga traffic pengunjungpun mampu selalu stabil.

Caranya Membuat Widget Langganan Maknakel Keren ini mampu kau pasang di pinggir blog atau di bawah halaman blog kalian. Inilah rujukan tampilan widget langganan Maknakel.

Yang pertama yang harus kau lakukan ialah :
Silahkan copas instruksi javascript dibawah ini.

<style>
 @import url(http://fonts.googleapis.com/css?family=Roboto:400 ,100 ,300 ,500 ,700);
 .wk_subs_box_wrapper{
  background:url('Your Backgroud Image') repeat scroll 0 0 #FFF;
  color:#427FED;
  border-radius: 5px;
  border: 2px solid #0AC4FC;
  font-family: "Roboto";
  font-size:14px;
  line-height:20px;
  padding:1px 20px 10px;
  text-align:center;
  text-transform:uppercase
 }
 .sidebar-subscribe-box-form{
  clear:both;
  display:block;
  margin:10px 0
 }
 form.sidebar-subscribe-box-form{
  clear:both;
  display:block;
  margin:10px 0 0;
  width:auto
 }
 .sidebar-subscribe-box-email-field{
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  background:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  color:#444;margin:0 0 15px;
  padding:10px 30px;
  width:75%
 }
 .sidebar-subscribe-button{
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: "Roboto";
  color: #ffffff;
  font-size: 29px;
  background: #3cb0fd;
  padding: 10px 30px 10px 30px;
  width:100%;
  border: solid #ffffff 0px;
  text-decoration: none;
 }
 .sidebar-subscribe-button:hover ,.sidebar-subscribe-box-email-button:focus{
  background: #3498db;
  text-decoration: none;
 }
 </style>
 <br />
<div class="wk_subs_box_wrapper">
Subscribe for free<br />
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Cybup" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Cybup' , 'popupwindow' , 'scrollbars=yes ,width=550 ,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="Cybup" />
     <input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="Enter your email address" />
     <input class="sidebar-subscribe-button" title="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat" type="submit" value="Subscribe Now !" />
    </form>
</div>
</div>
</div>

ATAU

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrY3JHAhBasAOncQ4Y_r7OCyLP7vA40FsSdv9U9Sf6ph-ZjrHyw1ydG8SIYxHqYzqptXJ013NlSBOvr_MJtz3xJdzP8gQ7gci6aFS2tRCmX1pR1QUx0XqMb9r-U_r8f6Q2C25Nx-GTtIi/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('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]' , 'popupwindow' , 'scrollbars=yes ,width=550 ,height=520');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="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dibuat">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>

SILAHAN KAMU COBA KEDUANYA DAN PILIH MANA YANG KAMU SUKA

Lalu kau pastekan instruksi ini di kawasan yang lain inginkan.

Contoh disini Jaka mau buat widget langganan Maknakel ini di samping halaman blog ialah di sidebar. 

Caranyanya pergi ke tata letak kemudian klik tambah widget pilih javascript. Setelah itu pastekan disini instruksi javascript nya.

Mudah bukan silahkan kau praktikan Caranya Membuat Widget Langganan Maknakel Keren + Mudah Dipasang Diblog Kamu.

Semoga bermanfaat salam .

Sumber https://jakaevo25.blogspot.com/

Advertisement

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: