How to make a read widget also in the middle of a blog post

Hello IcloudZer friends, this time the admin will provide information about the world of blogging, in discussing how to make a reading widget in the middle of posting articles on blogger

Info: Alright, if you're curious about our discussion this time, let's just start discussing it together

Read Also

As we all know, this read also widget has been widely used by websites and also blog, where the function of the read also widget is to display other articles with different display models, such as only displaying some article titles in a unique border

Info: Especially with the reading display which admin is discussing here, it has a function as admin explained above

Examples of Display

If you are curious about the reading display in blogger, you can see it on Also the read feature that the admin is using in the ic blog this Icloudice.com

Info: Or also, you can see an example of the display of the read also feature in the thumbnail of the main image in this article okay

How to make

Okay now admin will start discussing how to make a feature or widget read also in the middle of the latest blog articles

Info : Read and study this article to the end to understand it more deeply

CSS Code

The first step you can do is to copy and paste the CSS code below just above the ]]></b:skin> or before ]]></b:skin>

.Blog .post .post-entry .rahReadTo{display:block;margin:20px 0px;}.rahReadTo .middle{margin:20px 0px !important;padding:0px !important;}.Blog .post .post-entry .rahReadTo .title{background-color:#f80000;color:#fff;display:block;font-weight:500;font-size:16px;padding:7px 15px;border-radius:5px 5px 0px 0px;}.Blog .post .post-entry .rahReadTo .title:before{content:'';display:inline-block;width:20px;height:20px;margin-right:7px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul{margin:0px;border-left:4px solid #f80000;border-buttom:1px solid #f80000;border-radius:0px 0px 5px 5px;padding:10px 15px;border-top:0px;}.Blog .post .post-entry .rahReadTo ul li{
list-style-type:none;padding:7px 0;border-bottom:2px dotted rgba(0,0,0,.25);}
.Blog .post .post-entry .rahReadTo ul li:before{content:'';display:inline-block;width:20px;height:20px;margin-right:3px;margin-left:-5px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%232f303f'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul li:first-child{padding-top:0px;}.Blog .post .post-entry .rahReadTo ul li:last-child{border:0px; padding-bottom:0px;}.hljs,.hljs-subst,.hljs-tag{color:#eaebec}.Blog .post .post-entry .rahReadTo{display:block;margin:20px 0px;}.rahReadTo .middle{margin:20px 0px !important;padding:0px !important;}.Blog .post .post-entry .rahReadTo .title{background-color:#f80000;color:#fff;display:block;font-weight:500;font-size:16px;padding:7px 15px;border-radius:5px 5px 0px 0px;}.Blog .post .post-entry .rahReadTo .title:before{content:'';display:inline-block;width:20px;height:20px;margin-right:7px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul{margin:0px;border-left:4px solid #f80000;border-buttom:1px solid #f80000;border-radius:0px 0px 5px 5px;padding:10px 15px;border-top:0px;}.Blog .post .post-entry .rahReadTo ul li{
list-style-type:none;padding:7px 0;border-bottom:2px dotted rgba(0,0,0,.25);}
.Blog .post .post-entry .rahReadTo ul li:before{content:'';display:inline-block;width:20px;height:20px;margin-right:3px;margin-left:-5px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%232f303f'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul li:first-child{padding-top:0px;}.Blog .post .post-entry .rahReadTo ul li:last-child{border:0px; padding-bottom:0px;}.hljs,.hljs-subst,.hljs-tag{color:#eaebec}

For information: You can also use tag <style> to save the above CSS code

HTML/Javascript code

The next step you can do is copy the HTML code along with a mixture of the javascript code below then you can put it under the code <data:post.body/>

<b:if cond='data:post.labels'>
                    <b:if cond='data:view.isPost'>
                      <b:loop values='data:post.labels' var='label'>
                        <script>//<![CDATA[
                        var relatedTitles = new Array(); var jumlah = 4; var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function rahReadTo() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < jumlah) { document.write('<li><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
                        //]]></script>
                        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;'/>
                    </b:loop>
                    <div class='rahReadTo middle'>
                      <span class='title'>Read To</span>
                      <script>rahReadTo()</script>
                    </div>
                  </b:if>
                </b:if>

Warning : There is a lot of <data:post.body/> code, and each template has a different type of code, so you have to look for it slowly ok

Code Explanation

CSS code is used to make the appearance from the read also feature in your blog, while the HTML code and its javascript function to display the read widget also in your blog

Steps

Well to further complete this article, admin will provide steps in creating and displaying the read widget also in the middle of posts in blogger, read and study this article until it's finished ok

1. Log in to your blogger account
2. Then go to the template then select edit HTML
3. Copy the CSS code below, then paste it above the ]]></b:skin>

.Blog .post .post-entry .rahReadTo{display:block;margin:20px 0px;}.rahReadTo .middle{margin:20px 0px !important;padding:0px !important;}.Blog .post .post-entry .rahReadTo .title{background-color:#f80000;color:#fff;display:block;font-weight:500;font-size:16px;padding:7px 15px;border-radius:5px 5px 0px 0px;}.Blog .post .post-entry .rahReadTo .title:before{content:'';display:inline-block;width:20px;height:20px;margin-right:7px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul{margin:0px;border-left:4px solid #f80000;border-buttom:1px solid #f80000;border-radius:0px 0px 5px 5px;padding:10px 15px;border-top:0px;}.Blog .post .post-entry .rahReadTo ul li{
list-style-type:none;padding:7px 0;border-bottom:2px dotted rgba(0,0,0,.25);}
.Blog .post .post-entry .rahReadTo ul li:before{content:'';display:inline-block;width:20px;height:20px;margin-right:3px;margin-left:-5px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%232f303f'/%3E%3C/svg%3E") center no-repeat;}
.Blog .post .post-entry .rahReadTo ul li:first-child{padding-top:0px;}.Blog .post .post-entry .rahReadTo ul li:last-child{border:0px; padding-bottom:0px;}.hljs,.hljs-subst,.hljs-tag{color:#eaebec}

Info: You can also use the <style> tag to put the CSS code above

4. The next step you can copy the code HTML and javascript below, then place the code under the code <data:post.body/>

<b:if cond='data:post.labels'>
                    <b:if cond='data:view.isPost'>
                      <b:loop values='data:post.labels' var='label'>
                        <script>//<![CDATA[
                        var relatedTitles = new Array(); var jumlah = 4; var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function rahReadTo() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < jumlah) { document.write('<li><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
                        //]]></script>
                        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;'/>
                    </b:loop>
                    <div class='rahReadTo middle'>
                      <span class='title'>Read To</span>
                      <script>rahReadTo()</script>
                    </div>
                  </b:if>
                </b:if>

Information: There is a lot of code <data:post.body/>, and you have to place the above code just below the code to display the read widget as well

5. If you have done all the steps above, you can save the template and see how the Read Also widget looks like

Info: That's the information that admin can convey through this article, hopefully it's useful and see you in my other articles okay