Web.silog Blogger 101

3 ways to add "read more" on blogger

2011-07-11T20:28:00.000-07:00

Adding "Read More" or post summaries on blogger home page, 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 Jump Break feature, it's pretty easy to create post summaries now without having to edit the HTML template.

There are basically 3 ways to include a "read more" link on blogger. One is through Jump Break Blogger feature, the other, using Post Template Blogger setting, and third, using a javascript to give an accordion-like effect read-more.

Technique #1. Using Blogger Jump Break feature.

COMPOSE tab on POSTING section.
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 INSERT JUMP BREAK icon.

EDIT HTML tab on POSTING section.
Add  to the post area where you'd like the post teaser to end.

For customized third-party templates, you need to go to the EDIT HTML page of your template and add this 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 >

right after this:


<data:post.body/>

For step-by-step instructions, check out Blogger's tutorial on Jump Breaks.

Technique #2. Using Blogger Post Template feature.

This requires editing the HTML codes, so make sure to back up your template!
1. On the EDIT HTML page, search for


<data:post.body/>

2. Replace it with:


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<data:post.body/>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

3. SAVE TEMPLATE.

4. Go to SETTINGS. Choose FORMATTING. Under POST TEMPLATE section, add this:


<span class="fullpost">

</span>

5. SAVE SETTINGS.

When you create a new post, add the teaser or snippet ABOVE the span of full post whereas the rest of the post, INSIDE it.


add the teaser here

<span class="fullpost">

rest of the post goes here

</span>

You can also check How to Add "Read More..." Expandable Posts link in Blogger for complete guide and screenshots.

Technique #3. Accordion Effect Read More Using Javascript.

View demo.

The javascript and tweak came from Sharing Everyone. It's almost the same as Technique #2 as it also uses Blogger Post Template feature. The only difference: (1) addition of the read more javascript file on the header, and (2) a change in the template where you replace this:


<div class='post-body entry-content'>

to this:


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

For complete tutorial and customization, check out Sharing Everyone's How to create Read More.

Other "Read More" Tweaks.

Related Blogs and Website.

Creating 'After the jump' summaries
How to Add "Read More..." Expandable Posts link in Blogger
How to create Read More

4 ways to hide "older" and "newer posts" on blogger

2011-07-07T22:07:00.000-07:00

There are 4 ways to hide or remove "older posts" and "newer posts", aka blog pager, on blogger. They require either CSS edits or Expand Widget Templates enable-mode.

Technique #1. Using CSS [adding "display:none" property].

1. Go to EDIT HTML page.
2. Press CTRL + F, type in blog-pager on the search bar.
3. You'll see style declarations similar to this:


.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

or this:


#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}

4. Add display:none; BEFORE each }. Thus, the new set of codes will be:


.blog-pager {
  background: $(paging.background);
display:none;
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
display:none;
}

or this:


#blog-pager {
text-align: center;
display:none;
}

#blog-pager-older-link {
float: right;
display:none;
}

#blog-pager-newer-link {
float: left;
display:none;
}

What it means.
display:none - hides the element altogether.

5. SAVE TEMPLATE.

Technique #2. Using CSS [commenting out whole blog-pager block].

1. Follow Technique #1, steps 1-3.
2. Replace the old block to new block of css codes.

OLD BLOCK:


.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

NEW BLOCK:


/*
.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}
*/

OLD BLOCK:


#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}

NEW BLOCK:


/*
#blog-pager {
text-align: center;
}

#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
*/

What we did.
We PLACED THE CODES INSIDE /* */, i.e. /* codes here */. This signifies that they are CSS comments thus completely ignored by the browser.

More info: CSS Comments

3. SAVE TEMPLATE.

Technique #3. Through Expand Widget Templates Mode [commenting out the include statement].

Backup your template!

1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, type in <b:include name='nextprev'/> on the search bar.
4. You'll see a similar code like this:


<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

REPLACE the above highlighted line with this:


Thus, the new codes will be:


<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <!--  <b:include name='nextprev'/>  -->

What we did.
We PLACED THE CODES INSIDE , i.e. . This signifies that the tag is an HTML comment and like CSS comments, these are ignored by the browser; a.k.a. "ignore-me" code.

More info: Commented out - HTML

5. SAVE TEMPLATE.

Technique #4. Through Expand Widget Templates Mode [deleting include statement entirely].

1. Follow Technique #3, steps 1-3.
2. You'll see a similar code like this:


<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

DELETE the highlighted line: <b:include name='nextprev'/>
3. SAVE TEMPLATE.

Other "Older Posts" and "Newer Posts" Tweaks.

2 ways to rename older and newer posts to post title on blogger
5 places to move older and newer posts on blogger

3 ways to add flickr slideshow on blogger home page

2011-07-04T22:59:00.000-07:00

View demo.

There are three ways to add flickr photostream to Blogger. All involves adding a gadget/widget.

How to add a gadget/widget?
1. Go to DESIGN tab.
2. Click PAGE ELEMENT. Choose the section where you'd like the flickr slideshow to show up.
3. ADD A GADGET.

On to the techniques.

Technique #1. Using BASIC SLIDESHOW gadget.

1. Under BASICS, select SLIDESHOW.

2. Choose FLICKR as SOURCE, click KEYWORD if you'd like to display photos based on tags; USER based on flickr user.
3. Pick desired SPEED and OPTIONS.
4. SAVE.

Technique #2. Using FEATURED FLICKR PHOTOSTREAM gadget.

With this method, you can embed flickr slideshow based on flickr user alone. The procedure:
1. Under FEATURED, scroll down to FLICKR PHOTOSTREAM.

2. Assign FLICKR USERNAME from which the photos will stream on.
3. Specify the NUMBER OF THUMBNAILS to display, HEIGHT of the frame and TEXT to link back to flickr and TITLE of gadget.
4. SAVE.

Technique #3. Using HTML/JAVASCRIPT gadget.

1. Under BASIC, choose HTML/JAVASCRIPT.

2. Paste flickr embed codes.
3. SAVE.

How to get FLICKR HTML EMBED CODE.
If based on tags,
1. Go to flickr popular tags page. Type in your desired tag on the JUMP TO bar or choose from their list.
2. On the top right-most part of the specified tag page, click SLIDESHOW.
3. On the top right-most part of the slideshow page, click SHARE.
4. GRAB THE EMBED HTML code and COPY TO CLIPBOARD.
5. You can adjust the frame size by clicking the CUSTOMIZE HTML link.

SHORTCUT: Replace the tagname with your desired tag. Visit the URL. Hover to the top of the page, click SHARE.


http://www.flickr.com/photos/tags/tagname/show/?embed=1

Example:
http://www.flickr.com/photos/tags/blue/show/?embed=1

If based on flickr user, you need to login first before you can grab the code. Moving on,
1. Replace the username with the flickr user you prefer. Visit the URL.
2. Hover to the top of the page.
3. SHARE.


http://www.flickr.com/photos/username/show/?embed=1

Example:
http://www.flickr.com/photos/tannenberg/show/?embed=1

How to embed the gadget on BLOGGER HOME PAGE ONLY.

As having several pictures may or may not slow down the loading of your blog, you choose to have it visible on blogger home page only. How to do this? Check out this technique.

2 ways to add html codes to blogger posts

2011-07-02T21:11:00.000-07:00

Ever encountered an instance when you added an html or javascript code to a blogger post and yet, it didn't display properly?

Below are two techniques to add codes to posts on blogger.

Technique #1. Using COMPOSE tab.

The COMPOSE mode in Blogger is a WYSIWYG editor, thus, it shows how the posted page will look like as you are creating them.

How to add codes to a blogger post using COMPOSE mode is super easy. It can be done simply by copy-and-paste method -- you copy the codes, paste them.

Technique #2. Using EDIT HTML tab.

This involves three simple steps.

Step 1.
Go to an online HTML encoder/decoder and input the codes. In this case, I used the one from Web Tool Hub. CONVERT TEXT.

Step #2.
Scroll down to the newly encoded text. Copy.

Step #3.
Create a NEW POST. Choose EDIT HTML tab. Then, paste the encoded text.

When you switch to COMPOSE tab, you'll see the HTML codes properly encoded to your post window.

Other online HTML encoders/decoders to choose from:
Simple Code
Opinionated Geek
String Functions

2 ways to create a mobile version of your blogger blog

2011-07-01T22:22:00.000-07:00

Why make your blog mobile-friendly?

Mobile phones will overtake PCs as the dominant web access device worldwide by 2013 according to a new forecast issued by research firm Gartner. - Fierce Mobile Content

There are two ways to make or add a mobile-friendly version of your blogspot blog. Both use the Blogger mobile template.

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. - Blogger Buzz

Technique #1. The Easy Way.

1. On the SETTINGS Tab, go to EMAIL & MOBILE.
2. Under MOBILE TEMPLATE (BETA) section, choose YES to show mobile template.
3. SAVE SETTINGS.

Technique #2. The Hard Way.

This will require editing the template and adding some codes:


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

after this:


<b:include data="blog" name="all-head-content"></b:include>

For full instructions, please visit Blogger Trick's How to Make your Blogger Blog ready for Mobile Phones.

If for some reason, the mobile template version of Blogger doesn't seem to work, make sure to append this -- ?m=1 -- at the end of your blog URL. Example:


http://websilog.blogspot.com/?m=1

Also remember Blogger notes about this feature.

*WebKit-based mobile browsers are supported for this launch.
**Supported gadgets/elements in this launch: Header, Blog, Profile, AdSense, Attribution

Related Blogs and Discussion.

Gartner Highlights Key Predictions for IT Organizations and Users in 2010 and Beyond
Announcing Blogger Mobile Templates
How to Make your Blogger Blog ready for Mobile Phones
Mobile Template of my blog is not working

2 ways to hide "subscribe to posts (atom)" link

2011-06-28T02:41:00.000-07:00

By default, subscribe to posts (atom) 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 feed reader without having to visit the blog.

If you prefer to have this link hidden, two pretty easy techniques are as follows.

Technique #1. Using CSS.

1. Go to EDIT HTML Page.
2. Search for ]]></b:skin>. Above it, insert the following codes.


.feed-links {
display:none;
}

3. Save Template.

Technique #2. Using "Expand Widget Templates" Mode.

1. Go to EDIT HTML page.
2. Switch to "Expand Widget Templates" mode by ticking the box.
3. Press Ctrl + F to show search bar. Type the following on the search box.


<b:include data='feedLinks' name='feedLinksBody'/>

4. You'll see a section similar to this.


<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
   <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
   <b:include data='feedLinks' name='feedLinksBody'/>       
      </div>
   </b:if>

Delete the highlighted line.
5. Save template.

3 ways to change language of blogger dashboard

2011-06-28T01:50:00.000-07:00

Blogger has its own language selection feature that makes blogging easy for bloggers around the world.

Switching from one language to another is easy. It can be done in three ways.

Technique #1.

Change from the upper right hand corner of the Dashboard.

Technique #2.

Change from the Dashboard's footer text link.

Technique #3

Use the following Default Language for Google Blogger. Just click on the link.

English English (UK) Français Italiano Deutsch Español Русский Nederlands Türkçe Dansk Norsk Svenska suomi Português do Brasil 한국어 日本語中文(繁體) 中文(简体) ภาษาไทย

back up blogger new templates

2011-06-27T23:00:00.000-07:00

Why backup your template?

Blogger customization can be fun and interesting. Things may get tricky at times though. It would be good to have an access to the template BEFORE changes has been made.

How to back up blogger template?

1. Go to DESIGN.
2. Choose EDIT HTML.
3. Under BACKUP/RESTORE TEMPLATE section, click on DOWNLOAD FULL TEMPLATE.

For classic templates, check out this tutorial.

back up blogger classic templates

2011-06-27T22:56:00.000-07:00

Backing 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 backing up new templates. With the former, we'll use a "classic" method.

The Copy-and-Paste Method.

1. Go to TEMPLATE Tab.
2. Choose EDIT HTML.
3. Click on anywhere inside the box containing the code. Press CTRL + A to select all texts. Then, CTRL + C to copy.
4. Open a text editor, e.g. NOTEPAD (for Windows users) or GEDIT (for UBUNTU users). Press CTRL + V to paste.
5. Save.

For new templates, check out this tutorial.

hide blogger navigation bar

2011-06-27T20:16:00.000-07:00

What is Blogger NavBar?

The Blogger Navbar appears by default at the top of every Blogger-powered blog. - Google Blogger Support.

It shows links to take you back to blogger (dot) com, your blogger dashboard, search the blogger blog you're currently viewing, share and promote your content to social websites. View its complete features.

How to remove Blogger Navbar.

To hide, disable, remove or turn it off, follow these simple steps.

1. Go to Blogger and login to your account.
2. From the Dashboard, click DESIGN.

3. Go to EDIT HTML.
4. Search for ]]></b:skin>. Above it, insert the following codes.


#navbar-iframe {
display:none;
}

5. Save Template.

For classic templates, look for </style> instead of ]]></b:skin>.

Display [none] and Visibility [hidden].

In the above tutorial, we used the css property - DISPLAY: NONE.

display: none
With display:none property, it means we are removing the element completely from the document.

difference between display [none] and visibility [hidden]
If display:none deletes the element, visibility: hidden hides the element thus it still takes up space in the whole layout.

To understand more how they vary, see them in action.

Other techniques.

Labnol has blogged about other ways to hide Blogger NavBar. Two of them involve editing the <body> tag. Another is using css. View his techniques. If any of the above methods doesn't seem to work, try his alternative CSS tweaks.