Membuat Subscription Form Wordpress pada Blogger

Tweet

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 dsini.

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/AVvXsEjhj0KnK-llS9B_XkX_kogOzgApDIUpafC6uS7SrCkjXEYFJ_ey4tT04SN1ywWi1sEhIe9zqH7u3VQu-4pbTcqOA6_ysuZ39mActfDVml38FWzHxKvIrgIJE6nOcXIhN-fA3pJSYUV3l_eH/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/AVvXsEjhj0KnK-llS9B_XkX_kogOzgApDIUpafC6uS7SrCkjXEYFJ_ey4tT04SN1ywWi1sEhIe9zqH7u3VQu-4pbTcqOA6_ysuZ39mActfDVml38FWzHxKvIrgIJE6nOcXIhN-fA3pJSYUV3l_eH/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/AVvXsEjhj0KnK-llS9B_XkX_kogOzgApDIUpafC6uS7SrCkjXEYFJ_ey4tT04SN1ywWi1sEhIe9zqH7u3VQu-4pbTcqOA6_ysuZ39mActfDVml38FWzHxKvIrgIJE6nOcXIhN-fA3pJSYUV3l_eH/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/AVvXsEjhj0KnK-llS9B_XkX_kogOzgApDIUpafC6uS7SrCkjXEYFJ_ey4tT04SN1ywWi1sEhIe9zqH7u3VQu-4pbTcqOA6_ysuZ39mActfDVml38FWzHxKvIrgIJE6nOcXIhN-fA3pJSYUV3l_eH/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/AVvXsEjetziokMKHkl_J4FZbyFUrdNyRVXtK4Qz-ayEghl00UAVozMfvnicCSkArKy5AH4I-7EvX0cUzU6EFDiXdEDqCWQvMUkFEVfL5Rrv534l_p88K-wad-iLlBEqhdGomLymvMnMU55k1hYo/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&amp;fg=666&amp;anim=1" height="26"/></a> </span>Pelajaran Gratis Blogging </div>

<div class="subicons">
<div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/kangonkdesign" target="_blank">  RSS</a></div>

<div class="googleicon">&#160;<a href="https://plus.google.com/u/0/111548288244179044215"
  rel="author" target="_blank"> G+</a></div>

<div class="fbicon"> &#160;<a href="http://www.facebook.com/pages/Kang-Onk-Design/113506822070307" target="_blank" rel="nofollow">FB</a></div>

<div class="twittericon">&#160;<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 &#160;&#160; 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 == &#39;&#39;) {this.value = &#39;Masukan alamat email anda...&#39;;}" onfocus="if (this.value == &#39;Masukan alamat email anda...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="kangonkdesign" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>

• Simpan dan lihat hasilnya.

Sekarang giliran anda untuk memodifikasi ulang dimana masih banyak yang harus anda ganti, seperti URL facebook, twitter dan RSS milik anda.

Selamat mencoba dan semoga kesuksesan berpihak pada kita semua. amin

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: