tag:blogger.com,1999:blog-26007418986670322162024-03-13T08:58:34.106-07:00WEB.SILOG.Your daily web tips, tricks, tweaks and treats over breakfast.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-2600741898667032216.post-40109894046477395442011-07-16T18:42:00.000-07:002011-08-14T19:10:55.726-07:00post titles with thumbnails on bloggerOthers prefer a minimal look to browse over the posts found on <b>blogger archive</b>, <b>label</b> and <b>search pages</b>. It's easier and faster to scan through the posts if they're listed as <b>titles along their corresponding thumbnails</b>. Thus, here is a <b>tweak</b> to <b>show only post titles with thumbnails on blogger archive, label</b> and <b>search pages</b>.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" title="show post title with thumbnail on blogger" href="http://4.bp.blogspot.com/-gWkubv01ekY/Tkh57RfDABI/AAAAAAAAAWc/8vUghk_CTsM/s1600/titlewthumb1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="281" alt="show post title with thumbnail on blogger" src="http://4.bp.blogspot.com/-gWkubv01ekY/Tkh57RfDABI/AAAAAAAAAWc/8vUghk_CTsM/s320/titlewthumb1.png" width="320" /></a></div><br />
<span class="demo">Post Title With Thumbnail Demo on:<br />
<a href="http://websilogdemo4.blogspot.com/2011_08_01_archive.html">Archive Page</a><br />
<a href="http://websilogdemo4.blogspot.com/search/label/ipsum">Label Page</a><br />
<a href="http://websilogdemo4.blogspot.com/search?updated-max=2011-08-03T19%3A57%3A00-07%3A00&max-results=2">Search Page - Home Page Older Posts</a><br />
<a href="http://websilogdemo4.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=6">Search Page - Archive Year</a><br />
Post Summary Demo on:<br />
<a href="http://websilogdemo4.blogspot.com/">Home Page</a><br />
Full Post Demo on:<br />
<a href="http://websilogdemo4.blogspot.com/p/about.html">Static Page</a></span><br />
<br />
<br />
This tweak is a combination of <a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html#wojs"><b>How to Add Read More with Thumbnails WITHOUT JAVASCRIPT on Blogger</b></a> and <a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html#titleonarchivelabelsearch"><b>How to Show Only Post Titles on Blogger Archive, Label, and Search Pages</b></a> with a lil twist. So don't forget to <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="back up blogger template">back up your template</a>!<br />
<br />
<br />
<h5>Step 1. <b>Show Post Titles AND Thumbnails on Blogger Archive, Label and Search Pages Only</b>.</h5>1. Go to <b>EDIT HTML</b> page.<br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Search for <b><b:include data='post' name='post'/></b>.<br />
4. Replace it with:<br />
<pre><code>
<!-- start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- end -->
</code></pre><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" title="show post title and thumbnail on blogger archive, label and search pages" href="http://2.bp.blogspot.com/-LG4fKsWX-sA/Tkh555jtBZI/AAAAAAAAAWY/Rqlvz1GJ15w/s1600/titlewthumb3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" alt="show post title and thumbnail on blogger archive, label and search pages" src="http://2.bp.blogspot.com/-LG4fKsWX-sA/Tkh555jtBZI/AAAAAAAAAWY/Rqlvz1GJ15w/s320/titlewthumb3.png" width="314" /></a></div><br />
<b>THE TRICK.</b><br />
<pre><code>
</code><h4><-- show on blogger archive, label and search pages only --></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'></span>
<h4><-- show thumbnail --></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if></span>
<h4><-- show title --></h4><span style="background-color: #eeeeee; color: black;">
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></span>
<h4><-- ELSE show full post --></h4><span style="background-color: #eeeeee; color: black;">
<b:else/>
<b:include data='post' name='post'/>
</b:if></span>
</pre><br />
<br />
<h5>Step 2. <b>Add the Thumbnail Code WITHOUT Javascript</b>.</h5>1. Search for <b><data:post.body /></b>.<br />
2. You'll see a block of codes similar to this. Highlight them.<br />
<pre><code>
<span style="background-color: #eeeeee; color: black;">
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if ></span>
</code></pre><br />
3. Replace the entire block of codes above with this new one:<br />
<pre><code>
<!-- start -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/></a>
</div>
</b:if>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<!-- end -->
</code></pre><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" title="how to add thumbnails without javascript on blogger" href="http://1.bp.blogspot.com/-D3OzMaJTG7M/Tkh55ZnHEWI/AAAAAAAAAWU/iyrmHcYnqFg/s1600/titlewthumb2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" alt="how to add thumbnails without javascript on blogger" src="http://1.bp.blogspot.com/-D3OzMaJTG7M/Tkh55ZnHEWI/AAAAAAAAAWU/iyrmHcYnqFg/s320/titlewthumb2.png" width="266" /></a></div><br />
<br />
<b>THE TRICK.</b><br />
<pre><code>
</code><h4><-- show thumbnail --></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if></span>
<h4><-- show post summary --></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/></a>
</div>
</b:if></span>
<h4><-- ELSE show full post --></h4><span style="background-color: #eeeeee; color: black;">
<b:else/>
<data:post.body/>
</b:if></span>
</pre><br />
<br />
<h5>Step 3. <b>Add CSS</b>.</h5>1. Search for <b></b:skin></b>. You'll see a line similar to this:<br />
<pre><code>
]]></b:skin>
</code></pre><br />
2. Above it, add these lines:<br />
<pre><code>
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
</code></pre><br />
<b>Quick Description</b>.<br />
This is to wrap the post title around the thumbnail which in turn is <b>aligned to the left</b>. The image has a <b>10 pixel margin</b> (right and bottom) from the text.<br />
<br />
If you'd rather have the thumbnail on the right, you can change the codes to:<br />
<pre><code>
.thumb img {
float: <b>right;</b>
margin: <b>10px</b> 0 0 <b>10px</b>;
}
</code></pre><br />
3. Below <b></b:skin></b>, add these lines:<br />
<pre><code>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-outer {
height: 100px;
}
h3.post-title {
margin-top: 20px;
}
</style>
</b:if>
</b:if>
</b:if>
</code></pre><br />
<b>Quick Description</b>.<br />
This is a <b>conditional CSS property</b> that will <b>adjust the height</b> to accomodate the thumbnail and <b>vertically center</b> the title to the image, <b>on specific pages</b> (i.e. blogger archive, label and search pages). See how it looks like if there is no conditional CSS property:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" title="center thumbnail and post title vertically" href="http://3.bp.blogspot.com/-CvMzPtnnvKY/Tkh54NqqpEI/AAAAAAAAAWM/qGL-447w-R0/s1600/titlewthumb4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" alt="center thumbnail and post title vertically" src="http://3.bp.blogspot.com/-CvMzPtnnvKY/Tkh54NqqpEI/AAAAAAAAAWM/qGL-447w-R0/s320/titlewthumb4.jpg" width="320" /></a></div><br />
You can change the height and align the title vertically by changing the highlighted values.<br />
<pre><code>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-outer {
height: <span style="background-color: #eeeeee; color: black;">100px</span>;
}
h3.post-title {
margin-top: <span style="background-color: #eeeeee; color: black;">20px</span>;
}
</style>
</b:if>
</b:if>
</b:if>
</code></pre><br />
4. <b>SAVE TEMPLATE.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" title="how to align post title and thumbnail on blogger" href="http://2.bp.blogspot.com/-XYrT7ye3Ig4/Tkh54gIoSrI/AAAAAAAAAWQ/vLrSNEVDglA/s1600/titlewthumb5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to align post title and thumbnail on blogger" border="0" height="222" src="http://2.bp.blogspot.com/-XYrT7ye3Ig4/Tkh54gIoSrI/AAAAAAAAAWQ/vLrSNEVDglA/s320/titlewthumb5.png" width="320" /></a></div><br />
<br />
<h6>Other "Read More" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html">3 ways to add "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html">customize "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html">2 ways to add read more with thumbnails on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html">show only post titles on blogger homepage</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com22tag:blogger.com,1999:blog-2600741898667032216.post-48321168221122287482011-07-15T04:46:00.000-07:002011-08-14T19:18:00.793-07:00show only post titles on blogger homepage<span class="demo"><a href="http://websilogdemo2.blogspot.com/">View demo</a>.</span><br />
<br />
<br />
There are several ways to tweak the default posts seen on your blogger home page. You can <a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html" title="show post summaries on blogger"><b>show snippet of every post</b></a>, and maybe <a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html" title="show post summaries with thumbnails on blogger"><b>display them with thumbnails</b></a>. Or if you prefer a minimal look, you can <b>show only post titles</b> instead.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-GrfvQSxCMK0/TkZkqqrnqtI/AAAAAAAAAV4/uytvN83OiR8/s1600/titleonhome1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="show post titles on blogger home page only"><img alt="show post titles on blogger home page only" border="0" height="290" src="http://1.bp.blogspot.com/-GrfvQSxCMK0/TkZkqqrnqtI/AAAAAAAAAV4/uytvN83OiR8/s320/titleonhome1.png" width="320" /></a></div><br />
<br />
<h5><a href="http://www.blogger.com/post-create.g?blogID=2600741898667032216" name="titleonhome"></a>How to Show Only Post Titles on Blogger Home Page.</h5><a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="back up template on blogger">Back up</a>! <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="back up template on blogger">Back up</a>!<br />
<br />
1. Go to <b>EDIT HTML</b> page.<br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Search for <b><b:include data='post' name='post'/></b>.<br />
4. Replace it with:<br />
<pre><code>
<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->
</code></pre><br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-MrRSQjTe2sE/TkZkrFFzyhI/AAAAAAAAAV8/RTx9ncTESl4/s1600/titleonhome2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="how to show only post titles on blogger home page"><img alt="how to show only post titles on blogger home page" border="0" height="320" src="http://3.bp.blogspot.com/-MrRSQjTe2sE/TkZkrFFzyhI/AAAAAAAAAV8/RTx9ncTESl4/s320/titleonhome2.png" width="271" /></a></div><br />
<br />
<h5>The Code.</h5>The thing with blogger home page is that it has default links to next and previous posts. Thus, showing a list of post titles is <b>not limited to home page</b> alone, we have to <b>display them to search pages</b> as well.<br />
<br />
<b>THE COMPLETE CODE.</b><br />
<pre><code>
<!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->
</code></pre><br />
Let's inspect each <b>IF statement</b> and what each means.<br />
1. <b>FIRST "IF"</b>. For ITEM PAGES.<br />
<br />
<span class="demo"><a href="http://websilogdemo2.blogspot.com/2011/08/post-5.html">View demo</a>.</span><br />
<br />
<br />
<pre><code>
<!-- start -->
<h4><b:if cond='data:blog.pageType != &quot;item&quot;'></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
</span>
<h4><b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if></h4><!-- end -->
</code></pre><br />
What this means.<br />
<b><b:if cond='data:blog.pageType != &quot;item&quot;'></b> - If blogger page type is NOT an item page (i.e. if the page type is not a POST page)<br />
<span style="background-color: black; color: #eeeeee;"><b>codes here</b></span> - perform these highlighted codes<br />
<b><b:else/></b> - ELSE if it is an item page<br />
<b><b:include data='post' name='post'/> <!-- item pages --></b> - show entire post content or body on the item pages<br />
<b></b:if></b> - end of IF condition<br />
<br />
<br />
2. <b>SECOND "IF"</b>. For LABEL PAGES.<br />
<br />
<span class="demo"><a href="http://websilogdemo2.blogspot.com/search/label/ipsum">View demo</a>.</span><br />
<br />
<br />
<pre><code>
<h2><!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'></h2><h4><b:if cond='data:blog.searchLabel == &quot;&quot;'></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if>
</b:if>
</span>
<h4><b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if></h4><h2><b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end --></h2>
</code></pre><br />
What this means.<br />
<b><b:if cond='data:blog.searchLabel == &quot;&quot;'></b> - If the label page has a label name that IS "" or blank,<br />
<span style="background-color: black; color: #eeeeee;"><b>codes here</b></span> - perform these highlighted codes<br />
<b><b:else/></b> - ELSE if the label page has a label name that is NOT blank (i.e. there is a label name)<br />
<b><b:include data='post' name='post'/> <!-- label pages --></b> - show entire post content or body on the label pages<br />
<b></b:if></b> - end of IF condition<br />
<br />
<br />
3. <b>THIRD "IF"</b>. FOR HOMEPAGE.<br />
<br />
<span class="demo"><a href="http://websilogdemo2.blogspot.com/">View demo</a>.</span><br />
<br />
<br />
<pre><code>
<h2><!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'></h2><h4><b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</b:if></span>
<h4></b:if></h4><h2><b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end --></h2>
</code></pre><br />
What this means.<br />
<b><b:if cond='data:blog.url == data:blog.homepageUrl'></b> - If the blog url IS the homepage URL,<br />
<b><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage --></b> - show post title and its link on home page<br />
<b><b:else/></b> - ELSE if it is NOT home page, (i.e. perhaps, it IS archive page or static page or search page)<br />
<span style="background-color: black; color: #eeeeee;"><b>codes here</b></span> - perform these highlighted codes<br />
<b></b:if></b> - end of IF condition<br />
<br />
<br />
4. <b>FOURTH "IF"</b>. For ARCHIVE PAGES.<br />
<br />
<span class="demo"><a href="http://websilogdemo2.blogspot.com/2011_08_01_archive.html">View demo</a>.</span><br />
<br />
<br />
<pre><code>
<h2><!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/></h2><h4><b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/></h4><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
</b:if>
</span>
<h4></b:if></h4><h2></b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end --></h2>
</code></pre><br />
What this means.<br />
<b>b:if cond='data:blog.pageType == &quot;archive&quot;'></b> If the blogger page type is an archive page,<br />
<b><b:include data='post' name='post'/> <!-- archive pages --></b> show entire post content or body on archive pages<br />
<b><b:else/></b> ELSE if it is NOT an archive page, (i.e. if it IS either a static page or search page)<br />
<span style="background-color: black; color: #eeeeee;"><b>codes here</b></span> - perform these highlighted codes<br />
<b></b:if></b> - end of IF condition<br />
<br />
<br />
5. <b>FIFTH "IF"</b>. For STATIC and SEARCH PAGES.<br />
<br />
<span class="demo"><b>STATIC PAGE</b>: <br />
<a href="http://websilogdemo2.blogspot.com/p/about.html">View demo</a>.</span><br />
<span class="demo"><b>SEARCH PAGES</b>: <br />
<a href="http://websilogdemo2.blogspot.com/search?updated-max=2011-08-06T05%3A11%3A00-07%3A00&max-results=2">Home Page Older Posts demo</a>.<br />
<a href="http://websilogdemo2.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=5">Archive Year demo</a>.</span><br />
<br />
<br />
<pre><code>
<h2><!-- start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.searchLabel == &quot;&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- homepage -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include data='post' name='post'/> <!-- archive pages -->
<b:else/></h2><h4><b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='post'/> <!-- static pages -->
<b:else/></h4><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages -->
<h4></b:if></h4><h2></b:if>
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- label pages -->
</b:if>
<b:else/>
<b:include data='post' name='post'/> <!-- item pages -->
</b:if>
<!-- end -->
</h2>
</code></pre><br />
<br />
What this means.<br />
<b><b:if cond='data:blog.pageType == &quot;static_page&quot;'></b> If the blogger page type is a static page,<br />
<b><b:include data='post' name='post'/> <!-- static pages --></b> show entire post content or body on static pages<br />
<b><b:else/></b> ELSE if it is NOT a static page, (i.e. if it IS a search page)<br />
<b><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <!-- search pages --></b> show post title and its link on search pages<br />
<b></b:if></b> - end of IF condition<br />
<br />
<br />
To understand more about <b>Blogger Page Types and its code snippets</b>, please visit My Stady's <a href="http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html" title="different page types on blogger">7 Blogger Page Types: Analysis, Code Snippets, Data Matrix</a><br />
<br />
<br />
<h5>Show Only Post Titles on Blogger Home Page, Archive, Label and Search Pages</h5>If you prefer a neater code to <b>display post titles on blogger home, archive, label and search pages</b>, and <b>retain full post on static pages</b>, this code might be what you're looking for:<br />
<br />
<pre><code>
<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- end -->
</code></pre><br />
Just follow <b><a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html#titleonhome">STEPS 1-3</a></b>, and on step 4, replace <b><b:include data='post' name='post'/></b> with the above code.<br />
<br />
<br />
<h5><a name="titleonarchivelabelsearch"></a>Show Only Post Titles on Blogger Archive, Label, and Search Pages.</h5>If you prefer <b>post titles on archive, label and search pages only</b>, <b>post summaries on home page</b> and <b>full post on static pages</b>, here is the code:<br />
<pre><code>
<!-- start -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- end -->
</code></pre><br />
<br />
<span class="demo"><b>Post Title Demo On</b>: <br />
<a href="http://websilogdemo3.blogspot.com/2011_08_01_archive.html">Archive Page</a><br />
<a href="http://websilogdemo3.blogspot.com/search/label/ipsum">Label Page</a><br />
<a href="http://websilogdemo3.blogspot.com/search?updated-max=2011-08-01T06%3A11%3A00-07%3A00&max-results=3">Search Page - Home Page Older Posts</a><br />
<a href="http://websilogdemo3.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00-08%3A00&updated-max=2012-01-01T00%3A00%3A00-08%3A00&max-results=7">Search Page - Archive Year</a></span><br />
<span class="demo"><b>Post Summary Demo on</b>: <br />
<a href="http://websilogdemo3.blogspot.com/">Home Page</a></span><br />
<span class="demo"><b>Full Post Demo on</b>: <br />
<a href="http://websilogdemo3.blogspot.com/p/about.html">Static Page</a></span><br />
<br />
<br />
To see complete instructions, check out <a href="http://teresagiesecke.wordpress.com/2011/02/26/how-to-show-post-titles-only-in-blogger-labels-search-and-archives/" title="show post titles on blogger label page, search page and archives">Teresa Giesecke's post</a>.<br />
<br />
<br />
<h6>Other "Read More" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html">3 ways to add "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html">customize "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html">2 ways to add read more with thumbnails on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/post-titles-with-thumbnails-on-blogger.html">post titles with thumbnails on blogger</a><br />
<br />
<br />
<h6>Related Blogs.</h6><a href="http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html#label-page-type" title="different page types on blogger">7 Blogger Page Types: Analysis, Code Snippets, Data Matrix</a><br />
<a href="http://teresagiesecke.wordpress.com/2011/02/26/how-to-show-post-titles-only-in-blogger-labels-search-and-archives/">How to Show Post Titles Only in Blogger Labels, Search and Archives</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com2tag:blogger.com,1999:blog-2600741898667032216.post-49785387315170058782011-07-14T21:51:00.000-07:002011-08-14T19:16:00.236-07:002 ways to add read more with thumbnails on blogger<a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html" title="how to create a post summary on blogger home">Adding read more on blogger</a> may further be tweaked by <b>inserting thumbnails</b> next to it. This can be done in two ways. <b>WITH JAVASCRIPT</b>, and <b>WITHOUT JAVASCRIPT</b>.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-HrRIsgzfW2Q/TkNgQzkRVwI/AAAAAAAAAVw/sM6hhYL9a8o/s1600/readmorewiththumb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="add read more with thumbnails with and without javascript"><img alt="add read more with thumbnails with and without javascript" border="0" height="214" src="http://2.bp.blogspot.com/-HrRIsgzfW2Q/TkNgQzkRVwI/AAAAAAAAAVw/sM6hhYL9a8o/s320/readmorewiththumb.png" width="320" /></a></div><br />
<br />
<h5>Technique #1. <b>Read More with Thumbnails USING Javascript.</b></h5><b>Pros.</b><br />
-post snippet length may be customized based on your preference<br />
-thumbnail size (width and height) may be changed based on your preference<br />
-no need to place image before the jump break just to generate thumbnail<br />
<br />
<b>Cons.</b><br />
uses javascript, thus <br />
-it doesnt work if javascript is disabled on user's browsers<br />
-the extended coding brought by the script may cause the site to slow down, and <br />
-it is not search-engine friendly.<br />
<br />
In this case, we'll use <a href="http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html" title="Blogger Auto Read more with thumbnail">Greenlava's hack</a> to <b>add post summaries with thumbnails</b> where it uses this script placed before <b></header></b>:<br />
<pre><code>
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
<span style="background-color: #eeeeee; color: black;">summary_noimg = 430;</span> //summary length when no image
<span style="background-color: #eeeeee; color: black;">summary_img = 340;</span> //summary length when with image
<span style="background-color: #eeeeee; color: black;">img_thumb_height = 200;</span>
<span style="background-color: #eeeeee; color: black;">img_thumb_width = 200;</span>
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
</code></pre><br />
and these lines of code to replace <b><data:post.body/></b><br />
<pre><code>
<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
</code></pre><br />
To learn more about this hack and <b>how to customize the snippet length and thumbnail size</b>, check out <a href="http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html" title="Blogger Auto Read more with thumbnail">Blogger Sentral's auto read more with thumbnail hack</a>.<br />
<br />
<br />
<br />
<h5><a name="wojs"></a>Technique #2. <b>Read More with Thumbnails WITHOUT Javascript.</b></h5><b>Pros.</b> <br />
-no need at add jump breaks on every post as it automatically creates post snippet<br />
-automatically generates first image as thumbnail<br />
NO JAVASCRIPT NEEDED thus <br />
-cross browser compatible<br />
-faster page loading<br />
-more search-engine friendly<br />
<br />
<b>Cons.</b><br />
-thumbnail width and height dependent on blogger's default thumbnail size which is 72px by 72px. <br />
-post snippet length dependent on blogger's default length summary which is about 20 words including the word "<b>read more >></b>"<br />
-thumbnail does not work if the only content before the jump break is an image.<br />
<br />
<span class="demo"><a href="http://websilogdemo.blogspot.com/">View demo</a>.</span><br />
<br />
<br />
This <a href="http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html" title="Easy Post Summaries and Thumbnails for Blogger Blogs">hack from Blogger Buster</a> involves:<br />
(1) replacing codes in the template from<br />
<pre><code>
<data:post.body />
</code></pre><br />
to<br />
<pre><code>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</code></pre><br />
(2) and including the below CSS property to properly align the thumbnail to the post snippet.<br />
<br />
<pre><code>
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
</code></pre><br />
<a href="http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html" title="Easy Post Summaries and Thumbnails for Blogger Blogs"><b>View her full tutorial</b></a>.<br />
<br />
<br />
If you're using a template from Blogger's Template Designer, a <b>neater code</b> would be to:<br />
1. search for:<br />
<pre><code>
<data:post.body/>
</code></pre><br />
2. find this block of codes, highlight them.<br />
<pre><code>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if >
</code></pre><br />
3. replace the entire block with the whole block of codes below:<br />
<pre><code>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'><span style="background-color: #eeeeee; color: black;">
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</code></pre><br />
the highlighted lines came from <a href="http://www.bloggerbuster.com/">Blogger Buster</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-7dMKAjrIyR4/TkNgLv2-bmI/AAAAAAAAAVs/hjduRVKxs_0/s1600/readmorewiththumb2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="how to add read more with thumbnails no javascript"><img alt="how to add read more with thumbnails no javascript" border="0" height="320" src="http://2.bp.blogspot.com/-7dMKAjrIyR4/TkNgLv2-bmI/AAAAAAAAAVs/hjduRVKxs_0/s320/readmorewiththumb2.png" width="310" /></a></div><br />
<br />
<h6>Other "Read More" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html">3 ways to add "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html">customize "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html">show only post titles on blogger homepage</a><br />
<a href="http://websilog.blogspot.com/2011/07/post-titles-with-thumbnails-on-blogger.html">post titles with thumbnails on blogger</a><br />
<br />
<br />
<h6>Related Blogs.</h6><a href="http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html">Blogger Auto Read more with thumbnail</a><br />
<a href="http://www.bloggerbuster.com/2011/03/easy-post-summaries-and-thumbnails-for.html">Easy Post Summaries and Thumbnails for Blogger Blogs</a>.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com4tag:blogger.com,1999:blog-2600741898667032216.post-90898305239679865542011-07-13T04:38:00.000-07:002011-08-14T19:14:38.641-07:00customize "read more" on bloggerIf you have already <a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html" title="how to create a post summary on blogger home">added a "read more" link to your blog</a>, the next step is to customize it. You can change the text <b>"read more"</b> to <b>"read full entry"</b> or switch to an <b>eye catching image</b> instead.<br />
<br />
Before we style the also known as <b>"jump break link"</b>, let's take a quick look at the <b>advantages of having a "read more" function</b> on a blog.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-SIQDlne0CWc/TjVGwTceJkI/AAAAAAAAATs/DQPoEJtZi24/s1600/stylereadmore1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to customize read more link on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-SIQDlne0CWc/TjVGwTceJkI/AAAAAAAAATs/DQPoEJtZi24/s320/stylereadmore1.jpg" title="how to customize read more link on blogger" width="265" /></a></div><br />
<br />
<h5>Why add "read more" link?</h5><b>for the readers</b>:<br />
they can see a snippet of the post right away<br />
no more long posts to scroll just to view the next post<br />
they can immediately choose which content to view based on the post summary<br />
<br />
<b>for the blogger</b>:<br />
he/she can show as many posts as he/she can on the main page<br />
faster home page loading<br />
he/she can showcase the posts by providing a "teaser" on each<br />
<br />
On to the customization.<br />
<br />
<br />
<h5>Change "read more" text.</h5>This can be done in two ways.<br />
<b>Technique #1. Configure Blog Posts Widget.</b><br />
1. Go to <b>DESIGN</b>. <b>PAGE ELEMENTS</b> page. Look for the <b>BLOG POSTS</b> widget. Click <b>EDIT</b>.<br />
2. On the <b>CONFIGURE BLOG POSTS</b> pop up window, under <b>MAIN PAGE OPTIONS</b> section, change <b>POST PAGE LINK TEXT</b> to your preferred text. <b>SAVE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-_OZGIE1Mtog/TjVGvbYVveI/AAAAAAAAATo/zbmZko9zbp0/s1600/stylereadmore2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to change the read more text on blogger" border="0" height="223" src="http://1.bp.blogspot.com/-_OZGIE1Mtog/TjVGvbYVveI/AAAAAAAAATo/zbmZko9zbp0/s320/stylereadmore2.png" title="how to change the read more text on blogger" width="320" /></a></div><br />
<br />
<b>Technique #2.<a name="changejumptext"></a>Change the JumpText tag in the template.</b><br />
<a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html#comments" title="how to create a backup of blogger template">Backup your template</a>!<br />
1. Go to <b>EDIT HTML page</b>.<br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Search for <b><b:if cond='data:post.hasJumpLink'></b>. You'll see something similar to this:<br />
<pre><code>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> <span style="background-color: #eeeeee; color: black;"><data:post.jumpText/></span></a>
</div>
</b:if >
</code></pre><br />
4. Change the highlighted line to your preferred text so that it will be something like this.<br />
<pre><code>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> <span style="background-color: #eeeeee; color: black;">new "read more" text here</span></a>
</div>
</b:if >
</code></pre><br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-qHmqnZjT2Io/TjVGuzWtEBI/AAAAAAAAATk/qzQqaUy5eLA/s1600/stylereadmore3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to change jump break text on blogger" border="0" height="309" src="http://2.bp.blogspot.com/-qHmqnZjT2Io/TjVGuzWtEBI/AAAAAAAAATk/qzQqaUy5eLA/s320/stylereadmore3.png" title="how to change jump break text on blogger" width="320" /></a></div><br />
<br />
<h5>Style "read more" text.</h5>The style class of Blogger's "read more" is "jump-link". Therefore:<br />
1. Go to <b>EDIT HTML page</b>.<br />
2. Search for <b>}]]></b:skin></b>.<br />
3. Add these style codes above it.<br />
<pre><code>
.jump-link a {
font-size: 14px;
color: #f9f9f9;
background-color: #575757;
padding: 3px;
text-decoration: none;
}
.jump-link a:hover {
font-size: 18px;
color: #2d2d2d;
background-color: #eaeaea;
padding: 3px;
}
</code></pre><br />
<br />
<b>What it means</b>.<br />
<b>jump-link a {}</b> - style properties for the jump break link<br />
<b>jump-link a:hover {}</b> - style properties for the jump break link when hovered by mouse<br />
<b>font-size</b> - font size of the link and when hovered<br />
<b>color</b> - color of the text link and when hovered<br />
<b>background-color</b> - background color of the text link and when hovered<br />
<b>padding</b> - space around the text link<br />
<b>text-decoration: none;</b> - the link does not have an underline<br />
<br />
<a name="demo1"><span class="demo">Quick Demo.</span></a><br />
<span class="jump-linkdemo"><a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html#demo1">Click to read more..</a></span><br />
<br />
To learn more about styling links, check out <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link2" title="add different styles to hyperlinks">W3Schools' Add different styles to hyperlinks</a> and <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link_advanced" title="create link boxes using CSS">Create link boxes</a>.<br />
<br />
4. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h5>Replace "read more" text with an image.</h5>The process is similar to <b><a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html#changejumptext">changing the JumpText tag in the template</a></b>. Instead of text, replace <b><data:post.jumpText/></b> with an img tag thus the new code will be:<br />
<pre><code>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'> <span style="background-color: #eeeeee; color: black;"><img src="imageurlhere.jpg" border=0 /></span></a>
</div>
</b:if >
</code></pre><br />
where:<br />
<b>imageurlhere.jpg</b> - the url of the "read more" image<br />
<b>border=0</b> - no border around the image<br />
<br />
<span class="demo">Quick Demo.</span><br />
<img class="demoimg" border="0" src="http://i1189.photobucket.com/albums/z436/websilog/readmoredemo.jpg" /><br />
<br />
<br />
<h5>Style "read more" image.</h5>Basic styling of an image is simply adding a style property inside the img tag, i.e. <b><img src="imageurlhere.jpg" <span style="background-color: #000000; color: #eeeeee;">style="padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px; background-color: white;" </span> /></b> <br />
<br />
What it means.<br />
<b>padding:8px;</b> - space around the image<br />
<b>border:solid;</b> - border style applied to the image<br />
<b>border-color: #dddddd #aaaaaa #aaaaaa #dddddd;</b> - color of the border from top, right, bottom, left<br />
<b>border-width: 1px 2px 2px 1px; </b> - width of the border in pixel from top, right, bottom, left<br />
<b>background-color: white;</b> - background color of the image<br />
<br />
In this case, I created a drop shadow effect using simple css based on <a href="http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/" title="create an image drop shadow without using css3">Notion's trick</a>. You may also use <a href="http://www.wordpressthemeshock.com/css-drop-shadow/" title="css3 drop shadow generator">CSS3 drop shadow</a> to achieve the same effect.<br />
<br />
<span class="demo">Quick Demo.</span><br />
<img border="0" src="http://i1189.photobucket.com/albums/z436/websilog/readmoredemo.jpg" style="background-color: white; border-color: rgb(221, 221, 221) rgb(170, 170, 170) rgb(170, 170, 170) rgb(221, 221, 221); border-style: solid; border-width: 1px 2px 2px 1px; padding: 8px" /><br />
<br />
<br />
<h6>Other "Read More" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/add-read-more-on-blogger.html">3 ways to add "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html">2 ways to add read more with thumbnails on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html">show only post titles on blogger homepage</a><br />
<a href="http://websilog.blogspot.com/2011/07/post-titles-with-thumbnails-on-blogger.html">post titles with thumbnails on blogger</a><br />
<br />
<br />
<h6>Related Blog.</h6><a href="http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/" title="create an image drop shadow without using css3">Cool CSS Image Border Style</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com5tag:blogger.com,1999:blog-2600741898667032216.post-62970077053035573452011-07-12T23:31:00.000-07:002011-08-09T06:13:39.345-07:00blogger feed widget updates are delayedI have a <a href="http://www.blogger.com/post-edit.g?blogID=2600741898667032216&postID=6297007705303557345#Feed1" title="add recent posts widget using blogger feed gadget"><b>recent posts widget</b></a> installed on my blog and used the FEED GADGET on Blogger to fetch the latest entries through my feedburner feed - <b>http://feeds.feedburner.com/Websilog/</b>. A couple of times, I noticed that even though my feedburner feed showed the most recent entry immediately after post, my RECENT POST WIDGET behaved in contrast. <br />
<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-XNHIwgdDe54/TjT3Fjoz9oI/AAAAAAAAATU/5XmnSnRJ8e4/s1600/delay1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="my feed widget on blogger dont update" border="0" height="200" src="http://2.bp.blogspot.com/-XNHIwgdDe54/TjT3Fjoz9oI/AAAAAAAAATU/5XmnSnRJ8e4/s320/delay1.png" title="my feed widget on blogger dont update" width="320" /></a></div><br />
<br />
<b>Refreshing and reloading the page</b>, <b>clearing my browser's cache and cookies</b> nor <b>logging out then in on blogger</b> didnt help. 10 minutes passed, half an hour, one whole hour, it's still the same. <b>my blogger feed widget updates are late</b>!<br />
<br />
If you'll encounter this bug, here's some of things I did to fix it.<br />
1. <b>Check your blog's default atom and rss feed</b>. See if it shows the newest post.<br />
Atom 1.0: <b>http://<span style="background-color: black; color: #eeeeee;">blogname</span>.blogspot.com/feeds/posts/default</b><br />
RSS 2.0: <b>http://<span style="background-color: black; color: #eeeeee;">blogname</span>.blogspot.com/feeds/posts/default?alt=rss</b><br />
<br />
Change <b>blogname</b> with the name of your blog.<br />
<br />
2. <b>Check your feedburner feed if it's the same with your blog's default atom and rss feeds</b>. If it isn't, <b><a href="http://feedburner.google.com/fb/a/ping" title="how to ping feedburner">PING FEEDBURNER</a>.</b> This tells feedburner to check your feed for updates immediately.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-AN1A5tbcYtk/TjT3Ku_c-7I/AAAAAAAAATg/dnqRM79gfcQ/s1600/delay2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to tell feedburner that your blog has been updated" border="0" height="279" src="http://2.bp.blogspot.com/-AN1A5tbcYtk/TjT3Ku_c-7I/AAAAAAAAATg/dnqRM79gfcQ/s320/delay2.png" title="how to tell feedburner that your blog has been updated" width="320" /></a></div><br />
3. <b>Go to <a href="http://pingomatic.com/" title="how to ping search engines">PINGOMATIC</a>.</b> This will ping different search engines and tell them that your blog has been updated. On the RSS URL, enter your feedburner feed if it shows the most updated post. If feedburner is delayed, use your blog's default atom/rss feed.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-LWnc-EiPuAA/TjT3KAOeeHI/AAAAAAAAATc/Xpx1dsLyHzk/s1600/delay3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to tell search engines that your blog has been updated" border="0" height="305" src="http://4.bp.blogspot.com/-LWnc-EiPuAA/TjT3KAOeeHI/AAAAAAAAATc/Xpx1dsLyHzk/s320/delay3.png" title="how to tell search engines that your blog has been updated" width="320" /></a></div><br />
4. <b>Edit your BLOGGER FEED gadget</b>. Change the feed URL. If the feed entered is your feedburner feed and the preview is still the same, type in your blog's default atom/rss feed instead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-oOC2H0pqtnM/TjT3Jms9rCI/AAAAAAAAATY/D7XDISqq1J0/s1600/delay4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to fix delay on blogger recent posts widget" border="0" height="299" src="http://4.bp.blogspot.com/-oOC2H0pqtnM/TjT3Jms9rCI/AAAAAAAAATY/D7XDISqq1J0/s320/delay4.png" title="how to fix delay on blogger recent posts widget" width="320" /></a></div><br />
<br />
Hopefully, this will <b>fix the delay in your blogger feed gadget updates</b>.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com1tag:blogger.com,1999:blog-2600741898667032216.post-930395937122949112011-07-11T20:28:00.000-07:002011-08-14T19:12:31.187-07:003 ways to add "read more" on bloggerAdding "Read More" or <b>post summaries on blogger home page</b>, even label or archive pages, is a great way to create a "snapshot" of your blog posts thus this engages the readers to "read more" about each of them. As Blogger added the <a href="http://buzz.blogger.com/2009/09/you-might-as-well-jump.html" title="create easy expandable post summaries on blogger">Jump Break feature</a>, it's pretty easy to <b>create post summaries</b> now <b>without having to edit the HTML</b> template.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-I1JsQ4c2v6k/TjTMTH-bLyI/AAAAAAAAATA/SQ4OZTgEPqU/s1600/readmore1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="add post summaries on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-I1JsQ4c2v6k/TjTMTH-bLyI/AAAAAAAAATA/SQ4OZTgEPqU/s320/readmore1.jpg" title="add post summaries on blogger" width="271" /></a></div><br />
<br />
There are basically 3 ways to <b>include a "read more" link on blogger</b>. One is through <b>Jump Break Blogger</b> feature, the other, using <b>Post Template Blogger</b> setting, and third, using a javascript to give an <b><a href="http://aravindtrue.wordpress.com/2011/05/15/css3-accordion/" title="accordion effect is a sliding - expandable and collapsable - effect which is used to show and hide a section of your web page">accordion-like effect</a> read-more</b>.<br />
<br />
<br />
<h5>Technique #1. Using <b>Blogger Jump Break</b> feature.</h5><b>COMPOSE tab on POSTING section.</b><br />
Place your cursor to the section of your post where you'd like the "read more" link (or jump link) to appear then click the <b>INSERT JUMP BREAK</b> icon.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-FuDxXF2c75A/TjTMVZCA4GI/AAAAAAAAATQ/G6zTyQM56TU/s1600/readmore2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="insert jump break link from COMPOSE tab" border="0" height="234" src="http://3.bp.blogspot.com/-FuDxXF2c75A/TjTMVZCA4GI/AAAAAAAAATQ/G6zTyQM56TU/s320/readmore2.png" title="insert jump break from COMPOSE tab" width="320" /></a></div><br />
<b>EDIT HTML tab on POSTING section.</b><br />
Add <b><!-- more --></b> to the post area where you'd like the post teaser to end.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-3jUiQTuTXPA/TjTMUsJb8SI/AAAAAAAAATM/gwOdk9s5xVA/s1600/readmore3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="insert jump break link from EDIT HTML tab" border="0" height="231" src="http://3.bp.blogspot.com/-3jUiQTuTXPA/TjTMUsJb8SI/AAAAAAAAATM/gwOdk9s5xVA/s320/readmore3.png" title="insert jump break link from EDIT HTML tab" width="320" /></a></div><br />
For customized third-party templates, you need to go to the <b>EDIT HTML</b> page of your template and add this code:<br />
<pre><code>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
</code></pre><br />
right after this:<br />
<pre><code>
<data:post.body/>
</code></pre><br />
For step-by-step instructions, check out <a href="http://www.google.com/support/blogger/bin/answer.py?answer=154172" title="Creating AFTER THE JUMP summaries">Blogger's tutorial on Jump Breaks</a>.<br />
<br />
<br />
<h5>Technique #2. Using <b>Blogger Post Template</b> feature.</h5>This requires <b>editing the HTML codes</b>, so make sure to <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up your blogger template">back up your template</a>!<br />
1. On the <b>EDIT HTML</b> page, search for<br />
<pre><code>
<data:post.body/>
</code></pre><br />
2. Replace it with:<br />
<pre><code>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<span style="background-color: #eeeeee; color: black;"><data:post.body/></span>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
</code></pre><br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-shBxNXPMdT0/TjTMUEJgObI/AAAAAAAAATI/smACwSnjvH8/s1600/readmore4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to add read more tweak on blogger" border="0" height="305" src="http://4.bp.blogspot.com/-shBxNXPMdT0/TjTMUEJgObI/AAAAAAAAATI/smACwSnjvH8/s320/readmore4.png" title="how to add read more tweak on blogger" width="320" /></a></div><br />
4. Go to <b>SETTINGS</b>. Choose <b>FORMATTING</b>. Under <b>POST TEMPLATE</b> section, add this:<br />
<pre><code>
<span class="fullpost">
</span>
</code></pre><br />
5. <b>SAVE SETTINGS</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-rxMH3xrACSw/TjTMTvymwAI/AAAAAAAAATE/X0_zqtwN2Rs/s1600/readmore5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to insert post summary tweak on blogger" border="0" height="242" src="http://1.bp.blogspot.com/-rxMH3xrACSw/TjTMTvymwAI/AAAAAAAAATE/X0_zqtwN2Rs/s320/readmore5.png" title="how to insert post summary tweak on blogger" width="320" /></a></div><br />
When you <b>create a new post</b>, add the teaser or snippet <b>ABOVE</b> the span of full post whereas the rest of the post, <b>INSIDE</b> it.<br />
<pre><code>
<span style="background-color: #eeeeee; color: black;">add the teaser here</span>
<span class="fullpost">
<span style="background-color: #eeeeee; color: black;">rest of the post goes here</span>
</span>
</code></pre><br />
You can also check <a href="http://bloggets.blogspot.com/2008/08/how-to-add-read-more-expandable-posts.html" title="add read more expandable link on blogger">How to Add "Read More..." Expandable Posts link in Blogger</a> for complete guide and screenshots.<br />
<br />
<br />
<h5>Technique #3. <b>Accordion Effect Read More</b> Using Javascript.</h5><span class="demo"><a href="http://technicaldotcom.blogspot.com/" title="accordion effect read more on home page">View demo</a></span>.<br />
<br />
<br />
The javascript and tweak came from <a href="http://klik-share.blogspot.com/">Sharing Everyone</a>. It's almost the same as Technique #2 as it also uses <b>Blogger Post Template</b> feature. The only difference: (1) addition of the <b><a href="http://techniquealtechie.googlepages.com/Readmore.js" title="download read more js file">read more javascript file</a></b> on the header, and (2) a change in the template where you replace this:<br />
<pre><code>
<div class='post-body entry-content'>
</code></pre><br />
to this:<br />
<pre><code>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[-] Resume...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
</code></pre><br />
For complete tutorial and customization, check out Sharing Everyone's <a href="http://klik-share.blogspot.com/2008/09/how-to-create-read-more.html" title="create accordion like read more on blogger">How to create Read More</a>.<br />
<br />
<br />
<h6>Other "Read More" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/customize-read-more-on-blogger.html">customize "read more" on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/read-more-with-thumbnails-on-blogger.html">2 ways to add read more with thumbnails on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/show-only-post-titles-on-blogger-home.html">show only post titles on blogger homepage</a><br />
<a href="http://websilog.blogspot.com/2011/07/post-titles-with-thumbnails-on-blogger.html">post titles with thumbnails on blogger</a><br />
<br />
<br />
<h6>Related Blogs and Website.</h6><a href="http://www.google.com/support/blogger/bin/answer.py?answer=154172">Creating 'After the jump' summaries</a><br />
<a href="http://bloggets.blogspot.com/2008/08/how-to-add-read-more-expandable-posts.html">How to Add "Read More..." Expandable Posts link in Blogger</a><br />
<a href="http://klik-share.blogspot.com/2008/09/how-to-create-read-more.html">How to create Read More</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com1tag:blogger.com,1999:blog-2600741898667032216.post-31085021268645163742011-07-10T10:43:00.000-07:002011-08-09T00:17:20.819-07:007 tools to view your blogger blog mobile version onlineWant to see how mobile friendly your <a href="http://websilog.blogspot.com/2011/07/how-to-create-mobile-version-of-your.html" title="mobile version for blogspot blogs"><b>blogger blog mobile version</b></a> is, say on iPhone, Blackberry, Smartphone, or even regular mobile phone with browsers like <a href="http://www.opera.com/mobile/" title="Opera Mini is a popular browser preloaded in most economy class mobile phones">Opera Mini</a>?<br />
<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-cd_-x5odD38/Ti-r3bdu_xI/AAAAAAAAAS0/828rhIkoLRg/s1600/bloggermobileonline.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="online tools to view mobile blogs" border="0" height="201" src="http://4.bp.blogspot.com/-cd_-x5odD38/Ti-r3bdu_xI/AAAAAAAAAS0/828rhIkoLRg/s320/bloggermobileonline.png" title="online tools to view mobile blogs" width="320" /></a></div><br />
There are <a href="http://www.mobilephoneemulator.com/"><b>mobile phone emulators</b></a> and <b> tablet simulators</b> around the web that enable bloggers and developers to check the mobile version of blogs and websites in many cell phones. There are those that are accessible via <a href="http://www.mobilexweb.com/emulators" title="downloadable mobile emulators"><b>desktop application downloads</b></a> and <a href="http://blogs.oracle.com/scblog/entry/iphone_emulator_for_firefox" title="firefox extension for iPhone emulator"><b>experimental firefox add-on</b></a>. There are also <a href="http://websilog.blogspot.com/2011/07/7-tools-to-view-your-blogger-blog.html" title="web based mobile simulator"><b>web-based ones</b></a>. <br />
<br />
Below are some of the web-based or <b>online mobile phone emulators/simulators</b> where <a href="http://buzz.blogger.com/2011/06/announcing-blogger-mobile-templates.html"><b>blogger mobile template</b></a> works like a charm.<br />
<br />
<br />
<h5>#1. <a href="http://informatico.altervista.org/netvibes/operamini.php" title="Opera Mini web based mobile emulator">Opera Mini Simulator</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-cHooLWcxJr0/ThrTlK4ZrRI/AAAAAAAAAOI/vnh8Rox967A/s1600/emulator1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blogger mobile on opera mini" border="0" height="320" src="http://2.bp.blogspot.com/-cHooLWcxJr0/ThrTlK4ZrRI/AAAAAAAAAOI/vnh8Rox967A/s320/emulator1.png" title="blogger mobile on opera mini" width="153" /></a></div><br />
<b>Description</b>: Opera Mini simulator<br />
<b>Website</b>: <a href="http://informatico.altervista.org/netvibes/operamini.php">http://informatico.altervista.org/netvibes/operamini.php</a><br />
<b>Google Page Rank</b>: 3<br />
<b>Alexa Rank</b>: 520<br />
<b>Features</b>: <br />
works exactly the same as installed on the phone<br />
mouse and arrow keys may be used to control simulator<br />
<br />
<b>Alternative website</b>: <a href="http://demo.opera-mini.net/">http://demo.opera-mini.net/</a><br />
<b>Google Page Rank</b>: 2<br />
<b>Alexa Rank</b>: 478,701<br />
<br />
<br />
<h5>#2. <a href="http://www.mobilephoneemulator.com/" title="mobile phone emulator">Mobile Phone Emulator</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-lro_ZSCoL_A/ThrTkYY-dYI/AAAAAAAAAOE/YzWbbRSqO-A/s1600/emulator2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blogger mobile on blackberry" border="0" height="317" src="http://2.bp.blogspot.com/-lro_ZSCoL_A/ThrTkYY-dYI/AAAAAAAAAOE/YzWbbRSqO-A/s320/emulator2.png" title="blogger mobile on blackberry" width="320" /></a></div><br />
<b>Description</b>: emulator for iPhone, Blackberry and others<br />
<b>Website</b>: <a href="http://www.mobilephoneemulator.com/">http://www.mobilephoneemulator.com/</a><br />
<b>Google Page Rank</b>: 4<br />
<b>Alexa Rank</b>: 330,245<br />
<b>Features</b>: <br />
with language support for english and french<br />
variety of mobile phones to emulate<br />
monitor size and cell phone terminal size customizable<br />
<br />
<br />
<h5>#3. <a href="http://www.testiphone.com/" title="iphone tester">TestiPhone</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-AV8hI-70xrQ/ThrTjfq-DuI/AAAAAAAAAOA/G7AeK3wOHs4/s1600/emulator3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="iphone tester for blogger mobile" border="0" height="172" src="http://3.bp.blogspot.com/-AV8hI-70xrQ/ThrTjfq-DuI/AAAAAAAAAOA/G7AeK3wOHs4/s320/emulator3.png" title="iphone tester for blogger mobile" width="320" /></a></div><br />
<b>Description</b>: iPhone simulator<br />
<b>Website</b>: <a href="http://www.testiphone.com/">http://www.testiphone.com/</a><br />
<b>Google Page Rank</b>: 5<br />
<b>Alexa Rank</b>: 56,149<br />
<b>Features</b>: <br />
works with Internet Explorer 7, FireFox 2 and Safari 3 and newer<br />
vertical and horizontal rotation enabled<br />
<br />
<br />
<h5>#4. <a href="http://interactiveiphone.com/" title="interactive iphone simulator">Interactive iPhone</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-QaZf6k-qSI8/ThrTitAW1jI/AAAAAAAAAN8/N-HtCQZb-iI/s1600/emulator4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="view blogger mobile on interactive iphone simulator" border="0" height="320" src="http://1.bp.blogspot.com/-QaZf6k-qSI8/ThrTitAW1jI/AAAAAAAAAN8/N-HtCQZb-iI/s320/emulator4.png" title="view blogger mobile on interactive iphone simulator" width="175" /></a></div><br />
<b>Description</b>: iPhone simulator<br />
<b>Website</b>: <a href="http://interactiveiphone.com/">http://interactiveiphone.com/</a><br />
<b>Google Page Rank</b>: 1<br />
<b>Alexa Rank</b>: 1,009,586<br />
<b>Features</b>: <br />
exactly mimics a real iPhone<br />
home screen icon layout customizable<br />
<br />
<br />
<h5>#5. <a href="http://ipadpeek.com/" title="ipad emulator">iPad Peek</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-4dsCpVvygQI/ThrThmHSQJI/AAAAAAAAAN4/kqf82L-JFHA/s1600/emulator5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="view blogger mobile on ipad online" border="0" height="320" src="http://4.bp.blogspot.com/-4dsCpVvygQI/ThrThmHSQJI/AAAAAAAAAN4/kqf82L-JFHA/s320/emulator5.png" title="view blogger mobile on ipad online" width="246" /></a></div><br />
<b>Description</b>: iPad emulator<br />
<b>Website</b>: <a href="http://ipadpeek.com/">http://ipadpeek.com/</a><br />
<b>Google Page Rank</b>: 6<br />
<b>Alexa Rank</b>: 108,779<br />
<b>Features</b>: <br />
reload button on the iPad address bar works<br />
work best in Firefox 3.5+, Chromium 5+ and Opera 10.5+<br />
vertical and horizontal rotation enabled<br />
<br />
<br />
<h5>#6. <a href="http://alexw.me/ipad2/" title="ipad simulator">iPad2 Simulator</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/--Nx_0qrR7Zs/ThrTg9QPjjI/AAAAAAAAAN0/d6CGYJnzqs4/s1600/emulator6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blogger mobile on web based ipad" border="0" height="243" src="http://3.bp.blogspot.com/--Nx_0qrR7Zs/ThrTg9QPjjI/AAAAAAAAAN0/d6CGYJnzqs4/s320/emulator6.png" title="blogger mobile on web based ipad" width="320" /></a></div><br />
<b>Description</b>: iPad2 simulator<br />
<b>Website</b>: <a href="http://alexw.me/ipad2/">http://alexw.me/ipad2/</a><br />
<b>Google Page Rank</b>: 5<br />
<b>Alexa Rank</b>: 247,327<br />
<b>Features</b>: <br />
made out of CSS3, jQuery and HTML5<br />
working home button and screen slider<br />
<br />
<br />
<h5>#7. <a href="http://www.ipad-emulator.com/" title="ipad emulator">iPad Emulator</a></h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-by_KyHfDu4E/ThrTeZYktTI/AAAAAAAAANw/VKo0kIhny_U/s1600/emulator7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blogger mobile on online ipad emulator" border="0" height="232" src="http://3.bp.blogspot.com/-by_KyHfDu4E/ThrTeZYktTI/AAAAAAAAANw/VKo0kIhny_U/s320/emulator7.png" title="blogger mobile on online ipad emulator" width="320" /></a></div><br />
<b>Description</b>: iPad emulator<br />
<b>Website</b>: <a href="http://www.ipad-emulator.com/">http://www.ipad-emulator.com/</a><br />
<b>Google Page Rank</b>: 4<br />
<b>Alexa Rank</b>: 468,228<br />
<b>Features</b>: <br />
reload button on the iPad address bar works<br />
work best in Firefox 3.5+, Chromium 5+ and Opera 10.5+<br />
vertical and horizontal rotation enabled<br />
<br />
<br />
<br />
<h5>Other online mobile emulators/simulators.</h5><b><a href="http://iphonetester.com/" title="web based iphone tester">iPhone Tester</a>.</b><br />
<b>Website</b>: <a href="http://iphonetester.com/">http://iphonetester.com/</a><br />
<b>Google Page Rank</b>: 4<br />
<b>Alexa Rank</b>: 59,995<br />
<br />
<b><a href="http://emulator.mtld.mobi/emulator.php?" title="web based mobile emulator">dotMobi emulator</a>.</b><br />
<b>Website</b>: <a href="http://emulator.mtld.mobi/emulator.php?">http://emulator.mtld.mobi/emulator.php?</a><br />
<b>Google Page Rank</b>: 6<br />
<b>Alexa Rank</b>: 37,621<br />
<br />
<br />
<br />
<h5>Downloadable Mobile and Tablet Emulators.</h5><a href="http://www.mobilexweb.com/"><b>Mobile Web Programming</b></a> has an <a href="http://www.mobilexweb.com/emulators" title="masterlist of mobile emulators"><b>excellent list for mobile web design and testing</b></a>. It shows the device support, platform used, browser and native testing as well as OS compatibility. Installation and Usage Guide are easy to understand as well.<br />
<br />
View his <a href="http://www.mobilexweb.com/emulators" title="masterlist of mobile emulators"><b>Ultimate Guide for Mobile Emulators and Simulators</b></a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-4a5hQL02uyI/ThrVql4kisI/AAAAAAAAAOM/KaLVga_RgF0/s1600/emulator8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="mobile and tablet emulator and simulator matrix" border="0" height="247" src="http://2.bp.blogspot.com/-4a5hQL02uyI/ThrVql4kisI/AAAAAAAAAOM/KaLVga_RgF0/s320/emulator8.png" title="mobile and tablet emulator and simulator matrix" width="320" /></a></div><br />
<br />
<br />
<h6>Related Blog.</h6><a href="http://www.mobilexweb.com/emulators" title="masterlist of mobile emulators">Mobile Emulators and Simulators - the Ultimate Guide to mobile developers</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com2tag:blogger.com,1999:blog-2600741898667032216.post-87268595475240460392011-07-09T07:19:00.000-07:002011-08-09T06:10:40.129-07:005 places to move "older" and "newer posts" on blogger<span class="demo"><a href="http://websilogdemo.blogspot.com/2011/07/post-2-same-date.html" title="demo at the bottom of the post entry">View demo</a>.</span><br />
<br />
<br />
This is a continuation of <a href="http://websilog.blogspot.com/2011/07/rename-older-and-newer-posts-to-post.html"><b>rename "older posts" and "newer posts" to post titles on blogger</b></a>. This time, let's move them to different sections of the post page. <br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-Alo3Mx6O5-g/Ti-FXspAvaI/AAAAAAAAASw/wH_qySERVNg/s1600/moveolder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="move older and newer posts on blogger" border="0" height="148" src="http://3.bp.blogspot.com/-Alo3Mx6O5-g/Ti-FXspAvaI/AAAAAAAAASw/wH_qySERVNg/s320/moveolder.png" title="move older and newer posts on blogger" width="320" /></a></div><br />
<br />
<h5>How can we make <b>"older post</b>" and "<b>newer post</b>" appear on post page only?</h5><b>Post Page</b>, the landing page for each and every blogger post.<br />
<br />
First, let's remove it from blogger homepage. Dont forget to <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up template on blogger">backup your template</a>!<br />
1. Go to <b>EDIT HTML</b> page. <br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Press <b>CTRL + F</b>, type in <b><b:include name='nextprev'/></b> on the search bar.<br />
4. You'll see a similar code like this:<br />
<pre><code>
<!-- navigation -->
<b:if cond='data:mobile'>
<b:include name='mobile-nextprev'/>
<b:else/>
<span style="background-color: #eeeeee; color: black;"><b:include name='nextprev'/></span>
</code></pre><br />
<b>DELETE</b> the highlighted line: <b><b:include name='nextprev'/></b>.<br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-H6erEIL5Imk/ThhZqz2V8iI/AAAAAAAAAMs/Bp0hO9w5wQs/s1600/move1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="remove older and newer post from blogger homepage" border="0" height="305" src="http://1.bp.blogspot.com/-H6erEIL5Imk/ThhZqz2V8iI/AAAAAAAAAMs/Bp0hO9w5wQs/s320/move1.png" title="remove older and newer post from blogger homepage" width="320" /></a></div><br />
<br />
<h5>THE CODE.</h5><pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
<b>what it means.</b><br />
<b><b:if cond='data:blog.pageType == &quot;item&quot;'></b> if the page type is "item" page or also known as "post" page,<br />
<b><b:include name='nextprev'/></b> show or "include" next and previous links<br />
<br />
<br />
<h5>Where can we strategically place <b>"previous post"</b> and <b>"next post"</b> inside the post page?</h5>-above title<br />
-below title<br />
-below post body<br />
-on footer section<br />
-above comments<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-hi2Tzg2By5I/ThhZtkjJvzI/AAAAAAAAAMw/3pMVI0ytzjo/s1600/move2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="places to move blog pager on blogger" border="0" height="320" src="http://4.bp.blogspot.com/-hi2Tzg2By5I/ThhZtkjJvzI/AAAAAAAAAMw/3pMVI0ytzjo/s320/move2.png" title="places to move blog pager on blogger" width="149" /></a></div><br />
Before we move them, make sure to:<br />
1. <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="tutorial on how to backup blogger template">Backup your template</a> as always.<br />
2. Go to <b>EDIT HTML</b> page. <br />
3. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-bYGJK0YoCTs/ThhZqavYp8I/AAAAAAAAAMo/ZXk17l_7X1w/s1600/move3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="enable expand widget templates mode" border="0" height="150" src="http://1.bp.blogspot.com/-bYGJK0YoCTs/ThhZqavYp8I/AAAAAAAAAMo/ZXk17l_7X1w/s320/move3.png" title="enable expand widget templates mode" width="320" /></a></div><br />
Let's get on with it. To <b>move "older/previous posts"</b> and <b>"newer/next posts"..</b><br />
<br />
<br />
<h5>.. ABOVE TITLE.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-24iw0Qy28cI/ThhZ2-A0H1I/AAAAAAAAANY/2YEAt6PrR1M/s1600/move4-abovetitle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts above the title" border="0" height="96" src="http://2.bp.blogspot.com/-24iw0Qy28cI/ThhZ2-A0H1I/AAAAAAAAANY/2YEAt6PrR1M/s320/move4-abovetitle.png" title="older posts and newer posts above the title" width="320" /></a></div><br />
1. Press <b>CTRL + F</b>, search for <b><b:includable id='post' var='post'></b><br />
2. <b>BELOW</b> that line, add the code.<br />
<pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
It will look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/--XPVVaD61zU/ThhZp_HlUvI/AAAAAAAAAMk/aATLKUbhjcw/s1600/move4-abovetitle2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to move older posts and newer posts above the post title" border="0" height="84" src="http://2.bp.blogspot.com/--XPVVaD61zU/ThhZp_HlUvI/AAAAAAAAAMk/aATLKUbhjcw/s320/move4-abovetitle2.png" title="how to move older posts and newer posts above the post title" width="320" /></a></div><br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-u8aopPc6ZvU/ThhZxfA3eRI/AAAAAAAAANE/taQ5ooqRLog/s1600/move4-abovetitle3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts above blogger post title" border="0" height="132" src="http://2.bp.blogspot.com/-u8aopPc6ZvU/ThhZxfA3eRI/AAAAAAAAANE/taQ5ooqRLog/s320/move4-abovetitle3.png" title="older posts and newer posts above blogger post title" width="320" /></a></div><br />
<br />
<h5>.. BELOW TITLE.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-CVXcf6Joq6Y/ThhZ170OJsI/AAAAAAAAANU/EDtriIKAJdI/s1600/move4-belowtitle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts below the title" border="0" height="72" src="http://1.bp.blogspot.com/-CVXcf6Joq6Y/ThhZ170OJsI/AAAAAAAAANU/EDtriIKAJdI/s320/move4-belowtitle.png" title="older posts and newer posts below the title" width="320" /></a></div>1. Press <b>CTRL + F</b>, search for <b><div class='post-header'></b><br />
2. <b>ABOVE</b> that line, add the code.<br />
<pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
It will look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-1mpKl0k6js0/ThhZpdw5fCI/AAAAAAAAAMg/jd7E9gvXFX4/s1600/move4-belowtitle2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to move older posts and newer posts below the post title" border="0" height="85" src="http://4.bp.blogspot.com/-1mpKl0k6js0/ThhZpdw5fCI/AAAAAAAAAMg/jd7E9gvXFX4/s320/move4-belowtitle2.png" title="how to move older posts and newer posts below the post title" width="320" /></a></div><br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-COXnnKGMeFw/ThhZwuKkrcI/AAAAAAAAANA/corT1IDbch4/s1600/move4-belowtitle3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts below blogger post title" border="0" height="102" src="http://3.bp.blogspot.com/-COXnnKGMeFw/ThhZwuKkrcI/AAAAAAAAANA/corT1IDbch4/s320/move4-belowtitle3.png" title="older posts and newer posts below blogger post title" width="320" /></a></div><br />
<br />
<br />
<h5>.. BELOW POST BODY.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-Zp6uNOm1L0A/ThhZ1XnoVjI/AAAAAAAAANQ/gnj9NviMIQc/s1600/move4-belowpostbody.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts below the post body" border="0" height="112" src="http://2.bp.blogspot.com/-Zp6uNOm1L0A/ThhZ1XnoVjI/AAAAAAAAANQ/gnj9NviMIQc/s320/move4-belowpostbody.png" title="older posts and newer posts below the post body" width="320" /></a></div>1. Press <b>CTRL + F</b>, search for <b><div class='post-footer'></b><br />
2. <b>ABOVE</b> that line, add the code.<br />
<pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
It will look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-SdGih3RfV7c/ThhZpPzQSBI/AAAAAAAAAMc/8eQ4eQYoeaA/s1600/move4-belowpostbody2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to move older posts and newer posts below the post body" border="0" height="85" src="http://3.bp.blogspot.com/-SdGih3RfV7c/ThhZpPzQSBI/AAAAAAAAAMc/8eQ4eQYoeaA/s320/move4-belowpostbody2.png" title="how to move older posts and newer posts below the post body" width="320" /></a></div><br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-nnD2WWnhquQ/ThhZwFeLdoI/AAAAAAAAAM8/8li1CdoO-go/s1600/move4-belowpostbody3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts below blogger post" border="0" height="138" src="http://3.bp.blogspot.com/-nnD2WWnhquQ/ThhZwFeLdoI/AAAAAAAAAM8/8li1CdoO-go/s320/move4-belowpostbody3.png" title="older posts and newer posts below blogger post" width="320" /></a></div><br />
<br />
<h5>.. ON FOOTER SECTION.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-hBTprS03QQ8/ThhZzrEPChI/AAAAAAAAANM/cZf5Q_DFZtw/s1600/move4-underfooter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts on footer section" border="0" height="79" src="http://3.bp.blogspot.com/-hBTprS03QQ8/ThhZzrEPChI/AAAAAAAAANM/cZf5Q_DFZtw/s320/move4-underfooter.png" title="older posts and newer posts on footer section" width="320" /></a></div><br />
1. Press <b>CTRL + F</b>, search for <b><div class='post-footer'></b><br />
2. <b>BELOW</b> that line, add the code.<br />
<pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
It will look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-8SMPDhu63PA/ThhZo8UETzI/AAAAAAAAAMY/Dg-3wSzLjhU/s1600/move4-underfooter2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to move older posts and newer posts to footer section" border="0" height="82" src="http://3.bp.blogspot.com/-8SMPDhu63PA/ThhZo8UETzI/AAAAAAAAAMY/Dg-3wSzLjhU/s320/move4-underfooter2.png" title="how to move older posts and newer posts to footer section" width="320" /></a></div><br />
<br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-30TKt8rWiJ8/ThhZvQlNARI/AAAAAAAAAM4/R_6Fcb2XKDQ/s1600/move4-underfooter3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts on blogger footer section" border="0" height="121" src="http://4.bp.blogspot.com/-30TKt8rWiJ8/ThhZvQlNARI/AAAAAAAAAM4/R_6Fcb2XKDQ/s320/move4-underfooter3.png" title="older posts and newer posts on blogger footer section" width="320" /></a></div><br />
<br />
<br />
<h5>.. ABOVE COMMENTS.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-w0MmXQF1PdI/ThhZyuX5OgI/AAAAAAAAANI/lGfZrWR4doA/s1600/move4-abovecomments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts above comment form" border="0" height="255" src="http://1.bp.blogspot.com/-w0MmXQF1PdI/ThhZyuX5OgI/AAAAAAAAANI/lGfZrWR4doA/s320/move4-abovecomments.png" title="older posts and newer posts above comment form" width="320" /></a></div><br />
1. Press <b>CTRL + F</b>, search for <b><b:includable id='comments' var='post'></b><br />
2. <b>BELOW</b> that line, add the code.<br />
<pre><code>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</code></pre><br />
It will look something like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-1xtQeuZNX58/ThhZoX2n6hI/AAAAAAAAAMU/mVELcFvN8A0/s1600/move4-abovecomments2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to move older posts and newer posts above comment form" border="0" height="88" src="http://4.bp.blogspot.com/-1xtQeuZNX58/ThhZoX2n6hI/AAAAAAAAAMU/mVELcFvN8A0/s320/move4-abovecomments2.png" title="how to move older posts and newer posts above comment form" width="320" /></a></div><br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-RJ4QxlPmQ9g/ThhZuhAwVtI/AAAAAAAAAM0/mqnbIzgcIj4/s1600/move4-abovecomments3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="older posts and newer posts above blogger comment form" border="0" height="280" src="http://4.bp.blogspot.com/-RJ4QxlPmQ9g/ThhZuhAwVtI/AAAAAAAAAM0/mqnbIzgcIj4/s320/move4-abovecomments3.png" title="older posts and newer posts above blogger comment form" width="320" /></a></div><br />
<br />
<h5>Bugs, Errors, Glitches, Fixes when moving "older" and "newer" post links.</h5><u><b>There are two of them.</b></u><br />
Search for <b><b:include name='nextprev'/></b>. There should only be one.<br />
<br />
<u><b>It's missing. I can't find it.</b></u><br />
Search for <b><b:include name='nextprev'/></b>. If there is none, make sure that the <b>EXPAND WIDGET TEMPLATES</b> is ticked. If it's still missing, choose from the above options where you'd like it to appear and follow the instructions. <br />
<br />
<u><b>I prefer my "older/previous post" on the left, "newer/next post" on the right.</b></u><br />
You can switch their places easily by using Blogger's <b>$startSide</b> and <b>$endSide</b>. See <a href="http://www.blogbulk.com/2009/01/customizing-newer-older-posts-link-in.html" title="customizing newer and older posts link in blogger">Blogbulk's tutorial</a> on this.<br />
<br />
<br />
<h6>Other "Older Posts" and "Newer Posts" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/hide-older-and-newer-posts-on-blogger.html" title="how to hide or remove blog pager on blogger">4 ways to hide older posts and newer posts on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/rename-older-and-newer-posts-to-post.html" title="how to rename blog pager to post title on blogger">2 ways to rename older and newer posts to post title on blogger</a><br />
<br />
<br />
<h6>Related Blog and Discussion.</h6><a href="http://www.techieblogger.com/2009/06/customize-blogger-navigation-scrip.html">Customizing Blogger Post Navigation Script</a><br />
<a href="http://www.google.pl/support/forum/p/blogger/thread?tid=32ce9558eea19bda&hl=en">"Home" "Older and "Newer" links</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com14tag:blogger.com,1999:blog-2600741898667032216.post-81767412126604684232011-07-08T06:08:00.000-07:002011-08-08T23:12:40.225-07:002 ways to rename "older" and "newer posts" to post titles<span class="demo"><a href="http://websilogdemo.blogspot.com/2011/07/post-2-same-date.html" title="demo at the bottom of the post entry">View demo</a>.</span><br />
<br />
<br />
<h5>"OLDER" and "NEWER" posts.</h5>a.k.a. <b>blog-pager</b> or default <b>blogger page navigation</b><br />
usually located at the <b>bottom of the blog post</b><br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-_Qb0HI7PALs/ThboT4CFnTI/AAAAAAAAALs/OXiap6aZZvs/s1600/rename1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="rename blog pager on blogger" border="0" height="148" src="http://4.bp.blogspot.com/-_Qb0HI7PALs/ThboT4CFnTI/AAAAAAAAALs/OXiap6aZZvs/s320/rename1.png" title="rename blog pager on blogger" width="320" /></a></div><br />
<br />
<b>Why rename?</b><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-bG35GwZQScI/Ti9oyaSGTvI/AAAAAAAAASs/ahBtGfKmfJY/s1600/renameolder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="rename older posts and newer posts to post title on blogger" border="0" height="135" src="http://2.bp.blogspot.com/-bG35GwZQScI/Ti9oyaSGTvI/AAAAAAAAASs/ahBtGfKmfJY/s200/renameolder.png" title="rename older posts and newer posts to post title on blogger" width="200" /></a></div><br />
<b>It's more user-friendly</b>. Readers will see right away what the older and newer topics were while scanning through the currently being-read post.<br />
<b>It's more search-engine friendly</b>. The more internal links with appropriate anchor texts your blog has, the better.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-FCQrfd3MlZk/ThboTDY5a_I/AAAAAAAAALo/XNXyoCf63Ys/s1600/rename2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="change blog pager to post title on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-FCQrfd3MlZk/ThboTDY5a_I/AAAAAAAAALo/XNXyoCf63Ys/s320/rename2.png" title="change blog pager to post title on blogger" width="287" /></a></div><br />
<br />
<b>How to rename "OLDER and NEWER posts" to blog post titles.</b><br />
There are two ways to go about this. Both will require to place a code on the template.<br />
<br />
Before we proceed,<br />
1. <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to backup blogger template">Backup your template</a>!<br />
2. Go to <b>EDIT HTML</b> page.<br />
3. Press <b>CTRL + F</b>, type in <b></head></b> on the search bar.<br />
4. Above it, add this script.<br />
<pre><code>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</code></pre><br />
<b>NOTE</b>: This script calls for <a href="http://jquery.com/"><b>jQuery</b></a>, a new kind of javascript library. If you already have <a href="http://feedproxy.google.com/%7Er/Websilog/%7E3/ZBiKVR5f15U/style-blogger-images-with-lightweight.html" title="how to add lightbox effect on blogger"><b>lightbox on blogger</b></a>, stylish AJAX contact form, interactive navigation menu or any component that uses jQuery anywhere on your blog, no need to do this step anymore.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-0s1Y8NaMuWo/ThboRy1ZY8I/AAAAAAAAALk/kPneK5nmQTk/s1600/renamet3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="add jquery library to blogger" border="0" height="312" src="http://4.bp.blogspot.com/-0s1Y8NaMuWo/ThboRy1ZY8I/AAAAAAAAALk/kPneK5nmQTk/s320/renamet3.png" title="add jquery library to blogger" width="320" /></a></div><br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
On to the techniques.<br />
<br />
<br />
<h5>Technique #1. Using HTML/JAVASCRIPT gadget.</h5>The code originally came from <a href="http://www.google.com/support/forum/p/blogger/thread?tid=3e407562ec545128&hl=en">ETBlue</a> and was tweaked by <a href="http://www.bloggersentral.com/2011/01/post-titles-replace-older-newer-post.html">Greenlava of Blogger Sentral</a>.<br />
<br />
1. Go to <b>DESIGN</b> tab. Choose <b>PAGE ELEMENTS</b>.<br />
2. <b>ADD A GADGET</b>. Select <b>HTML/JAVASCRIPT</b>. <br />
3. On the <b>CONFIGURE HTML/JAVASCRIPT</b> window, add this code from <a href="http://www.bloggersentral.com/2011/01/post-titles-replace-older-newer-post.html">Blogger Sentral</a><br />
<pre><code>
<!-- Post title blog pager by BloggerSentral.com START -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>
<!-- Post title blog pager by BloggerSentral.com END -->
</code></pre><br />
4. <b>SAVE</b>.<br />
5. Click <b>SAVE</b> from the <b>PAGE ELEMENTS</b> page as well.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-4tOI4NhVyUI/Thb_Qu2oocI/AAAAAAAAAMM/BmiXk_PAVko/s1600/rename4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="rename blogger navigation from older and newer to post title" border="0" height="225" src="http://3.bp.blogspot.com/-4tOI4NhVyUI/Thb_Qu2oocI/AAAAAAAAAMM/BmiXk_PAVko/s320/rename4.png" title="rename blogger navigation from older and newer to post title" width="320" /></a></div><br />
<br />
<h5>Technique #2. Through EXPAND WIDGET TEMPLATES mode.</h5>Use this if you're more comfortable with CSS, coding and editing the template.<br />
<br />
1. Go to <b>EDIT HTML</b> Page.<br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Press <b>CTRL + F</b>, search for <b>#blog-pager</b>.<br />
4. You'll see something like this.<br />
<pre><code>
#blog-pager {
font-size: 140%
}
</code></pre>5. Right after the code, add this:<br />
<pre><code>
#blog-pager-newer-link {
font-size:85%;
width:200px;
text-align:left;
}
#blog-pager-older-link {
font-size:85%;
width:200px;
text-align:right;
}
</code></pre><br />
You may change <b>width</b> and <b>font-size</b> according to your preference.<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-aUM9chpKDNw/ThboQ8qKg4I/AAAAAAAAALc/biAcwwtFxgQ/s1600/rename5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="customize blog pager on blogger" border="0" height="246" src="http://1.bp.blogspot.com/-aUM9chpKDNw/ThboQ8qKg4I/AAAAAAAAALc/biAcwwtFxgQ/s320/rename5.png" title="customize blog pager on blogger" width="320" /></a></div><br />
Press CTRL + F and search for <b><b:includable id='nextprev'></b><br />
<br />
6. You'll see something similar to this.<br />
<pre><code>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</code></pre><br />
<b>what each section means</b>.<br />
<b><b:if cond='data:newerPageUrl'></b>code for NEWER post link<br />
<b><b:if cond='data:olderPageUrl'></b>code for OLDER post<br />
<b><a class='home-link' expr:href='data:blog.homepageUrl'></b> code for HOME<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-9qYISuPT-S4/ThbufCi_-xI/AAAAAAAAAL8/N0tOIZ15GU8/s1600/rename6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="from older post and newer post to post title" border="0" height="155" src="http://3.bp.blogspot.com/-9qYISuPT-S4/ThbufCi_-xI/AAAAAAAAAL8/N0tOIZ15GU8/s320/rename6.png" title="from older post and newer post to post title" width="320" /></a></div><br />
7. Below the chunk of lines, add the code<br />
<pre><code>
<script type='text/javascript'>
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link:first&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(&quot;&lt;&lt; &quot; + olderLinkTitle);
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h3&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle + &quot; &gt;&gt;&quot;);
});
</script>
</code></pre><br />
8. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h6>Result.</h6><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-FCQrfd3MlZk/ThboTDY5a_I/AAAAAAAAALo/XNXyoCf63Ys/s1600/rename2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blog pager to post title on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-FCQrfd3MlZk/ThboTDY5a_I/AAAAAAAAALo/XNXyoCf63Ys/s320/rename2.png" title="blog pager to post title on blogger" width="287" /></a></div><br />
<br />
Next tutorial: <a href="http://websilog.blogspot.com/2011/07/move-older-and-newer-posts-on-blogger.html" title="move blog pager above post title on blogger"><b>Move OLDER and NEWER posts on Blogger</b></a><br />
<br />
<br />
<h6>Other "Older Posts" and "Newer Posts" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/hide-older-and-newer-posts-on-blogger.html" title="how to hide or remove blog pager on blogger">4 ways to hide older posts and newer posts on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/move-older-and-newer-posts-on-blogger.html" title="how to move blog pager above title on blogger">5 places to move older and newer posts on blogger</a><br />
<br />
<br />
<h6>Related Blog and Discussion.</h6><a href="http://www.google.com/support/forum/p/blogger/thread?tid=3e407562ec545128&hl=en">How do I add post title to older and newer post link? </a><br />
<a href="http://www.bloggersentral.com/2011/01/post-titles-replace-older-newer-post.html">Replace Older & Newer post links with post titles</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com5tag:blogger.com,1999:blog-2600741898667032216.post-30525866895137807472011-07-07T22:07:00.000-07:002011-08-08T22:57:54.506-07:004 ways to hide "older" and "newer posts" on bloggerThere are 4 ways to <b>hide</b> or <b>remove "older posts" and "newer posts"</b>, aka blog pager, <b>on blogger</b>. They require either <b>CSS edits</b> or <b>Expand Widget Templates enable-mode</b>.<br />
<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-8HfFt6r7c_0/TjJAhu7IpEI/AAAAAAAAAS8/Ai2lN5exZcY/s1600/hideolder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to hide older posts and newer posts on blogger" title="how to hide older posts and newer posts on blogger" border="0" height="148" src="http://4.bp.blogspot.com/-8HfFt6r7c_0/TjJAhu7IpEI/AAAAAAAAAS8/Ai2lN5exZcY/s320/hideolder.png" width="320" /></a></div><br />
<br />
<h5><a name="technique1">Technique #1. Using CSS [adding <b>"display:none"</b> property]</a>.</h5>1. Go to <b>EDIT HTML</b> page.<br />
2. Press <b>CTRL + F</b>, type in <b>blog-pager</b> on the search bar.<br />
3. You'll see style declarations similar to this:<br />
<pre><code>
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
</code></pre><br />
or this:<br />
<pre><code>
#blog-pager {
text-align: center;
}
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
</code></pre><br />
4. Add <b>display:none;</b> BEFORE each <b>}</b>. Thus, the new set of codes will be:<br />
<pre><code>
.blog-pager {
background: $(paging.background);
<span style="background-color: #eeeeee; color: black;">display:none;</span>
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
<span style="background-color: #eeeeee; color: black;">display:none;</span>
}
</code></pre><br />
or this:<br />
<pre><code>
#blog-pager {
text-align: center;
<span style="background-color: #eeeeee; color: black;">display:none;</span>
}
#blog-pager-older-link {
float: right;
<span style="background-color: #eeeeee; color: black;">display:none;</span>
}
#blog-pager-newer-link {
float: left;
<span style="background-color: #eeeeee; color: black;">display:none;</span>
}
</code></pre><br />
<b>What it means</b>.<br />
<b>display:none</b> - hides the element altogether.<br />
<br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h5>Technique #2. Using CSS [commenting out whole blog-pager block]. </h5>1. Follow <a href="http://websilog.blogspot.com/2011/07/hide-older-and-newer-posts-on-blogger.html#technique1">Technique #1</a>, steps 1-3.<br />
2. Replace the old block to new block of css codes.<br />
<br />
<b>OLD BLOCK</b>:<br />
<pre><code>
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
</code></pre><br />
<b>NEW BLOCK</b>:<br />
<pre><code>
<span style="background-color: #eeeeee; color: black;">/*</span>
.blog-pager {
background: $(paging.background);
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
<span style="background-color: #eeeeee; color: black;">*/</span>
</code></pre><br />
<br />
<b>OLD BLOCK</b>:<br />
<pre><code>
#blog-pager {
text-align: center;
}
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
</code></pre><br />
<b>NEW BLOCK</b>:<br />
<pre><code>
<span style="background-color: #eeeeee; color: black;">/*</span>
#blog-pager {
text-align: center;
}
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
<span style="background-color: #eeeeee; color: black;">*/</span>
</code></pre><br />
<b>What we did</b>.<br />
We <b>PLACED THE CODES INSIDE</b> <span style="background-color: black; color: #eeeeee;"><b>/* */</b></span>, i.e. <span style="background-color: black; color: #eeeeee;"><b>/* codes here */</b></span>. This signifies that they are CSS comments thus completely ignored by the browser.<br />
<br />
More info: <a href="http://css.maxdesign.com.au/selectutorial/rules_comments.htm" title="how to insert comments in css">CSS Comments</a><br />
<br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h5><a name="technique3">Technique #3. Through Expand Widget Templates Mode [commenting out the include statement]</a>. </h5><a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up blogger template">Backup your template</a>!<br />
<br />
1. Go to <b>EDIT HTML</b> page. <br />
2. Tick <b>EXPAND WIDGET TEMPLATES</b>.<br />
3. Press <b>CTRL + F</b>, type in <b><b:include name='nextprev'/></b> on the search bar.<br />
4. You'll see a similar code like this:<br />
<pre><code>
<!-- navigation -->
<b:if cond='data:mobile'>
<b:include name='mobile-nextprev'/>
<b:else/>
<span style="background-color: #eeeeee; color: black;"><b:include name='nextprev'/></span>
</code></pre><br />
<b>REPLACE</b> the above highlighted line with this:<br />
<b><!-- <b:include name='nextprev'/> --></b><br />
<br />
Thus, the new codes will be:<br />
<pre><code>
<!-- navigation -->
<b:if cond='data:mobile'>
<b:include name='mobile-nextprev'/>
<b:else/>
<span style="background-color: #eeeeee; color: black;"><b><!-- <b:include name='nextprev'/> --></b></span>
</code></pre><br />
<b>What we did</b>.<br />
We <b>PLACED THE CODES INSIDE</b> <span style="background-color: black; color: #eeeeee;"><b><!-- --></b></span>, i.e. <span style="background-color: black; color: #eeeeee;"><b><!-- codes here --></b></span>. This signifies that the tag is an HTML comment and like CSS comments, these are ignored by the browser; a.k.a. <b>"ignore-me" code</b>.<br />
<br />
More info: <a href="http://www.htmlcodetutorial.com/_33n45n45n.html" title="how to hide a tag by converting it to a comment">Commented out - HTML</a><br />
<br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h5>Technique #4. Through Expand Widget Templates Mode [deleting <b>include statement</b> entirely]. </h5>1. Follow <a href="http://websilog.blogspot.com/2011/07/hide-older-and-newer-posts-on-blogger.html#technique3">Technique #3</a>, steps 1-3.<br />
2. You'll see a similar code like this:<br />
<pre><code>
<!-- navigation -->
<b:if cond='data:mobile'>
<b:include name='mobile-nextprev'/>
<b:else/>
<span style="background-color: #eeeeee; color: black;"><b:include name='nextprev'/></span></code></pre><br />
<b>DELETE</b> the highlighted line: <b> <b:include name='nextprev'/></b> <br />
3. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<h6>Other "Older Posts" and "Newer Posts" Tweaks.</h6><a href="http://websilog.blogspot.com/2011/07/rename-older-and-newer-posts-to-post.html" title="how to rename blog pager to post title on blogger">2 ways to rename older and newer posts to post title on blogger</a><br />
<a href="http://websilog.blogspot.com/2011/07/move-older-and-newer-posts-on-blogger.html" title="how to move blog pager above title on blogger">5 places to move older and newer posts on blogger</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com11tag:blogger.com,1999:blog-2600741898667032216.post-79216749432047173612011-07-06T20:00:00.000-07:002011-08-08T22:52:44.883-07:00lightweight lightbox on blogger<span class="demo"><a href="http://websilogdemo.blogspot.com/2011/07/test-post-on-lightbox.html" title="lightbox demo on image">View demo</a>.</span><br />
<br />
<br />
<h5>What is Lightbox?</h5><blockquote>Lightbox permits users to view larger versions of images without having to leave the current page. - <a href="http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29">Wikipedia</a></blockquote><br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-OS1hCEkLNOg/Ti7Dd6B25dI/AAAAAAAAASo/99vlY8fHvMU/s1600/lightboxblogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="add lightbox on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-OS1hCEkLNOg/Ti7Dd6B25dI/AAAAAAAAASo/99vlY8fHvMU/s320/lightboxblogger.jpg" title="add lightbox on blogger" width="305" /></a></div><br />
<br />
<h5>Which lightbox to use?</h5>There are several lightbox style plugins available on the web. You can compare their features from the file size, javascript library used or type of display support. <br />
<br />
See this fantastic <a href="http://planetozh.com/projects/lightbox-clones/" title="guide to select which lightbox to use"><b><b>LIGHTBOX CLONES MATRIX</b></b></a>.<br />
<br />
<br />
<h5>Lightbox on Blogger.</h5>I found this <a href="http://www.deluxeblogtips.com/2010/04/how-to-add-lightbox-effect-to-blogger.html" title="how to add lightbox effect to blogger">excellent post</a> from <a href="http://www.deluxeblogtips.com/">DeluxeBlogTips</a> based on <a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery Lightbox plugin</a>. <br />
<br />
<br />
<b>Features.</b><br />
Lightweight, 9kb in size. <br />
Simple installation. <br />
No need to modify the HTML code to use.<br />
<b>AUTOMATICALLY applies lightbox effect to all images.</b><br />
<br />
<br />
<h5>How to Install Lightbox on Blogger.</h5>Dont forget to <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up blogger template">backup your template</a>!<br />
<br />
1. Go to <b>EDIT HTML</b> page.<br />
2. Press <b>Ctrl + F</b>. Search for <b></head></b><br />
3. Above <b></head></b>, insert the following codes.<br />
<pre><code>
<link href="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js" type="text/javascript"></script>
</code></pre><br />
4. <b>SAVE TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-6IwYdtHwj2s/ThUg6-w-T0I/AAAAAAAAAK4/4663qtGhqkI/s1600/lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="how to style blogger images using a lightweight lightbox" border="0" height="301" src="http://1.bp.blogspot.com/-6IwYdtHwj2s/ThUg6-w-T0I/AAAAAAAAAK4/4663qtGhqkI/s320/lightbox.png" title="how to style blogger images using a lightweight lightbox" width="320" /></a></div><br />
<br />
For complete usage of this lightbox clone, check out <a href="http://www.deluxeblogtips.com/2010/04/how-to-add-lightbox-effect-to-blogger.html" title="how to add lightbox effect to blogger">DeluxeBlogTips post</a>.<br />
<br />
Tune in for next tutorial on this series: <b>Lightbox with no Javascript</b>.<br />
<br />
<br />
<h6>Related Websites.</h6><a href="http://planetozh.com/projects/lightbox-clones/">Lightbox Clones Matrix</a><br />
<a href="http://www.deluxeblogtips.com/2010/04/how-to-add-lightbox-effect-to-blogger.html">How to Add Lightbox Effect to Blogger</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com3tag:blogger.com,1999:blog-2600741898667032216.post-7351074290539883312011-07-06T04:29:00.000-07:002011-08-08T22:44:36.207-07:002 ways to show date for posts published on same day<span class="demo"><a href="http://websilogdemo.blogspot.com/search/label/date%20tweak">View demo</a>.</span><br />
<br />
There are two ways to <b>display post date for blogger posts created on the same day</b>. Both will require to <b>EXPAND WIDGETS TEMPLATE</b>. Thus, <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up blogger template"><b>back up</b></a>!<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-LCxOGwNbZdU/Ti656x4Qb4I/AAAAAAAAASk/ydHphLGtZqE/s1600/dateonthesameday.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="display date for posts on same day" border="0" height="200" src="http://4.bp.blogspot.com/-LCxOGwNbZdU/Ti656x4Qb4I/AAAAAAAAASk/ydHphLGtZqE/s200/dateonthesameday.jpg" title="display date for posts on same day" width="188" /></a></div><br />
<br />
<h5>Technique #1. Using Blogger Post's Default Published Timestamp.</h5>1. Go to <b>EDIT HTML</b> Page. <b>EXPAND WIDGETS TEMPLATE</b>.<br />
2. Press Ctrl + F. Type in <b><h2 class='date-header'></b> on the search bar. <br />
3. Look for a code similar to this.<br />
<pre><code>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span style="background-color: #eeeeee; color: black;"><data:post.dateHeader/></span></h2>
</b:if>
</code></pre><br />
4. <b>REPLACE</b> the highlighted code above -- from <b><data:post.dateHeader/></b> to <b><data:post.timestamp/> </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-t-v0pe3Gk9M/ThRF272myFI/AAAAAAAAAKo/ueSU2lHxL2M/s1600/showdate1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="show date for posts made on same day" border="0" height="307" src="http://3.bp.blogspot.com/-t-v0pe3Gk9M/ThRF272myFI/AAAAAAAAAKo/ueSU2lHxL2M/s320/showdate1.png" title="show date for posts made on same day" width="320" /></a></div><br />
5. <b>SAVE TEMPLATE</b>.<br />
<br />
<br />
<b>How to change the Date format.</b><br />
1. Go to SETTINGS tab.<br />
2. Choose FORMATTING.<br />
3. Under TIMESTAMP FORMAT, choose desired format.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-oPh3otdueeE/ThRF3tF_xBI/AAAAAAAAAKs/er_KSMHU6Yo/s1600/showdate2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="change date format on blogger" border="0" height="217" src="http://2.bp.blogspot.com/-oPh3otdueeE/ThRF3tF_xBI/AAAAAAAAAKs/er_KSMHU6Yo/s320/showdate2.png" title="change date format on blogger" width="320" /></a></div><br />
<br />
<h5>Technique #2. Using script tags.</h5>Anshuldudeja posted a <a href="http://www.anshuldudeja.com/2009/11/how-show-post-date-for-blogger-posts.html" title="how to show post date for blogger posts">blogger trick</a> that uses this code:<br />
<pre><code>
<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>
</code></pre><br />
<a href="http://www.anshuldudeja.com/2009/11/how-show-post-date-for-blogger-posts.html" title="how to show date for blogger posts">View complete instructions</a>.<br />
<br />
<br />
<h5>Result.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-D6EQFUyewhM/ThRF5eTZKdI/AAAAAAAAAKw/MAOA9sftVmk/s1600/showdate3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="display date for posts done on the same day" border="0" height="320" src="http://1.bp.blogspot.com/-D6EQFUyewhM/ThRF5eTZKdI/AAAAAAAAAKw/MAOA9sftVmk/s320/showdate3.png" title="display date for posts done on the same day" width="263" /></a></div><br />
<br />
<h6>Related Blog.</h6><a href="http://www.anshuldudeja.com/2009/11/how-show-post-date-for-blogger-posts.html">How Show Post Date For Blogger Posts Done On Same Day</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com0tag:blogger.com,1999:blog-2600741898667032216.post-85847988856501976392011-07-05T20:42:00.000-07:002011-08-08T22:36:36.616-07:00blogger gadget on home page only<span class="demo"><a href="http://websilogdemo.blogspot.com/" title="demo found below header -- flickr slideshow gadget">View demo</a>.</span><br />
<br />
Suppose you want a featured post, slideshow or news feed appearing on blogger homepage alone. This can be done simply by <b>adding a conditional tag</b> on the blogger gadget.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-oxil8JgqLAc/Ti6cHuFJ1sI/AAAAAAAAASg/wPGDkTiQGe8/s1600/widgetonhomeonly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="show blogger widget on home page only" title="show blogger widget on home page only" border="0" height="320" src="http://2.bp.blogspot.com/-oxil8JgqLAc/Ti6cHuFJ1sI/AAAAAAAAASg/wPGDkTiQGe8/s320/widgetonhomeonly.jpg" width="320" /></a></div><br />
<br />
<h5>What is a Blogger conditional tag?</h5><blockquote><b>Conditional tags</b> are Blogger template tags that allow you greater flexibility in your template design. We call them conditional because they allow you to specify parts of your template that appear only <b>under certain conditions</b>.<br />
<br />
- <a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=42059" title="blogger conditional tags defined">Google Blogger Help</a></blockquote><br />
<br />
In this case, we want to <b>set the gadget to appear only on blogger home page</b>. Thus,<br />
<pre><code>
<b:if cond='<span style="background-color: #eeeeee; color: black;">data:blog.url</span> == data:<span style="background-color: #eeeeee; color: black;">blog.homepageUrl</span>'>
<!-- gadget code here -->
</b:if>
</code></pre><br />
<b>What this means.</b><br />
It means -- if the blog URL is the homepage URL (i.e. http://<b>yourblog</b>.blogspot.com), show this gadget.<br />
<br />
<br />
<h5>How to display a gadget or widget on home page.</h5>Something like this one.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-I_T3yGMracs/ThQEqpreLhI/AAAAAAAAAKA/LcQnQhZQftI/s1600/homepageonly1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="display a gadget on blogger home page" title="display a gadget on blogger home page" border="0" height="263" src="http://2.bp.blogspot.com/-I_T3yGMracs/ThQEqpreLhI/AAAAAAAAAKA/LcQnQhZQftI/s320/homepageonly1.png" width="320" /></a></div><br />
Before we make any changes on the template, do not forget to <b><a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up your blogger template">back it up</a></b> first! <br />
<br />
Let's add the gadget. <br />
1. Go to <b>DESIGN</b> tab. Choose <b>PAGE ELEMENTS</b>.<br />
2. <b>ADD A GADGET</b>. <br />
3. Once added, placed in desired section, and saved, go to <b>EDIT HTML</b> page. <br />
<br />
Before we add the conditional tag, we need to <b>determine the widgetID of the newly added gadget</b>.<br />
<br />
<br />
<a name="findwidgetid"><b>How to find the widgetID</b></a>.<br />
1. Take note of the position of the gadget from <b>DESIGN/PAGE ELEMENTS</b> page. In this case, we added an <b>HTML/Javascript gadget</b> and it's located under header (or <b>widgetID = Header1</b>).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-4cFBIMLLRCY/ThQEodBZaAI/AAAAAAAAAJ8/zgf2pJLWQ7c/s1600/homepageonly2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to find blogger widget id" title="how to find blogger widget id" border="0" height="265" src="http://4.bp.blogspot.com/-4cFBIMLLRCY/ThQEodBZaAI/AAAAAAAAAJ8/zgf2pJLWQ7c/s320/homepageonly2.png" width="320" /></a></div><br />
2. Now switch to <b>EDIT HTML</b> page. Press <b>Ctrl + F</b>, type <b>Header1</b> on the search box.<br />
3. Scroll slowly down the page and look for the <b>NEXT CODE <u>after HEADER1 with the word "widgetID"</u></b> in it. That's <b>HTML1</b> in this sample.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-CnhQJKa8AF4/ThQEm_abWnI/AAAAAAAAAJ4/fz4ohWCmRhw/s1600/homepageonly3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to search for gadget id on blogger" title="how to search for gadget id on blogger" border="0" height="229" src="http://4.bp.blogspot.com/-CnhQJKa8AF4/ThQEm_abWnI/AAAAAAAAAJ4/fz4ohWCmRhw/s320/homepageonly3.png" width="320" /></a></div><br />
<br />
If you positioned your gadget on the sidebar, look for <span style="background-color: black; color: #eeeeee;">sidebar-right-1</span> and take note of the <b>widgetID</b> from the list of gadgets added already.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-eUwczGZUSiQ/ThQEmCgRhSI/AAAAAAAAAJ0/WIMW0aBaWVk/s1600/homepageonly4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to search for widget id on blogger sidebar" title="how to search for widget id on blogger sidebar" border="0" height="235" src="http://3.bp.blogspot.com/-eUwczGZUSiQ/ThQEmCgRhSI/AAAAAAAAAJ0/WIMW0aBaWVk/s320/homepageonly4.png" width="320" /></a></div><br />
<br />
<b>How to add the conditional tag</b>.<br />
1. On the <b>EDIT HTML</b> Page, tick the <b>EXPAND WIDGETS TEMPLATE</b> box.<br />
2. Press <b>Ctrl + F</b>, type the <b>widgetID</b> on the search box. (Example: <b>HTML1</b>)<br />
3. Place this code right AFTER <b><b:includable id='main'></b><br />
<pre><code>
<b:if cond='<span style="background-color: #eeeeee; color: black;">data:blog.url</span> == data:<span style="background-color: #eeeeee; color: black;">blog.homepageUrl</span>'>
</code></pre><br />
And add this code BEFORE <b></b:includable></b><br />
<pre><code>
</b:if>
</code></pre><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-y5h7kljilvw/ThQEklpEADI/AAAAAAAAAJw/WBADgmP1wnk/s1600/homepageonly5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to add a conditional tag on blogger" title="how to add a conditional tag on blogger" border="0" height="317" src="http://3.bp.blogspot.com/-y5h7kljilvw/ThQEklpEADI/AAAAAAAAAJw/WBADgmP1wnk/s320/homepageonly5.png" width="320" /></a></div><br />
4. SAVE TEMPLATE.<br />
<br />
<br />
<h5>How to test if it works properly.</h5>To test if it works properly, check if the widget is visible on:<br />
<a href="http://websilogdemo.blogspot.com/">Homepage</a><br />
<a href="http://websilogdemo.blogspot.com/2011/07/my-third-post.html">Post page</a><br />
<a href="http://websilogdemo.blogspot.com/search/label/flickr">Label page</a><br />
<a href="http://websilogdemo.blogspot.com/2011_07_01_archive.html">Archive page</a><br />
<br />
To learn more about <b>different page types on blogger</b>, check out this <b><a href="http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html" title="blogger page types analysis code">excellent post</a></b> of <a href="http://mystady.com/">MyStady</a>.<br />
<br />
<b>NOTE</b>: <b>Google Followers</b> and <b>Archives</b> gadgets work differently.<br />
<br />
<br />
<h6>Related Blog and Discussion.</h6><a href="http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=42059">What are conditional tags?</a><br />
<a href="http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html">7 Blogger Page Types: Analysis, Code Snippets, Data Matrix</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com5tag:blogger.com,1999:blog-2600741898667032216.post-90562290386676615502011-07-04T22:59:00.000-07:002011-08-08T22:18:38.413-07:003 ways to add flickr slideshow on blogger home page<span class="demo"><a href="http://websilogdemo.blogspot.com/">View demo</a>.</span><br />
<br />
<br />
There are three ways to <b>add flickr photostream to Blogger</b>. All involves adding a gadget/widget.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-nfEvDB81Z0M/Ti5InprjsyI/AAAAAAAAASY/L961u5SC5gA/s1600/flickr0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="flickr on blogger" border="0" height="200" src="http://2.bp.blogspot.com/-nfEvDB81Z0M/Ti5InprjsyI/AAAAAAAAASY/L961u5SC5gA/s200/flickr0.png" title="flickr on blogger" width="171" /></a></div><br />
<br />
<b>How to add a gadget/widget?</b><br />
1. Go to <b>DESIGN</b> tab.<br />
2. Click <b>PAGE ELEMENT</b>. Choose the section where you'd like the flickr slideshow to show up. <br />
3. <b>ADD A GADGET</b>.<br />
<br />
On to the techniques.<br />
<br />
<br />
<h5>Technique #1. Using <b>BASIC SLIDESHOW</b> gadget.</h5>1. Under <b>BASICS</b>, select <b>SLIDESHOW</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-4OE8o9yfKdw/ThKm-0ZJhvI/AAAAAAAAAJY/AjywtRmxxpM/s1600/flickr1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="add flickr slideshow on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-4OE8o9yfKdw/ThKm-0ZJhvI/AAAAAAAAAJY/AjywtRmxxpM/s320/flickr1.png" title="add flickr slideshow on blogger" width="252" /></a></div><br />
2. Choose <b>FLICKR</b> as <b>SOURCE</b>, click <b>KEYWORD</b> if you'd like to display photos based on tags; <b>USER</b> based on flickr user.<br />
3. Pick desired <b>SPEED</b> and <b>OPTIONS</b>. <br />
4. SAVE.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-zH9HS1IXlBY/ThKm98OkfbI/AAAAAAAAAJU/exlReZ6OZao/s1600/flickr2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="configure flickr slideshow on blogger" border="0" height="318" src="http://3.bp.blogspot.com/-zH9HS1IXlBY/ThKm98OkfbI/AAAAAAAAAJU/exlReZ6OZao/s320/flickr2.png" title="configure flickr slideshow on blogger" width="320" /></a></div><br />
<br />
<h5>Technique #2. Using <b>FEATURED FLICKR PHOTOSTREAM</b> gadget.</h5>With this method, you can <b>embed flickr slideshow based on flickr user alone</b>. The procedure:<br />
1. Under <b>FEATURED</b>, scroll down to <b>FLICKR PHOTOSTREAM</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-3RqTlY8Rtm0/ThKm9TEO4-I/AAAAAAAAAJQ/sanbXds0HOY/s1600/flickr3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="insert flickr photostream on blogger" border="0" height="320" src="http://4.bp.blogspot.com/-3RqTlY8Rtm0/ThKm9TEO4-I/AAAAAAAAAJQ/sanbXds0HOY/s320/flickr3.png" title="insert flickr photostream on blogger" width="271" /></a></div><br />
2. Assign <b>FLICKR USERNAME</b> from which the photos will stream on.<br />
3. Specify the <b>NUMBER OF THUMBNAILS</b> to display, <b>HEIGHT</b> of the frame and <b>TEXT</b> to link back to flickr and <b>TITLE</b> of gadget.<br />
4. SAVE.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-egqPD_w7Wlg/ThKm5FuP2dI/AAAAAAAAAJE/FvtwQAuLrks/s1600/flickr4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="configure flickr photostream on blogger" border="0" height="320" src="http://2.bp.blogspot.com/-egqPD_w7Wlg/ThKm5FuP2dI/AAAAAAAAAJE/FvtwQAuLrks/s320/flickr4.png" title="configure flickr photostream on blogger" width="238" /></a></div><br />
<br />
<h5>Technique #3. Using <b>HTML/JAVASCRIPT</b> gadget.</h5>1. Under <b>BASIC</b>, choose <b>HTML/JAVASCRIPT</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-5ZPl4l4O_Cc/ThKm71xVUkI/AAAAAAAAAJM/bMQ_C_tlgBA/s1600/flickr5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img title="add flickr photos on blogger" border="0" height="320" src="http://4.bp.blogspot.com/-5ZPl4l4O_Cc/ThKm71xVUkI/AAAAAAAAAJM/bMQ_C_tlgBA/s320/flickr5.png" alt="add flickr photos on blogger" width="252" /></a></div><br />
2. Paste <b>flickr embed codes</b>.<br />
3. SAVE.<br />
<br />
<br />
<b>How to get FLICKR HTML EMBED CODE</b>. <br />
If based on tags,<br />
1. Go to <a href="http://www.flickr.com/photos/tags/">flickr popular tags</a> page. Type in your desired tag on the <b>JUMP TO</b> bar or choose from their list.<br />
2. On the top right-most part of the specified tag page, click <b>SLIDESHOW</b>.<br />
3. On the top right-most part of the slideshow page, click <b>SHARE</b>. <br />
4. <b>GRAB THE EMBED HTML</b> code and <b>COPY TO CLIPBOARD</b>.<br />
5. You can adjust the frame size by clicking the <b>CUSTOMIZE HTML</b> link.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-UMmDTc2jY3I/ThKm6VfsM-I/AAAAAAAAAJI/-BrXXpZcUNI/s1600/flickr6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="change width and height of flickr slideshow on flickr" border="0" height="168" src="http://2.bp.blogspot.com/-UMmDTc2jY3I/ThKm6VfsM-I/AAAAAAAAAJI/-BrXXpZcUNI/s320/flickr6.png" title="change width and height of flickr slideshow on flickr" width="320" /></a></div><br />
<br />
<b>SHORTCUT</b>: Replace the <b>tagname</b> with your desired tag. Visit the URL. Hover to the top of the page, click <b>SHARE</b>.<br />
<pre><code>
http://www.flickr.com/photos/tags/<b style="background-color: #eeeeee; color: black;">tagname</b>/show/?embed=1
Example:
http://www.flickr.com/photos/tags/<b style="background-color: #eeeeee; color: black;">blue</b>/show/?embed=1
</code></pre><br />
<br />
If based on flickr user, <b><u>you need to login first</u></b> before you can grab the code. Moving on,<br />
1. Replace the <b>username</b> with the flickr user you prefer. Visit the URL.<br />
2. Hover to the top of the page.<br />
3. <b>SHARE</b>.<br />
<pre><code>
http://www.flickr.com/photos/<b style="background-color: #eeeeee; color: black;">username</b>/show/?embed=1
Example:
http://www.flickr.com/photos/<b style="background-color: #eeeeee; color: black;">tannenberg</b>/show/?embed=1
</code></pre><br />
<br />
<br />
<h5>How to embed the gadget on <b>BLOGGER HOME PAGE ONLY.</b></h5>As having several pictures may or may not slow down the loading of your blog, you choose to have it visible on <b>blogger home page</b> only. How to do this? Check out this <a href="http://websilog.blogspot.com/2011/07/show-blogger-gadget-on-home-page-only.html" title="show blogger widget on home page only">technique</a>.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com4tag:blogger.com,1999:blog-2600741898667032216.post-22772388121108721562011-07-03T23:44:00.000-07:002011-08-08T22:11:56.165-07:002 ways to add custom fonts to your blog<span class="demo"><a href="http://websilogdemo.blogspot.com/" title="demo found on post and sidebar titles"><b>View demo</b></a>.</span> <br />
<br />
<br />
Want to have a <b>customized font for your header, post and sidebar titles, even</b> your <b>post content</b>? There are actually two ways to go about this.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-5k4P8TRxEpw/Ti5AaeHee6I/AAAAAAAAASE/8GZ1XGJoJ8Y/s1600/customfont2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="custom font on blogger" border="0" height="206" src="http://2.bp.blogspot.com/-5k4P8TRxEpw/Ti5AaeHee6I/AAAAAAAAASE/8GZ1XGJoJ8Y/s320/customfont2.png" width="320" title="custom font on blogger" /></a></div><br />
<br />
<h5>Technique #1. Using Google Web Fonts.</h5><blockquote>The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. <br />
<br />
Applying a font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style.<br />
<br />
-<a href="http://code.google.com/apis/webfonts/">Google Code Labs</a></blockquote><br />
<a href="http://websilogdemo.blogspot.com/"><b>View demo</b></a> for a <b>customized sidebar title</b>.<br />
<br />
It's pretty easy to <b>install a stylish Google web font</b>. <br />
1. Choose a font from Google font directory.<br />
<a href="http://www.google.com/webfonts">Google Web Font version 1</a><br />
<a href="http://www.google.com/webfonts/v2">Google Web Font version 2</a><br />
2. Filter the search based on <b>category</b>, <b>thickness</b>, <b>script</b> and <b>style</b>.<br />
3. Once you find a font to suits your preference, <b>ADD IT TO COLLECTION</b>.<br />
4. <b>REVIEW</b>. <br />
5. If you're okay with it, get ready to <b>USE</b> it.<br />
6. Follow the instructions from Google on <b>how to add and integrate it to your website</b>.<br />
<br />
<br />
<b>How to install Google Web Font to Blogger?</b> <br />
Here is a step-by-step procedure from <a href="http://www.simplebloggertutorials.com/2010/05/add-custom-fonts-to-blogger-using.html" title="add custom font using google web fonts">Simple Blog Tutorials</a>, including:<br />
1. <b>How to get rid of the XML error</b>:<br />
<blockquote><b>Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.<br />
XML error message: The reference to entity "subset" must end with the ';' delimiter.</b></blockquote><br />
2. How to add the customized font to different sections on Blogger.<br />
<br />
<br />
<b>Browser Support for Google Web Fonts.</b> <br />
Per <a href="http://code.google.com/apis/webfonts/faq.html#Browsers_Supported" title="supported browsers for google web fonts">Google Font API</a>, the browser compatibility are as follows:<br />
Google Chrome: version 4.249.4+<br />
Mozilla Firefox: version: 3.5+<br />
Apple Safari: version 3.1+<br />
Opera: version 10.5+<br />
Microsoft Internet Explorer: version 6+<br />
<br />
<br />
<br />
<h5>Technique #2. Using sIFR Generator.</h5>This technique is more handy <b>IF (1) your desired font isn't included in the Google Web Fonts directory</b> and <b>(2) you want a custom font <a href="http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/" title="google web fonts cross browser fix">COMPATIBLE TO ALL BROWSERS</a>.</b> However, this would require you to use an <a href="http://www.sifrgenerator.com/wizard.html">online sIFR generator</a> and an account to host the javascript, flash (swf) and css files (e.g. <a href="http://hostwebs.com/">Hostwebs</a> or <a href="http://awardspace.com/">Awardspace</a> for Blogger users.) The custom font may be added to <b>post titles</b>, <b>sidebar titles</b>, and even <b>post content</b>.<br />
<br />
<a href="http://websilogdemo.blogspot.com/">View demo for custom post titles</a>.<br />
<a href="http://photomandy.blogspot.com/">View demo for custom post content</a>.<br />
<br />
Here's how:<br />
<a href="http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-cute-font-for-your-blogger-post-titles.html">How To Use A Cute Font For Your Blogger Post Titles</a><br />
<a href="http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-custom-font-for-your-entire-bloggerblogspot-posts.html">How To Use a Custom Font for Your Entire Blogger/Blogspot Posts</a><br />
<br />
<br />
<h5>Remember:</h5>1. Using <b>several font styles</b> may slow down the loading of your website.<br />
2. Using <b>one or two font styles on several sections of your blog</b> (including the post content) may have the same effect as above.<br />
<br />
<br />
<h6>Related Blogs and Website.</h6><a href="http://www.google.com/webfonts">Google Web Fonts</a><br />
<a href="http://www.simplebloggertutorials.com/2010/05/add-custom-fonts-to-blogger-using.html">Add Custom Fonts to Blogger with Google Web Fonts</a><br />
<a href="http://www.kevinandamanda.com/whatsnew/tutorials/how-to-use-a-cute-font-for-your-blogger-post-titles.html">How To Use A Cute Font For Your Blogger Post Titles</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com5tag:blogger.com,1999:blog-2600741898667032216.post-18775012548315326872011-07-02T22:41:00.000-07:002011-08-09T06:07:11.539-07:002 ways to style html codes in your blog posts<span class="demo"><a href="http://websilogdemo.blogspot.com/2011/07/this-is-test-post.html">View demo.</a></span><br />
<br />
<br />
Once you learn <b><a href="http://websilog.blogspot.com/2011/07/how-to-add-html-codes-to-blogger-posts.html" title="insert javascript codes on blogger">how to add HTML, css or javascript codes to your blogger posts</a></b> (also called <a href="http://en.openwebsuite.org/tutorials/tutorial_advanced_topics.shtml">code snippets</a>), the next step is to style it.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-RGkohgSO1Zg/Ti4iciCsifI/AAAAAAAAAR8/VIkTPWLax6g/s1600/precode.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="customize html codes on blogger" title="customize html codes on blogger" border="0" height="224" src="http://1.bp.blogspot.com/-RGkohgSO1Zg/Ti4iciCsifI/AAAAAAAAAR8/VIkTPWLax6g/s320/precode.png" width="320" /></a></div><br />
<br />
To <b>customize codes</b>, we'll use <a href="http://www.w3schools.com/css/" title="CSS is used to format the layout of web pages.">CSS</a>. It can be done in two ways. <br />
<br />
<br />
<h5>Technique #1. Using <PRE> and <CODE>. </h5>Sohtanaka has given <a href="http://www.sohtanaka.com/web-design/styling-pre-tags-with-css-code-block/" title="how to dress up pre tags with background images">a very detailed explanation</a> on how to dress them up using background images with <b><pre></b> and<b> <code></b> tags. View example below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-kQoxMn2s2Lg/Tg_WhRZnT1I/AAAAAAAAAIo/_hcpbVWyUo0/s1600/precodesample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="add style on blogger html codes" title="add style on blogger html codes" border="0" height="169" src="http://2.bp.blogspot.com/-kQoxMn2s2Lg/Tg_WhRZnT1I/AAAAAAAAAIo/_hcpbVWyUo0/s200/precodesample.png" width="200" /></a></div><br />
Here is his <a href="http://www.sohtanaka.com/web-design/styling-pre-tags-with-css-code-block/" title="how to style pre tags with css code block">tutorial</a>. <br />
<br />
To see a variety of styles, <a href="http://www.sohtanaka.com/web-design/examples/pre-tags/" title="pre tags demo page">check out his demo page</a>.<br />
<br />
<br />
<h5>Technique #2. Using <DIV>.</h5>The second technique is almost similar to the first one. The only difference is that, we define the code under <div>, <b>NOT</b> <pre> and <code> tags.<br />
<br />
Here is how <a href="http://www.newbloggingtipz.com/2009/08/how-to-add-html-codes-in-blogger-posts.html" title="how to add html codes in blogger posts">NewBloggingTipz</a> did it.<br />
<br />
<br />
<h5>How I Customized My Code Snippet?</h5>I applied the first technique with a minor adjustment. Instead of a background image, I used a <a href="http://css-tricks.com/snippets/css/stitched-look/">css trick</a> that shows a "<b><a href="http://kitmacallister.com/2011/css3-stitched-elements/" title="stitched effect using css">stitched look</a></b>".<br />
<br />
Here is my modified code.<br />
<pre><code>
pre {
padding: 5px 10px;
margin: 10px 40px 10px 30px;
background: #2d2d2d;
color: #fff;
font-size: 10px;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
overflow-Y: hidden; /*--Hides vertical scroll created by IE--*/
}
pre code {
margin: 0 0 0 10px; /*--Left Margin--*/
padding: 5px 0;
display: block;
}
</code></pre><br />
Here is how I called for it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-t5ESiJFznDI/ThAA4QVZNoI/AAAAAAAAAI4/x8d5JDQc-ng/s1600/stylecode1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="insert stylish html codes on blogger" title="insert stylish html codes on blogger" border="0" height="237" src="http://3.bp.blogspot.com/-t5ESiJFznDI/ThAA4QVZNoI/AAAAAAAAAI4/x8d5JDQc-ng/s320/stylecode1.png" width="320" /></a></div><br />
<br />
Here is the result.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-zqBkE7m-st4/ThABBETI-tI/AAAAAAAAAI8/m-ef44jdg-0/s1600/stylecode2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="add customized javascript codes on blogger" title="add customized javascript codes on blogger" border="0" height="102" src="http://4.bp.blogspot.com/-zqBkE7m-st4/ThABBETI-tI/AAAAAAAAAI8/m-ef44jdg-0/s320/stylecode2.png" width="320" /></a></div><br />
<br />
<h6>Related Websites.</h6><a href="http://www.sohtanaka.com/web-design/styling-pre-tags-with-css-code-block/">Styling Code Snippets with CSS</a><br />
<a href="http://kitmacallister.com/2011/css3-stitched-elements/">CSS3 Stitched Elements</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com0tag:blogger.com,1999:blog-2600741898667032216.post-19274131306830512892011-07-02T21:11:00.000-07:002011-08-08T21:43:25.133-07:002 ways to add html codes to blogger postsEver encountered an instance when you added an html or javascript code to a blogger post and yet, it didn't display properly? <br />
<br />
Below are two techniques to <b>add codes to posts on blogger</b>.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-Ndph_2kcuwI/Ti4d07c3UXI/AAAAAAAAAR4/H2c_wvGYd0o/s1600/htmlblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="html codes on blogger" title="html codes on blogger" border="0" height="193" src="http://1.bp.blogspot.com/-Ndph_2kcuwI/Ti4d07c3UXI/AAAAAAAAAR4/H2c_wvGYd0o/s200/htmlblogger.png" width="200" /></a></div><br />
<br />
<h5>Technique #1. Using <b>COMPOSE</b> tab.</h5>The COMPOSE mode in Blogger is a <a href="http://en.wikipedia.org/wiki/WYSIWYG" title="what you see is what you get">WYSIWYG</a> editor, thus, it shows how the posted page will look like as you are creating them.<br />
<br />
<b>How to add codes to a blogger post using COMPOSE mode</b> is super easy. It can be done simply by <b>copy-and-paste method</b> -- you copy the codes, paste them. <br />
<br />
<br />
<h5>Technique #2. Using <b>EDIT HTML</b> tab.</h5>This involves three simple steps.<br />
<br />
<b>Step 1.</b> <br />
Go to an online HTML encoder/decoder and input the codes. In this case, I used the one from <a href="http://www.webtoolhub.com/tn561387-html-encoder-decoder.aspx" title="online html encoder and decoder">Web Tool Hub</a>. <b>CONVERT TEXT</b>. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-q4Rins23E6k/Tg_rk6CnSXI/AAAAAAAAAIs/UPEyu3Yf9es/s1600/addcode1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="online tool to convert html codes" title="online tool to convert html codes" border="0" height="137" src="http://3.bp.blogspot.com/-q4Rins23E6k/Tg_rk6CnSXI/AAAAAAAAAIs/UPEyu3Yf9es/s320/addcode1.png" width="320" /></a></div><br />
<br />
<b>Step #2.</b><br />
Scroll down to the newly encoded text. Copy.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-_k_RDqmF58A/Tg_rrDlIWzI/AAAAAAAAAIw/0Lw5uPxiRFE/s1600/addcode2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="web based tool to encode and decode html" title="web based tool to encode and decode html" border="0" height="177" src="http://4.bp.blogspot.com/-_k_RDqmF58A/Tg_rrDlIWzI/AAAAAAAAAIw/0Lw5uPxiRFE/s320/addcode2.png" width="320" /></a></div><br />
<br />
<b>Step #3</b>.<br />
Create a <b>NEW POST</b>. Choose <b>EDIT HTML</b> tab. Then, paste the encoded text.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-UXNHAhrSb2c/Tg_rv-AhyXI/AAAAAAAAAI0/XC7r1yBePl0/s1600/addcode3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="insert html and javascript codes to blogger" title="insert html and javascript codes to blogger" border="0" height="237" src="http://2.bp.blogspot.com/-UXNHAhrSb2c/Tg_rv-AhyXI/AAAAAAAAAI0/XC7r1yBePl0/s320/addcode3.png" width="320" /></a></div><br />
<br />
When you switch to COMPOSE tab, you'll see the HTML codes properly encoded to your post window.<br />
<br />
<br />
Other online HTML encoders/decoders to choose from:<br />
<a href="http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process">Simple Code</a><br />
<a href="http://www.opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx">Opinionated Geek</a><br />
<a href="http://www.string-functions.com/htmlencode.aspx">String Functions</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com8tag:blogger.com,1999:blog-2600741898667032216.post-15688367764471411572011-07-01T22:22:00.000-07:002011-08-09T06:05:49.471-07:002 ways to create a mobile version of your blogger blog<h5>Why make your blog mobile-friendly?</h5><blockquote>Mobile phones will overtake PCs as the dominant web access device worldwide by 2013 according to a new forecast issued by research firm Gartner. - <a href="http://www.fiercemobilecontent.com/story/gartner-forecasts-mobile-web-access-will-surpass-pcs-2013/2010-01-13" title="the future of mobile technology">Fierce Mobile Content</a></blockquote><br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-oSvb0tpuEmk/Ti4XuiHNY4I/AAAAAAAAAR0/V1YV2vWp9b8/s1600/bloggermobile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="going mobile on blogger" title="going mobile on blogger" border="0" height="179" src="http://4.bp.blogspot.com/-oSvb0tpuEmk/Ti4XuiHNY4I/AAAAAAAAAR0/V1YV2vWp9b8/s320/bloggermobile.png" width="320" /></a></div><br />
<br />
There are two ways to <b>make or add a mobile-friendly version of your blogspot blog</b>. Both use the Blogger mobile template.<br />
<br />
<blockquote>Blogger mobile templates are mobile-optimized versions of our Template Designer templates. If you are using one of these templates, when you enable the mobile template option your blog will begin rendering using the mobile version of the same variant. - <a href="http://buzz.blogger.com/2011/06/announcing-blogger-mobile-templates.html" title="mobile templates available on blogger">Blogger Buzz</a> </blockquote><br />
<br />
<h5>Technique #1. The Easy Way.</h5>1. On the <b>SETTINGS</b> Tab, go to <b>EMAIL & MOBILE</b>.<br />
2. Under <b>MOBILE TEMPLATE (BETA)</b> section, choose <b>YES</b> to show mobile template.<br />
3. <b>SAVE SETTINGS</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-6rsN6qlGinE/Tg6yezQdlTI/AAAAAAAAAE0/rZnEuWaWIZs/s1600/mobileversion.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="create mobile friendly blogger blog" title="create mobile friendly blogger blog" border="0" class="iframe" height="164" rel="group" src="http://4.bp.blogspot.com/-6rsN6qlGinE/Tg6yezQdlTI/AAAAAAAAAE0/rZnEuWaWIZs/s320/mobileversion.png" width="320" /></a></div><br />
<br />
<h5>Technique #2. The Hard Way.</h5>This will require editing the template and adding some codes: <br />
<pre><code>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
</code></pre><br />
after this:<br />
<pre><code>
<b:include data="blog" name="all-head-content"></b:include>
</code></pre><br />
<br />
For full instructions, please visit Blogger Trick's <a href="http://www.bloggertricks.com/2010/06/how-to-make-your-blogger-blog-ready-for.html">How to Make your Blogger Blog ready for Mobile Phones</a>.<br />
<br />
If for some reason, the <b>mobile template version of Blogger doesn't seem to work</b>, make sure to append this -- <b style="background-color: #444444; color: #eeeeee;">?m=1</b> -- at the end of your blog URL. Example:<br />
<br />
<pre><code>
<b>http://websilog.blogspot.com/</b><span style="background-color: #eeeeee; color: black;">?m=1</span>
</code></pre><br />
Also remember Blogger notes about this feature.<br />
<blockquote>*WebKit-based mobile browsers are supported for this launch.<br />
**Supported gadgets/elements in this launch: Header, Blog, Profile, AdSense, Attribution</blockquote><br />
<br />
<h6>Related Blogs and Discussion.</h6><a href="http://www.fiercewireless.com/press-releases/gartner-highlights-key-predictions-it-organizations-and-users-2010-and-beyond">Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond</a><br />
<a href="http://buzz.blogger.com/2011/06/announcing-blogger-mobile-templates.html">Announcing Blogger Mobile Templates</a><br />
<a href="http://www.bloggertricks.com/2010/06/how-to-make-your-blogger-blog-ready-for.html">How to Make your Blogger Blog ready for Mobile Phones</a><br />
<a href="http://www.google.com/support/forum/p/blogger/thread?tid=17c212cf54279392&hl=en">Mobile Template of my blog is not working</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com6tag:blogger.com,1999:blog-2600741898667032216.post-4651512581490458762011-06-30T07:34:00.000-07:002011-08-08T21:09:06.681-07:002 ways to add image beside blogger post title<span class="demo"><a href="http://websilogdemo.blogspot.com/2011/07/another-test-post.html">View demo.</a></span><br />
<br />
<br />
There are two ways to <b>insert an image next post titles</b> on blogger. One is using CSS and the other, through "Expand Widget Templates" mode. Before doing the coding and the actual adding of the image next to the title, check out these simple guidelines.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-LtC9mCPl6os/Ti0Io0H3rbI/AAAAAAAAARw/PC7sm9p9uhc/s1600/imagetotitle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image next to title blogger" title="image next to title blogger" border="0" height="160" src="http://3.bp.blogspot.com/-LtC9mCPl6os/Ti0Io0H3rbI/AAAAAAAAARw/PC7sm9p9uhc/s320/imagetotitle.png" width="320" /></a></div><br />
<br />
<h5>Guidelines.</h5>1. It is advised to save the picture in transparent PNG or GIF format to retain transparency especially for non-white backgrounds. Observe the difference. The "Test Post" on the right shows a <b>transparent</b> image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-vmBQ9Lk3X1Q/Tg68YM4r3wI/AAAAAAAAAFE/oVbcvzlv7n8/s1600/testpost.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="png vs jpg" title="png vs jpg" border="0" height="89" src="http://4.bp.blogspot.com/-vmBQ9Lk3X1Q/Tg68YM4r3wI/AAAAAAAAAFE/oVbcvzlv7n8/s320/testpost.png" width="320" /></a></div><br />
2. Upload your image to a free image hosting site like <a href="https://picasaweb.google.com/">PICASA WEB</a> or <a href="http://photobucket.com/">PHOTOBUCKET</a>. Get the link.<br />
<br />
3. Back up your template! If unsure how to go about this, check this tutorials:<br />
<a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog.html" title="backup classic template blogs">How to Back up your Blogger blog - Classic Template </a><br />
<a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="backup new template blogs">How to Back up your Blogger blog - New Template </a><br />
<br />
<br />
<br />
<h5>Technique #1. Insert Image Using CSS.</h5>1. Open <b>EDIT HTML</b> page. <br />
2. Press <b>CTRL + F</b>. On the search bar, type in <b>.post-title</b>.<br />
3. Once you see a style declaration similar to this,<br />
<pre><code>
h3.post-title {
font: $(post.title.font);
margin: .75em 0 0;
font-weight: bold;
}
</code></pre><br />
Add in the highlighted lines: <br />
<pre><code>
h3.post-title {
font: $(post.title.font);
margin: .75em 0 0;<b>
<span style="background-color: #eeeeee; color: black;"> background-image: url(yourimageURL.png);</span>
<span style="background-color: #eeeeee; color: black;"> background-repeat: no-repeat;</span>
<span style="background-color: #eeeeee; color: black;"> padding:0 0 4px 50px;</span></b>
font-weight: bold;
}
</code></pre><br />
What it means. <br />
-<b>background-image:url</b> refers to the URL of your uploaded image<br />
-<b>background-repeat: no-repeat</b> means the image will not be repeated<br />
-<b>padding: 0 0 4px 50px</b> is the space between the element border (0px for<br />
top padding, 0px for right, 4px for bottom and 50px for left padding)<br />
<br />
To learn more about CSS styles, visit <a href="http://www.w3schools.com/">W3Schools</a>. You can also check <a href="http://tricks-for-new-bloggers.blogspot.com/2007/08/image-beside-blog-post-title.html">Trick for New Blogger's post</a> for better understanding on how to set paddings on images.<br />
<br />
4. Save template.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-q1Zb5qqZX3c/Tg69lOkZ7QI/AAAAAAAAAFM/IW-Q9x2bHv0/s1600/addimagetoposttitle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="insert image to blogger titles" title="insert image to blogger titles" border="0" height="298" src="http://2.bp.blogspot.com/-q1Zb5qqZX3c/Tg69lOkZ7QI/AAAAAAAAAFM/IW-Q9x2bHv0/s320/addimagetoposttitle.png" width="320" /></a></div><br />
<br />
<h5>Technique #2. Insert Image Through "Expand Widget Templates" Mode.</h5>1. Open <b>EDIT HTML</b> page. <br />
2. Press <b>CTRL + F</b>. On the search bar, type in <b> </b><br />
<pre><code>
<b><a expr:href='data:post.url'><data:post.title/></a></b>
</code></pre><br />
3. Once you see a similar code like this,<br />
<pre><code>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</code></pre><br />
Add in the highlighted lines:<br />
<pre><code>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href="data:post.url" href="">
<span style="background-color: #eeeeee; color: black;"> <img src='yourimageURL.png' style='border: 0'/></span>
<data:post.title></a>
<b:else/>
<data:post.title/>
</b:if>
</code></pre><br />
-<b>'yourimageURL.png'</b> refers to the URL of your uploaded image <br />
<br />
4. Save template.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-eQtmYnYVx28/Tg6933xOo3I/AAAAAAAAAFQ/yyVD_gJ85Fg/s1600/addimagetoposttitle2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="add image right after blogger titles" title="add image right after blogger titles" border="0" height="296" src="http://2.bp.blogspot.com/-eQtmYnYVx28/Tg6933xOo3I/AAAAAAAAAFQ/yyVD_gJ85Fg/s320/addimagetoposttitle2.png" width="320" /></a></div><br />
<br />
<h6>Related Blog.</h6><a href="http://tricks-for-new-bloggers.blogspot.com/2007/08/image-beside-blog-post-title.html">Image beside Blog Post Title </a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com10tag:blogger.com,1999:blog-2600741898667032216.post-22011545659252451192011-06-29T10:09:00.000-07:002011-08-09T06:04:02.741-07:00this image could not be uploaded due to an internal error<b>Cannot upload photos in blogger?</b> More often than not, this may be due to <b>Blogger Maintenance</b>. <br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-wPMZimo8D7A/Tiz-cOMjhwI/AAAAAAAAARs/TkQLkDn53Rg/s1600/bloggerimageerror.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="cant upload image on blogger" border="0" height="320" src="http://3.bp.blogspot.com/-wPMZimo8D7A/Tiz-cOMjhwI/AAAAAAAAARs/TkQLkDn53Rg/s320/bloggerimageerror.png" title="image error on blogger" width="294" /></a></div><br />
Follow this simple steps.<br />
<br />
<h5>Step #1.</h5>Check Blogger Official Blog for scheduled maintenance.<br />
<a href="http://knownissues.blogspot.com/">Known Issues for Blogger</a><br />
<a href="http://status.blogger.com/">Blogger Status</a><br />
<br />
<br />
<h5>Step #2.</h5>Check Blogger Help Forum and join the discussions for possible answers. <br />
<a href="http://www.google.com/support/forum/p/blogger/label?lid=0271191b4249689a&hl=en">Something is Broken</a><br />
<br />
<br />
<h5>Step #3.</h5>If and when you cannot find any solution after doing the above items, try some basic troubleshooting on your end.<br />
1. Clear your browser's cookies. Close your browser. Open it again then relogin to your account.<br />
2. Try uploading the image from your Computer to Blogger (i.e. either through Design/Page Elements or Posting/New Post)<br />
3. Try a different image to upload. <br />
4. Rename the image file (from your Computer) before upload.<br />
5. Copy the image file to a different location, e.g. from My Documents to My Pictures, before upload.<br />
6. Try uploading the image directly to <a href="https://picasaweb.google.com/">Picasa Web</a>. Get the link. Use the link to upload.<br />
7. Try a different browser, e.g. Opera, Chrome, Safari, Firefox.<br />
8. Try a different computer.<br />
9. Try a different Blogger account.<br />
10. Try using a different image hosting website, e.g. <a href="http://www.photobucket.com/">Photobucket</a>. Upload the image there. Get the direct link. Use the link to upload.<br />
<br />
<br />
<h5>Step #4.</h5>If all else fails, give your blog a rest and come back after a few hours.<br />
<br />
<br />
<h6>Related Discussions.</h6><a href="http://www.google.co.jp/support/forum/p/blogger/thread?tid=177d4b0b651a81d2&hl=en">I cannot upload images to my blog - "internal error" </a><br />
<a href="http://www.google.com/support/forum/p/blogger/thread?tid=730040643e75b356&hl=en">"This image could not be uploaded due to an internal error"!!! </a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com1tag:blogger.com,1999:blog-2600741898667032216.post-42160237811832617012011-06-28T02:41:00.000-07:002011-08-08T20:44:39.726-07:002 ways to hide "subscribe to posts (atom)" linkBy default, <b>subscribe to posts (atom)</b> is seen at the bottom of all posts. Once the reader subscribes to the posts, he/she can view and read the entries conveniently via <a href="http://whatis.techtarget.com/definition/0,,sid9_gci1242047,00.html" title="a tool to view rss feeds"><b>feed reader</b></a> without having to visit the blog.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-NoKEVx9POmI/TizuaZ8Uz8I/AAAAAAAAARo/4jX99T78lB0/s1600/atomfeed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="subscribe to blogger feeds" border="0" height="89" src="http://4.bp.blogspot.com/-NoKEVx9POmI/TizuaZ8Uz8I/AAAAAAAAARo/4jX99T78lB0/s320/atomfeed.png" title="subscribe to blogger feeds" width="320" /></a></div><br />
If you prefer to have this link hidden, two pretty easy techniques are as follows.<br />
<br />
<br />
<h5>Technique #1. Using CSS.</h5>1. Go to EDIT HTML Page.<br />
2. Search for <b>]]></b:skin></b>. Above it, insert the following codes.<br />
<pre><code>
.feed-links {
display:none;
}
</code></pre><br />
3. Save Template.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-7Co9fE4qZ4k/Tg6-jEoM_rI/AAAAAAAAAFU/un7r40bJ23Q/s1600/subscribetoatom1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="remove subscribe to posts link" border="0" height="280" src="http://4.bp.blogspot.com/-7Co9fE4qZ4k/Tg6-jEoM_rI/AAAAAAAAAFU/un7r40bJ23Q/s320/subscribetoatom1.png" title="remove subscribe to posts link" width="320" /></a></div><br />
<br />
<h5>Technique #2. Using "Expand Widget Templates" Mode.</h5>1. Go to EDIT HTML page.<br />
2. Switch to <b>"Expand Widget Templates" mode</b> by ticking the box.<br />
3. Press Ctrl + F to show search bar. Type the following on the search box.<br />
<pre><code>
<b:include data='feedLinks' name='feedLinksBody'/>
</code></pre><br />
4. You'll see a section similar to this.<br />
<pre><code>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<span style="background-color: #eeeeee; color: black;"> <b:include data='feedLinks' name='feedLinksBody'/> </span>
</div>
</b:if>
</code></pre><br />
<b>Delete the highlighted line.</b><br />
5. Save template.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-87Vh9HPPBco/Tg6-2kYTWlI/AAAAAAAAAFY/6BM6TYQMCB4/s1600/subscribetoatom2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="hide subscribe to atom link" border="0" height="304" src="http://1.bp.blogspot.com/-87Vh9HPPBco/Tg6-2kYTWlI/AAAAAAAAAFY/6BM6TYQMCB4/s320/subscribetoatom2.png" title="hide subscribe to atom link" width="320" /></a></div>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com1tag:blogger.com,1999:blog-2600741898667032216.post-40092493520402127912011-06-28T01:50:00.000-07:002011-08-08T20:07:08.345-07:003 ways to change language of blogger dashboardBlogger has its own <a href="http://www.blogger.com/language.g">language selection</a> feature that makes blogging easy for bloggers around the world.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-iT7l0k2MpYY/Ti5BaJTrhlI/AAAAAAAAASM/TDs5yFlaIIw/s1600/bloggerlanguage2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img border="0" height="299" src="http://2.bp.blogspot.com/-iT7l0k2MpYY/Ti5BaJTrhlI/AAAAAAAAASM/TDs5yFlaIIw/s320/bloggerlanguage2.png" alt="blogger language selection" title="blogger in different languages" width="320" /></a></div><br />
Switching from one language to another is easy. It can be done in three ways.<br />
<br />
<br />
<h5>Technique #1.</h5>Change from the <b>upper right hand corner</b> of the Dashboard.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-Ay2kKLWsXPA/Tg6_vmF0Z4I/AAAAAAAAAFc/LWJjYccef7s/s1600/language1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img border="0" height="134" alt="change blogger language" src="http://2.bp.blogspot.com/-Ay2kKLWsXPA/Tg6_vmF0Z4I/AAAAAAAAAFc/LWJjYccef7s/s320/language1.png" title="change blogger language" width="320" /></a></div><br />
<br />
<h5>Technique #2.</h5>Change from the Dashboard's <b>footer text link</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-_xOs_n_ZSWc/Tg6_0-A-kfI/AAAAAAAAAFg/0LS5LTlV_rA/s1600/language2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="switch language on blogger" border="0" height="132" src="http://3.bp.blogspot.com/-_xOs_n_ZSWc/Tg6_0-A-kfI/AAAAAAAAAFg/0LS5LTlV_rA/s320/language2.png" title="switch language on blogger" width="320" /></a></div><br />
<br />
<h5>Technique #3</h5>Use the following <a href="http://labnol.blogspot.com/2007/05/language-problem-when-using-blogger.html" title="change language on blogger"><b>Default Language for Google Blogger</b></a>. Just click on the link.<br />
<br />
<a href="http://www.blogger.com/start?hl=en">English</a> <a href="http://www.blogger.com/start?hl=en_GB">English (UK)</a> <a href="http://www.blogger.com/start?hl=fr">Français</a> <a href="http://www.blogger.com/start?hl=it">Italiano</a> <a href="http://www.blogger.com/start?hl=de">Deutsch</a> <a href="http://www.blogger.com/start?hl=es">Español</a> <a href="http://www.blogger.com/start?hl=ru">Русский</a> <a href="http://www.blogger.com/start?hl=nl">Nederlands</a> <a href="http://www.blogger.com/start?hl=tr">Türkçe</a> <a href="http://www.blogger.com/start?hl=da">Dansk</a> <a href="http://www.blogger.com/start?hl=no">Norsk</a> <a href="http://www.blogger.com/start?hl=sv">Svenska</a> <a href="http://www.blogger.com/start?hl=fi">suomi</a> <a href="http://www.blogger.com/start?hl=pt_BR">Português do Brasil</a> <a href="http://www.blogger.com/start?hl=ko">한국어</a> <a href="http://www.blogger.com/start?hl=ja">日本語</a> <a href="http://www.blogger.com/start?hl=zh_TW">中文(繁體)</a> <a href="http://www.blogger.com/start?hl=zh_CN">中文(简体)</a> <a href="http://www.blogger.com/start?hl=th">ภาษาไทย</a> <br />
<br />
<br />
<h6>Related Blog.</h6><a href="http://labnol.blogspot.com/2007/05/language-problem-when-using-blogger.html">The Language Problem When Using Blogger, Google Notebook from Another Country</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com2tag:blogger.com,1999:blog-2600741898667032216.post-86950743270203618252011-06-27T23:16:00.000-07:002011-08-08T19:58:44.525-07:00no "expand widget templates" boxThe "<b>Expand Widget Templates" mode</b> in the EDIT HTML page allows user to gain a more fine-grained control of the widget tags and layout. This mode permits further customization on what to put inside the default <a href="http://www.blogger.com/">BLOGGER</a> widgets.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-UURVvS9aqTo/Tizfq4SwaUI/AAAAAAAAARg/JR30qgD2iOw/s1600/noexpand.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="blogger expand widget templates box" border="0" height="48" src="http://1.bp.blogspot.com/-UURVvS9aqTo/Tizfq4SwaUI/AAAAAAAAARg/JR30qgD2iOw/s200/noexpand.png" title="blogger expand widget templates box" width="200" /></a></div><br />
<br />
<h5>Where is the "Expand Widget Templates" checkbox? </h5>To enable or activate this mode,<br />
a. go to <b>DESIGN</b> tab.<br />
b. Click <b>EDIT HTML</b>.<br />
c. Under the <b>EDIT TEMPLATE</b> section, simply tick the <b>EXPAND WIDGET TEMPLATES</b> checkbox. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-tDSiIxXxvLk/Tg7A3Yj2G6I/AAAAAAAAAFk/2WBQMsnl6MM/s1600/expandwidgettemplates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="enable expand widget templates box" border="0" height="194" src="http://4.bp.blogspot.com/-tDSiIxXxvLk/Tg7A3Yj2G6I/AAAAAAAAAFk/2WBQMsnl6MM/s320/expandwidgettemplates.png" title="enable expand widget templates box" width="320" /></a></div><br />
<br />
<h5>My "Expand Widget Templates" is Gone.</h5><br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-aiXjWpGqDBA/Tg7BkP4ThNI/AAAAAAAAAFo/hkeDdUzS8Bk/s1600/expandwidgettemplatesgone.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="no expand widget templates box" border="0" height="218" src="http://1.bp.blogspot.com/-aiXjWpGqDBA/Tg7BkP4ThNI/AAAAAAAAAFo/hkeDdUzS8Bk/s320/expandwidgettemplatesgone.png" title="no expand widget templates box" width="320" /></a></div><br />
<br />
<b>Can't find the "Expand Widget Templates" box?</b> This occurs when you are using Classic Templates. You need to UPGRADE YOUR TEMPLATE. Before doing this, make sure that you <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog.html" title="how to back up blogger template">back up your HTML codes</a> first.<br />
<br />
To upgrade,<br />
a. Go to <b>TEMPLATE</b>.<br />
b. Choose <b>CUSTOMISE DESIGN</b>.<br />
c. Click <b>UPGRADE YOUR TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-kXcDF0uOnys/Tg7BxE7vphI/AAAAAAAAAFs/_0HBmTBlj6U/s1600/expandwidgettemplates_upgrade.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="upgrade classic template to new template" border="0" height="139" src="http://2.bp.blogspot.com/-kXcDF0uOnys/Tg7BxE7vphI/AAAAAAAAAFs/_0HBmTBlj6U/s320/expandwidgettemplates_upgrade.png" title="upgrade classic template to new template" width="320" /></a></div><br />
Choose a template you prefer. When you go back to DESIGN TAB and EDIT HTML page, the <b>EXPAND WIDGET TEMPLATES </b>checkbox is back.<br />
<b>REMEMBER!</b> <i>By upgrading templates, you will lose many of the changes you previously made to your template. Backing up is advised.</i><br />
<br />
<br />
<h5>How to revert to Classic Template.</h5>Like the old or classic templates better? If you prefer to switch to old templates,<br />
a. Go to <b>DESIGN</b> tab<br />
b. Choose <b>EDIT</b> HTML.<br />
c. Under the <b>OLD TEMPLATES</b> section, choose <b>REVERT TO CLASSIC TEMPLATES</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://1.bp.blogspot.com/-fwhl_nSbdqI/Tg7B93IEEJI/AAAAAAAAAFw/CCG_bWeEXbQ/s1600/expandwidgettemplates_revert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="revert to classic template" border="0" height="234" src="http://1.bp.blogspot.com/-fwhl_nSbdqI/Tg7B93IEEJI/AAAAAAAAAFw/CCG_bWeEXbQ/s320/expandwidgettemplates_revert.png" title="how to revert to classic template" width="320" /></a></div><br />
<br />
<h6>Related Discussions.</h6><a href="http://www.google.com/support/forum/p/blogger/thread?tid=439d4d9adcd74b6e&hl=en">Blogger Help: My 'Expand Widget Templates' box is gone </a><br />
<a href="https://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/a23acbb4010a2ddb/e4db22ebf05c0a80?lnk=gst&q&hl=en">Blogger Help: How Do I Expand Widget Templates?</a>annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com3tag:blogger.com,1999:blog-2600741898667032216.post-5914011496140696492011-06-27T23:00:00.000-07:002011-08-08T19:53:30.587-07:00back up blogger new templates<h5>Why backup your template?</h5><a href="http://websilog.blogspot.com/p/blogger-tweaks.html" title="how to customize your blogger blog"><b>Blogger customization</b></a> can be fun and interesting. Things may get tricky at times though. It would be good to have an access to the template <b>BEFORE</b> changes has been made.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://2.bp.blogspot.com/-qpZurpcvkf8/TizZntqknDI/AAAAAAAAARM/shQTDjCT3WA/s1600/backup_newblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="backup new blogger templates" border="0" height="100" src="http://2.bp.blogspot.com/-qpZurpcvkf8/TizZntqknDI/AAAAAAAAARM/shQTDjCT3WA/s200/backup_newblogger.png" title="backup new blogger templates" width="200" /></a></div><br />
<a name='more'></a><br />
<h5>How to back up blogger template?</h5>1. Go to <b>DESIGN</b>. <br />
2. Choose <b>EDIT HTML</b>. <br />
3. Under <b>BACKUP/RESTORE TEMPLATE</b> section, click on <b>DOWNLOAD FULL TEMPLATE</b>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://4.bp.blogspot.com/-8LPuEwUJB5w/Tg69GuH5XHI/AAAAAAAAAFI/iK0xmjlwSjw/s1600/backuptemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img alt="backup blogger blog" border="0" height="99" src="http://4.bp.blogspot.com/-8LPuEwUJB5w/Tg69GuH5XHI/AAAAAAAAAFI/iK0xmjlwSjw/s320/backuptemplate.png" title="backup blogger blog" width="320" /></a></div><br />
For <b>classic templates</b>, check out this <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog.html">tutorial</a>.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com1tag:blogger.com,1999:blog-2600741898667032216.post-85594348641476492462011-06-27T22:56:00.000-07:002011-08-08T19:45:24.844-07:00back up blogger classic templatesBacking up your blog is essential if you are making changes on the HTML codes. This way, you can easily restore to original settings in case something goes wrong. Making a back up of classic templates differs from <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html" title="how to back up new template on blogger">backing up new templates</a>. With the former, we'll use a "classic" method.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-5G2FmKs_LC0/TizawJsktYI/AAAAAAAAARQ/K3wQULIZQIs/s1600/backup_classicblogger2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="backup classic template" border="0" height="106" src="http://3.bp.blogspot.com/-5G2FmKs_LC0/TizawJsktYI/AAAAAAAAARQ/K3wQULIZQIs/s200/backup_classicblogger2.png" title="backup classic template" width="200" /></a></div><br />
<a name='more'></a><br />
<br />
<h5>The Copy-and-Paste Method.</h5><div class="separator" style="clear: both; text-align: center;"><a class="hailyt" href="http://3.bp.blogspot.com/-3tuwaU7HCUw/Tg7Cd6zlvUI/AAAAAAAAAF0/bQrk6ZZGz4o/s1600/backupblog_classic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img title="how to copy and paste to create backup" alt="copy and paste method" border="0" height="232" src="http://3.bp.blogspot.com/-3tuwaU7HCUw/Tg7Cd6zlvUI/AAAAAAAAAF0/bQrk6ZZGz4o/s320/backupblog_classic.png" width="320" /></a></div><br />
<br />
1. Go to <b>TEMPLATE</b> Tab. <br />
2. Choose <b>EDIT HTML</b>. <br />
3. Click on anywhere inside the box containing the code. Press <b>CTRL + A</b> to select all texts. Then, <b>CTRL + C</b> to copy.<br />
4. Open a text editor, e.g. NOTEPAD (for Windows users) or GEDIT (for UBUNTU users). Press <b>CTRL + V</b> to paste.<br />
5. Save.<br />
<br />
<br />
For <b>new templates</b>, check out this <a href="http://websilog.blogspot.com/2011/06/how-to-back-up-your-blogger-blog-new.html">tutorial</a>.annie214http://www.blogger.com/profile/03154006926656557954noreply@blogger.com0