
CSS
.touchme {
float: center;
margin-left: 33px;
}
.touchme a {
display: block;
height: 50px;
width: 50px;
padding: 0 4px;
float: left;
background: transparent url(http://i1082.photobucket.com/albums/j368/docextreme1/SharingTouchMe.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor: pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
.sub-box {
width: 295px;
background: ();
padding: 2px 5px 7px 2px;
font-family: Droid Sans,Helvetica,Arial;
}
.emailform {
margin: 16px 0 0;
display: block;
clear: both;
}
.emailtext {
margin: 10px 0 0;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfqmCDgp_OsE7XVPD9zJR-a4XeFfUpdn9PyrBalpAd1zsJNUql9a2HO18N9Qaor7ILZIShSvZcT0s5_eXUPA0dTT7wL5oXJVvlLgdqX52LhqQeQJM09xGpNBvkUaqPcopfh4jMjNtN2A/s1600/email.png) no-repeat scroll 4px center;
padding: 6px 5px 6px 34px;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #ccc;
width: 175px;
}
.emailtext:hover {
background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZfqmCDgp_OsE7XVPD9zJR-a4XeFfUpdn9PyrBalpAd1zsJNUql9a2HO18N9Qaor7ILZIShSvZcT0s5_eXUPA0dTT7wL5oXJVvlLgdqX52LhqQeQJM09xGpNBvkUaqPcopfh4jMjNtN2A/s1600/email.png) no-repeat scroll 4px center;
border-color: #999;
}
.emailtext:focus {
outline: none;
}
.sub-button {
color: #eee;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #666;
cursor: pointer;
background: #999;
}
.sub-button:hover {
color: #444;
border-color: #999;
background: #ffb900;
}HTML
<div class='touchme'>
<!--Facebook-->
<a class='facebook' href="http://www.facebook.com/dharla.samudra" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="http://twitter.com/DharlaFerdana" rel='external nofollow' target='_blank'></a>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/Dharlovers" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a rel="author" class='googleplus' href="https://plus.google.com/113542517587930625517/posts" target='_blank'></a>
</div>
<br/>
<div style="text-align: center">
<div class='sub-box'>
<div style="text-align: left; display: inline-block;"> <span style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</span>
<small><i>Anda dapat membaca artikel melalui rss feed <a href='http://feeds.feedburner.com/Dharlovers' target='_blank' title='feedburner' rel='nofollow'>
<b>klik di sini</b></a><br /> atau jika Anda ingin berlangganan artikel, silahkan masukkan email anda di bawah ini :</i></small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Dharlovers', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="Dharlovers" name="uri" />
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email here...";}" onfocus="if (this.value == "Enter your email here...") {this.value = ""}" value="Enter your email here..." name="email"
class="emailtext" />
<input type="submit" class="sub-button" value="Enter" />
</form>
</div>
</div>
</div>Silahkan anda edit yang perlu dan sesuaikan dengan template blog anda.
Posting Komentar