Adding a Frequently Asked Questions (FAQ) page to your blogger will help answer any common questions, problems or concerns your followers may have. A blogger FAQ page should be the first point of call for your site’s readers, and it can be an excellent way to connect with your audience and deal with their needs. It will also save you time answering countless emails that all contain the same questions.
For Demo Purpose see our FAQ's Page
In this article i am going to show you how to add faq page to blogger blog. Your blogger blog faq pages my used for:
- Serve as a nightlight that will sweep away all of your customers’ fears and concerns.
- Save some time by providing automated answers to repeating questions instead of answering them manually.
- Improve your site’s visibility on Google and offer a better experience for your users.
Now follow the following two methods and each steps to add faq pages to your blogger blog posts.
Method One: Adding Styles
Step 2: Then, click on Edit HTML and you will be provided with the whole code of your blog including CSS Java Script and HTML in a large field.
Step 3: Search for ]]></b:skin> and paste the following code just below it.
<style>
#ardifaq-section{
float:left;
width:100%;
position:relative;
}
#ardifaq-section label{margin:10px 0;background:#1eb025 url(http://icons.iconarchive.com/icons/icons8/windows-8/32/Science-Plus2-Math-icon.png) center no-repeat;border-bottom:1px solid #000;background-position:7px 50%;padding:3px 5px 3px 48px;-moz-border-radius:4px;-webkit-border-radius:4px;font-family:'Raleway';font-size:20px;line-height:40px;
float:left;
width:100%;https://img.icons8.com/ios-glyphs/30/000000/sort-down.png
color:#000;
cursor:pointer;
border-radius:5px;
}
#ardifaq-section .tab-content1{
background-color:#f0f0f0;
border-radius:5px;
float:left;
width:100%;
padding:0 10px;
height:0;
font-size:18pz;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
overflow:hidden;
}
#ardifaq-section input:checked + label + .tab-content1{
padding: 10px;
height: 150px;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#ardifaq-section input:checked + label{
margin:10px 0;background:red url(http://icons.iconarchive.com/icons/icons8/windows-8/32/Science-Minus2-Math-icon.png) center no-repeat;border-bottom:1px solid #000;background-position:7px 50%;padding:3px 5px 3px 48px;-moz-border-radius:4px;-webkit-border-radius:4px;font-family:'Raleway';font-size:20px;line-height:40px;
float:left;
width:100%;
color:#000;
cursor:pointer;
border-radius:5px;
}
#ardifaq-section input{
display:none;
}
</style>
Don't forget to change color. icon urls, width, height and other styles.
Method Two: Adding Page
Step 2: Copy and paste one of the following code into the HTML post editor after removing everything in it. Only one code is working fine.
<div id="ardifaq-section">
<input checked="" id="tab1" name="tabs" type="radio" />
<label for="tab1">Question 1</label>
<div class="tab-content1">
Answers for question 1</div>
<input id="tab2" name="tabs" type="radio" />
<label for="tab2">Question 2</label>
<div class="tab-content1">
Answers for question 2
</div>
<input checked="" id="tab3" name="tabs" type="radio" />
<label for="tab3">Question 3</label>
<div class="tab-content1">
Answers for question 3</div>
</div>
Step 3: Rename your page and change page setting as the following image. Entitle your page FAQ, to enable your reader to understand more and for your blog SEO cases.
Step 4: Now finally click publish button on the top of your page post editor to complete all of what we have going to do.
Thanks for your time, I really hope that this post helped you with what you were looking for, come back later to check out more awesome posts and tutorials Concerning blogger widgets and templates.
Post a Comment