How to Add Automatic Read More Features On Sites and Blogs

Advertiser

Advertiser

How to Add Automatic Read More Features On Sites and Blogs

On the main page of professional blogs, Blogger friends will often see the postings contained diblog is neatly arranged and interesting coupled with the introduction of post-neatly arranged that we often hear with the term read more feature or read more. Instead of the entire article of each postigan, we show the main page that is not necessarily the article is an article of choice of interest or want to read by blog visitors. Better to paste the feature read more on the main page. With the feature read more on the page of a blog can make blog posts look more efficient and will greatly help blog visitors in choosing articles to read. Because the visitor block simply click read more / read more if you want to read the full content of the entire article selected.

Immediately we learn "How to Add Automatic Read More Features On Sites and Blogs", follow the steps below :

1. Log in to your Blogger Dashboard respectively
2. Open Blogger Template Settings, click Edit HTML
3. Do not forget to Backup all HTML Template code first just in case, if necessary to avoid errors during the experiment
4. Left click 1x anywhere in the template box, use Ctrl + F function (to show search box to facilitate the searching of HTML code) and find the following code </head>, enter the code in search box, then press Enter to search code
5.  Enter the following html code above the code </head>
<!--ReadMore http://WebBudi.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //number of letters if there is no picture
summary_img = 250; //number of letters if there is a picture
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->
6. Continue by searching the following code <data: post.body/>, in the default template blog the HTML code is usually there are 2, Search the web version, usually the second (2nd) with enter 2x in the search box
7. Delete code <data:post.body/> the 2nd and Replace with the code below :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Read More &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
8. Finally select Save Template and please see the result

For information only, that the actual javascript code above you can set as needed,
- summary_noimg = number of letters if there is no picture
- summary_img = number of letters if there is a picture
- img_thumb_height = image height
- img_thumb_width = the size of the image
- said the link Read More >> also can change friends as needed can be changed to See More >> and so forth
As an additional tip if the blogs that your friends manage have a lot of articles and on the main page you want friends to show lots of pieces of various titles of articles, friends also have to use or add features Read More manual on each article post there on the blog. That is by inserting the feature "Insert Jump Break" on each article that has been posted or for new articles that will be posted.

Why should we add the "Insert Jump Break" feature to the automated read more feature already running?

Because the automatic read more feature combines two cutting function articles that are cuts for articles that have images and articles whose entire content contains only text. So often on blogs that already have a lot of articles with the main page that has been set showing the number of posts that many. Or with the number of posts that exceed the size required for the main page even resulted in the number of posts that have been set to appear on the main page of the blog does not match the amount that has been set.

For example friends have set the number of posts that will appear on the main page of the blog is 20 post but when opened there are only 10 posts that appear on the main page. This is because 10 posts that appear have been counted as the maximum size that can be displayed on the main page of the blog. Therefore we can use the "Insert Jump Break" feature to determine the last paragraph limit that will be counted read more automatic feature so that the read size of each article will be lighter and the number of post articles that have been set can appear according to the number on the main page of the blog.

Here's how to add an "Insert Jump Break" feature to an article we've previously posted. How to go to blogger using friends account as usual >> Open the Post menu on the blog you want to edit >> Select the Edit menu on post articles that have been published previously >> Place the mouse cursor at the end of paragraphs 1 or 2 on the post which you want to cut >> Then select the Insert jump break menu that is shaped like a dropout icon icon to the left of the Alignment icon >> If successful then at the end of the 1st paragraph or the 2nd paragraph that is cut will appear a white dividing line (insert jump break) >> When finished select the Update option on the edited post article. Perform the same jump insert steps on all published postings.

Similarly information articles about Tips Blogging from me with the title "How to Add Automatic Read More Features On Sites and Blogs", semog could be interesting information for all bloggers friends and can be useful. Blogger Spirit :)

Advertiser