Ahad, 7 Oktober 2012

Auto readmore in blogger without javascript NEW

Maybe now you're know what is auto readmore, in internet has many tutorial about this, but in many tutorial are using javascript, but now i'll share the tutorial for automatic readmore without javascript. This trick is very-very simple and easy way, but you must understand it.... Ok now for tutorial....

1. Method (Snippet)

With this trick is very simple, you just need to add the code of snippet to change the post body in homepage. I found the code from XHTML of Popular post widget. Now to the point:
  1. Open and login to blogger.com
  2. Then select your blog and go to Template tab in left panel
  3. Then back-up your template for safety
  4. Click edit HTML, then proceed, then check the expand widget html
  5. Then (CTRL+F) search for this code:  <data:post.body/>
  6. If you've found it, replace that code with:

    <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/>
    <b:if cond='data:post.thumbnailUrl'>
    <div style='clear:both;'/>
                  <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                    <img expr:src='data:post.thumbnailUrl'/>
                  </span>
    <b:else/>
                  <span style='float: left; border: 1px solid #eeee; width: auto; height: auto; margin: 5px;'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQgdMObZlcf4sAlFi_RtJ3bDYbqKNUHD2790kSZHKzKIWhlp4Pk5fTEEAwuccM0AiePVlWNOctyuHPiZ2v29FCHgUnnakGF1_XtOCACnrHqzmmLXaqAo2c90BH0sgXV5CY-ScG3qysMZc/s72-c/nophoto.png'/>
                  </span>
    </b:if><div style=''><data:post.snippet/></div>
    <div style='clear:both;'/>
    </b:if>
    </b:if>
  7. Then save template
  8. Check your blog
The advantage of this method
With this method is easy and simple, because is only used the little bit of code.

The disadvantage of this method
You can't setting how long or how many letter/word in the post body. With this code maybe the maximal letter is 143.

2.Method (Playing CSS) [Advanced]

With this method, is not very easy, because you need to understand your blog's html, if you're newbie in blogger, maybe you can't understand this code.

Currently unavailable


Tiada ulasan:

Catat Ulasan