Wednesday, April 17, 2013

Beranda » , , , , , , » Add "Subscribe Us" Widget Below Each Blog Post

Add "Subscribe Us" Widget Below Each Blog Post


Many bloggers and webmasters are creating different blogs/sites every day to share either their knowledge or experiences with the world or to run a blog/site as business and earn money. But whatever a blog/site is about, there is an important thing from every blogger point of view to make strong and regular readership and fan following for their blog or website. Different bloggers and webmasters use different tools and widgets to make it easier for their followers to subscribe them via email or follow them on social networks, like Facebook, Twitter, Google+ etc. Since these widgets playing an important role, so here i am going to share with you another cool “SUBSCRIBE US” widget, which u can use below each blog post for your readers to keep in touch with you.    


To add the widget, follow the steps below:
  1. Login To Your Blogger Dashboard. 
  2. Go To TEMPLATE
  3. Backup Your Template. (Click Here To See, How?)
  4. Click “EDIT HTML”
  5. Find The Following Line By Pressing Ctrl+F:

    <data:post.body/>

  6. Just below the <data:post.body/> line, paste the following code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fieldset style='border:1px dashed #444;'>
<legend align='left' style='border:1px dashed #444;; padding: 4px 4px; margin- left: 20px;'>Subscribe Us</legend>
<style>
.TVBstyle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAfDho-vs4QBNH9yfT_hHNPF1IbCogWtp7LYv2HDjaKuZP4wOnuMRo2KrwmaGmTay-qDwyue0R65tcMkh4m5JLPnV3cZnDnLuTfJLg9zCJ2aTCSBKVJKfNLYCdBkgaw8HozRGsMcpxc8p/s1600/email_icon.png) no-repeat scroll 4px center
transparent;padding:7px 15px 7px 35px;border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;color:#666;font-weight:bold;text-
decoration:none;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC
inset;}.TVBsubmit{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-
webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4
100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top,
#fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top,
#fbfbfb 0%,#f4f4f4 100%);}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table width='97%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 15px;'>
<p style='color:#444; font-size: 16px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open
(&apos;http://feedburner.google.com/fb/a/mailverify?uri= TutorialsParkAPlaceForTutorialsTipsAndTricks&apos;, &apos;popupwindow&apos;,
&apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TutorialsParkAPlaceForTutorialsTipsAndTricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='TVBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value ==
&quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text/' value='Enter your email'/>
<input alt='' class='TVBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#444; font-size: 16px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=TutorialsParkAPlaceForTutorialsTipsAndTricks' rel='nofollow' target='_blank' title='Suscribe to
RSS Feed'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJq-FvZL0-BTeWd7vEqXvzgMxPSPMh384cCAn8XIj2rH7nRi-j_FgrHh9CBTt5k5v_m7zQHAeR6BrQBLL7acBZPAk5PClZ9MXGZePFam55RSfU9CMWIEcraPr5UIRteTd4SHhs8A-eU-D/s1600/rss.png'/>
</a>
<a href='http://twitter.com/tutorials_park' rel='nofollow' target='_blank' title='Follow us on Twitter'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0U5J6UJ21c1C6kH5oFIZE1rW90btKWS0-RpS1_1YfdIN86G8Yn_wwZ3LJ5v0MVutUJrKUqSC-Aho2scBJVzYroBX-75tGZtucwdMgI7mrKycFl3tLLhdIHdJKRi7mnY30LtVLbsXMLI1/s1600/twitter.png'/>
</a>
<a href='http://www.facebook.com/tutorialspark9' rel='nofollow' target='_blank' title='Follow us on Facebook'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOL0TzKr8y6velvCyuMxD5F_nHJK53CbbG8dtCjkvv8DS2m-lkQUNS8lHoNnltA-oXdDDiOk83cJJOxiZkrJ0ix47JYsITDpwIj3AenGuhq8LrFP4Z-Zt3g4ZOFkl9Hu241orqdWa2Li8/s1600/facebook.png'/>
</a>
<a href='https://plus.google.com/b/113842220389231923166/113842220389231923166/posts' rel='nofollow' target='_blank' title='Follow us on Google+'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvg3OtNBws6Ag_IObBhcFMpXwq_kqndjpmwPR3Vo2OeKEYVDNO4q0K6D9pytbyi-mITqsHetLp3DkhuNnJWz77CHW2Xc8wxmDzzMqrHw_YA_BGRZgJGw3pMEBmh3i1M52nmY35WxPegMD/s1600/gplus.png'/>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
</fieldset>
</b:if>
  1. Click Save Template.

That's it, you are all done. Refresh your blog to see the widget.

Note:    Change "TutorialsParkAPlaceForTutorialsTipsAndTricks" to your own Feed URL.
           
             Change "tutorials_park" to your own Twitter ID.
           
             Change "tutorialspark9" to your own Facebook ID.
           
             Change "113842220389231923166/113842220389231923166" to your own Google+ ID.



- If you like my post, please take seconds to share and don't forget to leave your valuable comments below.