Blogger Auto Readmore advanced and customized guidance

Blogger Auto Readmore advanced and customized guidance : Auto readmore the subject was too familiar with Blogger. Although Google has supported this feature for Blogger, but it has not really correspond to the user for 1 maybe: it is only the contents but not cut to customize the interface. Thus we often ask for help to the auto readmore script.

Script auto readmore AnhVo capital in VietWebGuide.com originally developed, then I have one little improvement (unfortunately now AnhVo blog was no longer active). In this article, I would like to present to you one of the few customized enhanced auto readmore script that I applied for the Perplexed Blog, while trying to guide so that you can customize the script for the purpose of their own.

Blogger Auto Readmore advanced and customized guidance

Script remains the core idea, just add the option for a more diverse show.

In this script, I added 3 points enhance the following:

Add thumbnail default when entries without pictures
Option 1 does not auto readmore for first Posts
Optional auto readmore label for homepage and pages

Fast Food - Code used always


For you do not want to roll into the kitchen, below is the code can be applied always for your blog:

<Script type = "text / javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'http://rilwis.googlecode.com/svn/trunk/hontap/images/no-thumb.jpg'
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</ Script>
<Script type = "text / javascript" src = "http://rilwis.googlecode.com/svn/trunk/blogger/summary.min.js"> </ script>

Insert the above code before the </ head> is. The parameters have the following meanings:

showImage: you may want to display thumbnail not? If there is to be true, if not to be false.

imgFloat: 3 values: 'left' - to float on the left thumbnail, 'right' - to float on the right thumbnail and 'no' - to thumbnail no float regime. Note the quotes around the values ​​wrap offline.

imgWidth and imgHeight: specify the size of the thumbnail.

defaultThumb: default thumbnail image in case the article is no picture.

and wordsNoImg words: the word displayed in the event and no image thumbnail.

skip: skip one number (the value of the skip) cards, do not perform auto readmore with them. If the declared number is 0 then deemed not skip any post (will auto readmore with all).

showHome and showLabel: allows auto readmore homepage and label pages. True value is allowed, false is not allowed.

Then you find in your template paragraph:

<Data: post.body />
changed to:
<Span expr: id = 'data: post.id'> <data: post.body /> </ span>
<B: if cond = 'data: blog.pageType == "index"'>
    <Script type = 'text / javascript'> summary ("<data: post.id /> ') </ script>
<B: else />
    <B: if cond = 'data: blog.pageType == "archive" ">
        <Script type = 'text / javascript'> summary ("<data: post.id /> ') </ script>
    </ B: if>
</ B: if>

After installation, you try to change the value of experimental options to suit on his blog.

Code on've overcome conflicts with Page in Blogger page style that I have mentioned here.

In the kitchen cooking


Fast Food above for those who want to apply immediately. If you've read this far, it means you want to learn how engineers can customize so, and how to customize more? I will try to present the content and operation of the code, and will give one a few suggestions for you to customize further.

First need to view the complete code of the script, it is located at this address. We will discuss expansion options in the script (skip, showHome, showLabel), while the old option of a thumbnail and a truncated content, you refer back to this old article.

Properties skip


To recognize all being auto readmore is all these things, the script can use one variable count to count:

summary.count = summary.count || 0;
summary.count ++;

Here variable count is declared as one attribute of summary function. If some information about JavaScript, you already know one function is one object, it can have its own attributes. Doing so will restrict the global variable and not guaranteed Conflict with other scripts. (Ham summary.strip to cut characters is also made under this rule)

After counting the order of the current article, if still liable "without auto readmore" is ignored in the following command:

if (summary.count <= summaryConf.skip) return;

The approval conditions are very simple, just a comparison!

Expand: you can change the above conditions comparable to customize the display, ie ignore the order entries have even (odd), or every 3 new posts, the auto readmore 1 post, ... ( hint: consider the conditions of variable divisible count)

Displayed on pages and pages Label Homepage

To check current page to see if the homepage or page label, the script can not use two commands:

var isHome = location.href.indexOf ('/ search / label /') == -1 && location.href.indexOf ("/ search?") == -1,
 isLabel = location.href.indexOf ('/ search / label /')! = -1;

The test is based on the URL of the current page only. After the test is complete, just compare the declared option to decide ignored or continue to perform auto readmore:

if (isHome &&! summaryConf.showHome) return;
if (isLabel &&! summaryConf.showLabel) return;

Expansion: Please study the structure of the pages in Blogger URL to auto readmore try to search, archive page.

If you want to expand


If observant, you may find the script auto readmore ever just done for the content of the article. As for the part as the title, meta (post date, author), ... shall not be included. This caused great limitations 1 to customize the display. Speaking as simple as if you want the label page article title only does it do? If you'd like the website layout, as both titles, meta drifted to the right, and drift to the left thumbnail, then how? ... There are many ways to customize, depending on each person's taste, but auto readmore current script has yet to do all that stuff. Want to expand the capabilities of auto readmore script (to perform work on), we must first expand its ability to execute, not just to content encapsulated in another article. Doing this is not hard, just change the implementation of auto readmore position.

Example: Your initial template of the form (this is just an example taken from the template of the Perplexed Blog to simulate the structure of the first article, your template might be different, but be mindful of the general structure)

<Div class = 'post'>
    <H2 class = "post-title">
        <a expr:href='data:post.url' expr:title='data:post.title'> <data: post.title /> </a>
    </ H2>
    <Div class = 'post-meta ">
        <Data: post.timestamp /> |
        <B: if cond = 'data: post.labels'>
            <B: loop values ​​= 'data: post.labels' var = 'label'>
                <a expr:href='data:label.url + "?max-results=5"'> <data: label.name/> </a>
                <B: if cond = 'data: label.isLast! = "True"'>, </ b: if>
            </ B: loop>
        </ B: if>
    </ Div>
    <Div class = 'post-body ">
        <Data: post.body />
        <Div class = "body" />
    </ Div>
</ Div>

Instead of just zoning area <data: post.body /> the same, we need to expand the data for all of the blog. To do so, edit the first line of code above to:

<Div class = 'post' expr: id = 'data: post.id'>

This is to assign id the entire article to script can retrieve it later. After the assignment is finished, the bottom of the insert code executable script:

<B: if cond = 'data: blog.pageType == "index"'>
    <Script type = 'text / javascript'> summary ("<data: post.id /> ') </ script>
<B: else />
    <B: if cond = 'data: blog.pageType == "archive" ">
        <Script type = 'text / javascript'> summary ("<data: post.id /> ') </ script>
    </ B: if>
</ B: if>

So finished the basic installation, next to it, to get the value of the title, meta tags, and you make the getElementByTagName javascript function, eg:

summary function (id) {
var p = document.getElementById (id), // retrieve the entire contents of the article
    title = p.getElementByTagName ('h2'), // get the post title, saved to one array
    img = p.getElementByTagName ('img'); // Get the image in the post, save in one array

title = title [0] .innerHTML; // Get the first element, which is the title we need
img = img [0] .src; // Get the first image src
}

Then, to customize the values ​​obtained and added to the CSS properties to fit the tastes (eg with images, you can assign the size, float as I had done with the title may assign size, color, float, ...). Finally is assigned back into articles via p.innerHTML.

Note 1: For the value of the raw javascript HTML tags through a little difficult. Use 1 certain javascript library to do this fast. Perplexed With this blog, I have used jQuery.

Note 2: The suggestions in this last section is for guidance. Because each blog layout and each different taste should not be present all the customizing. Just hope you grasp the idea of ​​self-improvement to your own blog.

The fried fried go back auto readmore tips can be unpleasant if we do not find the new location. With this article, hope you can give your homemade dishes new auto readmore not repeat, not boring. And when there are new dishes do not forget to invite me to use it out!

Tweet