First of all friends, welcome to Tech Shreyansh, today I will tell you how you can post accord related posts in the middle of your block without any hassle, with this you can maximize your traffic and also show it to your Mr. So that he can read the thing in his article or he can read it on this post also.
So today we will make a stylish latest post according box, which you can put in your blogger’s block post, it will be very beneficial for your visitors, which will show you in your block post. And all the articles will be there so that those people can read it, it will be easy for them that they can read all these things, this will also benefit them that your old posts will remain as your new posts which you will make public. Will show you in the middle of this, your friend will also like this thing so much that he can read it by clicking on it.
How to apply Related Posts Cotton like accordion.
To put latest post content in your block post like according to latest post content, it does not require much knowledge of HTML, CSS and JavaScript, because friends, I have already designed all this stuff for you. What are you going to need to put this code at the right place in your blogger’s theme? We will put this related post accordion to me post, which we are calling complete in the post of your blog by using HTML code.
Important!
Before adding all this, I already advise you to take a backup of your blogger’s theme. If any problem arises, you will be able to restore it to your old theme.
Step 1: First of all you have to login to your blogger dashboard.
Step 2: Now you have to click on the theme in the dashboard of your bloggerr.
Step 3: Now you people have to click on the button below which is showing you the customize button.
Step 4: Now you guys have to choose edit HTML, now Ray Dada will take you directly to the theme area on the editing page.
Step 5: Now you guys have to search the code ]]></b:skin> and paste this CSS code on top of it ]]></b:skin>
/* Accordion by Tech Shreyansh */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0}
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}
.drK .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.drK .acdn .cont, .drK .acdn .cont a, .drK .acTtl, .drK .acMn:checked ~ .acTtl{color:#fefefe}
.drK .acTtl .acIcn:before, .drK .acTtl .acIcn:after, .drK .acMn:checked ~ .acTtl .acIcn:before, .drK .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}
Dark Mode Support*
If your Tempest supports dark mod function, then you should change the color to it, then you can change its course as per your choice because every template has different dark mod class, so you can change it as per your choice. You have to adjust, you guys can change the marked course according to the class of dark mod according to the template .drk
Step 6: Now you guys have to search </b:defaultmarkup> , copy the code and you guys have to add the below code and paste above its </b:defaultmarkup>.
<!--[ Automatic Related Posts Script by Tech Shreyansh]-->
<b:includable id='auto-relatedPost'>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var autoRelatedConfig = {
homePage: "<data:blog.homepageUrl.canonical/>",
numPosts: 10,
titleLength:"auto",
newTabLink: false,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://your_blog_address.com",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"…":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>
I have marked whatever needs to be changed which you have to change in the code.
- 10: You have to enter the number of all the related posts you want to show here {like 10}
- auto: You have to put all the characters you want in your title here in place of auto. If you want to give the complete title then you can do it on auto. If you want to put only a few then you can. People can enter numbers here {like 25}
- false: If you want to open the Releted post in a new tab, then here you have to change it from false to true.
- url: You guys do not forget to copy the URL and change the link of the home page.
- “https://urwebsite.com/” You have to change the URL that I have given here to the URL of your home page.
Step 7: Now you have to copy the code given below, and paste it below the <data:post.body/> Tag code.
<!--[ Automatic Related Posts by Tech Shreyansh ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>
Step 8: Now finally you have to save it by clicking on the save icon in the editor option of your page.
Now your work is over, now I have given you another code below by which you can put related post accordion box in your blogger’s post and the user will also like it.
<!--[ Related Posts Accordion by Tech Shreyansh ]-->
<div class='acdn'>
<!--[ Related Posts ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>
<label class='acTtl' for='offrelPost'>
<i class='acIcn'></i>
<!--[ Related Posts Title ]-->
<span>More Articles on this topic</span>
</label>
<!--[ Related Posts Content ]-->
<div class='cont'>
<div id='autoRelatedPost'></div>
</div>
</div>
</div>
</div>
A Different Way to Use
You people can also use this accordion in your posts, for this you need to use the given HTML codes.
<!--[ Accordion by Tech Shreyansh ]-->
<div class='acdn'>
<!--[ Accordion 1 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
<label class='acTtl' for='offaccor1'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_1</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 2 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
<label class='acTtl' for='offaccor2'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_2</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 3 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
<label class='acTtl' for='offaccor3'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_3</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
<!--[ Accordion 4 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
<label class='acTtl' for='offaccor4'>
<i class='acIcn'></i>
<!--[ Accordion Title ]-->
<span>Accordion_Title_4</span>
</label>
<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
</div>
Conclusion
Friends, through this tutorial, I just wanted to teach you how you can put related accordion in blogger posts. I hope that you like the information given by me. If you liked it, then please share this post with your friends and family, and if you have any question or any kind of problem, then you can ask me by commenting and joining on Telegram.
Reference:
www.fineshopdesign.com
Q1: Is it right to use related posts?
Yes, it is correct to use related posts because it will make it easier for our users to visit our other posts which will be visible in our new posts.
Q2: Can using it cause problems to the user or the visitor?
No, this is not going to cause any problem to you or your visitors. If you face any problem then contact us through contact or message us on Telegram.
Q3: Will it make any slow our website?
Yes, friends, this can decrease the loading speed of your website, so take special care that you maintain the speed of your website.
