A to Z Fletro Pro Theme Customization by Techyleaf
In this video, I will share you some tips and Techniques to customize your Fletro Pro Theme in Blogger website.
I will cover everything from how to install the theme, How to remove different parts to speed up Blogger website and how you can add different elements in your blogger website like
- Table of contents
- Code Box
- Blockquotes
- Download Buttons
- Note Blocks
- Post Break
- Show & Hide Spoiler Button
- Accordion
Just follow the Steps as shown in this article.
How to install Fletro Pro Theme in Blogger?
- To Install the Fletro Pro Theme, You need to Login to Blogger dashboard and Open the Theme section.
- Now take the backup of the existing Theme file and click on the Edit HTML Option from the drop down menu.
- Now Replace all the codes with the new Fletro Pro theme code and save the changes.
- Now Fletro Pro theme is installed on your Blogger website.
Note, You can use any notepad software to open the XML file and copy the codes inside it. If you are doing it from Mobile devices than you can follow this video on How to change Blogger theme from Mobile.
You can also use the restore Option but most of the time it doesn’t work with Custom Blogger theme.
Once you have installed the Fletro Pro theme on your website, You need to follow the video to properly setup the following things like
- Remove Fonts codes
- Setup Header Menu
- Customize footer section
- Remove unnecessary widgets
- Remove Locked widgets in Blogger
- Remove unused CSS from the theme code
- Remove Comment Section
- Add Background in Breadcrumbs in Post Page
- Remove Related Posts Section
- Adsense Setup
This is the part one of the Fletro Pro customization series. Here, I am using the Fletro Pro Version 6.0
Now let’s check some more customization options in Fletro Pro theme.
How to Add Table of contents in Fletro Pro Theme
If you are using Fletro pro theme than you can use the native Table of contents features which help you generate Table of contents with a single click.
It’s a semi automatic Table of contents in Blogger where you can add a little bit of codes to automatically generate the table of contents in that page based on the heading present inside the post or page.
<!--[ Script to activate ToC ]-->
<div class='tocInner'>
<input class='tocInput hidden' id='daftar-isi01' type='checkbox'/>
<label class='tocTitle' for='daftar-isi01'>Table of contents</label>
<div class='tocContent' id='tocContent'>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded', () =>
new TableOfContents({
from: document.querySelector('#postBody'),
to: document.querySelector('#tocContent')
}).generateToc()
);</script> Disable Search Description Under Post Title
If you are using Fletro Pro 6.0 and want to remove the search description under the post title, than find this code and remove it.
<div class='postDescription'><data:blog.metaDescription/></div>
For Fletro Pro 6.1
<div class='pDesc'><data:blog.metaDescription/></div>
Change the Share Button Position in Post Page
To change the position of the share button in post page you need to make changes on the below code as shown in the above video.
<!--[ Share button ]--> <b:include cond='data:view.isPost and !data:view.isPreview and data:post.shareUrl' name='postInfoShare'/>
Code Box in Fletro Pro theme
To add the code box in Blogger, You need to add the below code inside the HTML section and then parse the code you want to use using our HTML parse tool and add it between the code tag.
<pre class="html"><code> </code></pre>
Here, you can change the class from HTML to CSS, JS etc
Post Break
<i class="separate"></i>
Show/Hide Button
<div class='spoiler'>
<input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
<div class='spoilerTitle'>
<!--[ Show/hide Title ]-->
<b>Click Here To Know More: </b>
<label for='spoiler-01'></label>
</div>
<!--[ Show/hide content ]-->
<div class='spoilerContent'>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
</div>
</div> Accordion Menu
You can add Accordion Block using the below code in Fletro Pro theme. You can also enable FAQ schema using this accordion block in Blogger.
<!--[ Accordion start ]-->
<ul class='accordion'>
<!--[ Accordion line 1 ]-->
<li>
<div class='accorContent'>
<input class='accorMenu hidden' id='offaccor-menu1' name='accordion-menu' type='radio'/>
<label class='accorTitle' for='offaccor-menu1'>
<i class='accorIcon'></i>
<!--[ Question ]-->
<span>Accordion_first_title</span>
</label>
<!--[ Answer ]-->
<div class='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.</p>
<p>Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>
</div>
</div>
</li>
<!--[ Accordion line 2 ]-->
<li>
<div class='accorContent'>
<input class='accorMenu hidden' id='offaccor-menu2' name='accordion-menu' type='radio'/>
<label class='accorTitle' for='offaccor-menu2'>
<i class='accorIcon'></i>
<!--[ Question ]-->
<span>Accordion_second_title</span>
</label>
<!--[ Answer ]-->
<div class='content'>Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus.</div>
</div>
</li>
<!--[ Accordion line 3 ]-->
<li>
<div class='accorContent'>
<input class='accorMenu hidden' id='offaccor-menu3' name='accordion-menu' type='radio'/>
<label class='accorTitle' for='offaccor-menu3'>
<i class='accorIcon'></i>
<!--[ Question ]-->
<span>Accordion_third_title</span>
</label>
<!--[ Answer ]-->
<div class='content'>Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus. Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo.</div>
</div>
</li>
</ul>Download Button Codes
<a class='extLink' href='#' target='_blank'>External Link</a> <a class='button' href='#'>Button Text</a> <a class='button' href='#'><i class='icon download'></i>Download the PDF</a> <a class='button' href='#'><i class='icon demo'></i>Demo_link</a>
Download & Demo button in a single row
<div class='buttonInfo'> <a class='button' href='#'><i class='icon download'></i>Download</a> <a class='button outline' href='#'>Demo</a> </div>
WhatsApp Button
<a class='button' href='#'> <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg> <span>WhatsApp Btn</span> </a>
Buy Button
<a class='button' href='#'> <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg> <span>Buy now!</span> </a>
Download File Box
<div class='downloadInfo'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div> blockquote
Fletro Pro theme has two types of Blockquotes styling avaiable.
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> <blockquote class='style-1'>Lorem ipsum dolor sit amet, consectetur adipiscing elit</blockquote>
Note Box
<p class='note'>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p> <p class='note noteAlert'>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
Lazyload YouTube iframe in Blogger
Fletro Pro theme also comes with Lazyload Youtube Iframe. Just replace the video id in the below code.
<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='dP0zzfiCJDY'>
<div class='playBut'>
<svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
</div>
</div> Add Border Around Popular Post in fletro Pro
Here, note that you need to replace the Id of the widget, otherwise, it may not work in your theme.
#Label00 {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
padding: 15px;
border-radius: 10px;
border: 2px solid #667db6;
}Troubleshooting Errors
Comment timestamp only shows ‘seconds ago’
This is a common error shows on Fletro Pro theme, When you open the comment section you will see seconds ago above the comments instead of showing the comment date.
The main reason for this issue in Fletro pro is that the timestamp format is not compatible with the timeAgo.js script.
You can easily fix this error by changing the comment timestamp format from Blogger Settings. Just go to the formatting option and Click on the Time stamp option.
Here, you need to select any different time stamp format as shown in the below image.
After that The time ago script will work perfectly and you can solve your “seconds ago” error in Fletro pro theme.
More Fletro Pro Video Tutorials:
- How to set default Grid Mode in Fletro Pro Theme
- Display All Labels in Sidebar of Fletro Pro Theme
- How to Customize Author Section in Fletro Pro Blogger Theme
- How to Enable infinite scrolling in Fletro Pro theme
- Customize Footer Section
Conclusion
There are some more customization option available with this theme which i will update in this post later. If you found this article helpful than let us know in the social media by shareing this post.
Bookmark this page for Future use.
