Kotak Berlangganan Artikel Dengan Tampilan Baru Se-cara Blog

Kotak belangganan artikel adalah sebuah kotak yang digunakan oleh kebanyakan para blogger utnuk mempermudah pengunjungnya mendapatkan artikel terbaru setiap kali diposting oleh Admin blog. Kotak berlangganan artikel ini dilengkapi dengan empat logo tombol sosial media, antara lain Facebook, Twitter, Google+ dan RSS. Sebagai contohnya, lihat pada gambar di bawah.

Adapun cara membuatnya pada blog sangat mudah dan simpel, antara lain:
1.Login ke Blogger
2. Pilih Template lalu Edit HTML


4. Cari kode </head>, kemudian letakkan kode di bawah ini tepat di atasnya

<style type='text/css'>
.sub-box{
width: 282px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHyHTnCPkuj23hrE_XL7NDlUsJbE8r6-IISEFnjeAWF_Nzn9zUF16bf-bqaM3bmjXjiV7YFU2VW_kdahDCSvBlxv3ewUKV4Q3VKAmjflb5YOVDNdEHIGoU_d_Vq6Pks2DTo-KTuMs7nGK/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhwIN2WL0rBRpCE24oXokK4thRUubp9zh2EKEAFs1p4SIpB43osCUi9Q3CWO3X2YWL_HdDwj22B-xpRxhK6t0-DSBOFWleGvwaKxzY1Zp2kE4wDHagWCHQdXxGN5jxjls54EYkn2JYTE2/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitw_QAcLVvFlDCCh1Rfr2cBiDd9-l1v9swZbHaEHRbmlZ85uoWVPl8rM6exbAjieAZ4PmrOjwxiU_qbO0i2Raap7_uf3VZcyZS0VwRIPXKWwk8lR7P0UFEs9yZTzCblsNxK4dCepceUsLi/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifHesFLtxEYMaHBftUdQPBHX6OVNXqJsUm0kSoTfTGbaaF7I9xGjILCfC482-cVoW5Ybr919bgkfGMu5xcYLsC17xha_lcuXvktIisaz5yeM4NBCVJEDNPW47AMOn_C0wUfUwMMeoR-yU/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7iNWJAPik28vIP-wz4B4CTKvnPp-71UHZA6uTtdQ7XSufQMx4VcZL5pKtLU4IPmF9u0bs7ssSgE6t0Uz7e1m0JpiGMTZZJUaFPCw1Xi-BHPAXftTUgDC3LMcuvdLM5JNR_OONJ1MPvo2/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 142px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cabin+Condensed::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Ket: Untuk ukuran, warna, logo dan yang lain jika ingin mengganti silahkan sesuaikan dengan keinginan Anda

5. Klik Simpan Template
6. Selanjutnya, pilih Tata Letak dan Tambahkan Gadget
7. Tambahkan gadget HTML/JavaScript lalu letakkan kode di bawah ini pada kotak gadget tadi

<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/ID ANDA'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='http://plus.google.com/ID ANDA'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/ID ANDA'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/ID ANDA'>Facebook</a></li>
</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="onlinetrick" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' />
</form>
</div>
</div>

Ket: Ganti yang dicetak tebal dengan ID sosial media Anda

8. Terakhir, klik Simpan.

Related Posts:

Tweet