How to add READ MORE button in Blogger or Blogspot | After Every Post | Blog2Life16 Helpers

How to show Blogger Homepage with READ MORE button and a Thumbnail.

To be more topic specific, This post will tell you about " HOW TO ADD READ MORE LINK in BLOGGER or BLOGSPOT Homepage ".

Image from Flickr

The READ MORE LINK will be seen only in the Homepage of Your Blog and if the visitor clicks on the Read More button the the visitor will be redirected to actual post.

How to Add Read More link in Blogger or Blogspot :
Follow the Steps below :

[1] Go to Blogger Dashboard -----> Template ------> Edit HTML.

[2] After clicking on Edit HTML, Press Ctrl + F to find.
Find the text given Below in the Textbox.


<data:post.body/>
[3] Find this Text in the HTML editor of the Template.

[4] Press enter, you will find this more than one time. Stop at the third one.

[5] Replace, that above code with this One below :


<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
[6] If, You can't find any changes After adding this Code,
Try to replace the second  <data:post.body/>  with this code above. 

[7] Now, search for </head> tag in HTML Template Editor.Now add the code given below, just above the </head> tag.



<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; } </style> </b:if> </b:if>
[8] Now, click on Save Template to Save the Template and It works.

Post by Blog2Life16 Author © 2016

How to add TEXTBOX to show codes like HTML, Javascript, C,etc. Between Posts in Blogger or Wordpress | Code between Posts | Blog2Life16 Developers

Add Textbox Between posts :

Hi,
In this Post, I am going to tell you about "How to add TextBox between posts in Blogger or Wordpress".
----
Many times, You need to show the HTML, Javascript or any other code between your Posts to Show the users.
But, You don't wish to add the code between your post area but you wish to show the posts in a Textbox or Highlighted box.
Textbox or Textarea will allow the visitors in your Site to select the code properly and efficiently and do their programming or any other things with the help of your website. You will give good Selection Area to the users.

Advantages of adding textbox between your Posts :

• Allow user to select text efficiently

• Help users to see the codes Properly

• Attractive method to show codes between posts

---
How to Show the Textbox or TextArea between posts in Blogger or Wordpress :

While writing the posts in blogger or Wordpress, you will see the Edit HTML option.
or HTML Editor option in the Visual Editor of the Post.

Click on that option of editing post in HTML.

Now go to that Portion where you wish to show the Textbox and Paste the Codes shown Below :

Different Codes for Different Types of Textbox are shown Below :

To show the textbox where visitors can input text :

Add this Code :

<textarea rows="5" cols="40">TEXT</textarea>

<textarea rows="5" cols="40"> You can see that you can edit this code</text area>

Users will see like this if you add TEXT instead :

TEXT

Text box with Read-only Functionality :

With this textbox, You cannot allow users to change the content in the textbox. The textbox will be read only.

Add this Code :

<textarea rows="6" cols="50" name="Famous Quotes" readonly="readonly">More you Write, More the views You Get, By Rushikesh Thawale</textarea>

What users will see :

More you Write, More the views You Get, By Rushikesh Thawale

Textbox with Word-Wrap Functionality :

Text-Box with Word Wrap functionality allows the users to change the size of the text box and Resize it according to their needs. Actually, It helps in Word Wrapping inside the text box.

Add this Code :

<textarea rows="8" cols="30" wrap="hard">TEXT</textarea>

What users will see : TEXT


--------------
Thus, You've learnt " How to Add Textbox between Posts in Blogger or Wordpress ".

See this Image for adding it in HTML editor of posts in your Blog :

Post by Blog2Life16 Developer © 2016
Follow us on Google+ and Facebook.