Dan sebelum pembahasan tentang pembuatan widget subscribe keren ini, berikut gambar contoh widget tersebut:
Well, bagaimana sobat, keren bukan...??? Jika sobat tertarik memasang widget subscribe lengkap dan keren ini, perhatikan langkah-langkahnya berikut ini :
- Login ke blogger
- Pilih Tata Letak » Add Gadget » HTML/Javascript
- Copy paste kode di bawah ini dan masukkan ke dalam gadget yang baru sobat buat
<style type='text/css'>
.social a{color: #000000;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;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/AVvXsEgexdSd7RLEFyrNMDP5QUNsZMHBdFJKfFOZGtbctO4kvhFBqR8xMaLz3Rv001nldw3vDCNzf7Dax2xP2oVCpDjJa4dtjKckpH45EaGicxd3R6Xoz1FLENWJX9RxHakk8gyaAn7bQOMgtSo/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/AVvXsEgexdSd7RLEFyrNMDP5QUNsZMHBdFJKfFOZGtbctO4kvhFBqR8xMaLz3Rv001nldw3vDCNzf7Dax2xP2oVCpDjJa4dtjKckpH45EaGicxd3R6Xoz1FLENWJX9RxHakk8gyaAn7bQOMgtSo/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:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=FamaGulz' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzq0uul__3Dok6CHVODYX7jtG6abnqD8jE8E_UhBMFD6akpxmsLiygfdr16uivO3EUFra-dJ5NlhLWUCJqy6ajfha5NZnpgxlqC7YybOoEOJ1VjScxpB3bGFtYk9lqpKJkFObnT0QOXY/s1600/mail.png" border="0" title='newsletters'/></a> </td>
.social a{color: #000000;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;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/AVvXsEgexdSd7RLEFyrNMDP5QUNsZMHBdFJKfFOZGtbctO4kvhFBqR8xMaLz3Rv001nldw3vDCNzf7Dax2xP2oVCpDjJa4dtjKckpH45EaGicxd3R6Xoz1FLENWJX9RxHakk8gyaAn7bQOMgtSo/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/AVvXsEgexdSd7RLEFyrNMDP5QUNsZMHBdFJKfFOZGtbctO4kvhFBqR8xMaLz3Rv001nldw3vDCNzf7Dax2xP2oVCpDjJa4dtjKckpH45EaGicxd3R6Xoz1FLENWJX9RxHakk8gyaAn7bQOMgtSo/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:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=FamaGulz' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXzq0uul__3Dok6CHVODYX7jtG6abnqD8jE8E_UhBMFD6akpxmsLiygfdr16uivO3EUFra-dJ5NlhLWUCJqy6ajfha5NZnpgxlqC7YybOoEOJ1VjScxpB3bGFtYk9lqpKJkFObnT0QOXY/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/FamaGulz
' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qKSqwkHiXWkXo25pdJGnw1Pn5z2JwLpmg2U6r2DE_n0IlrjRrncGaHyyrpIba5H652jUSxMkcT4X3OLG7GowKH_n4SU4VXKOzdqPQthmJCL_I-bT1pUoVsdPxOWoRG-cyT0fJSF5iGs/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/GulzYan' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1y-cEKi5Y3WoD0_c6Lfdx8PSiDRmD3aRn5Ej_apvysxiUFSXs7QXkgnkkpJbbdAXhHjLqIPZ2QYMwDvetPATEhUt-oiuhpg7h5xB9N1J5jOJFcR8Sdbubf5wJoCM57yDBreqhYjL3lKI/s1600/twitter.png" border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/famagulz.blogspot' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjrZmmABJiGfm6gpGuBu5Rx5Y5xOO4CXb3QjONCgmk4MsJNAJ06UZjv4RaMtAso23v9WhnxaZt_oZlEccDYk9ugl1DF6IyNmCIp68nXRW8TDuXenTfVGA-9_PcgUVAvl1pJpUH-621NI/s1600/facebook.png" border="0" title='facebook'/></a> </td>
<td> <a href='https://plus.google.com/u/0/106348181263090536731/' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFcHd7molP9rkZsBJg3_74-A4s5B2bVnovy5oj813TqvJSmTP_0GS0RShVsXVd64qmiYNopurFMPfk9-B06NkcTdd9HRALOKUETyO0UaNQaoSUGlMirt7jUGWgIs_PWpC3urZ-lYZnMqV/s1600/g+.PNG" border="0" title='google+'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/FamaGulz' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</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=FamaGulz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="maskolis" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div>
</center>
' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qKSqwkHiXWkXo25pdJGnw1Pn5z2JwLpmg2U6r2DE_n0IlrjRrncGaHyyrpIba5H652jUSxMkcT4X3OLG7GowKH_n4SU4VXKOzdqPQthmJCL_I-bT1pUoVsdPxOWoRG-cyT0fJSF5iGs/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/GulzYan' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1y-cEKi5Y3WoD0_c6Lfdx8PSiDRmD3aRn5Ej_apvysxiUFSXs7QXkgnkkpJbbdAXhHjLqIPZ2QYMwDvetPATEhUt-oiuhpg7h5xB9N1J5jOJFcR8Sdbubf5wJoCM57yDBreqhYjL3lKI/s1600/twitter.png" border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/famagulz.blogspot' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjrZmmABJiGfm6gpGuBu5Rx5Y5xOO4CXb3QjONCgmk4MsJNAJ06UZjv4RaMtAso23v9WhnxaZt_oZlEccDYk9ugl1DF6IyNmCIp68nXRW8TDuXenTfVGA-9_PcgUVAvl1pJpUH-621NI/s1600/facebook.png" border="0" title='facebook'/></a> </td>
<td> <a href='https://plus.google.com/u/0/106348181263090536731/' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFcHd7molP9rkZsBJg3_74-A4s5B2bVnovy5oj813TqvJSmTP_0GS0RShVsXVd64qmiYNopurFMPfk9-B06NkcTdd9HRALOKUETyO0UaNQaoSUGlMirt7jUGWgIs_PWpC3urZ-lYZnMqV/s1600/g+.PNG" border="0" title='google+'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/FamaGulz' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</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=FamaGulz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="maskolis" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div>
</center>
Keterangan : Warna Merah, silahkan sobat ganti dengan username yang sobat punya
- Simpan dan lihat hasilnya...!!!
Oh ya, widget
di atas merupakan widget yang dibuat atau dimodifikasi oleh maskolis
yang beberapa waktu yang lalu sempat saya baca di websitenya dan mungkin
sobat bertanya kenapa saya harus menyinggung soal pembuat widget ini?
Saya sengaja menyinggung soal ini karena ini merupakan bentuk apresiasi
saya terhadap beliau. Jika sobat berminat, silahkan sobat berkunjung ke
tempat beliau (http://maskolis.com/).
Semoga arikel ini bermanfaat buat sobat. Salam bloggers...!!!
+ komentar + 4 komentar
izin bookmark dulu masgan
Okay sob...?
makasih sob widget kerennya...
salam kenal yah
Terimakasih banyak sob, sangat membantu sekali artikelnya..
http://obatasliindonesia.com/obat-darah-tinggi-tradisional-terbaru/
Post a Comment
Admin