Read More with Thumbnail Blogger with Option (New Version)

Auto Read More with Thumbnail Blogger with Option (New Version).

How to Add Read More with Thumbnail Blogger with Options. The Options area:

1. You can show default thumbnail when your post does not contain any image.
2. You can disable auto read more function for few posts on home page.
3. You can disable auto read more function on home page, archive page and other index pageType.

Using Read More Option with Thumbnail on Blogger version 2

1/ First go to Blogger Dashboard then switch to Template tab
2/ Must take backup of your template
3/ Now click on Edit HTML and then on Proceed button
4/ Now check on Expand Widget Template
5/ Now search for </head> inside Blogger template
6/ Now copy and paste code given below just above </head>

<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 120,
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3-qaNgmOKO89Ek2XjId-G6TUCz2dKbJiFH8wS3HdQkcllLqS_4dr2dIzfpoUxj6KJzafB1MNfDazg70BQTQ-QGFFa7lLpha3sDagmUkv2BP-WVW_SoFwV43iCu-xR3Dr_vWr9Y5rnoE/s1600/thumb.png',
words: 100,
wordsNoImg: 120,
skip: 0,
showHome: true,
showLabel: true
};
</script>
<script src='http://yourjavascript.com/55335021413/techprevue-readmore.js'/>

Alternative JS Link:

<script src='https://sites.google.com/site/techprevue/home/techprevue-autoreadmore.js'/>

7/ And after finishing above steps now search for following code

<div class='post-body entry-content'
Just below this you’ll get following code <data:post.body/>

8/ Change <data:post.body/> code with the following code:

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
<span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
<span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span>
</b:if>
</b:if>

Preview your template if everything is appearing well then... 

Save template!

Auto read more script control features:

• showImage: true, if do not want to show thumbnail then do it ‘false’
• imgFloat: ‘left’, if you want to show thumbnail right to summary then do it ‘right’
• imgWidth: 120, This is thumbnail width in pixel
• imgHeight: 120, This is thumbnail height in pixel
• defaultThumb: ‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3-qaNgmOKO89Ek2XjId-G6TUCz2dKbJiFH8wS3HdQkcllLqS_4dr2dIzfpoUxj6KJzafB1MNfDazg70BQTQ-QGFFa7lLpha3sDagmUkv2BP-WVW_SoFwV43iCu-xR3Dr_vWr9Y5rnoE/s1600/thumb.png’, if you want to use custom thumbnail as per your blog design just change this url
• words: 100, this is number of words for summary on index pageType in presence of thumbnail
• wordsNoImg: 120, this is number of words for summary on index pageType in absence of thumbnail
• skip: 0, if you want read more function on all posts then leave it as it is, if want to skip first do it ‘1’ or for two posts do it ‘2’ and so on…
• showHome: true, if you do not want read more function on home page, do it ‘false’
• showLabel: true, if you do not want read more function on label page, do it ‘false’

Source:

http://www.techprevue.com/read-more-option-with-thumbnail-blogger/

Magazine Style: One & Two Column
http://helplogger.blogspot.co.id/2014/01/create-magazine-style-layout-for-blogger-posts.html

Judul & Ringkasan di Samping Gambar
http://cbbloggerlab.blogspot.co.id/2015/11/cara-membuat-auto-read-more-blog-judul.html
http://www.thuthuatict.com/2014/02/auto-readmore-thu-thuat-hien-bai-viet-o.html

Tweet

Share