Helper Blogger: SEO

Showing posts with label SEO. Show all posts

Customize Labels Cloud in Blogger

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

Customize Labels Cloud in Blogger

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

+ Read more »

Breadcrumbs Navigation Widget For Blogger

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