How To Create an Article Feature Read Also in Blog Posts


TechProvit - When we visit a blog or website sometimes there is a "Read also" in an article. Which feature contains articles or other posts. This feature is very useful for blog visitors, if the articles displayed attract visitors or are needed by visitors.

Usually the Read also feature in posts (related posts or articles in posts) is provided by the blog template and can be activated automatically. It's just that most of these features are displayed in one place in a post, which can contain more than one article. Related articles that are displayed are also selected automatically and alternately randomly.

In this article, we will explain how to manually create a reading feature in blogger posts. Want to know what and how? Let's, see in the following full review.


How to Create a Read Also Feature in Blogger Posts Manually


Here are the steps on how to manually create the Read also feature in blogger posts.

Style #1

  • Go to blogger Dashboard
  • Select the post menu
  • Edit the post to be added. Read also
  • Change to HTML view
  • Add or place the code below where you want it (at the end of the sentence), namely after the </div> code or before the <div> code.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-bottom: 1px solid rgb(120, 120, 120); border-color: rgb(120, 120, 120) rgb(120, 120, 120) rgb(120, 120, 120) rgb(34, 136, 221); border-left: 0px solid rgb(34, 136, 221); border-radius: 10px; border-right: 0px solid rgb(120, 120, 120); border-style: solid; border-top: 1px solid rgb(120, 120, 120); border-width: 1px 0px; padding: 10px; radius: 10x; t-align: left;"><span style="font-family: Oswald;"><span><b>Read also:</b></span></span></div>
  • Change back to view compose 
  • After that, write the title of the post (article) using the Oswald font and attach the hyperlink.

  • Save the change.

The result:

 

Style #2

The way is same with the style #1, copy and put the code below where you want it.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;"> Read also: Script Blog Title</div>

 The Result:

 

Posting Komentar

0 Komentar