Making a nice article for your readers is the best thing to ensure good traffic on the blog. But sometimes it takes more than writing good stuff. If you write really long articles and you are afraid if your readers will read it completely or not then you can use this cool gadget.
A little knowledge of HTML and CSS can help you make your articles really cool.
For instance, take this collapsible content gadget which will help you hide some text inside another text. It's helpful if you don't want to show details or explanation of something in your article.
Let's take an example- If you have a blog about cooking and you post cooking recipes then you can use this trick to hide some of the common details. It will only give a chance to those readers who don't know about that thing and they can click on it to find more details.
Even if you have zero knowledge of HTML, you can make collapsible content in your post just by following these simple steps.
Template > Customise > Advanced > Add CSS
That's all, your accordion is ready.
Editing this collapsible content or accordion is really easy. You just need to change the highlighted text with your text. Everything else will be same.
Feel free to comment if you face any issue.
Also, what are the most common issues you face while creating a content?
A little knowledge of HTML and CSS can help you make your articles really cool.
For instance, take this collapsible content gadget which will help you hide some text inside another text. It's helpful if you don't want to show details or explanation of something in your article.
Let's take an example- If you have a blog about cooking and you post cooking recipes then you can use this trick to hide some of the common details. It will only give a chance to those readers who don't know about that thing and they can click on it to find more details.
Even if you have zero knowledge of HTML, you can make collapsible content in your post just by following these simple steps.
Steps to Make Accordion in Blogger
- Login to your Blogger profile
- Make a new post
- Copy and Paste this code in HTML mode
<h2>Like This</h2>
<button class="accordion">Upper</button>
<div class="panel">
<p>This is the upper section.</p>
</div>
<button class="accordion">Middle</button>
<div class="panel">
<p>This is the middle section.</p>
</div>
<button class="accordion">Lower</button>
<div class="panel">
<p>This is the lower section.</p>
</div>
- Now, we will add some Javascript in the same manner like we added in the previous step
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
- Now, we will add some finishing with CSS. Paste this code in
Template > Customise > Advanced > Add CSS
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block !important;
}
That's all, your accordion is ready.
Editing this collapsible content or accordion is really easy. You just need to change the highlighted text with your text. Everything else will be same.
Feel free to comment if you face any issue.
Also, what are the most common issues you face while creating a content?
Hi Rishabh,I would like to know how to change the color of the page title(page gadgets) to different color when selected in a blog.Thanks
ReplyDeleteThat you can do in 'Template Designer'. Navigate to 'Themes' and then click on 'Customize' to open template designer.
DeleteAll the color settings can be changed from there. :)
Your post is so useful to me. Thank you.
ReplyDelete