As we know everybody is in hurry so many times visitors like your post but don't click on like button. This is due to a non attractive widget or wrong placement of your widget. I like this widget very much and would recommend everyone to use it on their blogs/websites. I have removed each and every error from the code and tested it on my other blogs, you can see a demo of this widget by clicking the demo link given below:
The installation and customization of this widget is very easy. You can install this widget to your blog by following the easy steps given below:
- Log in to you Blogger Account.
- Then go to Template >> Edit HTML.
- And then search this code:
<data:post.body/>NOTE: This code appears three times in your template's Edit HTML section, so you have to find the second one. And if it doesn't work then find the third one.
- Then copy and paste the below code just below/after it.
<b:if cond='data:blog.pageType == "item"'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg5sX3isRKJJFKns7sLla86kuWx1ns9qYWTthaqtre9RQpittVpBq5R2BADaRPdmH5DXwxQGTCFkBexwWaWnRDMAjN-9uRHw4lWg-IJ_qMAnEkRKwA-RbTA9ZZ13a-deVgYbMhl7YVHSQf/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
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;
}
.mbtbutton{
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='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: Lucida Fax,arial,sans-serif, verdana; color: red;'>Do You Like This Article?</span>
<tr>
<td>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-href="http://facebook.com/thebravesandsmarts" data-width="300" data-show-faces="true" data-send="true"></div>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Subscribe To Free Email Updates !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=btsnts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='thebravesandsmarts'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4a_0gSc7-P9IgbJ0lIUow_rRzCQ8L1wKgeXS1JQ6xidDkhoqTmTM8xR5aTWH85e51SxIiPTOA8s9H4bs1SJHoww97vCStSH3pLgyh2Fo-BeWF84klQQiW2MA_q7Ku5dY19bzl-NoefMr/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/TheBrvsAndSmrts' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcJsY00TFS9z1Ur8surSgixswYtT9bo2cmWx358DyG-CMOSrelQ5_wq0gU4C7zunKoWxQdl1EThiUj26s-hWrcdVzd1EX9EoElqSPlthCLfRErnygpX8ClWHjbvfSVKAImVmoLI05sSI5/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/thebravesandsmarts' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz72fa8j25sxmxLZRSEK4ZTnGP1XYTPm6Gg_5c36IT0MBqG5MhvyEQJWEYokwkzqiLlBM38RNdbfgGlPRBMjDwpFD2Vz_5NnTMycNuqahzPbv1VTOzn3Pg9ufSwEOF05XL9kGIx-XKpa9z/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table>
*Don't forget to click the confirmation link( in your email) to verify your entry!
</div></div>
</b:if>
- Then Save your template and you are done.
Major/Necessary Customizations:
- Replace the text in red color with your Facebook page id .
- Replace the text in green with your Twitter username .
- Replace the text in sky blue with your Feedburner id .
Some Other Customization:
These are not necessary but if you want then you can change this widget according to your requirements:
- To change the background color pf the widget just replace the text shown in pink with default color names or HTML color codes .
- To change the width of the widget just change the pixels value in yellow .
- To change the background color on hover or mouse over just replace the HTML color code in light grey with your HTML color code or with default color names .
- To change the font style just remove the text italic shown in grey color .
- To change the font size just replace the pixel values shown in orange .
- To change the font family just replace the text Lucida Fax shown in pink with your desired font family for Eg. Arial, Lucida Handwriting etc .
- If you want to change the default Text with your own then simply replace "Do you like this article ?" shown in purple .
- If you want don't want to show faces and Facebook send button then replace the text "true" with "false" shown in blue . Also if you want to change the length of Facebook button widget then just change the value shown in blue color .
- If you want to replace the text "Get subscribe to free email updates", simply replace it with your own text shown in light/faded red color .
0 comments:
Post a Comment