In the default, Blogger has provided the simplest method in creating a page break or read more function in Blogger post editor. As you see on the top navigation bar of Blogger post editor, a new button with a “ripped paper” icon has been added to make a page break or read more articles, which later will manually cut the full body content of your new post and serve only the first paragraph on your blog homepage.
But if you look at some blogs across the blogosphere, the page break on those blogs are already set up as an auto page break, where you won’t need anymore to press the page break icon in post editor to make a read more function. So then, I decide to test drive this cool auto page break feature on my testing blog. And out of the blue, I managed to make it worked in the second attempts on that testing blog. Interested to know the trick, here you go.
Oh.. wait.. before proceeding to the steps below, I just want to tell you that, I am currently using Minima template on my testing blog. Okay, here you go.
1. Enter you Blogger account
Now head on to Blogger.com and sign in to your account.
2. Go to Edit HTML
In the Dashboard, pick out your blog and go to Design/Layout > Edit HTML.
3. Expand the widget template
When landing to the Edit HTML page, you will see a small box with the sentence “Expand Widget Templates”. Now press it.
4. Make a back up template
Okay, before making any attempt to edit your blog template, I strongly insist you to make a back up template, just in case if later, you want to revert back the template to the first condition.
5. Look around for the code
Okay, now let’s play around with the code template. By pressing Ctrl + F, now find the code below:
6. Stack a new script code
After locating the code on number 5 above, now copy the script code below and paste it above the code :
7. Find the code section
Now press again Ctrl + F at the same time and search the code section below:
8. Inject a new CSS style
Now copy the CSS style below and paste it before the code section ]]>
9. Find the blog post code section
Press Ctrl + F again and search for the code section that controls the occurrence of blog post on the homepage below:
10. Replace the code section
Okay, this is the trickiest part from the whole steps. After locating the whole code sections on number 11 above, now block those code sections and then replace it by using the new code sections below:
11. Save the template
Okay, you’re done. Now save all the changes of your blog template and see the result.
As you can see on your blog, without the page break function from Blogger, all of your latest posts on the homepage will automatically appear in half, and only the first paragraph will be displayed to your blog.
What do you think? Is it working or not? Got any problem implementing this article, feel free to leave your question below, and let me help you with that.
But if you look at some blogs across the blogosphere, the page break on those blogs are already set up as an auto page break, where you won’t need anymore to press the page break icon in post editor to make a read more function. So then, I decide to test drive this cool auto page break feature on my testing blog. And out of the blue, I managed to make it worked in the second attempts on that testing blog. Interested to know the trick, here you go.
Oh.. wait.. before proceeding to the steps below, I just want to tell you that, I am currently using Minima template on my testing blog. Okay, here you go.
1. Enter you Blogger account
Now head on to Blogger.com and sign in to your account.
2. Go to Edit HTML
In the Dashboard, pick out your blog and go to Design/Layout > Edit HTML.
3. Expand the widget template
When landing to the Edit HTML page, you will see a small box with the sentence “Expand Widget Templates”. Now press it.
4. Make a back up template
Okay, before making any attempt to edit your blog template, I strongly insist you to make a back up template, just in case if later, you want to revert back the template to the first condition.
5. Look around for the code
Okay, now let’s play around with the code template. By pressing Ctrl + F, now find the code below:
6. Stack a new script code
After locating the code on number 5 above, now copy the script code below and paste it above the code :
7. Find the code section
Now press again Ctrl + F at the same time and search the code section below:
]]>
8. Inject a new CSS style
Now copy the CSS style below and paste it before the code section ]]>
/* Read More Function
------------------------------------ */
.readmore-column {
margin:5px;
padding:5px;
}
.readmore{
font-size:13px;
font-family:arial;
padding:0px 5px;
color:#75481F;
text-transform: capitalize;
float:right;
right:10px;
display:inline;
margin:5px 40px 0px 0px;
}
.readmore a:link, .readmore a:visited {right:10px;
color:#C8AF92;background:#48321E url() left no-repeat;padding:7px;text-decoration:none;
}
.readmore a:hover{right:10px;
color:#FFF;text-decoration:underline;background:#6E5130 url() left no-repeat;
}
.singleinfo {
height:22px;
margin:0px 0px;
padding: 5px 0px 5px 0px;
background:url() bottom left;
font:12px Georgia, Arial,century gothic,verdana, sans-serif;
}
.singleinfo2 {
height:22px;
margin:0px 0px;
padding: 5px 0px 5px 0px;
background:url() bottom no-repeat;
font:12px Georgia, Arial,century gothic,verdana, sans-serif;
}
.postmore{
padding:0px 5px 2px 25px;
float:left;
font-weight:bold;
}
.postmore a:link,
.postmore a:visited {
color:#fff;
background: #0D0B08 url() bottom no-repeat;
}
.postmore a:hover{
color:#fff;
}
------------------------------------ */
.readmore-column {
margin:5px;
padding:5px;
}
.readmore{
font-size:13px;
font-family:arial;
padding:0px 5px;
color:#75481F;
text-transform: capitalize;
float:right;
right:10px;
display:inline;
margin:5px 40px 0px 0px;
}
.readmore a:link, .readmore a:visited {right:10px;
color:#C8AF92;background:#48321E url() left no-repeat;padding:7px;text-decoration:none;
}
.readmore a:hover{right:10px;
color:#FFF;text-decoration:underline;background:#6E5130 url() left no-repeat;
}
.singleinfo {
height:22px;
margin:0px 0px;
padding: 5px 0px 5px 0px;
background:url() bottom left;
font:12px Georgia, Arial,century gothic,verdana, sans-serif;
}
.singleinfo2 {
height:22px;
margin:0px 0px;
padding: 5px 0px 5px 0px;
background:url() bottom no-repeat;
font:12px Georgia, Arial,century gothic,verdana, sans-serif;
}
.postmore{
padding:0px 5px 2px 25px;
float:left;
font-weight:bold;
}
.postmore a:link,
.postmore a:visited {
color:#fff;
background: #0D0B08 url() bottom no-repeat;
}
.postmore a:hover{
color:#fff;
}
9. Find the blog post code section
Press Ctrl + F again and search for the code section that controls the occurrence of blog post on the homepage below:
10. Replace the code section
Okay, this is the trickiest part from the whole steps. After locating the whole code sections on number 11 above, now block those code sections and then replace it by using the new code sections below:
11. Save the template
Okay, you’re done. Now save all the changes of your blog template and see the result.
As you can see on your blog, without the page break function from Blogger, all of your latest posts on the homepage will automatically appear in half, and only the first paragraph will be displayed to your blog.
What do you think? Is it working or not? Got any problem implementing this article, feel free to leave your question below, and let me help you with that.
0 comments:
Post a Comment