How to Add Related Posts Accordion Center in Your Blog Post
2 minute read
Related Posts in between your Blog posts will be helpful for your visitors as it will display a list of relevant posts...
Hi! Welcome to ModMobile Website
If you want to optimize traffic and drive visitors to read more articles on your blog, then adding Related Articles Links in the middle of Blog Posts will definitely help you achieve this. .
.webp)
How to add Accordion related posts?
Adding Related Articles Accordion to your Blog Posts will not require much HTML, CSS or JS knowledge because I have designed it for you. What you need to do is implement the codes in the right places in your Blogger Theme XML and add the Related Articles Accordion HTML Code between your posts.
Importance! Before we start adding code in XML, I recommend you make a Backup of your current theme. Incidentally if anything goes wrong, you can restore it later.
Step 1: First Sign in Blogger Dashboard.
Step 2: On the Blogger Dashboard, click Themes .
Step 3: Click the down arrow icon next to the 'custom' button .
Step 4: Click Edit HTML , you will be redirected to the editing page.
Step 5: Now search for the code ]]></b:skin> and paste the following CSS Codes right above into it.
If your template has a dark mode feature and if you want a different color while in dark mode, you can customize the codes according to your needs. Each template can have a different dark mode layer, so adjust it, you can replace the highlighted layer with your sample dark mode layer.
.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}
.darkMode .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}
Step 6: After doing so, search for the code </b:defaultmarkup> and paste the following Codes just above into it. Step 7: Add the following Codes right below to your<data:post.body/>.
<!--[ Automatic Related Posts byModMobile ☭ ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>
Step 8: Save the changes by clicking this icon
Done! Now add the following HTML Codes to your Blog Posts wherever you want to display the Related Posts Accordion.
Đăng nhận xét