1. Login ke akun blogger seperti biasa.
2. Copy kode berikut ini dan ubah teks yang berwarna.
<style>Keterangan:
.login {
padding: 18px 10px;
width: 300px;
background: #e9fbe9;
background-clip: padding-box;
border: 1px solid #00ff00;
}
.login > h1 {
margin: 0 -21px 20px -21px;
font-size: 20px;
font-family:Georgia;
font-style:italic;
font-weight: bold;
text-align: center;
color: #000;
padding: 8px;
background-color: #52e052;
position: relative;
text-shadow: 2px 0 0 darkgreen;
}
.login > h1:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: darkgreen transparent transparent transparent;
}
.login > h1:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent darkgreen;
}
.txtsubscribe {
background: #000;
border: 1px solid #52e052;
box-shadow: 1px 1px 4px #52e052 inset;
color: #999;
font-weight: bold;
padding: 7px 15px 7px 5px;
text-decoration: none;
width: 160px;
margin-top: 10px;
}
.btsubscribe {
background: #52e052;
border: 1px solid #00ff00;
color: #000;
cursor: pointer;
font-weight: bold;
margin-left: 5px;
padding: 6px;
text-decoration: none;
margin-top: 10px;
}
.subscribe-faceblog{
list-style-type:none;
margin:0;
padding:0;
}
.subscribe-faceblog li{
display:inline;
width: 60px;
height:60px;
}
.subscribe-faceblog li img{
width: 40px;
height: 40px;
margin-right: 5px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.subscribe-faceblog li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" class="login">
<h1>LANGGANAN VIA EMAIL</h1>
<ul class="subscribe-faceblog">
<li><a href="https://www.facebook.com/ID FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijKepv5-Hb9aQuxO8WOApTQDw6ysif6TCGGkdCN66eZPPoiG0eSKDequYt2gyemVRok44FOE0PY6oMwok_0ot_K8sqdsfFE2XhWz-NJxiZrg6uP5YARHsak4oWe7ubKlLM2oc6lRBT2NA/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li>
<li><a href="http://www.twitter/ID TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4Oo2x7pUT017wlFYmGWmyVPKzP6QA68BnuHGCVbL9zydKKKCOXE7rVBXMec4uY9LvSlrTJUcip-xTbK0eVEq4IV67Z7CQAb1g_7vpWl7IOIa10b-dMY0xo88eE_szql6Ciik2d1I0CA/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li>
<li><a href="https://plus.google.com/ID GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjs_-cmVlWbzHZ4SnIPpT6iW81RkBTEd3gwgkEIv-nUFTrsCgd1NmwCCUVTdtA9Sk_eEKRqgKgZC0Ukqf_aG-3x0BVLfHNiYlnmVZ-7ROGXkaxBMcYpOwvBM2q98RGP3p_xBvPgAcWck/s1600/google+tng.png" title="Follow Us on G+" /></a></li>
<li><a href="http://feeds.feedburner.com/ID FEEDBURNER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFRwff0fl8n2GR_8u6XfJVMLFbbLoXZVpj8PNfFmyyiSMujbp6kvoMYOdJKbOY_uOnRVaS5rYR0dndE2TclZubOtkg5wcJ9ddSjjziSIdZbLy3LioGlP0njFC3dtLhT2-VcIGMwjX-qaA/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li>
</ul>
<input type="hidden" value="masandes" name="uri" />
<input class="txtsubscribe" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="btsubscribe" />
</form>
</center>
Ubah tulisan warna merah dengan ID feedburner blog anda.
Untuk lebar dan tingginya maupun background warna tinggal sesuaikan saja dengan selera masing-masing.
DEMO:
3. Paste kode tersebut kedalam widget caranya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript.
3. Jika sudah, langkah terakhir adalah Simpan dan lihat hasilnya.
0 Response to "Style Ribbon Email Subscribe Blogger"