4 Cara Membuat Kotak Berlangganan Keren dan Responsive

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas 4 Cara Membuat Kotak Berlangganan Keren dan Responsive, Postingan ini masih berhubungan dengan Artikel Widget.

4 Cara Membuat Kotak Berlangganan Keren dan Responsive

Cara memasang/ membuat kotak berlangganan atau subscribe - Halo sobat blog siabdi, lama rasanya saya tidak membagikan tutorial blog. Sebenarnya hampir setiap hari saya selalu update artikel blog ini, namun artikel yang saya bahas bukan seputar tutorial blog, melainkan topik bisnis online. Oiya, sebelumnya saya sudah membagikan artikel mengenai cara mencari uang dari internet, dan pada kesempatan kali ini saya akan membagikan tutorial mengenai cara memasang kotak berlangganan email di dalam blog. Namun akan lebih afdol apabila saya sedikit menjelaskan mengenai pengertian dan fungsi dari kotak berlangganan itu sendiri. Yuk simak!

Kotak berlangganan atau subscription box merupakan salah satu widget yang berfungsi sebagai formulir berlangganan. Biasanya layanan berlangganan dapat kita jumpai pada situs youtube, namun kini layanan berlangganan juga bisa gunakan di dalam blog. Salah satu fungsi dari widget ini di dalam blog yakni digunakan untuk menawarkan layanan berlangganan update artikel gratis kepada pengunjung blog, dimana setiap kali pihak penyedia melakukan update artikel maka anda sebagai pelanggan akan selalu mendapatkan update terbarunya melalui email.

Untuk pendaftaran dan pemasangannya di blog pun sebenarnya bisa dikatakan cukuplah mudah khususnya bagi anda yang menggunakan platform blogger, anda hanya tinggal menuju ke halaman tata letak --> add widget --> kemudian silahkan pilih opsi ikuti via email/ follow by email -- > selanjutnya silahkan save! Namun secara default, tampilan kotak berlangganan biasanya akan nampak biasa saja. Maka dari itu, pada kali ini saya akan memberikan beberapa pilihan tampilan kotak berlangganan yang bisa anda pasang di blog agar blog anda terlihat lebig profesional.

Cara Membuat Kotak Berlangganan

Cara Pertama Membuat Kotak Berlangganan [ DEMO ]

1. Silahkan sobat masuk ke halaman blog sobat terlebih dahulu.
2. Kemudian silahkan masuk ke tata letak --> add widget --> HTML
3. Silahkan masukkan kode di bawah ini ke dalamnya.

<style type='text/css'>#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;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 url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Dapatkan Update Tips Blogging Langsung di Inbox Email Anda.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=siabdi" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=siabdi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="siabdi" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

4. Terakhir silahkan simpan dan lihat hasilnya.

*Note : Silahkan ganti tulisan yang saya tandai dengan ID Feedburner sobat

Cara Kedua Membuat Kotak Berlangganan [ DEMO ]

1. Silahkan sobat masuk ke halaman blog sobat terlebih dahulu.
2. Buka halaman template --> edit template
3. Selanjutnya silahkan cari kode ]]></b:skin>
4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Subscribe Box */

#subscribe-css {
  position: relative;
  padding: 20px 0;
  background: #222;
  overflow: hidden;
  border-top: 4px solid #eee;
}

.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: #333;
  color: #ccc;
  margin: 10px 0;
  padding: 15px 20px;
  width: 35%;
  border: 0
}

.subscribe-css-email-button {
  background: #ff675c;
  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: #ea5a50;
}

#subscribe-css p.subscribe-note {
  margin: 16px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
  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%;
}

5. Silahkan simpan template.
6. Selanjutnya silahkan letakkan kode di bawah dimana anda ingin menampilkannya.

<div id='subscribe-css'>
  <p class='subscribe-note'><span>SUBSCRIBE</span>
    <span class='itatu'>TO</span> OUR NEWSLETTER</p>
  <div class='subscribe-wrapper'>
    <div class='subscribe-form'>
      <form action='http://feedburner.google.com/fb/a/mailverify?uri=siabdi' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=siabdi&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true'
      target='popupwindow'>
        <input name='uri' type='hidden' value='siabdi' />
        <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>

4. Terakhir silahkan simpan dan lihat hasilnya.

*Note : Silahkan ganti tulisan yang saya tandai dengan ID Feedburner sobat

Cara Ketiga Membuat Kotak Berlangganan [ DEMO ]

1. Silahkan sobat masuk ke halaman blog sobat terlebih dahulu.
2. Kemudian silahkan masuk ke tata letak --> add widget --> HTML
3. Silahkan masukkan kode di bawah ini ke dalamnya

<style>
    #blog-siabdi {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
  
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
    
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{
  
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
  
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>
    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
        }
    </style>
    <![endif]-->
<div id="Blog-Siabdi" >

<div class="emailicon"><p>Dapatkan Update Artikel Gratis! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=siabdi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter Email Anda Disini..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />

<input type="hidden" value="siabdi" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/siabdi" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/Abdi_Negaraa"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/104527979197381087968/posts target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

4. Terakhir silahkan simpan dan lihat hasilnya.

*Note : Silahkan ganti tulisan yang saya tandai dengan ID Feedburner, twitter dan Google+ milik sobat

Cara Keempat Membuat Kotak Berlangganan [ DEMO ]

.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:100%; /* panjang form */
height:auto /* tinggi form */
}
.rss {
background: url("http://2.bp.blogspot.com/-jmuQUB4DMqQ/T0c_XbrNFNI/AAAAAAAAANA/MkkIRrGu7Xg/s200/Cara+Submit+Sitemap+Blog+ke+Google+Bing+Mneggunakan+Submit+RSS+3.0.png") no-repeat top right;
}

5. Silahkan simpan template.
6. Selanjutnya silahkan letakkan kode di bawah dimana anda ingin menampilkannya.

<div class='form'>
<div class='rss'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss siabdi' src='http://1.bp.blogspot.com/-FOGTDw0Cxh8/TwXY4E-RYeI/AAAAAAAAAU0/EmR05E07EHc/s1600/small+rss.png' title='RSS Feed'/> <a href='http://feeds.feedburner.com/siabdi' rel='nofollow' target='_blank'>LANGGANAN ARTIKEL</a></div>
<div style='font-weight:bold; padding:10px 10px;'>GET UPDATE VIA EMAIL</div>
<div style='padding-left:10px'>Berlangganan artikel via email!</div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=siabdi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><div style='padding-left:10px; padding-bottom:10px; padding-top:10px'><input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}' onfocus='if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}' style='width:160px; height:18px' type='text' value='Ketik email anda disini...'/> <input name='uri' type='hidden' value='siabdi'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='SUBCRIBE'/></div></form>
<div style='padding-left:10px'><p><a href='http://feeds.feedburner.com/siabdi' rel='nofollow'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/siabdi?bg=FF6600&amp;fg=FFFFFF&amp;anim=1' style='border:0' width='88'/></a></p></div>
</div></div>

7. Silahkan simpan dan lihat hasilnya.
*Note : Silahkan ganti tulisan yang saya tandai dengan ID Feedburner sobat

Itulah 4 cara dalam membuat kotak berlangganan yang bisa anda gunakan di dalam blog. Bagi sobat yang memiliki pertenyaan seputar tutorial di atas, silahkan tinggalkan pertanyaan pada kotak komentar. Semoga bermanfaat :)

Demo IdBoegis

Monday 13 June 2016

4 Cara Membuat Kotak Berlangganan Keren dan Responsive