සුපුෂ්පිත සොෆ්ට්: අථත් Subscribe Box එකක් බ්ලොග් එකට දාගන්න..

අද මම ඔයාලට දෙන්නේ ලස්සන අථත් Subscribe Box එකක්. ඒ වගේම මේකෙ Facebook, Twitter, Feed burner වල ඔබගේ පේජස් වලටත් පහසුවෙන් යන්න පුථවන්.

ඇත්තටම බ්ලොග් එකට ට්‍රැෆික් ගැන බලනකොට බ්ලොග් එකට Subscribe Box එකක් තිබීම අනිවාර්යයි. එතකොට අපි දාන අථත් පෝස්ට් අපිව Subscribe කරලා ඉන්න අයගේ ඊමේල් එකට සෙන්ඩ් වෙනවා. ඉතින් Subscribe Box එකක් නැත්නම් දැන්ම දාගන්න.

Demo of Subscribe Box

1. මුලින්ම Design ක්ලික් කර add gadget > HTML/Java Script එකක් අරන් පහත කෝඩ් එක එතන පේස්ට් කර සේව් කරන්න.

<style type='text/css'>
.mbt a{ 
    color: #6e6e6e; 
    font: bold 12px Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    padding: 7px 12px; 
    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; 
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); 
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); 
    border: solid 1px #dcdcdc; 
    border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
} 
.mbt 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); 
}
.mbt a:active { 
    color: #000; 
    border-color: #444; 
}

.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}
.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{
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); 
}
 
.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;  
    -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); cursor:pointer; 
}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{ 
border: solid 1px #dcdcdc; 
    background: #F3F3F3; 
   font-family:Helvetica, Arial; 
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px; 
  border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
}
 
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{ 
border: solid 1px #dcdcdc; 
    background: #F3F3F3; 
   font-family:Helvetica, Arial; 
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px; 
  border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
}
</style>

<!--[if IE 8]> <style> 
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{ 
border: solid 1px #dcdcdc; 
    background: #F3F3F3; 
   font-family:Helvetica, Arial; 
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px; 
  border-radius: 2px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
}
 
 
</style> <![endif]-->
 
 
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;"> 
<table><tbody><tr>
<td> 
<a   href="ADD-FEEDBURNER-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6eizeyc4v-LMUS8sd3cirwGClozX5ou7y_LZ8RSvOz5cUtgQ_Vto6F5XuWOmxw7rWVJQceET3UZ2R7tZDPJejtD4QyezgDg4zUaYG4XXIvCHEcaep9cJkNB1SBwQahtFNchSzuw0_mik/s1600/rss.png" border="0"></a> 
</td>
<td>
<a style="margin-left:5px;"href="ADD-TWITTER-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvm7hIVgJIQjyTUQGtcgD3_cHo9ji9OgXBzcA4Djy39FgpAQ-8ugpVkQzuEl4WqQ0r4-2Ltn36Hiwc0MSqE5yjjUZxF6Du1XfHb15cnngEZsDg8XjxPCFGU0jtDeChsel9XJoeLCZ2IM/s1600/twitter.png" border="0"></a> 
</td>
<td> 
<a style="margin-left:5px;"href="ADD-FACEBOOK-FAN-PAGE-LINK-HERE" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXG6vzn3wssunwqvjUsfXZINZf_Y3_ix7njoRSJKtHAmEmaTpI20QRSzorbLbOWceGWbqdTLJe46ZvIazZLcaPBqAy8i94eWKXJ920n6AdzfF3dpPsgc0uR_8ZHjQEd-a5VVzF_S58RZs/s1600/facebook.png" border="0"></a> 
</td>
</tr></tbody></table> 
<div class="mbtbar"> 
<div class="emailsub"> 
<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=supushpithasoft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Submit email...&#39;;}" onfocus="if (this.value == &#39;Submit email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="supushpithasoft" name="uri" type="hidden" /><input value="Subscribe" class="joinemailupdates" type="submit" /></form></div></div></div></div>
</div>

සැලකිය යුතුයි : උඩ කෝඩ් එකේ ADD-FEEDBURNER-LINK-HERE කියන තැනට Feed burner ලින්ක් එක දෙන්න. ADD-FACEBOOK-FAN-PAGE-LINK-HERE කියන තැනට Facebook ෆෑන් පේජ් ලින්ක් එක දෙන්න. ADD-TWITTER-FAN-PAGE-LINK-HERE කියන තැනට Twitter ෆෑන් පේජ් ලින්ක් එක දෙන්න. කියලා තියන තැන් 2කටම Feedburner Email Title එක දෙන්න.
උදාහරණ: සුපුෂ්පිත සොෆ්ට් හි Feedburner Email ලින්ක් එක
http://feedburner.google.com/fb/a/mailverify?uri=supushpithasoft
ඔය Feedburner Email ලින්ක් එක හොයාගන්න Blogger වල Add gadget වල තියන Follow by Email Widget එක Add කරගෙන හොයාගන්න පුථවන්. ලින්ක් එක හොයාගත්තට පස්සේ ඒ Follow by Email Widget එක අයින් කරලා දාන්න.
ලින්ක් එක හොයාගන්න බැරි වුණොත් කියන්න..

දැන් වැඩේ හරි. සුපුෂ්පිත සොෆ්ට් වෙත පැමිණියාට ස්තූතියි..

Code from mybloggertricks

සුපුෂ්පිත සොෆ්ට්

Friday, December 2, 2011

අථත් Subscribe Box එකක් බ්ලොග් එකට දාගන්න..

1 comment: