A to Z Fletro Pro Theme Customization

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,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>