Widget Settings and Customization for Fletro Pro

<!--[ <body> open ]-->
<body class='gridLayout' id='mainContent'>

<!--[ <body> open ]-->
<body class='gridLayout' id='mainContent'>
  <b:class cond='data:view.isMultipleItems' name='gridMode'/>

.classList.add('gridMode') : document.querySelector('#mainContent').classList.remove('gridMode')
.classList.add("gridMode"):document.querySelector("#mainContent").classList.remove("gridMode")

.classList.remove('gridMode') : document.querySelector('#mainContent').classList.add('gridMode')
.classList.remove("gridMode"):document.querySelector("#mainContent").classList.add("gridMode")

<!--[ Fullpage condition ]-->
<b:class cond='data:view.isSingleItem and data:posts any (p =&gt; p.labels any (l =&gt; l.name in [ &quot;Fullpage&quot; , &quot;Label_2&quot; ]))' name='singlePage'/>
<b:include cond='data:view.isSingleItem and data:posts any (p =&gt; p.labels any (l =&gt; l.name in [ &quot;Fullpage&quot; , &quot;Label_2&quot; ]))' name='post-singlePage'/>

<b:if cond='data:post.labels any (label => label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='data:post.labels none (label => label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='data:post.labels any (label => label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='data:post.labels none (label => label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])' name='sponsored'/>

<b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])' name='sponsor'/>

<b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='data:post.labels none (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='!data:view.isPage and data:post.labels none (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

<b:if cond='data:view.isPost and data:post.labels none (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

article.post .postDescription{

article.post .postDescription{display:none;

article .postTitle a, article .itemTitle a{-webkit-line-clamp:3}

<b:eval expr='snippet(data:post.body

<b:eval expr='snippet(data:post.snippets.long

expr:data-text='format(data:post.lastUpdated, &quot;MMMM d, YYYY&quot;)'
expr:data-text='format(data:post.date, &quot;MMMM d, YYYY&quot;)'

<b:includable id='postTimestamp'>
  <b:if cond='data:post.lastUpdated != data:post.date'>
    <time class='postTimestamp updated' expr:data-text='format(data:post.lastUpdated, "MMMM d, YYYY")' expr:datetime='data:post.lastUpdated.iso8601' expr:title='"Last updated: " + data:post.lastUpdated format "MMMM d, YYYY"'/>
    <b:else/>
    <time class='postTimestamp published' expr:data-text='format(data:post.date, "MMMM d, YYYY")' expr:datetime='data:post.date.iso8601' expr:title='"Published: " + data:post.date format "MMMM d, YYYY"'/>
  </b:if>
</b:includable>

data:post.date

article.post .postInfo #readTime:before{content:'\2022';margin:0 5px}

article.post .postInfo #readTime:before{content:'\2022';margin:0 5px}
article.post .postInfo #readTime{display:none}

  1. Widget Label

<b:includable id='cloud'>
  <b:loop index='tags' values='data:labels' var='label'>
    <!--[ Only show 4 label ]-->
    <b:if cond='data:tags &lt;= 3'>
      <div class='labelSize'>...</div>
    </b:if>
    <!--[ Hide another label from 5th list ]-->
    <b:if cond='data:tags == 4'>
      <div class='labelShow'>
        <input class='labelInput hidden' id='offall-label' type='checkbox'/>
        <div class='labelAll'>
          <b:loop index='alltags' values='data:labels' var='label'>
            <!--[ Show label from 5th list ]-->
            <b:if cond='data:alltags &gt;= 4'>
              <div class='labelSize'>...</div>
            </b:if>
          </b:loop>
        </div>
        <label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='&quot;+&quot; + (data:labels.length - 4)' for='offall-label'/>
      </div>
    </b:if>
  </b:loop>
</b:includable>

<b:includable id='list'>
  <ul>
    <b:loop index='tags' values='data:labels' var='label'>
      <!--[ Only show 4 label ]-->
      <b:if cond='data:tags &lt;= 3'>
        <li>...</li>
      </b:if>
      <!--[ Hide another label from 5th list ]-->
      <b:if cond='data:tags == 4'>
        <li class='labelShow'>
          <input class='labelInput hidden' id='offall-label' type='checkbox'/>
          <div class='labelAll'>
            <ul>
              <b:loop index='alltags' values='data:labels' var='label'>
                <!--[ Show label from 5th list ]-->
                <b:if cond='data:alltags &gt;= 4'>
                  <li>...</li>
                </b:if>
              </b:loop>
            </ul>
          </div>
          <label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='&quot;+&quot; + (data:labels.length - 4)' for='offall-label' role='button'/>
        </li>
      </b:if>
    </b:loop>
  </ul>
</b:includable>

<b:includable id='cloud'>
  <b:loop index='tags' values='data:labels' var='label'>
    <!--<b:if cond='data:tags <= 3'>-->
      <div class='labelSize'>...</div>
    <!--</b:if>
    <b:if cond='data:tags == 4'>
      <div class='labelShow'>
        <input class='labelInput hidden' id='offall-label' type='checkbox'/>
        <div class='labelAll'>...</div>
            </b:if>
          </b:loop>
        </div>
        <label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='"+" + (data:labels.length - 4)' for='offall-label'/>
      </div>
    </b:if>-->
  </b:loop>
</b:includable>

.Label .labelShow label:before{content: attr(data-show)}
    
// Kode untuk 'Show less'
    
.Label .labelInput:checked ~ label:before{content: attr(data-hide)}

.Label .labelShow label:before{content: 'Label lainnya'}
    
// Kode untuk 'Show less'
    
.Label .labelInput:checked ~ label:before{content: 'Sembunyikan'}

<b:includable id='userProfileMedia'>
  <ul class='profileMedia'>
    ...
    <!--[ Facebook ]-->
    <li>
      <!--[ Change attribute href='#' to add new link ]-->
      <a aria-label='Social Media' href='#' rel='noreferrer noopener' role='button' target='_blank'>
        <svg viewBox='0 0 32 32'>...</svg>
      </a>
    </li>

<ul>
  <b:loop index='team' values='data:authors' var='author'>
    <!-- Show contributor less than 4 -->
    <b:if cond='data:team &lt;= 3'>
      <li>
        ...
      </li>
    </b:if>
      
    <!-- Show 4th order contributors -->
    <b:if cond='data:team == 4'>
      <li>
        <div class='moreMember'>
          <label class='profileMore' for='offall-member'>
            <span><b:eval expr='&quot;+&quot; + (data:authors.length - 4)'/></span>
          </label>
        </div>
        
        <!-- Show all member/contributor in this blog -->
        <input class='allTeam hidden' id='offall-member' type='checkbox'/>
        <div class='allMember'>
          <div class='allMemberBox' data-text='All authors/contributors'>
            <ul>
              <b:loop values='data:authors' var='author'>
                <li>
                  ...
                </li>
              </b:loop>           
            </ul>
              
            ...
          </div>
          <label class='fullClose closeMember' for='offall-member'/>
        </div>
      </li>
    </b:if>
  </b:loop>
</ul>

<div class='follow-inner'>
  <label class='follow-text' for='email-input'>
    <span>Get updates right in your inbox. Join to get notified with all new stuff</span>
  </label>

  <form expr:action='"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath' method='get' target='_blank'>
    <input autocomplete='on' class='followAddress' id='email-input' name='email' placeholder='e.g. youremail@gmail.com' type='email'/>
    <input class='followSubmit' expr:value='data:messages.subscribe' id='email-submit' type='submit'/>
    <input expr:value='data:feedPath' name='uri' type='hidden'/>
    <input name='loc' type='hidden' value='en_US'/>
  </form>
</div>

<!--[ add the content right below ]-->
<div class='sliderImg lazy' data-bg='https://1.bp.blogspot.com/-yMSpgmjn390/YF1Q5CvGIcI/AAAAAAAAQlg/59LxYemhlyEbbhqlpdfypu5OXRav4t-JgCNcBGAsYHQ/s0/slider-1-min.png'></div>

<!--[ add the content right below ]-->
<a class='sliderImg lazy' href='#' data-bg='https://1.bp.blogspot.com/-yMSpgmjn390/YF1Q5CvGIcI/AAAAAAAAQlg/59LxYemhlyEbbhqlpdfypu5OXRav4t-JgCNcBGAsYHQ/s0/slider-1-min.png' aria-label='Slider'></a>