{"id":223,"date":"2012-08-29T17:04:37","date_gmt":"2012-08-29T17:04:37","guid":{"rendered":"http:\/\/www.websitespot.com\/blog\/?p=223"},"modified":"2012-08-29T17:04:37","modified_gmt":"2012-08-29T17:04:37","slug":"how-to-insert-read-more-html-code-into-your-blog","status":"publish","type":"post","link":"https:\/\/www.websitespot.com\/blog\/how-to-insert-read-more-html-code-into-your-blog\/","title":{"rendered":"How To Insert Read More HTML Code Into Your Blog"},"content":{"rendered":"<p>One sign of an amateur blogger is the appearance of their homepage. If the page shows every word of their posts, you know they\u2019re new.<\/p>\n<p>Sometimes posts are 1,000 words are more. New arrivals to your website do not want to scroll through <em>paragraph after paragraph<\/em> just to see what you\u2019ve written. Scrolling past behemoth posts is not the way to share your content in those fleeting first moments that readers give you.<\/p>\n<p>Instead, there is an incredibly simple HTML code you can use to simplify your website and share more of your content. Plus, experts say that you can even double or triple your page views by using this tip!<\/p>\n<p>This tip should work on a variety of blogging platforms, but I know for a fact that it <em>works like magic<\/em> on WordPress\u00a0<em>and\u00a0<\/em>Blogger.<\/p>\n<p><em><strong>Read and follow the instructions below to insert the <span style=\"text-decoration: underline;\">Read More<\/span>\u00a0HTML code on WordPress and Blogger.<\/strong><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\">Manual Version:<\/span><\/p>\n<p>To add this division manually, follow the instructions below. These instructions work for a variety of web platforms.<\/p>\n<p><strong>1. Go to the HTML formatting option for your post on your blogging platform.<\/strong><\/p>\n<div>\n<div id=\"attachment_224\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/htmlcode.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-224\" class=\"wp-image-224 size-medium\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/htmlcode-300x129.jpg\" alt=\"HTML formatting option\" width=\"300\" height=\"129\" srcset=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/htmlcode-300x129.jpg 300w, https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/htmlcode.jpg 371w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-224\" class=\"wp-caption-text\">Click \"HTML\" instead of \"Visual.\"<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><strong>\u00a02. Insert the code &lt;!--more--&gt; into the relevant part of your post. Be sure to add spaces to make sure the coding comes out clearly.<\/strong><\/p>\n<div id=\"attachment_225\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/insertmorecode.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-225\" class=\"wp-image-225 size-medium\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/insertmorecode-300x69.jpg\" alt=\"insert more code\" width=\"300\" height=\"69\" srcset=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/insertmorecode-300x69.jpg 300w, https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/insertmorecode.jpg 578w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-225\" class=\"wp-caption-text\">Add the code right here. Add paragraph spaces before and after.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><strong>3. Hit \"Save Draft,\" then go to \"Visual.\" You'll see a new segment of formatting that features a horizontal line, and small gray, \"More...\" button as featured below.<\/strong><\/p>\n<\/div>\n<div><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/visuallayoutmorecode.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-226 size-medium\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/visuallayoutmorecode-300x96.jpg\" alt=\"visual layout more code\" width=\"300\" height=\"96\" \/><\/a><\/div>\n<div><\/div>\n<div><\/div>\n<div><strong>4. Next, \"Save Draft,\" then either \"Publish\" or \"Preview.\" You will see something like this (depending on your theme).<\/strong><\/div>\n<div><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/readmoreexample.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-227 size-medium\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/readmoreexample-300x57.jpg\" alt=\"read more example\" width=\"300\" height=\"57\" srcset=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/readmoreexample-300x57.jpg 300w, https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/readmoreexample.jpg 712w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<p><strong>5. Now, you will see a link that says, \u201cRead more,\u201d or \u201cContinue reading,\u201d depending on your theme.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Automatic Version on WordPress:<\/strong><\/span><\/p>\n<p>There's actually one really, super easy way to add the \"Read More\" HTML code to WordPress, and it's hiding right in front of your nose.<\/p>\n<p><strong>1. Either click the button pointed to below, or <em>press Alt+Shift+T all<\/em> at the same time. It will do exactly the same thing, but only on WordPress.<\/strong><\/p>\n<div id=\"attachment_236\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/automaticbutton.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-236\" class=\"size-medium wp-image-236\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/automaticbutton-300x68.jpg\" alt=\"automated button\" width=\"300\" height=\"68\" \/><\/a><p id=\"caption-attachment-236\" class=\"wp-caption-text\">Click this button to insert the \"Read more\" code automatically!<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Automatic Version on Blogger:<\/strong><\/span><\/p>\n<p><strong>1. Either insert the code manually through HTML, or click this simple button to insert a \"Read more\" code (aka \"jump break\") on Blogger.<\/strong><\/p>\n<div id=\"attachment_237\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/bloggerjumpbreak.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-237\" class=\"wp-image-237 size-medium\" src=\"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/bloggerjumpbreak-300x42.jpg\" alt=\"blogger jump break\" width=\"300\" height=\"42\" \/><\/a><p id=\"caption-attachment-237\" class=\"wp-caption-text\">Click the split paper icon to add \"Read more\" to your Blogger post.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><em>If you do this to all of your blog posts or articles<\/em>, you will be able to show way more information on your blog homepage, increasing your conversion rates.<\/p>\n<p>There is another benefit to this formatting, though. By inserting this Read More HTML code on your own, you can decide where and where to cut off the post\u2019s content to be entice the reader to click through.<\/p>\n<p>It allows you an element of surprise. Instead of giving away all of your content at once, you can<strong><em> tease the reader<\/em> <\/strong>and pique their interest.<\/p>\n<p>With just a few symbols and characters, you can change your entire websites appearance and ease of use. <em><strong>How\u2019s that for nifty?<\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One sign of an amateur blogger is the appearance of their homepage. If the page shows every word of their posts, you know they\u2019re new. Sometimes posts are 1,000 words are more. New arrivals to your website do not want to scroll through paragraph after paragraph just to see what you\u2019ve written. Scrolling past behemoth [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[474,472],"tags":[73,109,232,252,333,445],"class_list":["post-223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-writing","category-html-tips","tag-blogger","tag-continue-reading","tag-html-codes","tag-jump-break","tag-read-more","tag-wordpress"],"jetpack_featured_media_url":"https:\/\/www.websitespot.com\/blog\/wp-content\/uploads\/2012\/08\/automaticbutton.jpg","_links":{"self":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":0,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/media\/236"}],"wp:attachment":[{"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.websitespot.com\/blog\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}