How can I create expandable post summaries?
How can I create expandable post summaries?
The Quick Answer
- Add tags to your posts to mark which parts you want hidden in the summary version.
- Add CSS declarations to your template to hide those sections on the index and archive pages, but not on post pages.
With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole thing. Then users who want to read the rest of the post can click a link to see the full text. This is handy if you have lots of long articles all on one page. Note that you'll need to have post pages enabled in order to make this feature work.
There are three ingredients that go into this feature: conditional CSS, a "read more" link for each post, and a modification for the posts that use this feature. So let's go through it step by step.
Conditional CSS
We're going to use conditional tags to change how posts display on different pages. Add the following code to your style sheet, depending on what kind of template you have:
(for classic templates) សំរាប់ប្លុកដែលប្រើជាលក្ខណៈclassic<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
(for layouts) សំរាប់ប្លុកដែលប្រើជាលក្ខណៈ layouts
សូមយកកូដនេះទៅដាក់ដូចរូបខាងក្រោម
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Your style sheet is usually near the top of your template, between the <style> and </style> tags. If you have your style sheet in a separate file, you'll still need to add these lines in your template, so the conditional tags will work. Just make sure you add in the <style> tags around them.
What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks). Part of each post will use this class, as we'll see later.
"Read More" Links
Add the following code to your template, somewhere after the សូមយកកូដខាងខាងក្រោម (ទៅតាមប្រភេទនៃTemplate) ទៅដាក់ខាងក្រោមនៃ (For Classis Search this ស្វែងរកពាក្យនេះ) <$BlogItemBody$> or (For Laout Search this ស្វែងរកពាក្យនេះ) <data:post.body/> tag:(for classic templates)
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
(for layouts)
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
សូមយកកូដនេះទៅដាក់ពីក្រោម <data:post.body/> ដូច្នេះ
<data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post. You can replace the "Read more!" text with whatever you like, of course.
Post Modifications
The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code:
<span class="fullpost"></span>
This part can actually go in the post template, if you don't want to have to type it for each post. You'll enter the summary text outside the span tags and the remainder inside, like so:
នៅរាល់ពេលអត្ថបទណាដែលអ្នកចង់ដាក់ឲ្យមាន Read More... សូមសេរសេរ ឲ្យមានលក្ខណៈដូចខាងក្រោមនេះ គឺ
ប្រសិនជាអ្នកចង់ចេញនៅទំព័រដើមឲ្យនៅខ្លី តាមដែលអ្នកចង់បាន
ឧទាៈ ខ្ញុំត្រូវការចង់ឲ្យចេញត្រឹមតែ
Here is the beginning of my post.
ហើយនៅពេលដែលយើងចុច Read More... វានឹងបង្ហាញទាំងអស់។
ដូច្នេះនៅពេលអ្នកចង់បានត្រឹមណា សូមដាក់កូដនេះ <span class="fullpost"> សិន សឹម សរសរតទៅ រហូតអស់សេចក្ដី ទើបបន្លែមកូដនេះ </span> ជាចុងក្រោយ។
សូមសាកល្បង យកអត្ថបទ និងកូដខាងក្រោមនេះសាកមើល!
Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>
Now, when a reader visits your blog, this post will appear like this:
Here is the beginning of my post.When they click the link, they'll go to the post page where they'll see the whole thing:
Read more!
Here is the beginning of my post. And here is the rest of it.
Notes:
- As with any template modifications, you should be sure to save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you'll have it there as a replacement in case anything goes wrong.
- An alternative to creating post excerpts like this is to use the show/hide method on entire posts. Each method has its own advantages and disadvantages.
- Advantages to this method: Customizable summaries, rather than titles only. Can be applied to some posts and not others (for instance, you might only want this for your longer posts).
- Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)
A Popular Posts Gadget from Google Friend Connect
While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the Recommended (Popular) Posts Gadget.
This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer.
In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.
Want to see how it works? Take a look in the sidebar to see a list of posts recommended by Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, so feel free to recommend any other posts you may like!).
Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.
Firstly, log into Friend Connect. You will need to use the same credentials (username and password) as you do when logging in to Blogger.
Once you've logged in, you'll see a page which appears similar to this one:
Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.
Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.
Click the "Social Gadgets" link in this sub-menu:
On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:
Click through to create and style the Recommendation gadget for your blog.
If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.
You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.
There are two distinct types of voting buttons you could choose from:
For either style of button, you can choose between the heart or tick icons. When choosing the "modular" button, the colours of the text, border and background may also be altered:
This will generate two different sets of code - one for the recommendation list, and another for the voting button.
Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.
To add the voting button to our item pages, we need to edit our Blogger template code.
Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.
Then using your browser's search function, locate the line which contains
This section of code may be wrapped in <div> or <p> tags depending on the template you are using.
Immediately after this line, paste the following section of code:
And paste this between the
Here is how the completed installation should appear:
You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.
When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:
My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.
That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!
What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?
Please let us know your opinions by leaving your comments below.
This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer.
In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.
Want to see how it works? Take a look in the sidebar to see a list of posts recommended by Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, so feel free to recommend any other posts you may like!).
Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.
How to install your Friend Connect Popular Posts Gadget
Unfortunately, this Friend Connect gadget is not (yet) installable in one click. There are two elements required for complete installation, and these are relatively easy.Firstly, log into Friend Connect. You will need to use the same credentials (username and password) as you do when logging in to Blogger.
Once you've logged in, you'll see a page which appears similar to this one:
Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.
Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.
Click the "Social Gadgets" link in this sub-menu:
On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:
Click through to create and style the Recommendation gadget for your blog.
Style the Recommendation List
In the first area of this page, you can choose how your recommendation list will be styled when added to your Blogger layout.
If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.
You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.
Configure the Voting Buttons
The second area of this page enables you to configure the appearance of the voting button. This is what will appear on the post pages of your blog, and is what your readers will click to recommend posts they enjoy.There are two distinct types of voting buttons you could choose from:
| A "compact" button appears like this |  |
| A "modular" button appears like this: |  |
Generate and add the JavaScript for your Gadget
Once you've configured the appearance you prefer for the recommendation list and voting button, you can generate the codes required to add these to your template by clicking the button in the third section of the page:
Add the code for the Recommendation List
The easiest way to include the Recommendation List (the list of your most popular posts) in your blog is to paste the code into an HTML/JavaScript widget in your Blogger sidebar.Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.
Add the code for your voting button on post pages
Ideally, we should add the voting button to appear only on item pages. This ensures there is no conflict when posting multiple buttons on the same page (for example, the blog home page which displays more than one post); it also makes for simpler installation.To add the voting button to our item pages, we need to edit our Blogger template code.
Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.
Then using your browser's search function, locate the line which contains
<data:post.body/>This section of code may be wrapped in <div> or <p> tags depending on the template you are using.
Immediately after this line, paste the following section of code:
<b:if cond = 'data:blog.pageType == "item"'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>
<b:if cond...> and </b:if> tags which we previously added in the template code.Here is how the completed installation should appear:
<b:if cond = 'data:blog.pageType == "item"'> <!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1020104213976883876" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>
</b:if>Using your Recommendation Gadget
At first, your recommendation list will not display any posts. This is because no posts have yet been voted for using the voting button.You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.
When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:
What do you think?
I sincerely prefer the Friend Connect Recommendation Gadget to other "popular posts" widgets I have tried as the results are based on reder engagement and genuine recommendations which offer a greater sense of community than "page views" alone.My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.
That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!
What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?
Please let us know your opinions by leaving your comments below.
Partly cloudy, chance of labels
by Wiktor Gworek, Software Engineer, Blogger (Krakow, Poland)
In April, we announced that we wanted to hear from you about your wish list for features in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget.
Label Cloud
Previously, the label gadget showed a list of labels—and by far the most requested enhancement was to present the labels as a "cloud" instead of as a bulleted list. That's now supported in the gadget directly:
Once enabled, the more popular labels appear in a bigger font than the less popular labels:
Selected Labels
If you've been on Blogger for a while, you might have more labels than you know what to do with. Don't want to show all of your labels in the widget? No problem: go to the label gadget settings and choose "Selected labels." You will be able to select a subset of labels to be displayed in the widget:
We hope you like it!
In April, we announced that we wanted to hear from you about your wish list for features in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget.
Label Cloud
Previously, the label gadget showed a list of labels—and by far the most requested enhancement was to present the labels as a "cloud" instead of as a bulleted list. That's now supported in the gadget directly:
Once enabled, the more popular labels appear in a bigger font than the less popular labels:
Selected Labels
If you've been on Blogger for a while, you might have more labels than you know what to do with. Don't want to show all of your labels in the widget? No problem: go to the label gadget settings and choose "Selected labels." You will be able to select a subset of labels to be displayed in the widget:
We hope you like it!
You Might As Well Jump!
It's time to announce another Blogger Birthday feature! Many users have been asking for an easy way to implement "Read more" links on their blog's index page. In fact, for years bloggers have been implementing "Read more" jump breaks themselves by manually editing their HTML --- a process that was complicated and error prone.
Today we are excited to announce our latest birthday present: Jump Breaks.
With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a "Read more" link to the full post page where your readers can keep reading.
There are a couple of ways to insert a "Read more" jump to your posts. If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.
If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding <!-- more --> where you want to position the jump break.
Want to change the "Read more" text to something more your style? No problem. You can edit the "Read more" text by clicking Layout and then Edit the Blog Posts widget.
One more note, the Jump Break feature does not change how your post appears in your feed. You can configure post feed options by going to Settings | Basic | Site Feed, and editing Allow Blog Feeds.
Update: Users that have customized their Blog Posts widget or otherwise have highly customized templates: You may need to edit your HTML to enable Jump Breaks. First, back up your template, then follow the instructions at the bottom of this help article.
i
Today we are excited to announce our latest birthday present: Jump Breaks.
With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a "Read more" link to the full post page where your readers can keep reading.
There are a couple of ways to insert a "Read more" jump to your posts. If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.
If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding <!-- more --> where you want to position the jump break.
Want to change the "Read more" text to something more your style? No problem. You can edit the "Read more" text by clicking Layout and then Edit the Blog Posts widget.
One more note, the Jump Break feature does not change how your post appears in your feed. You can configure post feed options by going to Settings | Basic | Site Feed, and editing Allow Blog Feeds.
Update: Users that have customized their Blog Posts widget or otherwise have highly customized templates: You may need to edit your HTML to enable Jump Breaks. First, back up your template, then follow the instructions at the bottom of this help article.
i
Recent Posts Widget for Blogger with Thumbnails and much more..
Domo?
Recent Posts widget For Blogger [With thumbnails and lots more].
This is the first widget of it kind. Actually i made this for the new blogger gadget directory.
1) Like many other recent posts widgets this one also displays your recent posts with summaries comment numbers etc..but yea with a greater degree of customization
2) Image thumnails - Many of you might not have heard of MediaThumbnails. When you add some image to blogger,blogger automatically generates a thumbnail image of a small size 75 x 75. You wont see this small image anywhere but we are using this small sized images for post thumbnails.As i said this is somthing unique.All the recent post widgets till now(till the time i made this post lolz..) uses the original big images and scales them down using css.This means that your computer will have to fetch all of those big images.But with this widget we are fetching the media thumbnails.The media thumbnails as i said are of small resolution and hence very less size(somehere between 1kb-10kb)
The advantage of using media thumbnail is that out widget will load much much much faster than the other ones available till now.
3)You can display the recent posts of any blogger blog on your sidebar using this widget(display is not limited to your blogposts alone)
4)Highly customizable. (you can understand that when you actually install it.. :)
5)This is all that i have to say about the widget.. You can checkout more of its features by intsalling it onto your blog..Actually i now feel that it has too many options.. ;)
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width:
100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs
li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs
a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}.clearfix
{ margin: 0 5px 0 5px;
padding: 0 5px 0 10px;
background:#0066FF;
border:1px solid #404548;
overflow: hidden;
height:60px;
}
.clearfix a {
color:#fff;
}
.clearfix:hover {
background:#FF0099;
border:1px solid #404548;
}</style><script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script><script
style="text/javascript">var numposts = 5;var
showpostthumbnails = true;var displaymore = true;var displayseparator = true;var
showcommentnum = true;var showpostdate = true;var showpostsummary = true;var
numchars = 100;</script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script><span
style="float:right;font-size: 80%">Powered by <a href="http://yuljet.blogspot.com/2009/07/recent-posts-widget-for-blogger-with.html"
target="_blank">Blogger Widgets </a></span>
<noscript><br/><a href="http://yuljet.blogspot.com/2009/07/recent-posts-widget-for-blogger-with.html"
target="_blank">Recent Posts Widget</a>
</noscript> Complete HTML True Color Chart
This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palletes with either HTML or CSS.
Subscribe to:
Posts (Atom)
