Membuat Subscription Form Wordpress pada Blogger adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat Subscription Form Wordpress pada Blogger ini.
Banyak kelebihan yang dimiliki oleh blogger, salah satunya dapat Membuat Subscription Form seperti blog Wordpress. tutorial ini pernah dibahas oleh Kang Onk Design, akan tetapi apa salahnya saya mencaba untuk memodifikasi ulang dengan sentuhan-sentuhan yang berbeda. Pada tips kali ini saya mencoba menambahi icon GPlus yang selain memperindah tampilan blog juga dapat digunakan untuk meningkatkan trafickrank blog, karena anda sekalian jelas sudah tahu apa kegunaan google plus (G+1).
Jika anda masih bingung kayak apa tampilannya, silakan lihat
Tanpa panjang cerita, langsung pada langkahnya adalah :
- Login Blogger dengan akun sepert biasa;
- Pilih Rancangan;
- Klik tab Tambahkan Elemen;
- Pilih HTML/JavaScript;
- Copy paste kode berikut kedalam HTML yang baru dibuat;
<style>
.piobar{width: 300px; float: left; margin-left:30px;}
.piobar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}
.piobar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
.piobar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
.piobar .subicons a{text-decoration: none; color:#333333;}
.piobar .subicons a:hover{text-decoration: underline; color:#333333;}
.piobar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxAaqNnttwZTNVt36NwLZZip1mnoqwK939uJq8qBWXfQJ5yAhpPiGZ2rXFfKApGeTtC9sQs_uMdQRwU_9MOB7Iu-9a668lAT232I-tOsPtrHYKOQSd42Tiv1n68teBW8q1D5AUvtUJdE/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.piobar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxAaqNnttwZTNVt36NwLZZip1mnoqwK939uJq8qBWXfQJ5yAhpPiGZ2rXFfKApGeTtC9sQs_uMdQRwU_9MOB7Iu-9a668lAT232I-tOsPtrHYKOQSd42Tiv1n68teBW8q1D5AUvtUJdE/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.piobar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxAaqNnttwZTNVt36NwLZZip1mnoqwK939uJq8qBWXfQJ5yAhpPiGZ2rXFfKApGeTtC9sQs_uMdQRwU_9MOB7Iu-9a668lAT232I-tOsPtrHYKOQSd42Tiv1n68teBW8q1D5AUvtUJdE/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.piobar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TxAaqNnttwZTNVt36NwLZZip1mnoqwK939uJq8qBWXfQJ5yAhpPiGZ2rXFfKApGeTtC9sQs_uMdQRwU_9MOB7Iu-9a668lAT232I-tOsPtrHYKOQSd42Tiv1n68teBW8q1D5AUvtUJdE/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
.piobar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.piobar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibLGlRs5JQ4SiOsRjRoIWFDDZh8ldKR7aHTUP2HOQX0b29gh88smBHsye-KEuF6SZPw8o_M6jjtSkBEUKu-KQdb65bSg3pA9xyR8seTTMZ9ouz_aEUiNasN2fGBgOEfBrj-csqYWF9plE/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
.piobar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.piobar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.piobar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.piobar.count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.piobar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="piobar"><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/kangonkdesign"><img
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/kangonkdesign?bg=F2F2F2&fg=666&anim=1" height="26"/></a> </span>Pelajaran Gratis Blogging </div>
<div class="subicons">
<div class="rssicon"> <a rel="nofollow" href="http://feeds.feedburner.com/kangonkdesign" target="_blank"> RSS</a></div>
<div class="googleicon"> <a href="https://plus.google.com/u/0/111548288244179044215"
rel="author" target="_blank"> G+</a></div>
<div class="fbicon">  <a href="http://www.facebook.com/pages/Kang-Onk-Design/113506822070307" target="_blank" rel="nofollow">FB</a></div>
<div class="twittericon"> <a href="http://twitter.com/onkdesign" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Berlangganan artikel berkualitas tiap hari    masukan alamat email anda dibawah ini</p></div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=kangonkdesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Masukan alamat email anda..." onblur="if (this.value == '') {this.value = 'Masukan alamat email anda...';}" onfocus="if (this.value == 'Masukan alamat email anda...') {this.value = '';}" type="text" /><input value="kangonkdesign" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>
- Simpan dan lihat hasilnya.
Selamat mencoba dan semoga kesuksesan berpihak pada kita semua. amin SELENGKAPNYA atau SEPENUHNYA Sistem Komputer Sitemap 1 2 3 4 5
