Doc & Dev: Health, Tech, Life

By Dr. AA Noval Ubaedillah - Insights on Medicine, Health Tech, and Personal Growth

Explore Posts

Latest Posts


1. The addition of 'Conditional CSS'

    
Conditional CSS to change how posts appear on different pages.
    
The trick, click Layout ---> Edit HTML.
    
Then backup the template by clicking Download Full Template.
    
Then look for and find this code </ head>
    
Add the following code right above it:

    
<style>
    
<b:if cond='data:blog.pageType == "item"'>
    
span.fullpost {display: inline;}
    
<b:else/>
    
span.fullpost {display: none;}
    
</ B: if>
    
</ Style>

    
The point is to make a class named fullpost which will appear only on the detail page (permalink).

2. Addition Read more

    
Step two, add a link "Read More" (or whatever suits your taste) that will appear after the introductory paragraph.
    
For that click on the Expand Widgets Template checkbox just above the Edit Template box.
    
Then scroll until you find the code:
    
<data:post.body/>
    
Add the following code after it:

    
<b:if cond='data:blog.pageType != "item"'>
    
<a expr:href='data:post.url' target='_blank'> Read more! </ a>
    
</ B: if>

    
If so, click Save Template. Read more of this link will only appear on the front page (home) and archives (Archive). When clicked, will open a new page containing a full article.

3. The addition of the Post Template

    
The final step is to add in template format posts, so any new posts to make it easy for you, where to place the introductory paragraph and where the rest of the paper.
    
Click the Settings ---> Formatting, and then slide to the bottom of the page.
    
Copy and Paste the following code to the Post Template box:

    
INTRODUCTION
    
<span class="fullpost">
    
REST OF NEXT PARAGRAPH
    
</ Span>

    
Click on Save Settings.


When you make a post (Create Post) and then clicking the Edit HTML tab, you'll see something like this (Click image to enlarge):


Replace the words "Introduction" to the introductory paragraph of your own. Then replace the words "REST OF THE NEXT PARAGRAPH" with the rest of the next paragraph of your writing.Do not remove the code <span class="fullpost"> and </ span>.The point is enter your introductory paragraph above both the code and the next paragraph in between the two codes.Then click Publish. See the results by clicking View Blog