Helper Blogger: Blogger Tutorials

Showing posts with label Blogger Tutorials. Show all posts

What Is The Best Way To Mobile Optimize Your Site?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; clear: left; color: #555555; float: left; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img alt="Mobile Site Optimization" border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh4h3oKQ9tQiu29-s3IdZYz6THM6z8-CM1prVhirwqeH000twF4bPztGjoS0zB6rrqnExnP5WEGxCLS_RYVNMY7lgTsgsqL59LsZ3tgW1S9dB16XeWACt4ABY0KZPeWV2SO6XQeXz9Df9P/s400/mobile-optimization.jpg" style="padding: 10px;" title="Mobile Site Optimization" width="400" /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
The concept of searching for content online using mobile devices is steadily on the rise, primarily due to the vast plethora of mobile devices and tablets now readily available in the market. They really seem to be advancing the cause, and more and more people are buying and using them. So how are these evolving trends changing things, and how does it effect you as a website owner? Previously, we have looked at various ways to optimize your sites for mobile devices. And there are more than one way to handle this problem. So what solution is the best for delivering content to mobile devices?</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
There are more than one ways to serve mobile content to your users, and they fall broadly into three basic categories; Responsive Web Design (obvious!), dynamic content serving, and creating the mobile version of a site.</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px; text-align: justify;">
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Responsive Web Design</h3>
<div>
<div>
Probably the most popular mobile optimization technique used today. Responsive Web Design (RWD) involves designing content that automatically resizes and rearranges itself to fit the screen size and resolution of any mobile device. Since the content itself is redirecting, there's no need to create custom redirects to other mobile pages, or changing the on-page content itself.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Responsive Web Design" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rCFwJgsi-svs2UoaMsSz5os6wfrzdDAAR2QwVuGb5mVAutasjaJ8UclwbhwqHC9aR6WV6ecLv-VyNVOJctSglHFsM3Popk3zVNZHhKNSR15XtCpPabpqiwvtzG8TzjsYABYV8rrPvLg4/s400/responsive+web+design.png" style="padding: 10px;" title="Responsive Web Design" width="400" /></div>
<br style="text-align: left;" /><div>
For the user, this means a smooth user journey, and for a content manager, it means content only needs to be updated once. From a developer viewpoint, RWD may require rebuilding your site framework with flexible templates, grids, style sheets and JavaScript but with very rewarding results. Personally, this is my favourite mobile optimization technique, and one of the easiest there is.</div>
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Dynamic content serving</h3>
<div>
This technique is somewhat similar to RWD, but very different at the same time. While RWD detects screen size and resizes the content, dynamic content serving detects the user-agent at the server-end, and then presents a custom page on the same URL. The custom page is dynamically generated.</div>
<br style="text-align: left;" /><div>
Although this technique is hard to implement and requires a lot more maintenance, it is the most powerful method for serving mobile content to users, and experts recommend it for experienced webmasters.</div>
<h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px; text-align: left;">
Separate Mobile Site</h3>
<div>
The final implementation you might want to consider is creating a separate mobile site, where smartphone users will be directed to a mobile-optimized version of your site. This implementation allows you fully customise your content for a mobile audience, since it’s often an independently hosted solution. Similar to creating dynamic serving content, this means you need to make separate updates for content or styling pieces to ensure a smooth user experience.</div>
<br style="text-align: left;" /><div>
Facebook is a perfect example of this solution. You have Facebook desktop version, and then you have Facebook mobile version. If Facebook had just used RWD to deliver mobile content, then low-end devices would have a lot of trouble keeping up with all the Facebook features such as Apps, Games, Chat, Instant notifications, and more. But with dynamic content serving and separate mobile site, Facebook has made sure that mobile users don't access features not suited/compatible for them.</div>
<br style="text-align: left;" /><div>
That was all about methods to implement mobile optimization. So tell us, what do you think is the best method for delivering mobile content?</div>
</div>
</div>
</div>

What Is The Best Way To Mobile Optimize Your Site?

The concept of searching for content online using mobile devices is steadily on the rise, primarily due to the vast plethora of mobile d...

+ 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 »

Breadcrumbs Navigation Widget 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;" 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/AVvXsEiamcoFBY0N_BuhWeH16zNvrot3oJ3pasGf1Mkmr8XtGwID3sFxr1VckUl7n3YKp8Dy3TNanfDS9ODsrFacywoaq0l2RY9pOr9ciTEenI54XGPecGqRROqID9YQlYx5XGn7freOv45WJts/s1600/breadcrumb-navigation-for-blogger.png.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamcoFBY0N_BuhWeH16zNvrot3oJ3pasGf1Mkmr8XtGwID3sFxr1VckUl7n3YKp8Dy3TNanfDS9ODsrFacywoaq0l2RY9pOr9ciTEenI54XGPecGqRROqID9YQlYx5XGn7freOv45WJts/s1600/breadcrumb-navigation-for-blogger.png.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (<b>Home » Label Name » Post Title</b>).This
 navigation appears just above of the your post title and the links are a
 trail from the homepage to post title.There is also option for showing 
the multiple labels in this navigation i.e. if any post have more than 
one label then it will show all of them.The original breadcrumbs idea is
 given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.<br />
<br />
<br /></div>
<div 0="0" margin:="margin:" style="border: solid 3px red; color: red; font-size: 18px; line-height: 0px; padding: 11px; text-align: justify; width: 500px;">
Add Breadcrumbs Navigation To Blogger
</div>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li>As always download a copy of your template</li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b></li>
<li>Now find below code,</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:include data='top' name='status-message'/></span></blockquote>
</div>
</div>
<br />
just above it copy and paste below 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>
<span style="font-family: Verdana, sans-serif;"><b:include data='posts' name='breadcrumb'/></span></blockquote>
</div>
</div>
<br />
Now find below code (if you find two occurrences of this, then locate the second one)<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>
<span style="font-family: Verdana, sans-serif;"><b:includable id='main' var='top'></span></blockquote>
</div>
</div>
<br />
 just above it paste below 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;">
<div style="background-color: white;">
</div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b:includable id='breadcrumb' var='posts'></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.homepageUrl != data:blog.url'></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;"><div class='breadcrumbs'></span><br />
<span style="font-family: Verdana, sans-serif;"> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><b:else/></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType == "item"'></span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b:loop values='data:posts' var='post'></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:post.labels'></span><br />
<span style="font-family: Verdana, sans-serif;"><div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"></span><br />
<span style="font-family: Verdana, sans-serif;"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span></span><br />
<span style="font-family: Verdana, sans-serif;"> <b:loop values='data:post.labels' var='label'></span><br />
<span style="font-family: Verdana, sans-serif;"> <b:if cond='data:label.isLast == "true"'></span><br />
<span style="font-family: Verdana, sans-serif;"> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></span><br />
<span style="font-family: Verdana, sans-serif;"> </b:if></span><br />
<span style="font-family: Verdana, sans-serif;"> </b:loop></span><br />
<span style="font-family: Verdana, sans-serif;"> » <span><data:post.title/></span></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><b:else/></span><br />
<span style="font-family: Verdana, sans-serif;"><div class='breadcrumbs'></span><br />
<span style="font-family: Verdana, sans-serif;"> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:loop></span><br />
<span style="font-family: Verdana, sans-serif;"><b:else/></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType == "archive"'></span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><div class='breadcrumbs'></span><br />
<span style="font-family: Verdana, sans-serif;"> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"><b:else/></span><br />
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType == "index"'></span><br />
<span style="font-family: Verdana, sans-serif;"><div class='breadcrumbs'></span><br />
<span style="font-family: Verdana, sans-serif;"> <b:if cond='data:blog.pageName == ""'></span><br />
<span style="font-family: Verdana, sans-serif;"> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span></span><br />
<span style="font-family: Verdana, sans-serif;"> <b:else/></span><br />
<span style="font-family: Verdana, sans-serif;"> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span></span><br />
<span style="font-family: Verdana, sans-serif;"> </b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></div></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:if></span><br />
<span style="font-family: Verdana, sans-serif;"></b:includable></span><br />
<span style="font-family: Verdana, sans-serif;"></span></blockquote>
</div>
<br />
<br />
 <b>*</b> This code will only display the last label of the post in the 
breadcrumb. If you want to display all the labels, then you will have to
 remove the code in line number 16 and 18.<br />
<br />
Now find below code,<br />

Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way ( ...

+ Read more »

Add "Link To This Post" Widget Below Every Blogger Post

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body entry-content">
<br />
<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">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBFCw4NgKvWm4Dl-4j0UPnW6izj3Bb74UbNGwun4udXEfzJnWZBdLjwpCavsveaAYxzZ5eRMnIYzur0JUgpPwXsNRq8F39__0ho2Rd_PajXT-7AqLUJRlMVZ20n3ISi-bXpRyo-EJgTk/s1600/link-to-this-post-widget-for-blogger.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBFCw4NgKvWm4Dl-4j0UPnW6izj3Bb74UbNGwun4udXEfzJnWZBdLjwpCavsveaAYxzZ5eRMnIYzur0JUgpPwXsNRq8F39__0ho2Rd_PajXT-7AqLUJRlMVZ20n3ISi-bXpRyo-EJgTk/s400/link-to-this-post-widget-for-blogger.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Click On Image To Enlarge</td></tr>
</tbody></table>
<br />
Link to this post widget is another best way to increase page views and traffic on your blog.This widget contains two text areas,in first it contains a URL of that respective post and the second text area contains a HTML code which includes title and URL of your post.Another great feature of this widget is it updates automatically i.e. you dont have to update it as you post a new article on your blog.Also the installation this widget is so easy you just have have add a little code in your blog and you are done.Now lets see how to add it.You can see the <b>demo at bottom of this post.</b></div>
<br />
<h3>
 How To Add This Widget To Blogger?</h3>
<br />
<ol style="text-align: left;">
<li>Go to <b>Blogger Dashboard > Template</b></li>
<li><b>Download a copy of it</b></li>
<li>Click on <b>Edit HTML</b></li>
<li>Hit <b>Proceed</b></li>
<li><b>Check Expand Widget Templates Checkbox</b></li>
<li>Find below code in your template,</li>
</ol>
<br />
<br />
<pre class="brush:html;"><data:post.body/></pre>
<br />
paste below code right under it,<br />
<br />
<b>Note - If you can't find or add this widget by using <code><data:post.body/></code> then find <code><div class='post-footer-line post-footer-line-1'/></code> or <code><div class='post-footer'></code> and add below code just above it.</b><br />
<br />
<pre class="brush:html;"><b:if cond='data:blog.pageType == "item"'>
<p style='color: #7AA1C3;font-weight: bold;'>If you Like This Article,Then kindly linkback to this article by copying one of the codes below.</p>

<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea><br/>
<br/><p style='color: #CF152A;font-weight: bold;'>Paste This HTML Code On Your Page:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>

<div style='text-align: right;font-size: x-small;'>
<a href='http://helperbloggers.blogspot.com/2012/08/add-link-to-this-post-widget-below.html' target='_blank'><span style="color: #838383;">LinkBack Widget</span></a></div></b:if></pre>
</div>
<br />
Now save your template and visit any post page you will watch it.</div>
</div>
</div>

Add "Link To This Post" Widget Below Every Blogger Post

Click On Image To Enlarge Link to this post widget is another best way to increase page views and traffic on your blog.This widge...

+ Read more »

Complete List Of Blogger Limits Per Account

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<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">
Blogger is a platform where anyone can open a blog using google account.It is a free service but blogger has some user friendly limits.Here I am giving some information about the limits a Blogger account has.While creating this post I've put them into a list for your reference.This will surely help you at some points in your blogging future.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FtLpvpvJRlnCYhNy7cQ1C_uNCNg-p8uJs2iWKOvs0m4UkIcljhWh1boQaBB51JwFpeY5DNqJ_aziIDwgEG64B6Dn3HaUdi8vI62tgI3lDP_RNWq7thlH539gLffcegTk-eHy1riQbh8/s1600/complete-list-of-blogger-limits.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FtLpvpvJRlnCYhNy7cQ1C_uNCNg-p8uJs2iWKOvs0m4UkIcljhWh1boQaBB51JwFpeY5DNqJ_aziIDwgEG64B6Dn3HaUdi8vI62tgI3lDP_RNWq7thlH539gLffcegTk-eHy1riQbh8/s320/complete-list-of-blogger-limits.png" width="248" /></a></div>
<br /></div>
<span style="font-size: large;">Account limits</span><br />
<br />
<ul style="text-align: left;">
<li>Number of  blogs: 100 per account.</li>
<li>Profile Interests and Favorites: 2,000 characters in each field. </li>
<li>Number of blogs to follow: 300 blogs per account. </li>
<li>Profile "About Me" info length: 1,200 characters.</li>
<li>Image uploaded via post editor: 1600px wide. Larger images can be uploaded but it will be scaled down to 1600px wide while preserving the aspect ratio.Image (for background) uploaded via Template Designer > Background page: No limit</li>
<li>Image uploaded via post editor: 8MBImage (for background) uploaded via Template Designer > Background page: 300kB.</li>
<li>Uploaded via Blogger Mobile: 250KBCapacity of image hosting (on Blogger partner Picasa Web Albums): 1024MB per account.</li>
<li>Bandwidth of image hosting: No limit.</li>
</ul>
<div>
<span style="font-family: Verdana, sans-serif; font-size: large;"><br /></span>
<span style="font-family: Verdana, sans-serif; font-size: large;">Blog Limits</span></div>
<div>
<span style="font-family: Verdana, sans-serif; font-size: large;"><br /></span></div>
</div>
<br />
<ul style="text-align: left;">
<li>Length of blog title: 90 characters.</li>
<li>Length of subdomain name (as in http://SUBDOMAIN.blogspot.com): 37 characters.</li>
<li>Length of blog description: 500 characters.</li>
<li>Number of members: 100 member invitations per blog.</li>
<li>Number of readers (for a private blog): 100 per blog.</li>
<li>Number of posts: No limit. (However, currently the Edit posts list maxes out at 5000 posts, which could make some older posts inaccessible for editing. Blogger is working on a fix).</li>
<li>Number of posts displayed on multiple-post pages (homepage, archive etc.):</li>
<li>Blogger will attempt to display the number of posts as set in Settings > Formatting > Show At Most provided the posts’ file size does not exceed the Blogger auto-pagination file size cap of 1MB.</li>
<li>Bigger posts may cause fewer number of posts to be displayed.</li>
<li>Number of static pages: 10 per blog.</li>
<li>Number of labels: 5000 unique labels per blog.</li>
</ul>
<div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Post Limits</span></div>
</div>
<br />
<ul style="text-align: left;">
<li>Length of individual post: No limit.</li>
<li>Size of individual post: No limit, but very large posts may run you up against the multiple-post page size limit (see above).</li>
<li>Number of labels: 20 unique labels per post.</li>
<li>Number of comments: No limit.</li>
<li>Length of post filename: 39 characters (auto-generated from post title, truncated to length).</li>
</ul>
<div>
<span style="font-size: large;"><br /></span>
<span style="font-size: large;">Other Limits</span> </div>
<div>
<br /></div>
</div>
<br />
<ul style="text-align: left;">
<li>Label length: 200 characters per label.</li>
<li>Comment length: 4,096 characters per comment.</li>
</ul>
</div>
<br />
I hope you find the information useful. If you know a limit that’s not in the list, please share them in the comments.<br />
Please Note - This information was given by Mr.Greenlava of bloggersentral,so I gave all credits to him.</div>
</div>

Complete List Of Blogger Limits Per Account

Blogger is a platform where anyone can open a blog using google account.It is a free service but blogger has some user friendly limi...

+ Read more »

How to Remove or Auto Hide Blogger Navbar

<div dir="ltr" style="text-align: left;" trbidi="on">
At the top of Blogger Blogs you will a navigation bar known as Navbar.It
 enables your readers to sign in to their blogger account,search for 
blogs, go to next blog, customize, etc...But many of us wants to remove 
Navbar to give a professional look to our blog.In this post I am going 
show you 4 simple tricks to remove or auto-hide the Navbar.<br>
<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcPHiSZGvGrQC_ABkt5QXG1Om_J5y-gHO4gSwK7iQ1zCkz-UTiBEjUjyiq05kkOah0cL8XKYw9IJ-Q1a9Vhc1wAkYIAV-YizGbrsohaGXBEOiGa0cBQfAH8bR2jgHcYMYdhkPbQl9fc0/s1600/how-to-remove-or-hide-blogger-navbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcPHiSZGvGrQC_ABkt5QXG1Om_J5y-gHO4gSwK7iQ1zCkz-UTiBEjUjyiq05kkOah0cL8XKYw9IJ-Q1a9Vhc1wAkYIAV-YizGbrsohaGXBEOiGa0cBQfAH8bR2jgHcYMYdhkPbQl9fc0/s320/how-to-remove-or-hide-blogger-navbar.png" width="320"></a></div>
<br>
<h3 style="color: red; font-weight: normal; text-align: left;">
<b></b></h3></div>

How to Remove or Auto Hide Blogger Navbar

At the top of Blogger Blogs you will a navigation bar known as Navbar.It enables your readers to sign in to their blogger account,search f...

+ Read more »