Mash Tricks

How to Add Yahoo Smileys on Blogger Threaded Comments?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="akash" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="Yahoo smileys for Blogger Threaded Comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgacEas36hqk1osLYkVcgheSlAAnGAEqEyahaqWimzwjKqPGoB1sy6shtf831N1OPuphl_5oBCWQzdvCAfJthDRFpVobJyUlxXzN0cARvAOwTXiS21g_ZQbiG8SsmpOKCeeSklvv0QOMW0/s1600/yahoo+smileys.jpg" title="Yahoo smileys for Blogger Threaded Comments" /></div>
<br />
I 'm going to say about how to add yahoo smileys to Blogger Threaded  comments. This is an awesome trick was scripted by an Indonesian Blogger  <a href="http://blog.kangismet.net/2012/01/menambahkan-yahoo-smiley-pada-threaded.html" rel="nofollow" target="_blank">Kang Ismet</a> and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system.<br />
Follow the instructions Below..<br />
<br />
<br />
<a href="http://www.blogger.com/null" name="more"></a><br />
<br />
<br />
<br />
<br />
<div class="demo">
<blockquote class="tr_bq" style="text-align: left;">
<span style="color: magenta;"><span style="font-size: small;"><span style="font-family: "Courier New",Courier,monospace;">To see demo :</span></span></span><br />
<span style="font-size: small;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: red;"><span style="color: magenta;"> Go to Comments OR</span> <a href="http://www.mashtricks.tk/2013/09/how-to-add-yahoo-smileys-on-blogger.html#comments"><span style="color: yellow;">Click Here </span></a></span></span></span></blockquote>
<br />
What's inside this article?<br />
<div align="left">
How to Add yahoo smileys to Blogger Threaded comments in 3 steps..?</div>
<ul style="text-align: left;">
<li><b><span style="color: red;">Step 1: Add CSS code</span></b></li>
<b><span style="color: red;">
</span></b>
<li><b><span style="color: red;">Step 2: Add JavaScript Code</span></b></li>
<b><span style="color: red;">
</span></b>
<li><b><span style="color: red;">Step 3: Add HTML code</span></b></li>
</ul>
</div>
<ul style="text-align: left;">
<li>Go to <a href="http://www.blogger.com/" rel="nofollow" target="_blank">Blogger</a> Account</li>
<li>Go to <b>Template</b> -> <b>Edit HTML</b> [click <b style="color: #e06666;">Proceed</b>]</li>
</ul>
<br />
<blockquote class="tr_bq">
<h2 class="h2title" id="addcss" style="text-align: left;">
<span style="color: red;">Add CSS code</span></h2>
</blockquote>
<ul style="text-align: left;">
<li>Find <b>]]></b:skin></b>   [<span style="color: red;"><a href="http://www.blogger.com/null" target="_blank">easily find Ctrl + F</a></span>]</li>
</ul>
<blockquote class="tr_bq">
<div class="code">
img.bhacksmly {<br />
    height: auto !important;<br />
    vertical-align: middle !important;<br />
    width: auto !important;<br />
    border:0px !important;<br />
}</div>
</blockquote>
<br />
<blockquote class="tr_bq">
<h2 class="h2title" id="javascriptcode">
<span style="color: red;">Add Javascript code</span></h2>
</blockquote>
<ul style="text-align: left;">
<li>Find <b></body></b> and copy the below code just above it.</li>
</ul>
<blockquote class="tr_bq">
<div class="code">
<script src='https://netoopscodes.googlecode.com/svn/branches/Js  files/ysmiley threaded comments-min.js' type='text/javascript'/></div>
</blockquote>
<ul style="text-align: left;">
<li>  Save the template <div style="background: -moz-linear-gradient(center top , #FDA352, #FB8F3D) repeat scroll 0 0 transparent; border-radius: 3px; color: white; float: left; padding: 2px 5px;">
Save Template</div>
</li>
</ul>
<blockquote class="tr_bq">
<h2 class="h2title" id="htmlcode">
<span style="color: red;">Add HTML code</span></h2>
</blockquote>
<ul style="text-align: left;">
<li>Check <b>Expand Widget Templates</b></li>
<li>Find<b> <div class='post-footer-line post-footer-line-3'></b></li>
<li>Find the next <b></b:includable> </b>and<b> </b>copy the code above it</li>
</ul>
<blockquote class="tr_bq">
<div class="code">
Example<br />
 </div><br />
.<br />
<span style="color: red;"><b>Place code here </b></span><br />
<br />
<br />
</b:includable> </div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Copy the below code above <b></b:includable> </b></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<blockquote>
<h4 style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></h4>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><div class='netoopsblogysmile' id='ysmile' style='</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;">background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"><img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^</span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></div><a href="http://www.mashtricks.tk"></a></b:if></span></span></div>
<h4>
<span style="font-size: x-small;"><span style="font-family: Times,"Times New Roman",serif;"></span></span></h4>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"></span></blockquote>
<ul style="text-align: left;">
<li>Save the Template</li>
<li>That's all</li>
</ul>
</div>

How to Add Yahoo Smileys on Blogger Threaded Comments?

I 'm going to say about how to add yahoo smileys to Blogger Threaded comments. This is an awesome trick was scripted by an Indonesian Blogger Kang Ismet and I think he did a very good job for us. This Blogger hack works with New Blogger Threaded commenting system. Follow the instructions Below.. …

19Sep2013

How to Add Automatic Read More TRICK for Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKK_fmj2XZ7Ss26k4I25SVGSBVWxdv5JeeCemTZ3TqL-sGr7NoYnrz353BAAiP2SCrLroXH5_uRa5snkcXssLuf1hhETcpWVVzGM-qcxNRHDrxoykz5Igy0_nckTV3F_xTAa7RcZHxcw/s1600/automatic-read-more-hack-blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKK_fmj2XZ7Ss26k4I25SVGSBVWxdv5JeeCemTZ3TqL-sGr7NoYnrz353BAAiP2SCrLroXH5_uRa5snkcXssLuf1hhETcpWVVzGM-qcxNRHDrxoykz5Igy0_nckTV3F_xTAa7RcZHxcw/s1600/automatic-read-more-hack-blogger.jpg" /></a></div>
Read More button or jump link is used cut the full article into two  pieces and First piece of Text and images display in the Homepage. When  you create a post may be it includes long snippets and images that are  too long, then what should you do? You have to add <b></b>  or click on Jump link to separate. Here I am going to show you how to  Automatically put read more to Blogger posts. In this Automatic read  more hack everything is automatic and you need not bother about the too  long length of posts.Let us see how to do it..<br />
<br />
<a href="http://www.blogger.com/null" name="more"></a><br />
<br />
<div class="demo">
<br />
<blockquote class="tr_bq">
<b><span style="font-size: large;"><span style="font-family: "Trebuchet MS",sans-serif;">Features are</span></span></b></blockquote>
<ul style="text-align: left;">
<li>You can also limit the length of post</li>
<li>Set the size of Image, height and width separately</li>
<li>Disable Image</li>
</ul>
</div>
<ul style="text-align: left;">
<li>Sign In to Blogger Dashboard</li>
<li>Go to <b>Template</b> -> <b>Edit HTML</b></li>
<li>Find <b></head></b></li>
<li>copy the following code above it</li>
</ul>
<blockquote class="tr_bq">
<script type='text/javascript'><br />
var thumbnail_mode = "no-float" ; <br />
summary_noimg = 400;  <span style="color: red;"><b>/* Summary length if no image*/</b></span><br />
summary_img = 300; <span style="color: red;"><b>/* Summary length with image*/</b></span><br />
img_thumb_height = 200; <span style="color: red;"><b>/*Image Height*/</b></span><br />
img_thumb_width = 200; <span style="color: red;"><b>/*Image Width*/</b></span><br />
</script><br />
<script type='text/javascript'  src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js'  ></script></blockquote>
If you add CSS codes to style jump link in your blog, then <a href="http://netoopsblog.blogspot.com/2013/08/add-automatic-read-more-trick-blogger-blogs.html#">See the Update</a><br />
<ul style="text-align: left;">
<li>Then Find (Ctrl+F)  <b><data:post.body/> </b>and replace it with the following code</li>
<li>If you find more than one <b><data:post.body/></b> replace all occurrences. </li>
</ul>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<div expr:id='&quot;summary&quot; + data:post.id'><br />
<data:post.body/><br />
</div><br />
<script type='text/javascript'><br />
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);<br />
</script><br />
<div style='clear: both;'/><br />
<span class='rmlink'  style='font-weight:bold;padding:5px;float:right;text-align:right;'><a  expr:href='data:post.url' >Read more...</a></span><a  href="http://netoopsblog.blogspot.com"><span class="nodeLabelBox repTarget " role="treeitem"><<span class="nodeTag ">img</span><span class="nodeAttr editGroup "> <span class="nodeName editable ">src</span>="<span class="nodeValue editable ">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshEU8UJq6BeV-UgxD-FDvrvi1iyqy-r2k1-I0bZhd0iA8SWl2t0dKcj-X1os1Ud1GAxc8CrBo-S0SW-53QD-uHmeGNJj9PRHJhwAPFTGcty_17gQsZvte4Dg_wjU95o2ir7aaCqko304/s1600/1x1juice.png</span>"</span><span class="nodeBracket editable insertBefore ">></span></span></a><br />
</b:if><br />
</b:if></blockquote>
<ul style="text-align: left;">
<li> Save Template.</li>
</ul>
<blockquote class="tr_bq">
<h4 style="text-align: left;">
<span style="font-size: large;"><span style="font-family: "Trebuchet MS",sans-serif;">UPDATE [new!!]</span></span></h4>
</blockquote>
 In the above code, only a simple link to the post shows in the  homepage. If you want to style that link or did you add css codes to  style the jumplink, then add the following code instead of the above.<br />
<ul>
<li>Then Find (Ctrl+F)  <b><data:post.body/> </b>and replace it with the following code</li>
<li>If you find more than one <b><data:post.body/></b> replace all occurrences. </li>
</ul>
<blockquote class="tr_bq" style="font-size: 15px; font-weight: normal; text-align: left;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<div expr:id='&quot;summary&quot; + data:post.id'><br />
<data:post.body/><br />
</div><br />
<script type='text/javascript'><br />
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);<br />
</script><br />
<div style='clear: both;'/><br />
<div class='jump-link'><a expr:href='data:post.url'  expr:title='data:post.title' >Read more...</a></div><a   href="http://netoopsblog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshEU8UJq6BeV-UgxD-FDvrvi1iyqy-r2k1-I0bZhd0iA8SWl2t0dKcj-X1os1Ud1GAxc8CrBo-S0SW-53QD-uHmeGNJj9PRHJhwAPFTGcty_17gQsZvte4Dg_wjU95o2ir7aaCqko304/s1600/1x1juice.png"></a><br />
</b:if><br />
</b:if></blockquote>
</div>

How to Add Automatic Read More TRICK for Blogger Blogs

Read More button or jump link is used cut the full article into two pieces and First piece of Text and images display in the Homepage. When you create a post may be it includes long snippets and images that are too long, then what should you do? You have to add or click on Jump link to separat…

19Sep2013

Awesome Multi-Colored Popular Posts Widget for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title">
</h2>
<div class="post-header">
</div>
<div class="akash" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3X0D_-gIofd3YPLMSkrsZ09durG9MwQ_ldO-OZPs7QWogVw060dd3jleHVtrpO2rgE21cLr9Qo_fh-O9HcmfJ6xa-sEyWoQ9cyvfDOn5kLxubFI2dX4yg723ygH0TkKmaQeIH-LBYFU8/s1600/popular-posts.jpg" /></div>
Popular  Posts Widget is a Widget providing by Blogger and we can add it to our  Blog. This Widget displays the Most viewed posts of your blog, that may  be of Month or in Week or All the time. You can select how Popular posts  are to be displayed.By default it shows an image(if the post has) and  Title of Post followed by the content of post wrapped by 20-25 Words.  This article is a tutorial to Style that Popular posts Widget to an  Awesome Multi - colored Popular posts Widget. This trick is done using  simple CSS3 rather than using complex JavaScripts. A great feature of  this trick is each Post shown in each Flat UI color, so these colors  catches your Blog visitor's eyes and they have the tendency to take that  post even if the Post is not so good.<br />
<br />
<a href="http://www.blogger.com/null" name="more"></a><br />
<div class="demo">
<blockquote class="tr_bq">
Demo shows in bottom right side  <span style="font-size: 41px;">→</span><br />
Features of this Widget</blockquote>
<blockquote class="tr_bq" style="text-align: left;">
<ul style="text-align: left;">
<li><blockquote>
Flat UI colors used (it will attract users attention)</blockquote>
</li>
</ul>
<blockquote>
</blockquote>
<ul style="text-align: left;">
<li><blockquote>
Automatic Post Numbering</blockquote>
</li>
</ul>
<blockquote>
</blockquote>
<ul style="text-align: left;">
<li><blockquote>
CSS3 Hover Animation </blockquote>
</li>
</ul>
</blockquote>
</div>
<br />
<h4 class="notice">
Sign in to your Blogger Account and Active Popular Posts Widget </h4>
<br />
<ul style="text-align: left;">
<li><b>First Add Popular post Widget to Blogger</b></li>
<ul>
<li>Go to <b>Layout</b> -> Select <b>"Add a Gadget"</b> and take Popular Posts Widget from the Widget List appear.</li>
<li>Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save </li>
</ul>
<li>Go to <b>Template</b> -> <b>Edit HTML</b>, Find ( <a href="http://netoopsblog.blogspot.com/2012/01/use-search-bar-find-code-blogger-blog.html" target="_blank">Ctrl + F</a> ) <b>]]></b:skin></b></li>
<li>Copy the following code and Paste just above it</li>
</ul>
<blockquote class="tr_bq">
<div class="code">
<br />
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}<br />
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}<br />
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}<br />
#PopularPosts1 ul li:first-child:after{content:"1"}<br />
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}<br />
#PopularPosts1 ul li:first-child + li:after{content:"2"}<br />
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}<br />
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br />
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}<br />
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br />
#PopularPosts1 ul li:first-child:after,<br />
#PopularPosts1 ul li:first-child + li:after,<br />
#PopularPosts1 ul li:first-child + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br />
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +  li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}<br />
#PopularPosts1 ul li  .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}<br />
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}<br />
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}<br />
#PopularPosts1 img{<br />
-moz-border-radius: 130px;<br />
-webkit-border-radius: 130px;<br />
border-radius: 130px;<br />
-webkit-transition: all 0.3s ease;<br />
-moz-transition: all 0.3s ease;<br />
transition: all 0.3s ease;<br />
padding:4px;<br />
border:1px solid #fff !important;<br />
}<br />
#PopularPosts1 img:hover {<br />
border-radius: 0 0 0 0;<br />
-moz-transform: scale(1.2) rotate(-711deg) ;<br />
-webkit-transform: scale(1.2) rotate(-711deg) ;<br />
-o-transform: scale(1.2) rotate(-711deg) ;<br />
-ms-transform: scale(1.2) rotate(-711deg) ;<br />
transform: scale(1.2) rotate(-711deg) ;<br />
}<br />
</div>
</blockquote>
<br />
<ul style="text-align: left;">
<li>Click on Preview Template (You can see the template without saving)</li>
<li>Save the Template.</li>
</ul>
View Your Blog it is ready to attract users. I think this article  will help you if so please share and Like us to spread our Blog.<br />
If any problems with this trick don't hesitate to ask, do comment here...</div>

Awesome Multi-Colored Popular Posts Widget for Blogger

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and …

19Sep2013

Animated Page Loading Effect for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfnbe1hjBno1ux3wh1l05nioNAopQaIR66QESva44VauMYT1uAJfYdAqa8jzXnOuhV3wt8ix0J8lQWc92kgiqrJB5T7GHRna19F0xap6lQnWTq_G7_mqNwW-Yx5nhIbqWyXXAaGMHahIh/s1600/Page+Loading.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfnbe1hjBno1ux3wh1l05nioNAopQaIR66QESva44VauMYT1uAJfYdAqa8jzXnOuhV3wt8ix0J8lQWc92kgiqrJB5T7GHRna19F0xap6lQnWTq_G7_mqNwW-Yx5nhIbqWyXXAaGMHahIh/s320/Page+Loading.png" width="320" /></a></div>
Every blogger wants his blog to look best among his competitors blogs.  This widget will add a bit more chunks of awesomeness in your blog.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
The concept of this widget is simple. This is more or less like Exit  Effect we add in Microsoft Powerpoint's Custom Animation. Just like that  whenever the visitors will click any link to leave the current page,  inspite of the old boring loading it will have animation.</div>
<div style="text-align: justify;">
</div>
<br />
<ins style="border: none; display: inline-table; height: 90px; margin: 0; padding: 0; position: relative; visibility: visible; width: 728px;"></ins><br />
<div style="text-align: justify;">
A live demo can be seen on my blog itself. Just click any link here and you could see the change.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
To add this effect to your blog do the following things.</div>
<h4 style="text-align: left;">
</h4>
<h4 style="text-align: left;">
<span style="color: red;">Adding the HTML and Script</span></h4>
Add the below given code just above <b></body></b>.<br />
<blockquote class="tr_bq">
<style><br />
#abt-page-loader {<br />
        position: fixed!important;<br />
        top: 0;<br />
        right: 0;<br />
        bottom: 0;<br />
        left: 0;<br />
        z-index: 9999;<br />
        background:#000  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6B8LHBb1zbPeyYj0RvfX6gpWboycyB1J4eUKHIjcG5R47YIGMUKykcma9K9IH_XeApc3x7qNdK-NiqPx3-Tgwz9mmzKy_c9Cka8GbWgfx1nNnQMeoFBIGQn-I8WkLYOBg_PrnVUWrRM/s200/load6.gif')  no-repeat 50% 30%;<br />
        color: #FFF;<br />
        display: none;<br />
        font: 0/0 a;<br />
        text-shadow: none;<br />
        padding: 1em 1.2em;<br />
}<br />
</style> <br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document.body).append('<div id="abt-page-loader">Loading...</div>');<br />
$(window).on("beforeunload", function() {<br />
    // ... Show the Animation `.fadeIn()`<br />
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);<br />
});<br />
//]]><br />
</script></blockquote>
<br />
After adding this code, save the template.<br />
<br />
You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.</div>

Animated Page Loading Effect for Blogger

Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog. The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the vi…

19Sep2013

Awesome Google Contact Form Widget for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s1600/Contact+Us.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s320/Contact+Us.png" width="320" /></a></div>
Today I am going to show you how you can add a really awesome and cool looking <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Contact form</a> in a page of your blogger blog. This contact form looks really elegant and is very eye-catching.<br />
<br />
This contact form inspired from Bloggertut works on CSS and has a very  rich feel in it.  You can make your Contact page more awesome by adding  this widget to one of your blog's pages. A live working demo of this  widget can be seen by clicking the below button.<br />
<br />
<br />
<blockquote class="tr_bq">
<div style="text-align: center;">
<a href="http://www.soundmix.tk/p/contact-us.html" target="_blank"><span style="font-size: large;"><b><span style="color: #38761d;">Live Demo </span></b></span></a></div>
</blockquote>
<br />
<br />
After seeing the demo if you wish to add this contact form in your blog then follow the steps below.<br />
<br />
<br />
<h4 style="text-align: left;">
Step 1 : Adding the Contact Form</h4>
<br />
First of all add a Contact form widget to your blog. To do so go to my post <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Official Contact Form Widget released for Blogger</a>.<br />
Do not worry about that the widget will be visible everywhere on the  blog and our motive is to show contact us form only on a particular  page. We will fix it in the second step.<br />
<br />
<h4>
Step 2 : Adding the CSS</h4>
<br />
Once you have added the Contact form widget go to Blog Title → Template →  Edit HTML. Now add the below given CSS code just above <b>]]></b:skin></b> .<br />
<br />
<blockquote class="tr_bq">
#ContactForm1{<br />
display:none;<br />
}<br />
#contact_wrap {<br />
margin: auto;<br />
width: 321px;<br />
height: 380px;<br />
padding: 25px;<br />
border-radius: 1em;<br />
border-top:1px solid #dbdbdb;<br />
border-right:1px solid #b2b2b2;<br />
border-left:1px solid #dbdbdb;<br />
border-bottom:1px solid #9d9d9d;<br />
background-color:#cccccc;<br />
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');<br />
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br />
box-shadow: 1px 1px 5px #ccc;<br />
}<br />
#contact_wrap h3{<br />
color: #e8f3f9;<br />
font-family:Georgia;<br />
font-size: 20px;<br />
font-style:italic;<br />
font-weight:bold;<br />
margin: 0 -36px 20px -36px;<br />
padding: 12px;<br />
text-align: center;<br />
text-shadow: 2px 0 0 #1f4962;<br />
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
background-color: #3689b9;<br />
position: relative;<br />
}<br />
#contact_wrap h3:before {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
left: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 10px 0 0 10px;<br />
border-color: #333 transparent transparent transparent;<br />
}<br />
#contact_wrap h3:after {<br />
content: ' ';<br />
position: absolute;<br />
bottom: -10px;<br />
right: 0;<br />
width: 0;<br />
height: 0;<br />
border-style: solid;<br />
border-width: 0 0 10px 10px;<br />
border-color: transparent transparent transparent #333;<br />
}<br />
#ContactForm1_contact-form-name{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background:#f6f6f6  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6nD5LYdQ1BccpWA7f2evHurhhjDXf1Jo8FdhBT5ys6RMVlYjxNeQ7eF1nbtoTt5Cdlsxc2rGu8Fqa6Ve-b8LQtKrg_8UpirUUHoEAB4CpNTWclhUOTEQtwc_qA9Tj27iy732VKhV-cY/s1600/user.png)no-repeat  10px center; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email{<br />
width: 270px; <br />
height:auto;<br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
background: #f6f6f6  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaOde50PXSpikdSeHcrXqIyrLm_lATiKgA1iYIJZRBJdyQDoDbxnHIQa_oh2mDcrwJicQcy23nGw4vD_HElcasE8FA58MGj3d-N0xgZpJ042DgfsrKazcHYHGIA9T4aD053kbzKb_Gs8/s1600/pen.png)no-repeat  10px center; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-email-message{<br />
width: 270px; <br />
height: 150px; <br />
margin: 5px auto; <br />
padding: 10px 10px 10px 40px;<br />
font-family:Arial, sans-serif;<br />
background: #f6f6f6  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6riGAGjFJjrrnW8EPyMEnPhE-AhP1h5EqAqe-zkazWYKaH7HPwkfrQvAw5MOr9lyEBGLTNKMwxlYJSbW0p-GJPg5SJWsV7G24Ch6fgQ0ok_7a4Lc7NN2MwRRlOYcGLJyJwhUt9xZlj0g/s1600/msg2.png)no-repeat  10px 10px; <br />
color:#777;<br />
border:1px solid #ccc;<br />
-webkit-border-radius: 4px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br />
}<br />
#ContactForm1_contact-form-submit {<br />
width: 95px; <br />
height: 30px; <br />
float: right; <br />
color: #FFF;<br />
padding: 0; <br />
cursor:pointer;<br />
margin: 25px 0 3px 0 0;<br />
background-color:#005a8a;<br />
border-radius:4px;<br />
text-shadow: 1px 0 0 #1f4962;<br />
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br />
background-color: #3689b9;<br />
border:1px solid #194f6d;<br />
}<br />
#ContactForm1_contact-form-submit:hover {<br />
background:#4c9bc9;<br />
}<br />
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{<br />
width: 320px;<br />
margin-top:35px;<br />
} </blockquote>
<br />
After adding the code save the template.<br />
<br />
<h4 style="text-align: left;">
Step 3 : Adding the HTML in Page</h4>
<br />
First of all we need to create a new page and to do this firstly go to  Blog Title → Pages → New Page → Blank Page. Page editor will open, now  click on HTML tab and paste the below given code in it.<br />
<br />
<blockquote class="tr_bq">
<div id="contact_wrap"><br />
<h3>Contact Us</h3><br />
<form name="contact-form"><br />
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message"  name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;"><br />
<div id="ContactForm1_contact-form-error-message"><br />
</div><br />
<div id="ContactForm1_contact-form-success-message"><br />
</div><br />
</div><br />
</form><br />
</div><br />
<br />
<style type="text/css"><br />
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}<br />
</style></blockquote>
<br />
After adding the above code, publish the page.<br />
<br />
You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog. </div>

Awesome Google Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool looking Contact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching. This contact form inspired from Bloggertut works on CSS and has a very rich feel in it. You can make your Co…

19Sep2013

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title">
</h2>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
</div>
<div class="akash" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" /></a></div>
<span id="goog_2104566990"></span><span id="goog_2104566991"></span>All of you know about <a href="http://www.google.com/" target="_blank">Google</a> Search bar. You'd see the style of search bar used in <a href="http://www.google.com/" target="_blank">Google</a>. If you didn't see Google search bar either go to <a href="http://www.google.com/" target="_blank">Google</a> or please see the right top of  our blog, you can see a static <a href="http://www.google.com/" target="_blank">Google</a>  search bar. Here is a trick to add this Google search bar to your blog.  This is not the real Google search bar, instead this is a CSS3 styled  search bar using <a href="http://www.blogger.com/" target="_blank">Blogger's</a> search method. If you need <a href="http://www.google.com/" target="_blank">Google's</a> real search bar[but it can't get <a href="http://www.google.com/" target="_blank">Google's</a> search box style] go to <a href="http://www.google.co.in/cse/">http://www.google.co.in/cse.</a> Let's see how to add Google type search bar to your blog...<br />
<br />
<a href="http://www.blogger.com/null" name="more"></a><br />
<div class="demo">
<blockquote class="tr_bq" style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">Demo shows in right top →</span></span><br />
<span style="font-size: small;"><span style="font-family: inherit;">Features....</span></span></blockquote>
<blockquote class="tr_bq" style="text-align: left;">
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">Floating Static (Fixed) Search bar</span></span></blockquote>
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">CSS3 styled search bar</span></span></blockquote>
<blockquote style="text-align: left;">
<span style="font-size: small;"><span style="font-family: inherit;">CSS3 animated</span></span></blockquote>
</blockquote>
</div>
<ul style="text-align: left;">
<li>Go to <b>Layout</b> -> Click on <b>Add a Gadget</b></li>
<li>Select <b>HTML/JavaScript</b> from the list</li>
<li>Leave the <b>Title</b> as Blank and copy paste the following code inside the <b>Content</b> portion</li>
</ul>
<div style="text-align: left;">
<blockquote class="tr_bq">
        <span style="font-size: large;">                    <span style="color: red;"><b>OR </b></span></span><br />
<ul style="text-align: left;">
<li>Sign in to Blogger Dashboard and go to <b>Template</b> -> <b>Edit HTML</b></li>
<li>Search (Ctrl+F) <span style="font-size: medium;"><b><body</b> </span></li>
<li>Copy and paste the following code after it</li>
</ul>
</blockquote>
</div>
<br />
<br />
<blockquote class="tr_bq">
<div class="code">
<br />
    <div class='noop-searchbox' id='noop-searchbox'><br />
      <form action='/search' id='noop-searchform' method='get'><br />
        <input id='s' name='q' onblur='if (this.value ==  &quot;&quot;) {this.value = &quot;Search...&quot;;}'  onfocus='if (this.value == &quot;Search...&quot;) {this.value =  &quot;&quot;}' type='text' value='Search...'/><br />
        <button id='sbutton' type='submit'><br />
          <span id='simg'/><br />
        </button><br />
      </form><br />
    </div><br />
<style type="text/css"><br />
#sbutton {<br />
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%)  repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear,  left top, left bottom, color-stop(0%,#4d90fe),  color-stop(100%,#4787ed));<br />
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br />
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;<br />
border: 1px solid #3079ED;<br />
border-radius: 2px 2px 2px 2px;<br />
color: #FFFFFF;<br />
height: 27px;<br />
min-width: 76px;<br />
padding: 0 21px;padding-bottom: 2px;<br />
}<br />
#sbutton:hover{    background-color: #357AE8;<br />
background-image: -moz-linear-gradient(center top , #4D90FE,  #357AE8);background: -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#4d90fe), color-stop(100%,#357ae8));<br />
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br />
border: 1px solid #2F5BB7;<br />
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}<br />
#simg {<br />
background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXM2pefcG074F5jnMbbE5PY2AH2f8cdEHoZOyAhllLeleGs7VTl6sq3PmcKSrte22k0KnRa_gy0ihZ3a2jgxgKPerQMu0GVq6hb3-8kvGBMzuNombmqGZKMZW0gL4wFXcev1OECeE6Ung/s1600/searchicon.png")  no-repeat scroll 0 0 transparent;<br />
display: inline-block;<br />
height: 14px;<br />
margin: 0;<br />
width: 17px;z-index:101;<br />
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}<br />
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font:  italic 14px times New Roman;padding: 4px 2px;width: 146px;  -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s  ease-in; -o-transition: width 0.2s ease-in;}<br />
#s:focus {width: 200px;}<br />
.noop-searchbox {<br />
display: block;<br />
position: fixed;<br />
right: 0;<br />
top: 1%;<br />
max-width: 300px;min-width: 238px;<br />
z-index: 100;<br />
}<br />
</style><br />
</div>
</blockquote>
<br />
I hope this article will help you. If any problem with this please do comment.</div>
</div>

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

All of you know about Google Search bar. You'd see the style of search bar used in Google. If you didn't see Google search bar either go to Google or please see the right top of our blog, you can see a static Google search bar. Here is a trick to add this Google search bar to your blog. This is …

19Sep2013

Add awesome social sharing widget To Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="float: right; padding: 0px; text-align: left;">
<br /></div>
<div class="akash" style="text-align: left;">
<img align="left" alt="social-sharing" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagDYdvd4IUjX0D8ycJ7tSfUVzIsHmPJn2aiQruGrwUSnz1S_7ZEOJMW0KmRsnfOrGRvgp4_kmspGAHPb5Zpa6DU4SmVrbrRyZCaIYDLnjVexWKyeAors_2TsJLEqmgvAM1Ik_-qOqPn8A/?imgmax=800" style="background-image: none; border: 0px; display: inline; float: left; margin: 0px 0px 0px 5px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Social Sharing Vector" />Now,  Bloggers are aware of the role of social media in making their blog  popular. Almost all bloggers are using the social sharing widgets and  social media following widgets to increase the social media presence of  their blog. Social media plays an important role in according to SEO and  SERP roles. Adding elegant stylish social media bookmarking widget  plays <a href="http://www.myblogger-tricks.com/2013/06/10-tips-to-design-impressive-and.html" target="_blank">very impressive</a>  role to make your blog stylish and looking cool. Every beginner and  professional blogger user wants to have something better and <a href="http://www.myblogger-tricks.com/2013/07/another-stay-connected-metro-style.html" target="_blank">something different</a>  than others. Today I decided to tell you about an simple and effective  social Media Bookmarking Widget that is used by all Professional  Bloggers. This <a href="http://www.myblogger-tricks.com/2013/06/how-to-add-subscription-widget-below.html" target="_blank">beautiful widget</a> can makes your site attractive without effecting your blog or website loading time. Previously we wrote tutorial on <a href="http://www.myblogger-tricks.com/2013/09/add-simple-social-sharing-below-your.html" target="_blank">social media sharing widget</a>  but today we have another social media sharing widget. The Amazing  things for this widget is that, Loading time is  Extremely Fast. You can  check it loading time on live preview by clicking on live preview  button.  Now let’s proceed with the tutorial to add this social media  widget to your blog. Follow the Simple Steps Below.</div>
<div align="justify">
<br /></div>
<div align="center">
<a class="way2button" href="http://drop-down-menu-test.blogspot.com/2013/01/test-post.html#bt-social-share" rel="nofollow" target="_blank">Live Preview</a></div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Add It to blogger</h3>
<ol style="text-align: left;">
<li>Go To Blogger Dashboard > Template > Edit HTML.  Before Editing Your Template Please Make a Backup. </li>
<li>Backup your template. </li>
<li>Search for <span style="background-color: #cccccc;">]]></b:skin></span><b> </b>and just before it give a space and add this code.</li>
</ol>
<blockquote class="tr_bq">
<span style="font-family: inherit;">div#bt-social-share { background:#f3f3f3; width:600px; height: 80px; border: 1px solid transparent; border-radius: 5px; -moz-border-radius: 5px;-webkit-border-radius: 5px; }#bt-social-share ul { list-style: none; clear: none; padding: 0px 0px ; margin: 25px 10px 0 0; float:right; } #bt-social-share ul li { display: inline; background:none; vertical-align:middle; margin:0; padding:0; } #bt-social-share ul li a { display: block; float: left; width: 32px; height:32px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaZEpKhH0SHbDH8c-c0WuMbfuBiIsWRhNdzge717HZTEmxYOsEFFPEvXtJ1B5-snpL_zLzUex_Y3Jul1T8RmPm_uIivZCbP3nj9nLizTXPdh9kbr7rHKuXztrcwye8r370SCW-KwQ5Z1so/s1600/Social_sprites.png); margin-left:3px; background-repeat: no-repeat; margin-right: 2px; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; }#bt-social-share ul li a.facebook {background-position: -0px -0px; } #bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }#bt-social-share ul li a.twitter {background-position: -32px -0px; }#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }#bt-social-share ul li a.google {background-position: -64px -0px; }#bt-social-share ul li a.google:hover{background-position: -64px -33px; }#bt-social-share ul li a.pinterest {background-position: -96px -0px; } #bt-social-share ul li a.pinterest:hover {background-position: -96px -33px; }#bt-social-share ul li a.delicious {background-position: -128px -0px; }#bt-social-share ul li a.delicious:hover {background-position: -128px -33px;}#bt-social-share ul li a.digg {background-position: -160px -0px; }#bt-social-share ul li a.digg:hover {background-position: -160px -33px;}#bt-social-share ul li a.addtoany {background-position: -192px -0px; }#bt-social-share ul li a.addtoany:hover {background-position: -192px -33px;}</span></blockquote>
<br /><div>
4.  Save Changes and jump to the next step of this tutorial.<br /><div style="text-align: left;">
Note:- To change the Widget box size, change this value <b>width: 600px;</b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
5. Now Search for <data:post.body/> And Put Below Code immediately after it!</div>
<blockquote class="tr_bq" style="text-align: left;">
<div id='bt-social-share'><br />
<br />
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span><br />
<br />
<ul><br />
<br />
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li><br />
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li><br />
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li><br />
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li><br />
<li><a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li><br />
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li><br />
<li><a class='a2a_dd addtoany' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li><br />
<br />
</ul><br />
<br />
</div></blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
6. Hit save and you are done again!</div>
<div style="text-align: left;">
<br /></div>
<h3 style="text-align: left;">
Troubleshooting</h3>
<div style="text-align: left;">
While finding the <code><data:post.body/></code>  code is coming three time. This Problem comes when we install Auto Read  Hack in our Blogs. For this Problem Search for any one line from below  and Put Above HTML Section of Widget Code after it!</div>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<div class='post-footer-line post-footer-line-1'></blockquote>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<div class='post-footer'></blockquote>
<div style="text-align: left;">
<br /></div>
<blockquote style="text-align: left;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>      <br />
<data:post.body/></blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
If  you faced any problem then feel free to let me know. I will write more  tutorials on this topic this week so that you may get all the latest  updates. I hope this Widget proves useful to most of you and it may  bless your blogs with even more traffic.</div>
</div>
</div>

Add awesome social sharing widget To Blogger Blog

Now, Bloggers are aware of the role of social media in making their blog popular. Almost all bloggers are using the social sharing widgets and social media following widgets to increase the social media presence of their blog. Social media plays an important role in according to SEO and SERP r…

12Sep2013