Cara Memasang Email Subcription Keren Di Blog - Melanjutkan artikel terdahulu tentang cara membuat widget subscribe by email di blog yang bisa Anda lakukan dengan mudah, maka kali ini akan ditampilkan kembali widget ikuti lewat email untuk mempercantik penampilan blog Anda. Tampilan widget email subscribe ini terlihat keren, sehingga blog Anda akan terlihat lebih menarik. Berikut ini langkah-langkah memasang widget email subscription di blog :
1. Login ke blog Anda.
2. Masuk ke bagian Tata Letak blog Anda.
3. Klik "Tambahkan Gadget".
4. Pilih "HTML/JavaScript".
5. Copy script dibawah ini, kemudian pastekan ke kolom gadget blog Anda.
<!- Star Thesis Email Subscription ->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/User ID">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/User ID">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/User ID">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/User ID">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/User ID">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Dapatkan Update Artikel Di Email Anda
<span></span>
</p>
<div id="email-form">
<h6>Get Email Updates</h6>
<form class="nice custom" style="" 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">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address" />
<input type="hidden" value="InfozGuide" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Submit" />
<p>
Anda dapat berhenti berlangganan kapan saja Anda mau
</p>
</form>
</div>
</li>
</ul>
</div>
<style>
#sidebars {
border: 0 none;
float: right;
padding: 0 0px;
width: 100%;
}
#email-notice {
background: none repeat scroll 0 0 #DF6001;
color: #ffffff;
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
padding: 15px 20px;
position: relative;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 10px solid #DF6001;
bottom: -10px;
height: 0;
position: absolute;
right: 40px;
width: 0;
}
#email-form {
background: none repeat scroll 0 0 padding-box #313131;
border-bottom: 5px solid #202020;
border-radius: 2px 2px 2px 2px;
text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
color: #FFFFFF;
font-family: arial;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
padding: 15px 20px 0;
text-transform: none;
}
#email-form form {
color: #FFFFFF;
margin: 0;
padding: 20px 18px;
}
#email-form input.input-text {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #222222;
margin: 0 0 10px;
padding: 8px;
width: 94%;
}
#email-form .button {
background:none repeat scroll 0 0 #333333;
color:#ffffff;
border: 2px solid #444444;
float: right;
margin: 0 0 0 10px;
}
#email-form p {
color: #FFFFFF;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#sidebar-social {
float: left;
font-size: 12px;
margin: 0 0 15px;
width: 100%;
}
ul.sidebar_list {
list-style: none outside none;
}
li.widget ul {
list-style: none outside none;
}
#social-profiles {
float: left;
}
#social-profiles ul {
float: left;
list-style: none outside none;
margin: 0 8px 0px;
}
#social-profiles ul li {
float: left;
}
#social-profiles ul li a {
display: block;
float: left;
height: 32px;
margin: 0 13px;
text-indent: -999em;
width: 32px;
}
#social-profiles a.social {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrl6ySkdSfnMd4EfMIPi99yuWCY_KxtcSH9xwqwgVL0WzlXndEXfMtFDh5mWA4Tg6Fd8LJQu5cngfi6pzeOxOpSSkLJoDYhgOCdwM9bjrhmSlD_M0nWmGeDiSZGiBRzDkXQIlAD38SRtU/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
background-position: -79px 0;
height: 32px;
margin: 0 15px 0 5px;
width: 32px;
}
#social-profiles a.facebook:hover {
background-position: -79px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter {
background-position: -5px -111px;
height: 32px;
width: 32px;
}
#social-profiles a.twitter:hover {
background-position: -42px 0;
height: 32px;
width: 32px;
}
#social-profiles a.youtube {
background-position: -42px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.youtube:hover {
background-position: -5px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.rss {
background-position: -42px -74px;
height: 32px;
width: 32px;
}
#social-profiles a.rss:hover {
background-position: -79px -37px;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus {
background-position: -5px 0;
height: 32px;
width: 32px;
}
#social-profiles a.googleplus:hover {
background-position: -5px -74px;
height: 32px;
width: 32px;
}
* {
margin: 0;
padding: 0;
}
.custom .sidebar ul.sidebar_list {
padding: 15px 0;
}
</style>
<!- End Thesis Email Subscription ->
original code - source : www.bloggingehow.com
- Silahkan ganti "User ID" dan "ID Anda" dengan ID milik Anda.
- Ganti tulisan yang berwarna Hijau sesuai dengan keinginan Anda.
6. Simpan, dan lihat hasilnya.
Itulah Cara Memasang Email Subscription Keren Di Blog yang bisa Anda lakukan. Dengan widget yang keren ini, maka blog Anda juga akan terlihat keren. Semoga bermanfaat.
