Farhan Share - Sobat farhan memang banyak sekali blogger yang menggunakan email subscription di blognya, selain untuk mempercantik tampilan blog email subscribe ini juga ber-fungsi untuk berlangganan artikel dari blog kita, yang artinya nanti setiap orang yang mau berlangganan di blog kita, mereka akan mendapatkan kiriman artikel di blog kita lewat email mereka masing-masing secara gratis.
Ya, sobat farhan pada kesempatan kali ini farhan akan memberikan salah satu versi widget email subscription tapi kali ini berbeda, karena dilengkapi dengan social media yang ber-texture sketsa yang menarik, keren, dan tentunya multifungsi. Jadi sobat farhan dengan widget ini kita tidak perlu lagi repot-repot membuat like box dari facebook plugin maupun icon follow twitter dan icon Google+ karena dengan widget ini kita sudah dapat 5 keunggulan, yaitu Facebook, Feedburner, Twitter, Google+, dan email Subscription. Baik, sobat farhan di bawah ini farhan sudah persiapkan kode script dan langkah-langkah membuat email subscription dengan social media bertexture sketsa, di simak baik-baik ya.
1. Login Ke Blogger.
2. Pilih Tata Letak.
3. Pilih Add Gadget.
4. Pilih HTML/JavaScript.
5. Sobat letakkan kode di bawah ini ke dalam box "Konten".
<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiksDn2OXfHn6YAwXy7j5t2sp-Q6zXCJ5jRu_G1AfojYDC9kai_a4bKRyrpIt6j6ci6DbFnsQtjOKdFqCNDWdIT2hrYbNwuu2si-IklpS7yNLxXg92m0TDmt7hbH0h-13uJrFmhfCv9Co/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfObJ_RvEYXCU68Sbkjr89Y39V8KWjhrODwcfAlcQAE-H0avRLx8rHt-WVikf6-UQ1q1U-Zj4nUgxOIB-AgvzFlfY6LHIGY6MIzJDBjzTgr6livOnywRXeN7musVs6LnmGDM_-UaM9ZBJ/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgMABtDOnP_Q4r90_rwOppIJns1UZJDZuJwT6NW2nvAR6w0AQzLUJUGxxUMBIgUPxc_sI0qIPFsPlcFb7qC5WI9EWX2nZxaWkfmgV59VTxt-OvxzQsgrZYnX8__gkFfbeyKaacs3JOd8F/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/Id Google+ Sobat/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRpJrPSWPWIFEEQBGhQRMZzo64wqdP-xBXwU1do9od9GIDVspf9U2ye9r8Tkac6We6ZTvc2pFHPdFxKCE8mcCnHhesp_5VccWRJt26vv1gXs_hzKi667JzMTVMKFJnowBIvgqdFgj8d7R/s1600/google-48.png" /></a></td>
</tr></table>
</div>
<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="dofollow" href="http://feeds.feedburner.com/farhanshare"><img src="http://feeds.feedburner.com/~fc/farhanshare?bg=FF6600&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=farhanshare', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiksDn2OXfHn6YAwXy7j5t2sp-Q6zXCJ5jRu_G1AfojYDC9kai_a4bKRyrpIt6j6ci6DbFnsQtjOKdFqCNDWdIT2hrYbNwuu2si-IklpS7yNLxXg92m0TDmt7hbH0h-13uJrFmhfCv9Co/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfObJ_RvEYXCU68Sbkjr89Y39V8KWjhrODwcfAlcQAE-H0avRLx8rHt-WVikf6-UQ1q1U-Zj4nUgxOIB-AgvzFlfY6LHIGY6MIzJDBjzTgr6livOnywRXeN7musVs6LnmGDM_-UaM9ZBJ/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/farhanshare" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgMABtDOnP_Q4r90_rwOppIJns1UZJDZuJwT6NW2nvAR6w0AQzLUJUGxxUMBIgUPxc_sI0qIPFsPlcFb7qC5WI9EWX2nZxaWkfmgV59VTxt-OvxzQsgrZYnX8__gkFfbeyKaacs3JOd8F/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/Id Google+ Sobat/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRpJrPSWPWIFEEQBGhQRMZzo64wqdP-xBXwU1do9od9GIDVspf9U2ye9r8Tkac6We6ZTvc2pFHPdFxKCE8mcCnHhesp_5VccWRJt26vv1gXs_hzKi667JzMTVMKFJnowBIvgqdFgj8d7R/s1600/google-48.png" /></a></td>
</tr></table>
</div>
<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="dofollow" href="http://feeds.feedburner.com/farhanshare"><img src="http://feeds.feedburner.com/~fc/farhanshare?bg=FF6600&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=farhanshare', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
Catatan : Ganti kode yang berwarna biru dengan URL fan page facebook sobat.
Catatan : Ganti kode yang berwarna merah dengan URL Twitter Sobat
Catatan : Ganti kode yang berwarna hijau dengan ID Google+ sobat, Contoh (115286939984964916456)
Catatan : Ganti kode yang berwarna pink dengan ID Feedburner sobat, Contoh (feerburner.com/farhanshare)
Demikian sobat farhan artikel tentang cara membuat email subscription dengan social media bertexture sketsa, semoga bermanfaat, dan selamat mencoba, bila ada pertanyaan seputa widget ini, sobat bisa tinggalkan komentar di bawah.
{ 0 komentar... Views All / Send Comment! }
Posting Komentar