Auto readmore with thumbnail for Blogger not use javascript

Auto readmore with thumbnail for Blogger not use javascript

Using automatic read more not use javascript on your blog will make your blog load faster by showing few post instead of the full post on the homepage. Automatic read more for blogger posts can be done by inputting some code into your blog templates. 

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML



Tick the "Expand Widget Templates" checkbox:
Find (CTRL + F) this tag: 

]]></b:skin>

...and paste the below code just ABOVE it:
.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center} .dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px} .dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

Step 2. Search (CTRL + F) for the following fragment:
 

<data:post.body/>

Replace it with the following code:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='dp-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Note: Image to be stored in the Picasa, video word Youtube. Automatic displayed messages of posts with no image and video.

That's it :) Enjoy!  
Don't Forget To Say Thank's

Comments