Free Download Flettro Pro Version 5.5 (All Bundle)

Flettro Pro - Template Description

Paid Flettro Pro -Blogger template is Responsive designed with UX for a better post or article reading experience. Flettro Pro is a blogger template so designed for mobile first. the appearance is made elegant and modern from features to template or theme layout. besides that this template is made more Modern user friendly. layout of each element is neatly arranged and doesn't disturb the comfort of blog visitors. so Flettro Pro Blogger Template Free Download

Modern Flettro Pro -Easy to Customize - We're trying to make this Theme or template easier to edit, now you can direcly change the colors via Blogger Theme Designer or Layout menu. like - Primary Color Option, SVG Icon, Custom Widgets. Fast Loading - Performance is a top priority in templates or theme we make, sites that perform well have many benefits and have more potential to be on first page of search results like - Loads less than 1 second, Search engine optimized, Optimized for Speed. so Flettro Pro + Amp + lite v6.0 Blogger Template Free Download

Best Flettro Pro -Responsive- Flexible template sizes adjust on every screen as well as neatly arranged layouts by maximizing CSS performance. SEO Friendly - Templates have been designed SEO Friendly. starting from breadcrumbs that have been indexed by Google to other markup schemes. Easy Customize - It's easy to change color. width or font via Blogger Theme Designer including widget settings on Layout menu. Ads Optimize - Adsense ad slots are provided that are ready to use in locations with high click rates Fast Loading - Optimized by reducing size of templates such as compressing CSS and Javascript for faster lo Mobile First - Designed with a mobile view first. its appearance is made more user friendly. Cross Browser Compatible - Supports various different all browsers such as chrome, firefox etc.

Flettro Pro - Features

• Full Rеѕроnѕіvе 
• Loaded SEO Oрtіmіzеd Fullу Cuѕtоmіzаblе Background, Wіdthѕ, Cоlоrѕ and Fonts 
• Adѕ Arеаѕ (In-Artісlе ADS 1 In-Artісlе ADS 2) оn Pоѕt Pаgе 
• SEO Frіеndlу 
• Hеаdеr Sticky 
• Slоt Ads 
• Mobile Menu Animations 
• Multi Level Drорdоwn Menu 
• Featured Pоѕtѕ 
• Sеаrсh Animations 
• Fоnt Awеѕоmе Iсоnѕ Intеgrаtіоn 
• Shоrt соdеѕ rеаdу for buttоnѕ 
• UI еlеmеntѕ 
• 3 Related Pоѕtѕ іn thе Article 
• Back Tо Tор 
• Subѕсrірtіоn Cоlumn 
• New Blоggеr Cоmеnt 
• Sіdеbаr Sticky (CSS) 
• Pоѕt Mеtа 
• Brеаdсrumbѕ 
• Buttоn ѕtуlеѕ 
• Alеrt Bоxеѕ 
• Cоdе bоxеѕ 
• Image gаllеrу 
• Load mоrе Pоѕtѕ Animation 
• Automatic Mоbіlе Mеnu 
• Header Adѕ 
• Featured Pоѕtѕ 
• Home Adѕ 1 
• AdSеnѕе (In-Fееd ADS) оn Homepage 
• Home Adѕ 2 
• Autо Authоr Box 
• Abоut Sесtіоn on Fооtеr 
• Footer Mеnu Fаѕt 
• More... 

LIVE PREVIEW

 

amp

LITE

3 Column

pRO

Flettro - Table Post

<div class='tabs-head'>
  <span data-tab='tab-1' class='tabs-nav active'>Tab 1</span>
  <span data-tab='tab-2' class='tabs-nav'>Tab 2</span>
  <span data-tab='tab-3' class='tabs-nav'>Tab 3</span>
</div>
<div class='tabs-content'>
  <div id='tab-1' class='b-tab active'>
    <p>isi tab pertama</p>

  </div>
  <div id='tab-2' class='b-tab'>
    <p>Isi tab kedua</p>
    
  </div>
  <div id='tab-3' class='b-tab'>
    <p>Isi tab ketiga</p>
    
  </div>
</div>

<script>/*<![CDATA[*/ // Source: codepen.io/wangel13/pen/OXBrRp
function Tabs() { var bindAll = function() { var menuElements = document.querySelectorAll('[data-tab]'); for(var i = 0; i < menuElements.length ; i++) { menuElements[i].addEventListener('click', change, false); } }; var clear = function() {var menuElements = document.querySelectorAll('[data-tab]'); for(var i = 0; i < menuElements.length ; i++) { menuElements[i].classList.remove('active'); var id = menuElements[i].getAttribute('data-tab'); document.getElementById(id).classList.remove('active'); } }; var change = function(e) { clear(); e.target.classList.add('active'); var id = e.currentTarget.getAttribute('data-tab'); document.getElementById(id).classList.add('active'); }; bindAll(); } var connectTabs = new Tabs(); /*]]>*/</script>

Flettro - Split Post

<div id='post-split'>  
  <p>Isi artikel laman pertama</p>
  
  <!--nextpage-->
  
  <p>isi artikel laman kedua</p>
</div>

<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', function() {function checkChildren(nodes, elemId){for(i=0;i<nodes.length;i++){if(nodes[i].id==elemId){return nodes[i];}else{return checkChildren(nodes[i].children, elemId);}}} function isNumeric(value) {var type = typeof value; return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));} var nodes = document.querySelector('div.post-body').children; var splitdong = checkChildren(nodes, 'post-split').innerHTML; var content = splitdong.split('<!--nextpage-->'); var url = window.location.href; var url = url.split('?page='); var no = url[1] + '&m=4'; var no = no.split('m'); var no = no[0]; var no = no.replace('&', ''); var url = url[0]; var i = 1; if( !isNumeric(no) ){var no = 1;} document.getElementById('post-split').innerHTML = content[no-1]; if( content.length > 1 ) {document.getElementById('post-split').innerHTML += "<div class='post-pagenav post-clearfix' id='post-pager'><span class='page current'>Pages :</span></div>";} if( no>1 ){document.getElementById('post-pager').innerHTML += "<!-- <a href='"+url+"?page="+(no-1)+"' title='Previous Page'>Prev</a> -->";} content.forEach(function(item) { if( no == i ){document.getElementById('post-pager').innerHTML += "<span class='current'>"+i+"</span>";} else {document.getElementById('post-pager').innerHTML += "<a href='"+url+"?page="+i+"' rel='nofollow' title='Page "+i+"'>"+i+"</a>";} i++; }); if(content.length > no){ var nn = parseInt(no) + 1; document.getElementById('post-pager').innerHTML += "<a href='"+url+"?page="+nn+"' rel='nofollow' title='Next Page'>Next</a>";} }); /*]]>*/</script>

Flettro - Sitemap Pages

<div class='sitemaps' id='sitemaps'>
  <div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://your-domain.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>

Flettro - Contact Pages

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Nama Anda</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>Pesan<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' /></div>
    <div class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
  </form>
</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d0000000000000000000','//your-domain.com//','0000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '0000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>