Helper Blogger

Subscribe Now 3D Images Widget Fully Customized

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Hello friends today I want to share a cool widget with you. This widget 
is already published on NetinfozBlog but my widget is fully customized. 
The main important feature of this widget is it's cool background with 
email subscription option.You know these 3D images are provided by Paul 
Crowe of spiceupyourblog.com. But I had customized them with a cute and 
light look. So why are you waiting get this cool widget ? Get this now !<br />
<br />
I am providing three styles here. The three styles are :<br />
<br />
<br />
<br />
<ul style="text-align: left;">
<li>Luster effect</li>
<li>Shiny Black</li>
<li>Wooden Style</li>
</ul>
<br />
<ul style="text-align: left;">
</ul>
</div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
HTML Codes For Each Styles  </div>
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Preview :  </div>
<br />
<br />
  <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcZUTGZERawvTs_xb5eMKEUNOjUvAj_HlMJIREbJQHb6AoyVtC_1h08Sxv1o2afLhiunbqsOAbqJ1qQqzRxGh5Lyj5qdP__KobcMtM2arJhBqSZLdI6oRS3z5ls_76vef0_2QlfQA_Ec/s1600/wooden+demo.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcZUTGZERawvTs_xb5eMKEUNOjUvAj_HlMJIREbJQHb6AoyVtC_1h08Sxv1o2afLhiunbqsOAbqJ1qQqzRxGh5Lyj5qdP__KobcMtM2arJhBqSZLdI6oRS3z5ls_76vef0_2QlfQA_Ec/s1600/wooden+demo.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGU5-1NQQtfCvsADGn5mkv1MganUsICvfyw2uVtyj_aA-YVYRIf7S2NXKxXyodMPCOhFHZ8gobCXTaEZEaTLQfhgNUbXZKoaMnkDnBS2Z0YIoMVFvM63BZ6uUGhU4V_q9m_CKiYSR-g0/s1600/hp+luster+demo.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGU5-1NQQtfCvsADGn5mkv1MganUsICvfyw2uVtyj_aA-YVYRIf7S2NXKxXyodMPCOhFHZ8gobCXTaEZEaTLQfhgNUbXZKoaMnkDnBS2Z0YIoMVFvM63BZ6uUGhU4V_q9m_CKiYSR-g0/s1600/hp+luster+demo.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUzwwnqFXvi0CrYuIuLDgL32dfrfq6UJoQwVvtCLfYCCFnUBNruwtPxlv6ptwVTovKeCXE8n9bj9tbYPKS6qf62A8NVCigXhzpN3W4lSq9_Pb6VuOmD9V_ZAt2F-p3VJPbdnKE3R5mR40/s1600/shiny+black+demo.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUzwwnqFXvi0CrYuIuLDgL32dfrfq6UJoQwVvtCLfYCCFnUBNruwtPxlv6ptwVTovKeCXE8n9bj9tbYPKS6qf62A8NVCigXhzpN3W4lSq9_Pb6VuOmD9V_ZAt2F-p3VJPbdnKE3R5mR40/s1600/shiny+black+demo.jpg" /></a></div>
</div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
TIME TO ADD THIS IN BLOGGER </div>
<br />
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
1. Login to your blogger account.</div>
<div style="text-align: left;">
2. Design -> Add a gadget -> And Select HTML/Javascript widget</div>
<div style="text-align: left;">
3. Paste the below code in it and click save.</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
For example, If I want to use the shiny black, I will paste its style 
code and the code which I had provided under the heading codes.<br />
<br /></div>
<div style="text-align: left;">
</div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Luster effect </div>
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
HTML CODE </div>
<br />
<br />
<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
#TNTsub{<br />
width:244px;<br />
padding:70px 10px 0px 9px;<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBh_HWqwi87IjFugOfbh9A8VZ0qxKIyAdmLcq52kk92Jtlz9pntZWMm2JeQnCtWRmNoCB4Fon4RxOhbZ5EJfde7YZRUhUVjuyt-HzQ89tkd6E8sfvU10epwaX6yUBMbwOlzaSseR-R34/s1600/HP-Laptop-Luster.png)no-repeat
 top left;<br />
box-shadow:5px 7px 5px #ddd;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
border-radius:20px;<br />
}<br />
p#TNT_socialicons img {<br />
    -moz-transition: all 0.8s ease-in-out; <br />
-webkit-transition: all 0.8s ease-in-out;<br />
    -o-transition: all 0.8s ease-in-out;<br />
    -ms-transition: all 0.8s ease-in-out;<br />
    transition: all 0.8s ease-in-out;<br />
padding-right:10px;<br />
}<br />
p#TNT_socialicons img:hover {<br />
    -moz-transform: rotate(420deg);<br />
    -webkit-transform: rotate(420deg);<br />
    -o-transform: rotate(420deg);<br />
    -ms-transform: rotate(420deg);<br />
    transform: rotate(420deg);<br />
}<br />
TNTform.emailout{<br />
margin:20px;<br />
display:block;<br />
clear:both;<br />
padding:50px;<br />
float:right;<br />
}<br />
.TNTtextbox{<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif)
 no-repeat scroll 4px center;<br />
padding:7px 15px 7px 40px;<br />
color:#666;<br />
font-weight:bold;<br />
font-family:Georgia,Times New Roman,Trebuchet MS;<br />
text-decoration:none;<br />
border:1px solid #D3D3D3;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
border-radius: 5px;<br />
-moz-box-shadow: 1px 1px 2px #CCC inset;<br />
-webkit-box-shadow: 1px 1px 2px #CCC inset;<br />
box-shadow: 1px 1px 2px #CCC inset;<br />
width:145px;<br />
height:20px;<br />
}<br />
.TNTbutton{<br />
color:#666;<br />
font-weight:bold;<br />
text-decoration:none;<br />
padding:6px 15px;<br />
border:3px solid #D3D3D3;<br />
cursor: pointer;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
-goog-ms-border-radius: 4px;<br />
border-radius: 20px;<br />
background: #fbfbfb;<br />
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br />
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=&#39;#FBFBFB&#39;, 
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );<br />
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
}<br />
</style></blockquote>
<br />
<br /></div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Shiny Black </div>
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
HTML CODE </div>
<br />
<br />
<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
#TNTsub{<br />
width:280px;<br />
padding:70px 10px 0px 9px;<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kfm5YaCBVzF6Pq-M831lINJv4xuBIME5lTSgso8_fQHYAg-i43hVIgXNJEH1Et85zbJ4GVYj74bPGTkDa_bPECclFruuj1ilogiMrLgaFAJ5zIEcezIB_ewWTIGn5UCwm6djcnbJ0_s/s1600/ws_Black_Floor_1440x900.jpg)no-repeat
 top left;<br />
box-shadow:5px 7px 5px #ddd;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
border-radius:20px;<br />
}<br />
p#TNT_socialicons img {<br />
    -moz-transition: all 0.8s ease-in-out; <br />
-webkit-transition: all 0.8s ease-in-out;<br />
    -o-transition: all 0.8s ease-in-out;<br />
    -ms-transition: all 0.8s ease-in-out;<br />
    transition: all 0.8s ease-in-out;<br />
padding-right:10px;<br />
}<br />
p#TNT_socialicons img:hover {<br />
    -moz-transform: rotate(420deg);<br />
    -webkit-transform: rotate(420deg);<br />
    -o-transform: rotate(420deg);<br />
    -ms-transform: rotate(420deg);<br />
    transform: rotate(420deg);<br />
}<br />
TNTform.emailout{<br />
margin:20px;<br />
display:block;<br />
clear:both;<br />
padding:50px;<br />
float:right;<br />
}<br />
.TNTtextbox{<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif)
 no-repeat scroll 4px center;<br />
padding:7px 15px 7px 40px;<br />
color:#666;<br />
font-weight:bold;<br />
font-family:Georgia,Times New Roman,Trebuchet MS;<br />
text-decoration:none;<br />
border:1px solid #D3D3D3;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
border-radius: 4px;<br />
-moz-box-shadow: 1px 1px 2px #CCC inset;<br />
-webkit-box-shadow: 1px 1px 2px #CCC inset;<br />
box-shadow: 1px 1px 2px #CCC inset;<br />
width:145px;<br />
height:20px;<br />
}<br />
.TNTbutton{<br />
color:#666;<br />
font-weight:bold;<br />
text-decoration:none;<br />
padding:6px 15px;<br />
border:3px solid #D3D3D3;<br />
cursor: pointer;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
-goog-ms-border-radius: 4px;<br />
border-radius: 20px;<br />
background: #fbfbfb;<br />
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br />
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=&#39;#FBFBFB&#39;, 
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );<br />
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
}</blockquote>
<br />
<br /></div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
Wooden Style  </div>
<br />
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
HTML CODE </div>
<br />
<br />
<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
#TNTsub{<br />
width:280px;<br />
padding:70px 10px 0px 9px;<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOUnrsVIikMSJ6bVR4qxKnBXraY_qlOsTR5IWcQqgxQa6f-BGq-T5PHc8Xx5MdgfQh1cHRNE8ZqITkch8bqTvLbLvdZMmrIHMpOWOkXB51SyfjZf58klQHhx1FNOont-CfKg9jwtcJjfU/s1600/4498648030_2e488d4256.jpg)no-repeat
 top left;<br />
box-shadow:5px 7px 5px #ddd;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
border-radius:20px;<br />
}<br />
p#TNT_socialicons img {<br />
    -moz-transition: all 0.8s ease-in-out; <br />
-webkit-transition: all 0.8s ease-in-out;<br />
    -o-transition: all 0.8s ease-in-out;<br />
    -ms-transition: all 0.8s ease-in-out;<br />
    transition: all 0.8s ease-in-out;<br />
padding-right:10px;<br />
}<br />
p#TNT_socialicons img:hover {<br />
    -moz-transform: rotate(420deg);<br />
    -webkit-transform: rotate(420deg);<br />
    -o-transform: rotate(420deg);<br />
    -ms-transform: rotate(420deg);<br />
    transform: rotate(420deg);<br />
}<br />
TNTform.emailout{<br />
margin:20px;<br />
display:block;<br />
clear:both;<br />
padding:50px;<br />
float:right;<br />
}<br />
.TNTtextbox{<br />
background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif)
 no-repeat scroll 4px center;<br />
padding:7px 15px 7px 40px;<br />
color:#666;<br />
font-weight:bold;<br />
font-family:Georgia,Times New Roman,Trebuchet MS;<br />
text-decoration:none;<br />
border:1px solid #D3D3D3;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
border-radius: 4px;<br />
-moz-box-shadow: 1px 1px 2px #CCC inset;<br />
-webkit-box-shadow: 1px 1px 2px #CCC inset;<br />
box-shadow: 1px 1px 2px #CCC inset;<br />
width:230px;<br />
height:20px;<br />
}<br />
.TNTbutton{<br />
color:#666;<br />
font-weight:bold;<br />
text-decoration:none;<br />
padding:10px 20px;<br />
border:4px solid #D3D3D3;<br />
cursor: pointer;<br />
-moz-border-radius: 4px;<br />
-webkit-border-radius: 4px;<br />
-goog-ms-border-radius: 4px;<br />
border-radius: 20px;<br />
background: #fbfbfb;<br />
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));<br />
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr=&#39;#FBFBFB&#39;, 
endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );<br />
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br />
}</blockquote>
<br />
<br /></div>
<div style="border: 4px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify; width: 500px;">
CODE </div>
<br />
<br />
<div>
In the above codes, I had provided just the style codes and what you have to do is : </div>
<div>
</div>
<div>
Copy and Paste Any Style code in the widget column and below that paste the code provided after this line. </div>
<div>
</div>
<div>
</div>
<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<div id="TNTsub"><br />
<center><p id="TNT_socialicons"><br />
    <a href="<span style="color: red;"><b>YOUR RSS FEED URL HERE</b></span>"><br />
<img border="0" src=" 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQpt8IDUfb_iZjx0ZI1_3LEUIvsh9_YGpmqj6RBdQtxLZ0GP0qbiWbMJL0fhwrl-O5fvEvX_GjPayBjQ6PzVSRCKmci_MaMebUIHo60i4E7IQiaz5VcqK1Ht24IUKpiCaT6YvNV-k0sOnS/s1600/RSS-48x48.png
 " /></a><br />
<a href="<span style="color: #b45f06;"><b>YOUR GOOGLE PLUS URL HERE</b></span>"><br />
<img border="0" src=" 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBDxH9cRCNwtkb7bApadqASb7gAU6QAclcI5VG1CMQzp5zmpauQqaBqM4UAjWfVqIn4spatQ4TiIh3QGPZJBBpM6wgDcYH3ScQalIoK4ojkLbJawGFgVd2ahVvghR0wVnz_OPt3SQ6Bxs/s1600/TNT.png
 " /></a><br />
<a href="<span style="color: #38761d;"><b>YOUR TWITTER URL HERE</b></span>"><br />
<img border="0" src=" 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJxkeIwjHIpPk0fM6QSovWQwVYY1L75PxQIW-nSdmMWml9tnSucGBR5Eqw3wj1aqFdb6m0jy-RYc37HG0yg5ZI2k215arw9K8Xm3i39WkM_bXCmvDsS-7WbzReBStFaFSpZcCM4MhJfU/s1600/TNT.png
 " /></a><br />
<a href="<span style="background-color: #134f5c;"><b><span style="color: white;">YOUR FACEBOOK URL HERE</span></b></span>"><br />
<img border="0" src=" 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrSuiQQyicSoHKe-JaEvWyCblxOdxf2EnDgWR1WO6GPmfjtF_cKWkEbrbQ3unpWQJ30zsf14ZHldLcMy5TSvh2mx4NCtq2xnyJWeYyfV9NYF6NrpIW8iDWNjOUsuIW4hqF_muEMfJlXg/s1600/TNT.png
 " /></a></p></center><br />
<p style='color:#666;<br />
font-weight:bold;<br />
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email 
Below To Get Quality Updates Directly Into Your Inbox FREE !!</p><br />
<form action='http://feedburner.google.com/fb/a/mailverify' 
class='emailout' method='post' 
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<span style="background-color: #0b5394;"><b><span style="color: white;">YOUR FEEDBURNER ID HERE</span></b></span>&apos;,
 &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,height=550&apos;);return true' 
style='margin: 0pt;' target='popupwindow'><br />
<input name='uri' type='hidden' value='<span style="color: #351c75;"><b>YOUR FEEDBURNER URL HERE</b></span>'/><br />
<center><input name='loc' type='hidden' value='en_US'/><br />
<input class='TNTtextbox' 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'/><br />
<input alt='' class='TNTbutton' title='' type='submit' value='Submit'/><br />
</form><center><br />
<p style='float:upper right; color:#000; font-size:10px;'><a 
href="http://www.tricksandteach.blogspot.com" target="_blank"> Widget
 By </a></p><br />
</div> </blockquote>
</div>
<div>
<br />
<br />
<ol style="text-align: left;">
<li><b><span style="color: red;">YOUR RSS FEED URL HERE -  </span>Replace this with your RSS feed URL.</b></li>
<li> <b style="color: #b45f06;">YOUR GOOGLE PLUS URL HERE -  - </b><b>Replace this with your Google+ URL</b></li>
<li><b><span style="color: #38761d;">YOUR TWITTER URL HERE -  </span>Replace this with your twitter URL.</b></li>
<li><b><span style="background-color: #134f5c; color: white;">YOUR FACEBOOK URL HERE  -</span><span style="background-color: white;"> Replace this with your Facebook </span>URL</b></li>
<li><b><span style="background-color: #0b5394; color: white;">YOUR FEEDBURNER ID HERE</span><span style="background-color: white;"> - Replace this with your feed-burner id.</span></b></li>
<li><b style="color: #351c75;">YOUR FEEDBURNER URL HERE - </b><b>Replace this with your feed URL.</b></li>
</ol>
<br />
I think you all had liked my post and thanks for reading my post.</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<br /></div>
<div>
</div>
</div>

Subscribe Now 3D Images Widget Fully Customized

Hello friends today I want to share a cool widget with you. This widget is already published on NetinfozBlog but my widget is fully cust...

+ Read more »

Spinning Social Icons With CSS3 For Blogger

<div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
<style>p#hb_socialicons img {<br />
 /* Spinning Social Icons Widget By HelperBloggers */<br />
    -moz-transition: all 0.4s ease-in-out;<br />
    -webkit-transition: all 0.4s ease-in-out;<br />
    -o-transition: all 0.4s ease-in-out;<br />
    -ms-transition: all 0.4s ease-in-out;<br />
    transition: all 0.4s ease-in-out;<br />
}<br />
<br />
p#hb_socialicons img:hover {<br />
    -moz-transform: rotate(120deg);<br />
    -webkit-transform: rotate(120deg);<br />
    -o-transform: rotate(120deg);<br />
    -ms-transform: rotate(120deg);<br />
    transform: rotate(120deg);<br />
}<br />
<br />
/* Spinning Social Icons Widget By HelperBloggers */<br />
</style> <br />
<br />
<br />
<br />
<center><p id="hb_socialicons"><br />
    <a href="<span style="color: red;">http://www.facebook.com/pages/Helper-Bloggers/166050840164778</span>"><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYqg8EcJQfm90Wg21QOgIwmQbPcg7hbHJM2b3klAauSyVLcw4Nysqqc0Xxs3VawQRSVhxHpzztJ7cIgqIDvvXFaceDcdxruTlrGR_XFmVvgaSizrkm8lOtL0RqxFXeUqrgXipF18Ngyw/s1600/helperblogger.com-facebook.png" /></a><br />
    <a href="<span style="color: red;">http://www.twitter.com/helperbloggers</span>/"><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7Ib2i7jDbehoTURffL5BtmuEVscVf2PcQrceE0OJnWGjRA8dc29xAAE5EhQfsKl1w6D9NLJ3PB4VTXVDrIB8DJdsNLKk2tSCnL8JZ5V7la2gmQxOrQ5YV-iT_IYmcsFrMnlGrkJ14gg/s1600/helperblogger.com-twitter.png" /></a><br />
    <a href="<span style="color: red;">https://plus.google.com/u/0/106851621955005208707</span>"><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZh9b49WWvDTe1HyMiqBl3JEi6kw77SKXjwbWIHop9hmSwM1rqdMWsKAiqFp38759dGfLA7Z1f5BGAqtNGHl73S4BaxMKk0c9Pt2fP-Cztib2o5S8Mpt1GSjvYyYWiJfvI1u_OZU5HTY/s1600/helperblogger.com-google_plus.png" /></a><br />
    <a href="<span style="color: red;">http://www.feeds.feedburner.com/helperbloggers</span>/"><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnAFfLnlyBr5DuyqtKQjeERcHInOXmd_Z3qPcygwriPxUocIyCuyQCb0CGcXtycLrbX87KY4ICIF3zFoZk4pjjVu_GgV6mf4b25RXaXKN3nk_aS236VZBWnP74cUN7Dm2zALwrVHj9Gi8/s1600/helperblogger.com-rss.png" /></a><br />
    <a href="<span style="color: red;">http://www.youtube.com/101rashid</span>/"><br />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vF9xIZtqpNViKw2lM33xwUwthoYil7A98SP6ETTlNcWQ0KSSBwjy1Q9ezWaV5yIzOfxbVgDQui7fC4hO1FRSOGreXfVKmbuOkIelufgSfMcnLVoSM_1Klm29Hv5L2zdIJprnfXF5G7o/s1600/helperblogger.com-youtube.png" /></a><br />
</p></center> 
</div>
</blockquote>
</div>
<br />
<br />
<b>Now replace highlighted lines with your social profile URL.</b><br />
<br />
Finally save your widget and you are done :)<br />
<br /></div>

Spinning Social Icons With CSS3 For Blogger

We always try to make something different which will attract our readers/visitors quickly.In today's tutorial we will play with so...

+ Read more »

Custom Add To Circles Widget For Blogger

Custom Add To Circles Widget For Blogger

Till we was using the Add to Circles Widget which was created by widgetsplus.com but now days we are noticing that the widget is not...

+ Read more »

Customize Labels Cloud in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.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/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" /></a></div>
Back in the year 2008 when Blogger.com was moving 
through several update phases, third party developers would often take 
the golden opportunity of creating widgets for BlogSpot blogs but as 
soon as Google rolled out massive changes to their online services, 
several official widgets popped out which load fast and perform well 
because the scripts are served by Blogger servers. Page List and label 
cloud/list enabled designers to create dynamic menus. Since the 
stylesheet was made accessible. therefore we all got a chance to play 
with these widgets and transform them completely in look and appearance.
 We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list
 and today we would share a simple stylesheet that will transform the 
labels cloud into organized small blocks that rotate on mouse over. I 
must ensure you that the styles are perfectly compatible in all major 
browsers including IE8+.
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a><br />
<div align="justify">
</div>
<div align="justify">
<span style="background-color: yellow;">DEMO:</span> Look at the label cloud on the sidebar of this blog</div>
<div align="justify">
</div>
This is how labels look in cloud display:<br />
<br />
<img alt="labels widget blogger" border="0" height="176" src="http://lh6.ggpht.com/-jdFJbHQ8hDs/UBgl7I-N_AI/AAAAAAAAHLo/edeUI6kxbPY/image10.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="labels widget blogger" width="306" /><br />
<br />
This is how it will look after you apply the new style.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQBYLwkkEAUocPhVFh0wG2rhW2m2_7za6A9BWgodGX8fJ0YrJOCN4Y9z0QFpTU1yd58A_FPSJGmjXar_Vne7wHs5A7-gAf5LVtNOxjp8mRK79iRYq_iNGhm3S4gdxkOv1-op0XXo868E/s1600/SRFile2012_8_18_6_51_39_234.jpg" /></a></div>
<br />
<br /></div>
<div style="border: 2px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
How it works?</div>
<br />
Each label link is nested inside a span tag followed by a class named 
label-size. If the font-size is not specified the widget changes 
font-size of each label according to its post-count. Therefore showing 
big and<br />
small clouds. Introducing custom styles would over-ride the 
exiting styles thus changing the entire look.<br />
  </div>
<div style="border: 2px dotted red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
Turn Random Cloud display into Blocks</div>
<br />
<br />
The code below can be customized in several ways to create exciting label designs. You can also add background images to them.<br />
Follow these easy steps:<br />
<br />
<ol>
<li>Go to Blogger > Settings> Layouts </li>
<li>Click add a gadget and choose Labels                      </li>
<li>Inside the settings make sure to choose the cloud display. You may 
set other options as per your requirement. See the screenshot below as 
example  </li>
</ol>
<img alt="labels settings" border="0" height="255" src="http://lh5.ggpht.com/-bWQhQAKioqM/UBgl-IlMs-I/AAAAAAAAHL4/QYBrnW6gdXw/image30.png?imgmax=800" style="background-image: none; border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="labels settings" width="385" /><br />
<br />
Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.<br />
<br />
<br />
        4.    Now save the widget and go to settings > Template<br />
       5.     Backup your template<br />
       6.     Click <b>Edit html</b> ><b> Proceed</b>  and search for this<br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
]]></b:skin></blockquote>
</div>
</div>
</div>
</div>
<div style="background-color: white;">
</div>
<br />
7.   Just above it paste the following CSS code:

<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
/*-----Custom Labels Cloud widget by http://helperbloggers.blogspot.com----*/<br />
.label-size{<br />
margin:0 2px 6px 0;<br />
padding: 3px;<br />
text-transform: uppercase;<br />
border: solid 1px #C6C6C6;<br />
border-radius: 3px;<br />
float:left;<br />
text-decoration:none;<br />
font-size:10px;<br />
color:#666;<br />
}<br />
<br />
.label-size:hover {<br />
border:1px solid #6BB5FF;<br />
text-decoration: none;<br />
-moz-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
-moz-transform: rotate(7deg);<br />
-o-transform: rotate(7deg);<br />
-webkit-transform: rotate(7deg);<br />
-ms-transform: rotate(7deg);<br />
transform: rotate(7deg);<br />
filter: progid:DXImageTransform.Microsoft.Matrix(<br />
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');<br />
zoom: 1;<br />
}<br />
<br />
.label-size a  {<br />
text-transform: uppercase;<br />
float:left;<br />
text-decoration: none;<br />
}<br />
.label-size a:hover  {<br />
text-decoration: none;<br />
}</blockquote>
</div>
<div style="background-color: white;">
</div>
<br />
<br />
  8.  Save your template<br />
         9.    All done!<br />
Visit your blogs and see the labels completely transformed to small 
neatly crafted rectangular boxes. If in case you want the label boxes to
 be of random sizes depending on the post-count then simply delete <span style="background-color: yellow;">font-size:10px;</span> from the above code.<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>

Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the go...

+ Read more »

Google Flag Translate Widget For Blogger/Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1f5HoofzPAFigJApqeXoTQ4pO5s34ga7u77GxI1GUbllf0BdAXOEUaNreZpmrvudc_lHGEl0ZJlh8DPCioK5uDNyOCXbEMjX5sFdmBuNpdrugGidxfr3gOGx1QM_jPLs0Gw7-_z4zm5Q/s1600/SRFile2012_8_17_14_3_43_578.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1f5HoofzPAFigJApqeXoTQ4pO5s34ga7u77GxI1GUbllf0BdAXOEUaNreZpmrvudc_lHGEl0ZJlh8DPCioK5uDNyOCXbEMjX5sFdmBuNpdrugGidxfr3gOGx1QM_jPLs0Gw7-_z4zm5Q/s1600/SRFile2012_8_17_14_3_43_578.jpg" /></a></div>
<span style="font-family: Verdana, sans-serif;">2 days ago while 
watching my stats I got some results from translate.google.com. Someone 
was reading my tutorials by translating in Chinese .That's why I added 
this widget to my blog.Here I gave a widget form so that you can 
directly add it on your blog.This widget contains flags of more than 32 
languages. With hover title effect, When you hover your mouse on any 
flag then it will shows a title of that language.Live  demo On Our Blog.....</span><br />
<br />
<br />
<br /></div>
<div style="border: 5px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
How To Add Google Flag Translator To Blogger ? </div>
<br />
<br />
<br />
<span style="font-family: Verdana, sans-serif;">Now let's see how to add this awesome widget to blogger.</span><br />
<br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Verdana, sans-serif;">Just press the Add To Blogger Button below and this will takes to you Add Widget section.</span></li>
<li><span style="font-family: Verdana, sans-serif;">Change title as you wish.</span></li>
<li><span style="font-family: Verdana, sans-serif;">Hit the Add Widget button.</span></li>
<li><span style="font-family: Verdana, sans-serif;">Drag and drop the widget as you wish</span></li>
</ul>
</div>
<center>
<form action="http://www.blogger.com/add-widget" method="POST"target="blank" ><input type="hidden" name="widget.title" value="Translate This Blog"/><input name="widget.content" type="hidden" value="<style type="text/css">.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div class="w2bgft"><form action="http://www.google.com/translate"><script language="JavaScript">document.write ("<input name=u value="+location.href+" type=hidden>")</script><noscript><a href="http://btsnts.blogspot.com/">BTSNTS</a></noscript><input value="en" name="hl" type="hidden"/><input value="UTF8" name="ie" type="hidden"/><input value="" name="langpair" type="hidden"/><input onclick="this.form.langpair.value=this.value" title="English" value="auto|en" type="image" height="20" src="http://www.google.com/images/flags/uk_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="auto|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Greek" value="auto|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Hindu" value="auto|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="German" value="auto|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Dutch" value="auto|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Russian" value="auto|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="auto|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Polish" value="auto|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Czech" value="auto|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Croatian" value="auto|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="French" value="auto|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Italian" value="auto|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Portuguese" value="auto|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Spanish" value="auto|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Arabic" value="auto|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Japanese" value="auto|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Korean" value="auto|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/><input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="auto|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Danish" value="auto|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Finnish" value="auto|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Norwegian" value="auto|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Swedish" value="auto|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Catalan" value="auto|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Filipino" value="auto|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Hebrew" value="auto|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Indonesian" value="auto|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Latvian" value="auto|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="auto|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Serbian" value="auto|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovak" value="auto|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Slovenian" value="auto|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="auto|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/><input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="auto|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/><span style="float:right;margin:3px 5px;font-size:10px;"><!—please do not remove credits --><a href="http://helperbloggers.blogspot.com">Get This</a></!—please></span></form></div>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input type="hidden" name="infoUrl" value="http://helperbloggers.blogspot.com/"/><input type="hidden" name="logoUrl" value="https://sites.google.com/site/0323books0321/add.png"/><input alt="Add to Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKCfUAsHJ-WkcdftwfoXAQW5k3-61F5VBD4sBNqw1mqXqYn6mnnx8NlaT8Ulb8iE0SRWY8jGh9h5rpgt6x3j7AARmxWICj1DL3HYdEVxT0FjR5fWm9K0f61hIHc3p2HCY8phxTZhtaC9F/s320/btsnts_add_to_blogger.gif" type="image" /></form><br /> 
</center>
<ul style="text-align: left;">
<li>Now save it and refresh your blog.....</li>
</ul>
</div>

Google Flag Translate Widget For Blogger/Blogspot

2 days ago while watching my stats I got some results from translate.google.com. Someone was reading my tutorials by translating in C...

+ Read more »

Social Bookmarking Widget With Tooltips For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdO8DzAT3JukulsVvq8sNZpUsaijNOeWajJBHnQs5KufknUM6rbIEXdPktnrRhBbIhopntZCYl3-tZ-iholF0W4UZSl8huhadr5P3h1DJxb2lP3XRQ7Vo_KwxIc-JvZrnEuegsODf4YnU/s1600/social-bookmarking-widget-for-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdO8DzAT3JukulsVvq8sNZpUsaijNOeWajJBHnQs5KufknUM6rbIEXdPktnrRhBbIhopntZCYl3-tZ-iholF0W4UZSl8huhadr5P3h1DJxb2lP3XRQ7Vo_KwxIc-JvZrnEuegsODf4YnU/s1600/social-bookmarking-widget-for-blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Social bookmarking widget is need of every blogger thats why you see 
such gadgets almost on every blog.Social bookmarking widgets helps you 
to boost traffic on your blog.Today I am sharing an amazing social 
bookmarking widget which comes with beautiful animated tooltips,when any
 user hovers on the social icons the tooltip comes out also it applies a
 opacity effect to these social icons,this effect increase beauty of 
this widget.Credit for this widget goes to Shareaholic.Now lets see hoe 
to add it to your blog,also <b>see the demo at the bottom of this post</b>.<br />
<br /></div>
</div>
<div style="border: 2px solid red; color: red; font-size: 18px; line-height: 3px; margin: 0px; padding: 11px; text-align: justify;">
How To Add This Widget To Blogger?</div>
<br />
<br />
I have created a blogger widget generator form for this widget.Follow below simple steps to add this widget to your blog.<br />
<br />
<br />
<ol style="text-align: left;">
<li><span style="background-color: white;"><b>You must login to your blogger account first.</b></span></li>
<li><span style="background-color: white;">Click on below <b>Add to Blogger</b> button</span></li>
<li><span style="background-color: white;">Now you will redirect to blogger add widget page</span></li>
<li><span style="background-color: white;">Choose your blog and add click on <b>Add Widget</b> button</span></li>
<li><span style="background-color: white;">Drag the widget at the bottom of your page layout</span></li>
<li><span style="background-color: white;">Finally click on <b>Save Arrangements</b> button and you are done.   </span></li>
</ol>
</div>
<center>
 </center>
<br /><center>
<span style="-moz-border-radius: 10px; border-bottom: #48a1fa 10px solid; border-left: #48a1fa 10px solid; border-radius: 10px; border-right: #48a1fa 10px solid; border-top: #48a1fa 10px solid; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><a href="http://baloch2days.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </span></center>
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<input name="widget.title" type="hidden" value="Social Bookmarking Widget With Animated Tooltips" /><input name="widget.content" type="hidden" value="<b:if cond='data:blog.pageType == "item"'> 

<script type="text/javascript">
  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
  var SHRCB_Globals = {"perfoption":"1"};
  </script>

<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

Social Bookmarking Widget With Tooltips For Blogger

Social bookmarking widget is need of every blogger thats why you see such gadgets almost on every blog.Social bookmarking widg...

+ Read more »

Create Floating Bar For Pinterest & Other Sharing Buttons

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div align="justify">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdap-kkCBRMj1P6nsahsJsQc6cMBuigiUp1r1mlqrbk-Nj7RLir_w-QPG2GPz0Z_B0JHi5HqM0Rx9eoF504saJ1b1woMLt4EyCiaigvoXeNn5tzzztczuR20_ozGafiauAMkqcos3Kbk/s1600/image%5B17%5D.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdap-kkCBRMj1P6nsahsJsQc6cMBuigiUp1r1mlqrbk-Nj7RLir_w-QPG2GPz0Z_B0JHi5HqM0Rx9eoF504saJ1b1woMLt4EyCiaigvoXeNn5tzzztczuR20_ozGafiauAMkqcos3Kbk/s320/image%5B17%5D.png" width="61" /></a></div>
This
 is one of the few social sharing widgets that took a lot of my time in 
designing it. You have seen the trend of floating sharing count buttons 
on popular blogs. The traditional icons are now replaced with auto 
incremented counter buttons that are updated in seconds.  We created 
different versions of this bar applying both Jquery effects and CSS3 
styles but this widget is different because it contains custom twitter, 
pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. Pinterest pin it buttons
 are causing great trouble and it badly fails in fetching the correct 
thumbnail image. In most cases it does not even select a image thus 
making the entire pinning concept tasteless. We however redesigned the 
widget provided by shareThis to create a new one by correcting all 
flaws. This sharing bar would float  to the left of your blog posts and 
would float as the visitor scrolls up or down. This widget contains 
counters of important social networking sites that has the potential to 
bring you traffic by circulating your content to a wider audience. We 
have tested the widget on major browsers like IE7+, Firefox, Chrome etc.
 and found it working just fine with no compatibility issues or design 
conflicts. </div>
Developers and bloggers are requested to link back to 
this post if in case they wish to share our code with their readers. 
Lets get to work now!    <br />
<a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a>   <span style="background-color: yellow;">Did you check the previous version?</span> <a href="http://helperbloggers.blogspot.com/2012/08/floating-google-1-facebook-twitter.html">Floating Sharing Counters </a><br />
<br />
<br />
<br />
<br />
     </div>
<div style="border: 3px dotted red; color: red; font-size: 18px; line-height: 2px; margin: 0px; padding: 11px; text-align: justify;">
How it works?</div>
<br />
<br />
We have integrated both Addthis and ShareThis service in it. In order to
 customize the twitter button and others we took the Sharethis default 
code and customize it to change the button image, bubble size and count 
text. The widget that <b>we initially developed</b> looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:    <br />
<img alt="float bar for sharing buttons" border="0" height="451" src="http://lh5.ggpht.com/-STd0Q-pD6xU/T7k3KNG_AlI/AAAAAAAAGd4/wADUIUJbdyM/image%25255B24%25255D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: block; float: none; margin: 0px auto; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="float bar for sharing buttons" width="80" />    <br />
<br />
<div align="justify">
You
 can observe that both Twitter, Google Plus, Pinterest and Stumbleupon 
are displayed with custom shapes, same sizes and different count colors.
 I spent a lot of time trying to make all buttons of the same size by 
using a common image linked by a sprite but the only problem with this 
plugin is that the counts wont show the official numbers registered at 
Twitter, Google and pinterest servers but they will show increments 
registered at <a href="http://sharethis.com/" target="_blank">ShareThis</a>.
 If you add this sharing bar to your blog, you will see zero on all 
counters unless someone clicks them and circulates your content. </div>
<div align="justify">
To
 correct this issue I had to unfortunately dropped the idea of sharing 
the above designed version and share this tutorial widget instead. 
However the widget on our blog still contains the twitter button which 
wont display official count but that of ShareThis. If you would like to 
replace it with the official big size twitter count box then you can 
surely do this by customizing the code shared below.<br />
<br /></div>
</div>
<div style="border: 3px dotted red; color: red; font-size: 18px; line-height: 2px; margin: 0px; padding: 11px; text-align: justify;">
Adding Floating Bar To Blogger</div>
<br />
<br />
The steps are kept extremely easy to apply. All you need is to copy and 
paste the long chunk of code we developed and tested all day. Follow 
these friendly steps:    <br />
<br />
<ol>
<li>Go to Blogger > Template </li>
<li><b>Backup your template</b> </li>
<li>Click <b>Edit HTML </b></li>
<li>Click <b>Proceed</b> </li>
<li>Then Click <b>Expand Widget Templates</b> </li>
<li>Search for </li>
</ol>
</div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span style="font-family: Verdana, sans-serif;"><b:includable id="post" var="post"></span></blockquote>
</div>
   7.   Just below it paste the following code:

<br />
<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType == "item"'></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType != "static_page"'></span><br />
<span style="font-family: Verdana, sans-serif;"><style></span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating{</span><br />
<span style="font-family: Verdana, sans-serif;">    position:fixed; bottom:10%; margin-left:-60px; float:left;</span><br />
<span style="font-family: Verdana, sans-serif;">    width:60px;</span><br />
<span style="font-family: Verdana, sans-serif;">    background-color:#f7f7f7;</span><br />
<span style="font-family: Verdana, sans-serif;">    padding: 5px 0 0px 0px;</span><br />
<span style="font-family: Verdana, sans-serif;">     border-top:1px solid #ddd;</span><br />
<span style="font-family: Verdana, sans-serif;">border-left:1px solid #ddd;</span><br />
<span style="font-family: Verdana, sans-serif;">border-bottom:1px solid #ddd;</span><br />
<span style="font-family: Verdana, sans-serif;">z-index:9999px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .mbt_side_social_button{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-bottom:5px;</span><br />
<span style="font-family: Verdana, sans-serif;">    float:none;</span><br />
<span style="font-family: Verdana, sans-serif;">    height:auto;</span><br />
<span style="font-family: Verdana, sans-serif;">    width:60px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-left:5px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .st_fblike_vcount{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-left:5px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .stButton_gradient{</span><br />
<span style="font-family: Verdana, sans-serif;">    background:none !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    height:21px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    padding-left:0 !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .chicklets, .mbt_social_floating .stMainServices {</span><br />
<span style="font-family: Verdana, sans-serif;">    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') no-repeat !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    height:19px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    width:45px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    padding:0 !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.st_email .chicklets{</span><br />
<span style="font-family: Verdana, sans-serif;">    background-position:0 -77px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .st_twitter_vcount .st-twitter-counter{</span><br />
<span style="font-family: Verdana, sans-serif;">    background-position:0 -58px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating  .stButton_gradient{</span><br />
<span style="font-family: Verdana, sans-serif;">    border:none !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .stBubble_count{</span><br />
<span style="font-family: Verdana, sans-serif;">    width:44px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    font-size: 15px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    font-weight: normal !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    padding-top:7px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    height:23px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    background:none !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .st_twitter_vcount .stBubble_count{</span><br />
<span style="font-family: Verdana, sans-serif;">    color:#00a6df;</span><br />
<span style="font-family: Verdana, sans-serif;">    background-color:#f8fbfc !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">.st_fblike_vcount{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-bottom: 0px;</span><br />
<span style="font-family: Verdana, sans-serif;">    display: block;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.st_twitter_vcount{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-bottom: 3px;</span><br />
<span style="font-family: Verdana, sans-serif;">    display: block;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">.st_email{</span><br />
<span style="font-family: Verdana, sans-serif;">    margin-bottom: 5px; margin-top: 3px;</span><br />
<span style="font-family: Verdana, sans-serif;">    display: block;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">.hb_social_floating .stBubble{</span><br />
<span style="font-family: Verdana, sans-serif;">    background-position: 21px 31px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">    height:35px !important;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></style></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><div class='hb_social_floating'></span><br />
<span style="font-family: Verdana, sans-serif;">    <script type='text/javascript'>var switchTo5x=true;</script></span><br />
<span style="font-family: Verdana, sans-serif;">    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;">    <script type='text/javascript'>stLight.options({onhover:false});</script></span><br />
<span style="font-family: Verdana, sans-serif;">    <span class='st_fblike_vcount' displaytext=''/></span><br />
<span style="font-family: Verdana, sans-serif;">    <span class='st_twitter_vcount' displaytext='' st_via='helperbloggers'/></span><br />
<span style="font-family: Verdana, sans-serif;"><div style='margin:5px 0 0px 0;'></span><br />
<span style="font-family: Verdana, sans-serif;"><center></span><br />
<span style="font-family: Verdana, sans-serif;"><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a></span><br />
<span style="font-family: Verdana, sans-serif;"><a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Verdana, sans-serif;">function run_pinmarklet() {</span><br />
<span style="font-family: Verdana, sans-serif;">var e=document.createElement('script');</span><br />
<span style="font-family: Verdana, sans-serif;">e.setAttribute('type','text/javascript');</span><br />
<span style="font-family: Verdana, sans-serif;">e.setAttribute('charset','UTF-8');</span><br />
<span style="font-family: Verdana, sans-serif;">e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);</span><br />
<span style="font-family: Verdana, sans-serif;">document.body.appendChild(e);</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></script> </center></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><div style='margin:0px 0 0 5px;'></span><br />
<span style="font-family: Verdana, sans-serif;">    <span class='st_plusone_vcount' displaytext=''/></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'></span><br />
<span style="font-family: Verdana, sans-serif;"><a class='addthis_counter'/></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Verdana, sans-serif;">var addthis_config = {</span><br />
<span style="font-family: Verdana, sans-serif;">     ui_cobrand: "Helper Bloggers",</span><br />
<span style="font-family: Verdana, sans-serif;">ui_header_color: "#ffffff",</span><br />
<span style="font-family: Verdana, sans-serif;">     ui_header_background: "#0080FF"</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></script></span><br />
<span style="font-family: Verdana, sans-serif;"><span class='st_email' displaytext=''/></span><br />
<span style="font-family: Verdana, sans-serif;"><p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://helperbloggers.blogspot.com/2012/08/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Get This</a></p></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></b:if></span></blockquote>
<br />
Just replace <span style="background-color: yellow;">helperbloggers</span>  with your twitter username.     <br />
   8.  Save your template and you are all done!    <br />
<div class="composeBoxWrapper GKY2L2ICAJB">
<iframe aria-label="Edit post. Compose mode." class="composeBox editable" frameborder="0" id="postingComposeBox" name="Rich text editor" style="background-color: white; height: 100%; padding: 0px;"><br></iframe> </div>
</div>

Create Floating Bar For Pinterest & Other Sharing Buttons

This is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sha...

+ Read more »

Add Facebook Recommendations Bar To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzzElPptogR6OaqqfMR0BcZZtPy-4LboNb5popCLD4tg2U9HyFVyPZS5lxjEFTRq4WzeHXe2nOYJAmjWoGOhQk6OXGmCZ9I5Lxu05E7yvT497bcen2VRh2L4xdPnK6A5TNQm-kMf_0-8/s1600/SRFile2012_8_15_8_57_13_796.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzzElPptogR6OaqqfMR0BcZZtPy-4LboNb5popCLD4tg2U9HyFVyPZS5lxjEFTRq4WzeHXe2nOYJAmjWoGOhQk6OXGmCZ9I5Lxu05E7yvT497bcen2VRh2L4xdPnK6A5TNQm-kMf_0-8/s320/SRFile2012_8_15_8_57_13_796.png" width="320" /></a></div>
Finally the plugin I had been waiting for since 22nd 
September 2011. In order to engage readers more and let your visitors 
spend more time on your website Facebook has finally launched the "<b>Recommendations Bar</b>"
 in beta version. It's designed to display additional recommended 
articles right after readers have finished reading an article or spent 
some time on your blog. It will collapse on page load and expand once a 
reader has reached a specific location on your blog or finished reading 
the post. Only those articles are displayed that are previously liked or
 shared on Facebook. The number of likes are displayed under each 
article along with page title and a thumbnail. It also contains a like button and previously contained an Add to Timeline button that has been removed now. Unlike Facebook <b>Recommendations box</b>
 which offered related stories but with lack of user friendly interface 
and engagement, Facebook bar will force readers to stay longer on your 
site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets that we previously published.   <a href="http://www.blogger.com/blogger.g?blogID=5633879042047294684" name="more"></a>  <br />
If you are a <span style="background-color: #809ec2; color: white;"><b>Wordpress</b></span> user you may follow this tutorial:<br />
<br />
<br />
See the <span style="background-color: yellow;">demo live on our blog</span> towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)<br />
<br /></div>
<div style="border: solid 3px red; color: red; font-size: 18px; line-height: 0px; margin: 0; padding: 11px; text-align: justify;">
Install it on Blogger </div>
It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.

Follow these easy steps:

Step1: Create a Facebook Application

For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
    Click on Create New App button towards Top-rightcreate new app
    In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.<br />
<br />
<span style="font-size: medium;"><b><u>Step1: <span style="color: #008040;">Create a Facebook Application</span></u></b></span><br />
For
 this plugin to work you will need to create a Facebook App in seconds. 
The below method is the standard and correct method for creating any FB 
App you like. <br />
<ol>
<li>Log into <a href="https://developers.facebook.com/apps/" target="_blank">Facebook Apps</a> </li>
<li>Click on <b><i>Create New App</i></b> button towards Top-right<img alt="create new app" border="0" height="23" src="http://lh5.ggpht.com/-vg3e5FGuji8/T-m-N_Bo2UI/AAAAAAAAG0M/zy-GqB_W8qo/image%25255B13%25255D.png?imgmax=800" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="create new app" width="124" /> </li>
<li>In the box that pops up, type "<i>My Recommendation Bar</i>" inside the<b> App name</b> field and leave other options as default. Click <b>continue</b>.</li>
</ol>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikvO_VDI7hdBui7VI7-mzjUFxmZxVmK1tdv0oJiRd0IK5mGwUi4sZT1v1X5n6Xw8EccY2XqP57ZYXjfwdrsCZiZeDtZ05rP5tniY3VU-3Oh_9QncteT4FuxzVTlUzRCKHP3vaMbWOYJ7g/s1600/SRFile2012_8_15_8_52_58_921.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikvO_VDI7hdBui7VI7-mzjUFxmZxVmK1tdv0oJiRd0IK5mGwUi4sZT1v1X5n6Xw8EccY2XqP57ZYXjfwdrsCZiZeDtZ05rP5tniY3VU-3Oh_9QncteT4FuxzVTlUzRCKHP3vaMbWOYJ7g/s400/SRFile2012_8_15_8_52_58_921.jpg" width="400" /></a></div>
  4.   Enter the captcha security code. Click <b>Submit</b>  <br />
     5.  You are app is almost complete. Just click <b>Website with Facebook Login</b> tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click<b> Save Changes</b>. <br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmrHzKNxHJAe_ZtW4AYCBaJgCPkatbpUonC7ED9228dCy0UTxjBxOsiXxW5h1wT15nSdGIGCcFIH6TIDabNBPn5ghcUPydyoplbgPNWTyNpZOjxsWLTw6cMs3U3hWZiGDxuQWpAdffus/s400/SRFile2012_8_15_8_54_17_890.png" width="400" /></div>
6.   You will see two strings of alpha-numerical characters. One is App
 ID and the other is App secret. Just copy the App ID code and keep it 
save in a notepad. We will need it later.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx7QhpIu6HagAsyBfFao2wKzipdq4G2VBhlmJSOLA0YlS19nKHNYTg16P1i4ZbGR9KnkcsPohv7UoWN6RBYrpmYja2NTChXPxko-FnPn9M4dMwJ9FxKgtbs6RxuvubPPbOXsZrq5BPp0/s1600/SRFile2012_8_15_8_54_49_921.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVx7QhpIu6HagAsyBfFao2wKzipdq4G2VBhlmJSOLA0YlS19nKHNYTg16P1i4ZbGR9KnkcsPohv7UoWN6RBYrpmYja2NTChXPxko-FnPn9M4dMwJ9FxKgtbs6RxuvubPPbOXsZrq5BPp0/s400/SRFile2012_8_15_8_54_49_921.png" width="400" /></a></div>
<br />
Congrats App finally created! Lets proceed to step2. <br />
<span style="font-size: medium;"><b><u>Step2: <span style="color: #008040;">Add "Recommendations Bar" To Your Blog</span></u></b></span><br />
Follow these steps to add the bar to Blogger:<br />
<ol>
<li>Go to Blogger > <b>Template</b> </li>
<li>Backup your template </li>
<li>Click <b>Edit HTML</b> > <b>Proceed</b> </li>
<li>Search For this :  </li>
</ol>
</div>
<br /></div>
</div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<html
<br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
Replace it with this code: <br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<html xmlns:fb='http://ogp.me/ns/fb#'
<br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
This will make the plugin compatible in older versions of  internet 
explorer also. Since blogger templates are coded in XML therefore 
inserting this XML namespace will enhance the plugin performance and 
compatibility.<br />
     5.   Next search for <b><body></b>   and just below this tag paste the following code:<br />
<span style="background-color: yellow;">Note:</span> If you are using the new blogger templates like<i> Simple, Awesome Inc., Travel, Watermark </i>or <i>Picture window</i> then please search for <b><body</b> instead. Make sure to paste the code below the entire body tag.<br />
<br />
<br /></div>
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<div id='fb-root'/><br />
    <script><br />
    //Facebook Recommendation bar by http://helperbloggers.blogspot.com<br />
    //<![CDATA[<br />
<br />
    (function(d, s, id) {<br />
      var js, fjs = d.getElementsByTagName(s)[0];<br />
      if (d.getElementById(id)) return;<br />
      js = d.createElement(s); js.id = id;<br />
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your App Id Here";<br />
      fjs.parentNode.insertBefore(js, fjs);<br />
    }(document, 'script', 'facebook-jssdk'));<br />
<br />
    //]]><br />
    </script><br />
    <b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'><br />
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='Your Blog Url Here' trigger='40%'/></div><br />
</b:if></b:if><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
</div>
<br />
You are almost done. Make these changes:<br />
<ul>
<li>Replace <span style="background-color: black; color: white;">Your App Id Here</span> with your 15 digit App Id that you saved in step1. </li>
<li>Replace <span style="background-color: black; color: white;">Your Blog Url Here</span> with your blog link </li>
</ul>
     6.   Save your template and you are all done!<br />
Visit
 your blog and scroll down about 50% of your page and wait for 10 
seconds for the plugin to expand. Enjoy the new way of free pageviews 
juice! :)<br />
<br />
<div style="border: 3px solid red; color: red; font-size: 18px; line-height: 0px; margin: 0px; padding: 11px; text-align: justify;">
Optional Steps</div>
<br />
<br />
Below are optional customization and control options. You can skip them if you want<br />
<ul>
<li><span style="font-size: x-small;"><b>max_age:</b></span> will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to <span style="background-color: #9bbb59;">1</span>-<span style="background-color: #9bbb59;">180</span> days old posts. But if you don't want to take age into account then let it be <span style="background-color: #9bbb59;">0</span> as default. </li>
<li><span style="font-size: x-small;"><b>num_recommendations:</b></span> You can set how many articles to display. By increasing or decreasing the value <span style="background-color: #4bacc6;">3</span> </li>
<li><b><span style="font-size: x-small;">read_time:</span></b>
 As soon as the user reaches a specified location, the plugin would 
expand and before expanding it will take some time. I have kept it equal
 to <span style="background-color: #809ec2;">10</span>  seconds, you can increase it to 30 or more as you wish. </li>
<li> <span style="font-size: x-small;"><b>side:</b>  You can decide the location of plugin. By default it shows up towards the bottom <span style="background-color: #f79646;">right</span> corner of your page. You set it to float to <b>left</b></span> </li>
<li><span style="font-size: x-small;"><b>trigger:</b></span> 
 On page load the plugin collapses and as soon as it reaches a specified
 location it expands. You can choose that location in three ways i.e. <b>onvisible</b>, <b>X%</b> or <b>manual</b>.
 I prefer locating the trigger point by percentage for better pageviews.
 The widget will expand as soon as the user scroll downs <span style="background-color: #a5a5a5;">40%</span>
 of your page. You can increase or decrease this value. If you wish that
 the plugin must expand as soon as the reader reaches the end of your 
article then instead of pasting the code between the purple lines  paste
 it just below <b>data:post.body</b> tag and use the value onvisible instead of 40%. </li>
<li>The
 widget will display only on post pages and not on homepage or static 
pages. To display it on all pages, then simply delete the <span style="color: #8064a2;"><b>purple bolded lines</b></span>. </li>
</ul>
<u><span style="color: green; font-size: small;"><b>Troubleshooting :</b></span></u>   Since
 Most templates are not well structured and require installation of meta
 tags to tell Facebook to fetch correct page titles, thumbnails and blog
 title. To do this simply paste the following code just below <b><head></b> tag inside your template<br />
<br />
<blockquote class="tr_bq" style="background-image: url(https://sites.google.com/site/0323books0321/coding2.png); background-position: 0% 0%; background-repeat: no-repeat repeat; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; margin: 0px 20px; padding: 10px 20px 10px 45px;">
<div style="background-color: white;">
</div>
<meta content='article' property='og:type'/><br />
<br />
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br />
<br />
<meta expr:content='data:blog.title' property='og:site_name'/><br />
<br />
<meta expr:content='data:blog.pageName' property='og:title'/><br />
<br />
<b:if cond='data:blog.metaDescription != ""'><br />
<meta expr:content='data:blog.metaDescription' name='description'/><br />
</b:if><br />
<div style="background-color: white;">
</div>
</blockquote>
</div>
<br />
<br />
Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.<br />
<br /></div>

Add Facebook Recommendations Bar To Blogger

Finally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors ...

+ Read more »