Wordpress memang mempunyai tampilan yang lebih clean atau lebih rapi dibandingkan blogger, contohnya saja widget-widget yang disediakan dari wordpress lebih rapi tampilannya dibandingkan dengan blogspot, tapi mengapa banyak orang yang lebih suka menggunakan blogspot dibandingkan wordpress??

MWcrew akan memberikan sedikit ilmu mengenai membuat Wordpress Subscription Box di blogger. Widget ini mempunyai tampilan yang lebih rapi dibandingkan widget subscription dari blogspot. Oleh karena itu MWcrew akan memberi cara untuk membuatnya di blogger, widget ini dibuat oleh sobat saya Mohammad Mustafa Ahmedzai dan saya menggabungnya dengan kotak subscription milik saya sehingga jadinya seperti di bawah ini....

Preview :


Untuk membuatnya sangatlah mudah, buatlah widget baru Html/Javascript dan masukkan kode dibawah ini

<style>

.mbt-email{
background:url() no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 0px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#58ACFA
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:200px;
color:#666;}


mbtbar{width: 100%; float: left;}

.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: transparent; height: 30px; line-height: 30px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}

.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 270px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}

.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVmrHmV9NSPhOSdS7Qe3_esgLU48VIbiZmLSLvid4xxMm5p8NQUF81ITTUs7iCrtWDAfl1gC7u0uycP75dJRaaGaIkux388fj0jcqAG6UVn-h3uOMOkl65Jmj6R3WGIep4cbnSLe-OuI/s400/rss.png) no-repeat left center; min-width: 10px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1yIuUwDB68LIRkuSm5tfIonsCWHKzgVXbpM5rgE3QO8q1bktpy9CKN5JiODFs_viseivaJPMCe_cA_fdfMaNIZRNOjB8DD7nMyN-HmLbPxK5YumwR1i9mP10wqsr6UVzmGY1rE4TZwM/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNzT7fdi6Pcr8_GORZCI-5dnTAlTiAnZ3OBIT4RqCMAK1JTb1Yn2etp4O2zNpCflNdZsOhwegD2uTTBtWN-6Kq5gAmXhb89kzS0BYGeTal6sQo22NXP8BtPUpoDz8xXR-IbnNBsh33ww/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7OhUEHnG_BtFLuLtZ5X0J7_512glecvvjMHwHfPqpWZLO4Rh-IH8_LosJfyvNRL1_dD2tpPlXn3BNbD1oYjpEDbCI_9ZtxPnAPcUuBxJXiFDWKcapnBgayfR-b_zyZptWjjP16vWpa8/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
</style>

<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
</style>
<![endif]-->

<div class="mbtbar"><div class="count">Learn Free Pro Tips n Triks daily</div><div class="subicons"><div class="rssicon"><a href="http://mwcrew10.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/MWcrew" target="_blank" rel="nofollow">Fb</a></div><div class="twittericon"><a href="http://twitter.com/wafiezpunk" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>

<div class="mbt-email">

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MuhammadWafi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Muhammad Wafi" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
<div style="padding-left:10px"><a href="http://feeds.feedburner.com/MuhammadWafi"><img src="http://feeds.feedburner.com/~fc/MuhammadWafi?bg=FF9900&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners" height="26" width="88" style="border:0" alt="MWcrew" />
</a></div></div></div></div>

Note :

• Sesuaikan kode yang berlatar kuning dengan ID masing-masing akun jejaring sosial anda dan ID feed burner anda

Jangan lupa untuk disimpan..

Happy Blgging...



"MWcrew"