Post Summary dan Thumbnail di Blogger

Some time ago, Blogger launched a widget popular posts. Associated with the widget, Fazany Amanda from Blogger Buster tries to integrate the script widget popular posts on Content in lieu Auto Read More. You can read this idea in BloggerBuster. In my opinion, the application of popular scripts on the content somewhat interesting post especially because of its ability to display thumbnails without distortion and without Crop techniques. Only, there are shortcomings. I will discuss it here:

1. Number of characters

Blogger 140-character limit for the summary, and to my knowledge the number of characters can not be added. You can reduce by doing a little malipulasi using the property display: none, of course prior to the height and width declared in the post-body element.

2. Thumbnail dimensions

By default, thumbnails are displayed maximal size of 72px x 72px and square. Although able to be enlarged, but will cause the image look blurry. I use a 5px border that surrounds the thumbnail size to make it look larger by visually evek although basically the same.

3. display

In my opinion, this script is not suitable for template / blog post that has elements of a wide-body or applying fluid-width system because the number of characters is fairly minimal. As a result, if the element content is too wide, summary likelihood only be on one line only and looks out of proportion with the thumbnails.

4. Pages

Just as auto read more, this script clashed with the "page". I tried to manipulate, although a little forced, but it worked ^ ^

Put the following CSS above #main-wrapper:

.thumb img { float: left; border:1px solid #ddd; background:#e5e5e5; height:auto; padding:5px; margin: 3px 10px 10px 0; }

After that put the following CSS above </ head>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <style type='text/css'> .auto-thumbnail {display:none} </style> </b:if>

Save first, then click "Expand Widget Templates", and replace

<data:post.body /> with the following script: <div class='auto-thumbnail'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <a expr:href='data:post.url'><img  expr:src='data:post.thumbnailUrl'/></a> </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 + &quot;#more&quot;'  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> </div> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if>