TUTORIAL MEMBUAT WIDGET SUBSCRIBE YANG MENARIK

Hampir kesemua orang mahukan yang ringkaskan? widget yang ringkas, kemas malah bergaya dan  menarik untuk blog blogspot dan wordpress anda. . ENtri kali ini bro nak kongsikan kepada anda subscribe widget yang menarik untuk blog anda.Mudah sahaja untuk diedit  dan memberikan anda kepuasan dari segi kekemasan dan pastinya akan menarik pelawat untuk subscribe.Oleh itu, jom ikuti langkah-langkah yang bro nak tunjukkan ini..

 Tip: Copy kod di bawah dan paste didalam editor link di bawah ini untuk melihat demo.

Live Demo

Menambah widget kotak Subscription Yang Cantik

Anda hanya perlu meletakkan kod yang diberi di widget blog anda.Baca dengan teliti dan ikut langkah yang diberi untuk menambah widget ini pada blogspot dan wordpress anda.

Muat naik ke  Blogger

1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box.
5. Save the gadget.
6. Drag the gadget and reposition it under Blog Posts gadget.
7. Click Save button (top right hand corner).

Muat naik ke WordPress

1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.

Note: jika widget ini tidak berfungsi seperti yang anda harapkan di blogspot dan wordpress anda,   download kod ini  dan letakkannya sebagai WIDGET sebaga ganti sperti kod di bawah.

<style>
.abt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdh-S5COEobkP2mttB8pWvVuuAuq9F1d4Izh-CSb02xcfVThUtz0JgG_uW7WnmdS5PzOv8o0THG-jsSVomWbmcc8G9Di1gRu3yPiFsv_VofHUTRhFtHOk67i6G0uZ5NBSUagLbMlMMao/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
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; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class=’abt-email’>
Subscribe via 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=AllBloggingTips’, ‘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=”SempoiCornerTutorial” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/>
<input class=’abt-emailsubmit’ value=”Submit” type=”submit” />
</form>
</div>

Sekarang,buat perubahan dalam kod ini

• Tukarkan http://feedburner.google.com/fb/a/mailverify?uri=Sempoi Corner Tutorial dengan  Feedburner Email Feed link anda. Anda boleh mendapatkannya  dengan membuka feedburner account anda dan kemudian navigate ke Publicize dan  Email Subscriptions.
• Tukatkan Sempoi Corner Tutorial dengan tajuk feed anda. Ia dapat dilihat pada penghujung feed link anda. Contoh http://feedburner.google.com/fb/a/mailverify?uri=tajuk feed anda

Save and view blog anda untuk melihatnya showcasing live!