Visichat | visichatroom | status | visichat theme | visichat tools

How to add percentage value to scrollbar in blogger

<div class="post_content">
<div class="post_content_img">
<div class="entry-content">
In today’s post , i will explain that how you can add/show percentage value to scrollbar in blogger blog. actually it is not important for your blog, but this is for those who want to give unique effect to scroll-bar in their blog. it may be helpful for your readers to check that how much they have scrolled down or up or how much content left to be read.<br />
<blockquote>
<br /></blockquote>
Check the preview below and follow the steps, if you want to add this right to your blog.<br />
<strong>Preview :</strong><br />
<img alt="Untitled" class="size-full wp-image-3670 aligncenter" height="440" src="http://www.makingdifferent.com/wp-content/uploads/2013/08/Untitled.gif" width="187" /><br />
<h2>
How to add percentage value to scrollbar in blogger?</h2>
1. Go to blogger –> Tempalte –> Edit HTML<br />
2. CTRL + F to find this : ]]></b:skin><br />
3. Copy and paste below code just above this : ]]></b:skin><br />
<pre class="prettyprint lang-html prettyprinted" style="max-height: 100%;"></pre>
</div>

                </div>
</div>
<pre class="prettyprint lang-html prettyprinted" style="max-height: 100%;"></pre>
<div class="code" style="background-color: #ebf0ff; background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px dotted rgb(34, 51, 68); color: #474747; font-family: Arial, Verdana; font-size: 14px; margin: 5px 10px; max-height: 200px; overflow: auto; padding: 5px;">
<pre class="prettyprint lang-html prettyprinted" style="-webkit-user-select: text; background-color: #333333; border: 1px solid rgb(136, 136, 136); color: #222222; line-height: 24px; margin-left: auto; margin-right: auto; max-height: 100%; overflow: auto; padding: 2px; width: 683.734375px;"><span class="tag" style="color: khaki; font-weight: bold;"><style></span><span class="pln" style="color: white;">
    </span><span class="com" style="color: skyblue;">#scroll</span><span class="pln" style="color: white;">
    </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
        display</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> none</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        position</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">fixed</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        top</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        right</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">20px</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        z</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">index</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">500</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        padding</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">3px</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">8px</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        background</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">color</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="com" style="color: skyblue;">#2187e7;</span><span class="pln" style="color: white;">
        color</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="com" style="color: skyblue;">#fff;</span><span class="pln" style="color: white;">
        border</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">radius</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">3px</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
    </span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
    </span><span class="com" style="color: skyblue;">#scroll:after</span><span class="pln" style="color: white;">
    </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
        content</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">”</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">”;</span><span class="pln" style="color: white;">
        position</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> absolute</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        top</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">50</span><span class="pun" style="color: white;">%;</span><span class="pln" style="color: white;">
        right</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">8px</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        height</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        width</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">0</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        margin</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">top</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="lit" style="color: indianred;">4px</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        border</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">4px</span><span class="pln" style="color: white;"> solid transparent</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
        border</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">left</span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;">color</span><span class="pun" style="color: white;">:</span><span class="pln" style="color: white;"> </span><span class="com" style="color: skyblue;">#2187e7;</span><span class="pln" style="color: white;">
    </span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
</span><span class="tag" style="color: khaki; font-weight: bold;"></style></span></pre>
</div>
4. Next search for </head><br />
5. Copy and paste below code just after </head><br />
<pre class="prettyprint lang-html prettyprinted" style="-webkit-user-select: text; background-color: #333333; border: 1px solid rgb(136, 136, 136); color: #222222; line-height: 24px; margin-left: auto; margin-right: auto; max-height: 100%; overflow: auto; padding: 2px; width: 683.734375px;"><span class="tag" style="color: khaki; font-weight: bold;"><div</span><span class="pln" style="color: white;"> </span><span class="atn" style="color: darkkhaki; font-weight: bold;">id</span><span class="pun" style="color: white;">=</span><span class="atv" style="color: #ffa0a0;">'scroll'</span><span class="tag" style="color: khaki; font-weight: bold;">></div>
</span></pre>
Make sure you pasted the code after </head> and before <body> like this :<br />
<br />
<pre class="prettyprint lang-html prettyprinted" style="-webkit-user-select: text; background-color: #333333; border: 1px solid rgb(136, 136, 136); color: #222222; line-height: 24px; margin-left: auto; margin-right: auto; max-height: 100%; overflow: auto; padding: 2px; width: 683.734375px;"><span class="tag" style="color: khaki; font-weight: bold;"></head></span><span class="pln" style="color: white;">
</span><span class="tag" style="color: khaki; font-weight: bold;"><div</span><span class="pln" style="color: white;"> </span><span class="atn" style="color: darkkhaki; font-weight: bold;">id</span><span class="pun" style="color: white;">=</span><span class="atv" style="color: #ffa0a0;">'scroll'</span><span class="tag" style="color: khaki; font-weight: bold;">></div></span><span class="pln" style="color: white;">
</span><span class="tag" style="color: khaki; font-weight: bold;"><body></span></pre>
<br />
6. Now, again search for </body><br />
7. Copy and paste below code just above </body><br />
<pre class="prettyprint lang-html prettyprinted" style="-webkit-user-select: text; background-color: #333333; border: 1px solid rgb(136, 136, 136); color: #222222; line-height: 24px; margin-left: auto; margin-right: auto; max-height: 100%; overflow: auto; padding: 2px; width: 683.734375px;"><span class="tag" style="color: khaki; font-weight: bold;"><script</span><span class="pln" style="color: white;"> </span><span class="atn" style="color: darkkhaki; font-weight: bold;">type</span><span class="pun" style="color: white;">=</span><span class="atv" style="color: #ffa0a0;">'text/javascript'</span><span class="tag" style="color: khaki; font-weight: bold;">></span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">/*<![CDATA[*/</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> scrollTimer </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">null</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
$</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">window</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">scroll</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">var</span><span class="pln" style="color: white;"> viewportHeight </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> $</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">height</span><span class="pun" style="color: white;">(),</span><span class="pln" style="color: white;">
scrollbarHeight </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> viewportHeight </span><span class="pun" style="color: white;">/</span><span class="pln" style="color: white;"> $</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">document</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">height</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">*</span><span class="pln" style="color: white;"> viewportHeight</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;">
progress </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> $</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">this</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">scrollTop</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">/</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">$</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">document</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">height</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;"> viewportHeight</span><span class="pun" style="color: white;">),</span><span class="pln" style="color: white;">
distance </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> progress </span><span class="pun" style="color: white;">*</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">viewportHeight </span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;"> scrollbarHeight</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">+</span><span class="pln" style="color: white;"> scrollbarHeight </span><span class="pun" style="color: white;">/</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">2</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">-</span><span class="pln" style="color: white;"> $</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'#scroll'</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">height</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">/</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">2</span><span class="pun" style="color: white;">;</span><span class="pln" style="color: white;">
$</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'#scroll'</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">css</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'top'</span><span class="pun" style="color: white;">,</span><span class="pln" style="color: white;"> distance</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">text</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">' ('</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">+</span><span class="pln" style="color: white;"> </span><span class="typ" style="color: palegreen;">Math</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">round</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">progress </span><span class="pun" style="color: white;">*</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">+</span><span class="pln" style="color: white;"> </span><span class="str" style="color: #ffa0a0;">'%)'</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">.</span><span class="pln" style="color: white;">fadeIn</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: indianred;">100</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="kwd" style="color: khaki; font-weight: bold;">if</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">scrollTimer </span><span class="pun" style="color: white;">!==</span><span class="pln" style="color: white;"> </span><span class="kwd" style="color: khaki; font-weight: bold;">null</span><span class="pun" style="color: white;">)</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
clearTimeout</span><span class="pun" style="color: white;">(</span><span class="pln" style="color: white;">scrollTimer</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">}</span><span class="pln" style="color: white;">
scrollTimer </span><span class="pun" style="color: white;">=</span><span class="pln" style="color: white;"> setTimeout</span><span class="pun" style="color: white;">(</span><span class="kwd" style="color: khaki; font-weight: bold;">function</span><span class="pun" style="color: white;">()</span><span class="pln" style="color: white;"> </span><span class="pun" style="color: white;">{</span><span class="pln" style="color: white;">
$</span><span class="pun" style="color: white;">(</span><span class="str" style="color: #ffa0a0;">'#scroll'</span><span class="pun" style="color: white;">).</span><span class="pln" style="color: white;">fadeOut</span><span class="pun" style="color: white;">();</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">},</span><span class="pln" style="color: white;"> </span><span class="lit" style="color: indianred;">1500</span><span class="pun" style="color: white;">);</span><span class="pln" style="color: white;">
</span><span class="pun" style="color: white;">});</span><span class="pln" style="color: white;">
</span><span class="com" style="color: skyblue;">/*]]>*/</span><span class="pln" style="color: white;">
</span><span class="tag" style="color: khaki; font-weight: bold;"></script></span></pre>
8. Save template.<br /> thats it

How to add percentage value to scrollbar in blogger

In today’s post , i will explain that how you can add/show percentage value to scrollbar in blogger blog. actually it is not important fo...

How To Turn Off Image Lightbox In Blogger Blogs

<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EqkBrr0ddOiexy7qXQfQDjdQDCqSosI8XtbvbWttxt4ALKysdlVYy5U3L36SxyeUf4dDQgz51-siG7UMI8KMWsv1K34qSlONf4O-z3NhbT-nhxEibReZY0A_8xG-YMI25o5x-1CzrdLQ/s1600/turn+off+image+lightbox.png" imageanchor="1" style="clear: left; color: #5a9e25; float: left; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EqkBrr0ddOiexy7qXQfQDjdQDCqSosI8XtbvbWttxt4ALKysdlVYy5U3L36SxyeUf4dDQgz51-siG7UMI8KMWsv1K34qSlONf4O-z3NhbT-nhxEibReZY0A_8xG-YMI25o5x-1CzrdLQ/s1600/turn+off+image+lightbox.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a>Today my post is about disabling image Lightbox in blogger blogs and if you are wondering what is this lightbox. Here is an answer for you when we click on post images on our blogger blogs we see images pop out and the page behind fades out in light black color. Lightbox is enabled by default in all blogger blogs, however some bloggers don’t feel like having this lightbox for them I am writing this article. In this article I will show you how to turn off image lightbox in blogger blogs.</div>
<a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"></a><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Turn Off  Image Lightbox In Blogger Blogs</h4>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<b>Login</b> to your blogger blog and select your blog from the list of blogs.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Once you have picked your blog, click on <b>Settings</b> >> <b>Posts and Comments</b>. See below image to get a clear idea.</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6W4Z81BB-6xtdMVRTb1pt4dSwxGWukRc-IRPzMT4ckZRRktrbSwln9z4fTqsSCYkGbkcXpeeZVairiLYSR__zapsmwX9qk877dJ46_C7HLQJ8k5NDhC6kxlGtlQrmM7Paxnm_dydswu1o/s1600/post+and+settings.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Post and comments" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6W4Z81BB-6xtdMVRTb1pt4dSwxGWukRc-IRPzMT4ckZRRktrbSwln9z4fTqsSCYkGbkcXpeeZVairiLYSR__zapsmwX9qk877dJ46_C7HLQJ8k5NDhC6kxlGtlQrmM7Paxnm_dydswu1o/s1600/post+and+settings.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Post and comments" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Now see under the heading of posts, there is a label <b>"open images in the Lightbox" </b>which is<b>Yes</b> by default select <b>No</b> from the drop down and click on<b> save settings</b> button to complete the process. See below pictorial representation.</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OMLleYqA6oa1TNIiQDBgG3iFmcu9-4FEt89GVWMCq0GXfYZ9kdbhU3uYLT3XdxtScB7JAuSRHgy-zZYd4Mufq1YH98GP1VDMRkh3ta5VTMFtj9r6BV7onGMVHxmioiGQVpgTNW324xn2/s1600/Lightbox+settings.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Show case Image light box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5OMLleYqA6oa1TNIiQDBgG3iFmcu9-4FEt89GVWMCq0GXfYZ9kdbhU3uYLT3XdxtScB7JAuSRHgy-zZYd4Mufq1YH98GP1VDMRkh3ta5VTMFtj9r6BV7onGMVHxmioiGQVpgTNW324xn2/s1600/Lightbox+settings.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Show case Image light box" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<b>Congratulations</b>, you have successfully turned off a  image lighbox from your blog. Now go and experiment it with your blog.do expresses yourself about this article in comment section and we will be happy to reply you.</div>
<div>
<br /></div>

How To Turn Off Image Lightbox In Blogger Blogs

Today my post is about disabling image Lightbox in blogger blogs and if you are wondering what is this lightbox. Here is an answer for you ...

How To Add Blogger Blog To Google Webmaster Tools

How To Add Blogger Blog To Google Webmaster Tools

Google webmaster tools is a free web service provided by Google, this service is basically built for webmasters and website owners. The...

How To Customize Your Blogger Blog Using Stylebot

<br />
<div class="post-header-line-1" style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 18px;">
</div>
<div class="post-body entry-content" style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 0px; padding: 0px;">
<span id="4723009695981107499"></span><br />
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzAha6051pw5m3SIsvyJrEcXJy5dzDKfMk-l_kbEUjRIQzqU8TEMU7F1klf_fjOlBmoPEmA520y6gXRPBqwkxlr2cr2hZDW2awna-zpCz0NcPDs5uxJKEO9w9b5AAW44cU1dGi6tmTlVA7/s1600/How+To+Customize+Your+Blogger+Blog.png" imageanchor="1" style="clear: left; color: #5a9e25; float: left; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzAha6051pw5m3SIsvyJrEcXJy5dzDKfMk-l_kbEUjRIQzqU8TEMU7F1klf_fjOlBmoPEmA520y6gXRPBqwkxlr2cr2hZDW2awna-zpCz0NcPDs5uxJKEO9w9b5AAW44cU1dGi6tmTlVA7/s1600/How+To+Customize+Your+Blogger+Blog.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499">Bloggers always wants their blogs to look a top notch infect not only bloggers any website owner will like his website to look stunning and different from others. Not much of bloggers and webmasters know how to code or customized their blogger blogs. We as bloggers normally search for a better looking template on the internet and when found simply apply to our blogs but where the uniqueness go. We usually neglect it and those who want to customize their blogs they don’t recognize the tricks. In this tutorial I will be guiding you how to customize your blogger blog using Stylebot which is a Google chrome extension.</span></div>
<span id="4723009695981107499"><a href="https://www.blogger.com/null" name="more" style="color: #5a9e25;"></a><br /></span>
<div style="text-align: justify;">
<span id="4723009695981107499"><br /></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><b><span style="font-size: medium;">What is stylebot</span></b></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><b><span style="font-size: medium;"><br /></span></b></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><b>Stylebot</b> is nothing but a Google chrome extensions that helps you stylizing your blogger blog that way you want by customizing css of blogs.</span></div>
<h4 style="font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
<span id="4723009695981107499">
How To Customize Your Blogger Blog Using Stylebot</span></h4>
<div style="text-align: justify;">
<span id="4723009695981107499">First download <b>STYLEBOT</b> from Google web store or click this <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha" rel="nofollow" style="color: #5a9e25; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">LINK</a>. After that open your blogger blog by typing  the <b>URL</b> in address bar.</span></div>
<span id="4723009695981107499"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWoHBzWpC7yjhNPddNgWurLGRz_jAwmHv32G2_r41WRztTTk6Mk6aMdAUbgTHMyN7_RxGaZNhkKSeGEGgmDRIOsV7IPn-6dJExmxdup3QeBTa-R4nWvuNdpUhQ4_qPumLTMbyuvnCnGdJx/s1600/open+Stylebot.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Open Stylebot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWoHBzWpC7yjhNPddNgWurLGRz_jAwmHv32G2_r41WRztTTk6Mk6aMdAUbgTHMyN7_RxGaZNhkKSeGEGgmDRIOsV7IPn-6dJExmxdup3QeBTa-R4nWvuNdpUhQ4_qPumLTMbyuvnCnGdJx/s1600/open+Stylebot.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Open Stylebot" /></a></span></div>
<span id="4723009695981107499"><br /></span>
<span id="4723009695981107499"><span style="text-align: justify;">You will see a CSS icon placed besides the address bar. Click on it and then press “</span><b style="text-align: justify;">open Stylebot</b><span style="text-align: justify;">”</span></span><br />
<div style="text-align: justify;">
<span id="4723009695981107499">Now a horizontal panel will open having different sets of options to customize your blogger blog. Simply move your mouse over blog you will notice a green color border will form around each element as you move, select that element of your blog which you want to customize. There is also another method for selecting an element.Go to that element press right click of the mouse and click <b>Stylebot</b> >><b> style element</b>.</span></div>
<span id="4723009695981107499"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><br /></span></div>
<span id="4723009695981107499"><br /></span>
<div style="text-align: justify;">
<span id="4723009695981107499">Here I am presenting an example to explan how<b> Stylebot works </b>but you can do a whole lot more than this using <b>Stylebot</b>.</span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><br /></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><b><span style="font-size: medium;">Customizing  Post Title</span></b></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><br /></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><b>Select Post tile</b> >> Go to the text section of <b>Stylebot</b>. Here you can customize your post title by changing its <b>font</b>,<b> increasing font size</b>, <b>adding underline to it</b> etc. You can reset the customization if you have done something wrong by pressing reset button on the bottom.</span></div>
<span id="4723009695981107499"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1UWzC83Yu7haAFqDjmDlBrLoJcw7gXTQgqGy0EwYNPWhHz-uafAOmP37SAUQdAoN6RTQlhHtZLt5IfJzr6qgyMHytXOQBbn4XiNmXSah2CL6pMT8kK-ddveRTVGrctNPohjTBrma4QsL/s1600/Text+options.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Text Options to Customize" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1UWzC83Yu7haAFqDjmDlBrLoJcw7gXTQgqGy0EwYNPWhHz-uafAOmP37SAUQdAoN6RTQlhHtZLt5IfJzr6qgyMHytXOQBbn4XiNmXSah2CL6pMT8kK-ddveRTVGrctNPohjTBrma4QsL/s1600/Text+options.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Text Options to Customize" /></a></span></div>
<span id="4723009695981107499"><br /></span>
<div style="text-align: justify;">
<span id="4723009695981107499">When you are done with the styling of your blog, click on Edit CSS button place on the bottom screen of Stylebot and copy that code. We need this code to add it to our blogger blog.</span></div>
<span id="4723009695981107499"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRlcZ18OCZG8stR0p7j2795Up48FJTPB_HwzqLifG0RdzdGeoXN6NnZ2ihXQD_WrCiz_qT4Crq-sOgubz0YiOy7T14fBN8CVBsNKg-F8v1EMo4HRHjBpt1ceAlJpDs77-2YvBw906Jmds/s1600/Edit+CSS.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Edit CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRlcZ18OCZG8stR0p7j2795Up48FJTPB_HwzqLifG0RdzdGeoXN6NnZ2ihXQD_WrCiz_qT4Crq-sOgubz0YiOy7T14fBN8CVBsNKg-F8v1EMo4HRHjBpt1ceAlJpDs77-2YvBw906Jmds/s1600/Edit+CSS.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Edit CSS" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE50ZhYSMva63rrsnihOYzpP9KxEF6nKgC75Th0J5RXnj279ab62B9U48GqfiQ4D1zNymSa3_h1G5KfBuJihWaHEELNsJWw-33ECEL1ThudVIoTsVxaC-iVBKVePTgBHgA7EgciLcUz_zZ/s1600/Copy+CSS.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Copy CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE50ZhYSMva63rrsnihOYzpP9KxEF6nKgC75Th0J5RXnj279ab62B9U48GqfiQ4D1zNymSa3_h1G5KfBuJihWaHEELNsJWw-33ECEL1ThudVIoTsVxaC-iVBKVePTgBHgA7EgciLcUz_zZ/s1600/Copy+CSS.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Copy CSS" /></a></span></div>
<div class="separator" style="clear: both;">
<span id="4723009695981107499"><b style="text-align: justify;"><span style="font-size: medium;">Adding the code to your blog</span></b></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499"><br /></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499">Log-inn to blogger and go to the template section of a blog and click <b>customize</b> >><b>Advanced </b>>><b> Add CSS</b> >> <b>Apply to blog.</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeohCYYwaRX1pd-kca-YLo-NM0nc3zIhGmsk1nZ6WZFFIXk9doOcRRRp8ntI-fybXAeLB_R4MUEoS0G8yTVlbMFtUoIRcSYM-9FtS8Bev76jPuZV6roi6zFDl4gog0mB8calj6CaaVRKDP/s1600/Customise+Button.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Customize Button In Template Section" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeohCYYwaRX1pd-kca-YLo-NM0nc3zIhGmsk1nZ6WZFFIXk9doOcRRRp8ntI-fybXAeLB_R4MUEoS0G8yTVlbMFtUoIRcSYM-9FtS8Bev76jPuZV6roi6zFDl4gog0mB8calj6CaaVRKDP/s1600/Customise+Button.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Customize Button In Template Section" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbD_E_KeeI9nI_fg2yHZ4eKFr90QPQB2bmnXn-_I_9yQmNSDfVgax_q5_khZzsK0ZNVK5OSF8c4nvzEqVcausiECUZm-_JUmlklh4ipp2wjwIjYQuEADAOT5GJmnkOVgNLUFkBXJuQ5q0/s1600/Paste+CSS.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Paste CSS" border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbD_E_KeeI9nI_fg2yHZ4eKFr90QPQB2bmnXn-_I_9yQmNSDfVgax_q5_khZzsK0ZNVK5OSF8c4nvzEqVcausiECUZm-_JUmlklh4ipp2wjwIjYQuEADAOT5GJmnkOVgNLUFkBXJuQ5q0/s1600/Paste+CSS.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Paste CSS" width="320" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="4723009695981107499"><br /></span></div>
<span id="4723009695981107499"><span style="text-align: justify;">Note: <span style="color: blue;">once you have customized your blogger blog in Stylebot but have not applied changes to blog, it will still show the changes to you only even you reload your blog, to remove this open your blog by typing its URL in address bar then click on <b>CSS icon </b>and Select <b>Remove styling</b></span>.</span></span><br />
<div style="text-align: justify;">
<span id="4723009695981107499"><br /></span></div>
<div style="text-align: justify;">
<span id="4723009695981107499">I hope you have now known how to customize your blogger blog using Stylebot, this is an easy way you don’t need to be a tech person for it.</span></div>
</div>
<span id="4723009695981107499">
</span></div>

How To Customize Your Blogger Blog Using Stylebot

Bloggers always wants their blogs to look a top notch infect not only bloggers any website owner will like his website to look stun...

Make Your Blogger Blog Private Or Give Access To Specific Users

<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_ulPhV0HcZI1nzJ05w0Ibv7k7ZYKL2LM1_J6cgAdKvXqUGBYvN-aa2qRGprpZq44fdaiwZhCbdBY_N5SRM_Ho2PT0P2ldrNNur6rTZQW08Yzswyuh0CRvCzjZaYuJ1iTspPcqi9EuJV6/s1600/make+your+blog+private.png" imageanchor="1" style="clear: left; color: #5a9e25; float: left; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_ulPhV0HcZI1nzJ05w0Ibv7k7ZYKL2LM1_J6cgAdKvXqUGBYvN-aa2qRGprpZq44fdaiwZhCbdBY_N5SRM_Ho2PT0P2ldrNNur6rTZQW08Yzswyuh0CRvCzjZaYuJ1iTspPcqi9EuJV6/s1600/make+your+blog+private.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
There could be various reasons for which a blogger would like to make his/ her blog private or give access to specific people. Some are coming into my mind which I am sharing with you is we create widgets for our blogs or to share with other people through our blogs and we normally create a separate blog for testing purpose. These cases of blogs are to be meant for public users they are for developers or webmasters of that blog. So today the topic which I am covering on my blog is make your blogger blog private or give access to specific users.</div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Make Your Blogger Blog Private Or Give Access To Specific Users</h4>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
By default your blog is set to be viewed as public. Which means anyone on the internet can view your blog. Stick with the below steps carefully.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Login to your blogger blog and go to <b>settings</b> >> <b>Basic settings</b> >> <b>Blog Readers</b> and click on<b>edit </b>see below video for reference.</div>
<a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"></a><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMfg-m2mU4grVgWU-sFVDIMS7WZaaFkn_ZFs0N2U1EGQr9xKuKyVHTtNkUxPGAmmnmd1O9oR6RdBay7X0jRgg-lHRHxlYb2WKyeVuu76NTc2ByvD0k9Ae32v9zjtYSfN_dFr_bfi2VfL3/s1600/Private+Blog.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Settings blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMfg-m2mU4grVgWU-sFVDIMS7WZaaFkn_ZFs0N2U1EGQr9xKuKyVHTtNkUxPGAmmnmd1O9oR6RdBay7X0jRgg-lHRHxlYb2WKyeVuu76NTc2ByvD0k9Ae32v9zjtYSfN_dFr_bfi2VfL3/s1600/Private+Blog.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Settings blog" /></a></div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Make Your Blog Private</h4>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Once you have clicked edit, select</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> Private –only blog readers</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> radio button and click on</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">save changes</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> this will make your blogger blog private and only visible to blog admin and authors. See below pictorial representation to obtain the clean depiction.</span><br />
<br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNhyfptkHCOUvzfvIzhF_SbkpxoPaA1-Pvh3MhSpUei_o3qbNuNnCf1OyDQYsjcFeKhmTPGbVmGw5qX3zVh0BnG0wgm05vyEU1A-LOkpFuZTCzZC4mCml2m5OMQ1h-jM7rxs50AP_ySWw/s1600/make+Private+blog.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="make your blog private" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNhyfptkHCOUvzfvIzhF_SbkpxoPaA1-Pvh3MhSpUei_o3qbNuNnCf1OyDQYsjcFeKhmTPGbVmGw5qX3zVh0BnG0wgm05vyEU1A-LOkpFuZTCzZC4mCml2m5OMQ1h-jM7rxs50AP_ySWw/s1600/make+Private+blog.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Private Blog" /></a></div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Give Access To Specific Users</h4>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">To give access to specific users to your blog select</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> private –Only these readers</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">’ option and click on +Add readers link this will open text area. In this text area, enter email address of those who you would like to give access to your blog, see below image to get a clear idea. Remember they will have to login before they can see your web log.</span><br />
<br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dwDsX1NDxK5Rmw7W_tgFaUMGkaYmGwSQomng2wKmRzyd_JOxZBIA_LtkKqm1YAb2OuL1l_jxNjrtzwEd0QU9xGtNDQhpyAS2hrytBzgIlWWnsFqfWhg3itRdmR7oKex6BzKcv8jR39pm/s1600/access+to+limited+users.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Make your blog visible to limited users" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dwDsX1NDxK5Rmw7W_tgFaUMGkaYmGwSQomng2wKmRzyd_JOxZBIA_LtkKqm1YAb2OuL1l_jxNjrtzwEd0QU9xGtNDQhpyAS2hrytBzgIlWWnsFqfWhg3itRdmR7oKex6BzKcv8jR39pm/s1600/access+to+limited+users.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="limit blog access" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">I hope this effort of ours will help you in making your blogger blog private or giving access to specific users. </span>

Make Your Blogger Blog Private Or Give Access To Specific Users

There could be various reasons for which a blogger would like to make his/ her blog private or give access to specific people. Some are c...

Facebook Like Box Without Border Layout

Facebook Like Box Without Border Layout

Facebook Like Box Without Border Layout To show your facebook box gadget with out border in your blogger blog. We have to follow some of ...

How To Change Older Posts Newer Posts To Button In Blogger

<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Change Older Posts Newer Posts To Button In Blogger</h3>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Follow these simple steps given below:</span><br />
<ul style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">
<li>Go to blogger dashboard:</li>
<li>Go to Template >> HTML >> Check the Expand Widget Template</li>
<li>Now search for below code (CTRL+F)</li>
</ul>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
<span style="background-color: #e06666;">     <data:newerPageTitle/></span></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">             Replace it with Below given code:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
<img src="Img-Url-for-previous-button"/></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">           Again search for this code:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
<span style="background-color: #e06666;">      <data:olderPageTitle/></span></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">          Replace it with Below given code:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
     <img src="Img-url-for-next-button"/></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">         Once Again search for this code:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
<span style="background-color: #e06666;">      <data:homeMsg/></span></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">        The above code may be appear twice, so both of them replace it with below code</span><br />
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">               Now you have done all steps correctly inside the template</span><br />
<blockquote class="tr_bq" style="background: rgb(242, 241, 241); border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
      <img src="img-url-for-home-button"/></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Remember: </b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">This trick will not work if you have not changed the image tag URL with image button URL. You will need to download thats three images above at the top my post to your Pc after it upload these images in your draft post and then redirect it to your buttons URL images. Thats all.</span>

How To Change Older Posts Newer Posts To Button In Blogger

How To Change Older Posts Newer Posts To Button In Blogger Follow these simple steps given below: Go to blogger dashboard: Go to Templa...

How To Add Adsense Inside Blogger Post

<div class="post hentry">
<br />
<div id="socialbuto">
<div id="buttoners">
<br />
<div class="box fbsharer" href="#">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script><span class="IN-widget" style="display: inline-block; line-height: 1; text-align: center; vertical-align: baseline;"><span style="display: inline-block !important; font-size: 1px !important; margin: 0px !important; padding: 0px !important; text-indent: 0px !important; vertical-align: baseline !important;"><span class="IN-top IN-empty" id="li_ui_li_gen_1403029197277_1-container"><span class="IN-top" id="li_ui_li_gen_1403029197277_1"><span class="IN-top" id="li_ui_li_gen_1403029197277_1-inner"><span class="IN-top" id="li_ui_li_gen_1403029197277_1-content">0</span></span></span></span></span><br /><span style="display: inline-block !important; font-size: 1px !important; margin: 0px !important; padding: 0px !important; text-indent: 0px !important; vertical-align: baseline !important;"><span id="li_ui_li_gen_1403029197119_0"><a href="javascript:void(0);" id="li_ui_li_gen_1403029197119_0-link"><span id="li_ui_li_gen_1403029197119_0-logo">in</span><span id="li_ui_li_gen_1403029197119_0-title"><span id="li_ui_li_gen_1403029197119_0-mark"></span><span id="li_ui_li_gen_1403029197119_0-title-text">Share</span></span></a></span></span></span><script data-counter="top" data-url="http://www.probloggertricks.com/2013/02/how-to-add-adsense-inside-blogger-post_22.html" type="in/share+init"></script>
</div>
</div>
</div>
<div class="post-header-line-1">
</div>
<div class="post-body entry-content">
<span id="6974382155111710814"></span><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<span id="6974382155111710814"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0dCGSwbFMH_N494k5KxS__U0mwetCklsQjZhtn1TsnWm3o77R568pC3YG_V9eWV3p7Gmc4YtAmSPdKK50i1_9FLsiowvAIm566DN06iaDhjotSAzQqKL5l3l4WRYi5SDLi-yrtnJqX8/s1600/Adsense+inside+blogger+post.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0dCGSwbFMH_N494k5KxS__U0mwetCklsQjZhtn1TsnWm3o77R568pC3YG_V9eWV3p7Gmc4YtAmSPdKK50i1_9FLsiowvAIm566DN06iaDhjotSAzQqKL5l3l4WRYi5SDLi-yrtnJqX8/s320/Adsense+inside+blogger+post.jpg" width="320" /></a></span></div>
<div style="text-align: justify;">
<span id="6974382155111710814">Sometime you must be worried about your less google adsense revenue and try to be the best to increase the revenue but all in vain and can never be successed in such situation. Although we know that google adsense highly revenue mosltly depands upon the <b>SEO </b>of your blog "highly seo rank of your blog better will be the google adsense income" So in today post we will give you some amazing tips through which you can easily increase your google adsense revenue.</span></div>
<div style="text-align: justify;">
<span id="6974382155111710814"><br /></span>
<span id="6974382155111710814"><a href="https://www.blogger.com/null" name="more"></a><br /></span></div>
<div style="text-align: justify;">
<span id="6974382155111710814">One of the best way to increase the google adsense revenue is to change the locations for your adsense banners and insert it into proper area where visitors come a across. Now to do this we will add the adsense code in below every post, after in every post title and in sidebar. In this way you will get maximum clicks on your ads once used it in proper area. </span></div>
<div style="text-align: justify;">
<span id="6974382155111710814"><br /></span></div>
<div style="text-align: justify;">
<span id="6974382155111710814">Be careful not to use so many ads on your blog it will increase your blog loading time see here Things that Increase Your Blog Loading Time</span></div>
<div style="text-align: justify;">
<span id="6974382155111710814"><br /></span></div>
<div style="text-align: justify;">
<span id="6974382155111710814"><br /></span></div>
<h3>
<span id="6974382155111710814">
How To Add adsense ads inside your blogger post</span></h3>
<span id="6974382155111710814">Now you can easily put your ads inside blogger post just follow these simple steps:</span><br />
<div style="text-align: left;">
</div>
<ol style="text-align: left;"><span id="6974382155111710814">
<li>We will have to parse our AdSense code>>><b>(<a href="http://www.blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">Parse It Here</a>) </b> Or <b>(<a href="https://sites.google.com/site/infivivek/resourse-centre/online-resources/html-to-xml-converter" rel="nofollow" target="_blank">Parse Here</a>)</b></li>
<li>Now you will add your parse code in the below piece of code and then use it in template</li>
</span></ol>
<span id="6974382155111710814"><br /></span>
<br />
<h4>
<span id="6974382155111710814">
Add your Adsense inside post Left Side</span></h4>
<div>
<span id="6974382155111710814"><br /></span></div>
<blockquote class="tr_bq">
<pre style="color: none; font-weight: bold;"><span id="6974382155111710814"><code><b:if cond='data:blog.pageType == "item"'>  
<div style="float:<span style="background-color: #6aa84f;">left</span>;"></code><code>
<span style="background-color: #e69138;">your adsense code goes here</span> </code><code></div>
</b:if></code>  </span></pre>
</blockquote>
<span id="6974382155111710814"><br /></span>
<br />
<h4>
<span id="6974382155111710814">
Add your Adsense inside post Right Side</span></h4>
<div>
<span id="6974382155111710814"><br /></span></div>
<div>
<span id="6974382155111710814"><br /></span></div>
<blockquote class="tr_bq">
<pre style="color: none; font-weight: bold;"><span id="6974382155111710814"><code><b:if cond='data:blog.pageType == "item"'>  
<div style="float:<span style="background-color: #6aa84f;">Right</span>;"></code><code>
<span style="background-color: #e69138;">your adsense code goes here </span> </code><code></div>
</b:if></code>  </span></pre>
</blockquote>
<span id="6974382155111710814"><br /></span>
<br />
<h3>
<span id="6974382155111710814">
Now put your Adsense customize code in this way</span></h3>
<div>
<ul style="text-align: left;"><span id="6974382155111710814">
<li>Go to blogger dashboard >>edit html>>expand widgets:</li>
<li>Press (ctrl+F) and search this  <b><data:post.body/> </b>if you find it twice in your template <b><data:post.body/> </b>then try for both and check the result which is one is correct.</li>
<li>If you want to add adsense ads at the top of post then simply past your code just above it  <b><data:post.body/></b></li>
<li>If you want to add adsense ads at the bottom of post then simply past your code just below it <b><data:post.body/></b></li>
<li>If you have any query then feel free to ask your response will back in an hour.</li>
<li>Join us your choice here Facebook, Twiter, Google Plus, Blogger.  </li>
</span></ul>
</div>
</div>
<span id="6974382155111710814">
</span>
<br />
<div style="clear: both;">
</div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-">
</div>
<div class="post-footer-line post-footer-line-2">
</div>
<div class="post-footer-line post-footer-line-3">
</div>
</div>
</div>

How To Add Adsense Inside Blogger Post

0 in Share Sometime you must be worried about your less google adsense revenue and try to be the best to increase the reve...

How To Disable Copying Of Text On Your Blogger Posts

<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/AVvXsEgqs6R7EaDuZqa9exQztLN6zpprBBYz3VSdqpSZQabUwS6d0skwvWA1a29FoLcff2zxTdTp8bH8J3vG6eeLNg1wWOnUCs2dq-J11lH0Asi1sHNsJmceShf2MlhUN-bhiTO3fHeXck5dhBs/s1600/How-to-Disable-Copying-of-Text-on-Your-Blogger-Posts.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Disable Copying of Text on Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqs6R7EaDuZqa9exQztLN6zpprBBYz3VSdqpSZQabUwS6d0skwvWA1a29FoLcff2zxTdTp8bH8J3vG6eeLNg1wWOnUCs2dq-J11lH0Asi1sHNsJmceShf2MlhUN-bhiTO3fHeXck5dhBs/s1600/How-to-Disable-Copying-of-Text-on-Your-Blogger-Posts.png" title="How to Disable Copying of Text on Blog" /></a></div>
<div style="text-align: justify;">
Content thieves are increasing day by day and and they tend to copy our original contents while publishing on their blog and websites. Sometime these copycats rank better then the original blog publisher. They are easily get high rank with out spending bundles of hours in writing posts, articles. So it is indeed unbearable for the blog owner who has spend his previous time in preparing fresh and unique contents and someone easily copy the entire post and publish any where on the web. To make these work more sophisticated for copycats who do not try to copy our post easily, we should must add a JavaScript codes which will totally disable of copying texts from blog.<br />
<a href="https://www.blogger.com/null" name="more"></a></div>
<br />
<div style="text-align: justify;">
In earlier posts we have shared a detailed random articles on duplicates contents plagiarism and many mores. Yesterday one of our reader request for how we can completely disable content selecting on blogger blog. So in today post we will show you <b>how to disable your copying of text on your blog posts</b>.<br />
<br /></div>
<h3>
Why we Need to Disable Copying of Text on Blog</h3>
<div style="text-align: justify;">
There are many plagiarism issues, we must take care of our contents and keep eyes on our duplicates contents 24/7 hours. One of the biggest problem created for those who are running Google adsense program. Because google will soon disable your account once they found your article too many time on different location on the web. The latest Google Panda updates also play strictly rules against the copyrighted contents, So we should must take care of our content and check out thrice a day who are trying to copy our posts and articles. So in below para  i will give provide you a  JavaScript codes which will help in disabling right click on blogger and WordPress So that no one cay easily grab and copying text from our posts.<br />
<br /></div>
<h3>
How To Disable Copying Text in <span style="background-color: yellow;">Blogger</span></h3>
To know how to do this job and disable forever the selecting content in blogspot blog we i will give provide a chunk of java script code which will completely disable right click on your blogger blog. So below is the step by step guide how to add this code in blogger blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVlxUSyiI6SpZjy4gPKaS989l4yYBgphlTzotTgjuaeIQBoAMIa-Oia-R_Aoa-F1rZV7opUNzyuoQn7GwfUjRKDHyMzfhzJ5Uk2Ys4Pk6ClxmGYiFfHTIHJbqE3FBdfw05jTQ35mwRue8/s1600/disable-copying-text-on-blogger.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="How to Disable Copying of Text on Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVlxUSyiI6SpZjy4gPKaS989l4yYBgphlTzotTgjuaeIQBoAMIa-Oia-R_Aoa-F1rZV7opUNzyuoQn7GwfUjRKDHyMzfhzJ5Uk2Ys4Pk6ClxmGYiFfHTIHJbqE3FBdfw05jTQ35mwRue8/s1600/disable-copying-text-on-blogger.jpg" title="How to Disable Copying of Text on Blogger" /></a></div>
<br />
<br />
<ul style="text-align: left;">
<li>Go to <b>Blogger Dashboard:</b></li>
<li>Go to layout >> Add >><b> Html/Javascipt gadget:</b></li>
<li>Now past the below given code: </li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<blockquote class="tr_bq">
<pre><script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script></pre>
</blockquote>
<br />
After pasting the given code click on save and now you are text is being protected from copied.<br />
<br />
<br />
<h3>
How to Disable Copying of Text in <span style="background-color: yellow;">Wordpress</span></h3>
In the same way you can also get ride of copycats in wordpress blog. Follow the below given steps to protect your texts from being copied inside wordpress blog.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe4M2IBinBqOySpvvr4Kjw6nCwxqbnnsOhLiK5XLiEVr7hzpFxc4kuvNWmGT5MLtwXCcQXHxDxfpE_ASpTD_UQyPiVguj9t1M0d2stC5xzCEVkh39GlU7VUe8Fvy0Kn3IU8xk8OMFwao/s1600/disable-copying-text-on-wordpress.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="How to Disable Copying of Text on Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe4M2IBinBqOySpvvr4Kjw6nCwxqbnnsOhLiK5XLiEVr7hzpFxc4kuvNWmGT5MLtwXCcQXHxDxfpE_ASpTD_UQyPiVguj9t1M0d2stC5xzCEVkh39GlU7VUe8Fvy0Kn3IU8xk8OMFwao/s1600/disable-copying-text-on-wordpress.jpg" title="How to Disable Copying of Text on Wordpress" /></a></div>
<br />
<br />
<ul style="text-align: left;">
<li>Go to <b>Dashboard:</b></li>
<li>Go to Widget Section >> <b>Add Html/javascript gdget:</b></li>
<li>Past the above codes inside the gadget:</li>
<li>You done almost:</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<ul style="text-align: left;">
<li><b>Read:</b>  How to Disable Comments in Blogger for all Posts</li>
</ul>
<br />
<h4>
<span style="background-color: orange;">Need Help in Customization</span></h4>
We hope you find this tutorial helpful for your blogger and wordpress blog. But if someone face any problem in implementation then you can feel free to ask in the below cocmment section. We love to hear from you. If you know better way than the above method then we are hunger recommended to share your thoughts with us.</div>

How To Disable Copying Of Text On Your Blogger Posts

Content thieves are increasing day by day and and they tend to copy our original contents while publishing on their blog and websites. S...

how to edit blogger templates dafely

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlg98ftMGzOWkLDsLYcsdhtZDyJJtxA5THsYjdJ0nX8hyX8J2K_9Bd6JeW72OqX4NJFWfW5u7a1XsCypoVJe04zrRrhMpuMxVcamw0CvIFcuaJRgEwXINSpD5pH6U9IOiqydQzrm5uyrs/s1600/1+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlg98ftMGzOWkLDsLYcsdhtZDyJJtxA5THsYjdJ0nX8hyX8J2K_9Bd6JeW72OqX4NJFWfW5u7a1XsCypoVJe04zrRrhMpuMxVcamw0CvIFcuaJRgEwXINSpD5pH6U9IOiqydQzrm5uyrs/s1600/1+(1).jpg" width="640" /></a></div>
<br />
<div class="sb sb_yellow">
<div class="box_title">
<span style="background-color: orange;">Introduction</span></div>
<div class="box_content">
Our few user's ask us that how they can edit their Themes. Recently, it was ask by George, who want to change some English Words to Greek in our Blogger Theme Punjab Press. So here is the Tutorial. Read it. I give Tutorial with Images. I hope it will Help you George and other too...<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-1863914858995307" data-ad-slot="8137881278" data-adsbygoogle-status="done" style="display: inline-block; height: 15px; width: 468px;"><ins style="background-color: transparent; border: none; display: inline-table; height: 15px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><ins id="aswift_1_anchor" style="background-color: transparent; border: none; display: block; height: 15px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" frameborder="0" height="15" hspace="0" id="aswift_1" marginheight="0" marginwidth="0" name="aswift_1" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" scrolling="no" style="left: 0; position: absolute; top: 0;" vspace="0" width="468"></iframe></ins></ins></ins><div class="clear">
</div>
</div>
</div>
<div class="sb sb_blue">
<div class="box_title">
Make Backup First (For Security Only, Not Important)</div>
<div class="box_content">
<b>Why this Step is Needed?</b><br />
Because some times our Template Spoiled and Show Error. This is happened when we put wrong Code in the Template while Editing it. So make a Backup is needed Step.<br />
<br />
Step 1: Go to your Blogger Dashboard.<br />
<br />
Step 2: Click on <strong class="template">Template</strong>.<br />
<br />
Step 3: Then click <strong class="buttonx">Backup/Restore</strong> button (Top Right).<br />
<br />
Step 4: Click <strong class="buttonorg">Download full template</strong>.
<br />
<div class="clear">
</div>
</div>
</div>
<div class="box_content">
Step 1: Go to your Blogger Dashboard.<br />
<br />
Step 2: Click on <strong class="template">Template</strong>.<br />
<br />
Step 3: Then click <strong class="buttonx">Edit HTML</strong> button.<br />
<br />
Step 4: Now if we want to Replace Word then click anywhere in the Template.<br />
<br />
Step 5: Press <kbk>Ctrl</kbk> + <kbk>F</kbk><br />
<br />
Step 6: Write Word in Search and Press <kbk>Enter</kbk><br />
<br />
<center>
<img height="115" src="http://i.imgur.com/xrRRYMl.png" width="640" /></center>
Step 7: Replace it.
<br />
<div class="clear">
</div>
</div>

how to edit blogger templates dafely

Introduction Our few user's ask us that how they can edit their Themes. Recently, it was ask by George, who want to change some E...

<br />
<br />
<article class="post hentry" id="1183948009669322207" itemscope="" itemtype="http://schema.org/BlogPosting">
<div id="center">
<h1 class="post-title entry-title" itemprop="name headline">
How to Upload Template on Blogger?, And Error Fix
</h1>
</div>
<div class="post-header">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-1183948009669322207" itemprop="articleBody">
<script type="text/javascript">
var date="Jan. 25, 2014";
var author="Harman Singh Hira";
var fblink="HSinghHira";
var tlink="officialHSHira";
</script>

<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqaiE-J4Tv1f3-VKBDcf47AAjRAuWbpRjgkY20j2YaTuJqHjOG0MB94V5JJsGofF7aoDcR09lZMjoE4WwsYVn01eMGaY2e9hyphenhyphenyfO5ibqyYTG7hwvB3HIsOMUl5Te8LBzNYGADzh3fBETSf/s1600/UPLOADBLOGGERTEMPLATE.jpg" width="640" /><style> 
#HSHGP {
width:256px; 
height:23px; 
margin-top:5px;
padding-top:11px; 
padding-bottom:10px; 
border:1px solid #d8d7d7; 
padding-left:10px; 
margin-bottom:10px;
margin-left:5px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wTw1UujUxM_-sGAq7X73LyRSkDsw0kr_Bv1OZGDvtLA5JEesegGBIxxt2NCkQkqt_YhLQlgBMxM_0_XYhq-hyEx0X4YYIQ2Rg1H7R0ukCxaqrpqD0KcidAIcssqFrQ8zfUYCrUFX7Dvz/s265/face.jpg); 
-webkit-border-radius:10px; 
-moz-border-radius:10px; 
border-radius:10px;
text-align:left;
} 
#kod_dostu_clickfollow {width:265px; height:23px; margin-top:5px; padding-top:11px; padding-bottom:10px; border:1px solid #d8d7d7;  padding-left:10px; margin-bottom:10px;margin-left:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwuW0-Ws_kV_ElUR9LKOt2LeN_Gy-IrzLSBDjLwnUANxHmmSvE-OM1664s67vk10KMzK0G6PuYOa9_riSkO1PVELP-65MTCuAoVvSLwtpeKiAaxg98t6o5zr8Jnqzk306eGAhKwYK7xy_/s280/twitter.gif);
-webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px}
</style>
</div>
<table>
<tbody>
<tr>
<td></td>
  <td><div id="kod_dostu_clickfollow">
<iframe allowtransparency="true" class="twitter-follow-button" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1340179658.html#_=1340634114657&id=twitter-widget-0&lang=en&screen_name=Officialhshira&show_count=true&show_screen_name=false&size=m" style="height: 20px; width: 256px;" title="site doktoru api"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

</div>
</td>
</tr>
</tbody></table>
<div class="sb sb_orange">
<div class="box_title">
Steps to Upload Template on Blogger</div>
<div class="box_content">
<b>You can upload Template by follow these steps:</b><br />
<br />
<ins class="adsbygoogle" data-ad-client="ca-pub-1863914858995307" data-ad-slot="8137881278" data-adsbygoogle-status="done" style="display: inline-block; height: 15px; width: 468px;"><ins style="background-color: transparent; border: none; display: inline-table; height: 15px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><ins id="aswift_1_anchor" style="background-color: transparent; border: none; display: block; height: 15px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" frameborder="0" height="15" hspace="0" id="aswift_1" marginheight="0" marginwidth="0" name="aswift_1" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" scrolling="no" style="left: 0; position: absolute; top: 0;" vspace="0" width="468"></iframe></ins></ins></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<br />
1. If file is zip then unzip the <strong>“blogger_template_file.zip”</strong>.<br />
<br />
2. It will contain <strong>“blogger_template_file.xml”</strong> File.<br />
<br />
3. Drop it to Desktop.<br />
<br />
4. On Blogger Dashboard Click <strong class="template">Template</strong>.<br />
<br />
5. Click <strong class="buttonx">Backup/Restore</strong> button (Top Right).<br />
<br />
6. For Safety, Click on <strong class="buttonorg">Download full template </strong>.<br />
<br />
<center>
<i>(According to me, this step is important because sometimes our New Template is not related to our Site and it impair our Site as well as our Posts.)</i></center>
<br />
7. Click <strong class="choose">Choose File</strong> button. <br />
<br />
8. Find where the <strong>“blogger_template_file.xml”</strong> file location or from Desktop.<br />
<br />
9. Then Click <strong class="buttonorg">Upload</strong>.<br />
<br />
10.Done.</div>
</div>
<br />
<div class="sb ">
<div class="box_title">
Image Tutorial</div>
<div class="box_content">
<center>
<a class="group1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrENQipiNnqVqr6ch95fM6O3FjcE7dcA46NMn3E2SOSerSyv8Lv2pNao3cbIZwpGJ8tVlOfC-WtxObtJLWblQM8clBm22x7sLt_AhTHruTvJeyRo8q-tNYrhLYhNfdJ-W6LCt3KazMEGH/s1600/Upload.png" title="Steps to Upload Template on Blogger"><img height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrENQipiNnqVqr6ch95fM6O3FjcE7dcA46NMn3E2SOSerSyv8Lv2pNao3cbIZwpGJ8tVlOfC-WtxObtJLWblQM8clBm22x7sLt_AhTHruTvJeyRo8q-tNYrhLYhNfdJ-W6LCt3KazMEGH/s1600/Upload.png" width="640" /></a></center>
<div class="clear">
</div>
</div>
</div>
<center>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" data-ad-client="ca-pub-1863914858995307" data-ad-slot="9788780076" data-adsbygoogle-status="done" style="display: inline-block; height: 60px; width: 468px;"><ins style="background-color: transparent; border: none; display: inline-table; height: 60px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><ins id="aswift_3_anchor" style="background-color: transparent; border: none; display: block; height: 60px; margin: 0; padding: 0; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" frameborder="0" height="60" hspace="0" id="aswift_3" marginheight="0" marginwidth="0" name="aswift_3" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" scrolling="no" style="left: 0; position: absolute; top: 0;" vspace="0" width="468"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>
<div class="sb sb_green">
<div class="box_title">
How to Fix Error?</div>
<div class="box_content">
Few visitor faces Problem regarding Template .xml File. If you too face this Problem then Follow below Steps.<br />
<br />
Step 1. Go to your Blog Dashboard.<br />
<br />
Step 2. Click on <strong class="template">Template</strong><br />
<br />
Step 3. You will see a Text "<b>Simple</b>", Apply First Template of Simple Templates.<br />
<br />
<center>
<img src="http://i.imgur.com/eVHVbIj.png" /></center>
<br />
<br />
Step 4. After Apply Simple template, Upload your own Template that you want. <br />
<br />
Step 5. Your Problem/Error Fix now.
<br />
<div class="clear">
</div>
</div>
</div>
<div class="sb sb_red">
<div class="box_title">
<br /></div>
</div>
</div>
<center>
<div id="ssba">
<br /></div>
</center>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<div class="post-item ">
<div class="post-meta-bot clearfix">
<div class="post-meta post-read">
<br /></div>
</div>
</div>
</div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location">
</span>
</div>
</div>
</article>

How to Upload Template on Blogger?, And Error Fix Steps to Upload Template on Blogger You can upload Te...

how to convert blogger to pdf free and easily

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg1HPIVMAT9k3bdnkAq1-mIrmQyHTsXtatGwLDdF1A2EHIODZ1IxrPOQP3dKfSzjtT9CPr6-t-gAMjiRMnzxAGiwkiqkUcsC7yJsCgUzJXz1FB1mbnS8le9c3c9JE78K5SXrvEmVouPU/s1600/How+to+Convert+Blogger+To+PDF+Free+%2526+Easily.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg1HPIVMAT9k3bdnkAq1-mIrmQyHTsXtatGwLDdF1A2EHIODZ1IxrPOQP3dKfSzjtT9CPr6-t-gAMjiRMnzxAGiwkiqkUcsC7yJsCgUzJXz1FB1mbnS8le9c3c9JE78K5SXrvEmVouPU/s1600/How+to+Convert+Blogger+To+PDF+Free+%2526+Easily.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="sb sb_blue">
<div class="box_title">
Features</div>
<div class="box_content">
<ol class="rounded-list">
<li><ol>
<li>You can Change Page Size</li>
<li>You can Change Margin</li>
<li>You can Add Watermark</li>
<li>Position, Scaling, Opacity & Rotation angle</li>
<li>Many More...</li>
</ol>
</li>
</ol>
<div class="clear">
</div>
</div>
</div>
<div class="sb sb_green">
<div class="box_title">
Convert your Blog</div>
<div class="box_content">
Step 1: Firstly, <a class="iframe" href="http://www.pdfmyurl.com/">Click here</a><br />
<br />
Step 2: Enter your Blogger URL/Link.<br />
<br />
Step 3: Click on <b>Option</b> Button if you want to Change Settings. Or,<br />
<br />
Step 4: On Last Click on <b>Convert to PDF Button</b>.<br />
<br />
Step 5: <b>Wait</b> for Few seconds whiet doing <b>Conversion progress</b>.<br />
<br />
Step 6: Your Blogger Converted PDF File will automatically Download.<br />
<br />
Step 7: Done...
<br />
<div class="clear">
</div>
</div>
</div>

how to convert blogger to pdf free and easily

Features You can Change Page Size You can Change Margin You can Add Watermark Position, Scaling, Opacity & Rotation angle ...