Home
Info

Info

Finestap Design all IMG

https://drive.google.com/drive/folders/1N36Tn-wzg3vz3uQ-7fF-nR0cxgXr4JTU

Plus UI Main Theme

https://drive.google.com/file/d/1NdhQOeluy5Yj1cE7A1g3ULPhb7e_RMV7/view?usp=drivesdk

Realtime Views Counter

[data-path] {
  --text-color: #000;
  --text-color-dark: #fff;
  --icon-loading: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>");
  --icon-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>");
  --text-loading: "--- --";
  --text-loaded: attr(data-view);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.2);

  line-height: 1rem;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-color);
}
[data-path]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  -webkit-mask: var(--svg-icon);
  mask: var(--svg-icon);
  background: var(--text-color);
  --svg-icon: var(--icon-loading);
}
[data-path][data-view]::before {
  --svg-icon: var(--icon-eye);
}
[data-path]::after {
  content: var(--text-loading);
  opacity: 0.8;
}
[data-path][data-view]::after {
  content: var(--text-loaded);
}
.drK [data-path] {
  --text-color: var(--text-color-dark);
  --border-color: var(--border-color-dark);
}


<div class='post-view' expr:data-increment='data:view.isPost ? &quot;1&quot; : &quot;false&quot;' expr:data-path='&quot;/BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id + &quot;/VIEWS&quot;'/>


<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      selector: ".post-view",
      abbreviation: true
    });
    if (typeof infinite_scroll !== "undefined") {
      infinite_scroll.on("load", counter.init.bind(counter));
    }
  };
</script>
<script defer onload='viewCounterLoaded()' src='https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js'></script>
https://www.fineshopdesign.com/2023/04/post-view-counter.html

Category posts

<b:widget cond='data:view.isHomepage' id='TextList035' locked='true' title='Categorised Post' type='TextList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>6</b:widget-setting>
    <b:widget-setting name='item-3'>Product</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='item-2'>Features</b:widget-setting>
    <b:widget-setting name='item-1'>Art</b:widget-setting>
    <b:widget-setting name='item-0'>Adventure</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!--[ Categorised Posts by Fineshop Design (fineshopdesign.com) ]-->
    <b:loop index='ctgry' values='data:items' var='item'>
      <div class='ctgW'>
        <h2 class='title'><data:item/></h2>
        <div class='ctgC' data-title='' expr:data-home='data:blog.homepageUrl.canonical' expr:data-label='data:item' expr:id='&quot;categoryId&quot; + data:ctgry'>
          <div class='note'>Loading Posts...</div>
        </div>
      </div>
    </b:loop>
    <script>/*<![CDATA[*/ Defer.js('https://cdn.jsdelivr.net/gh/fineshopdesign/blogger@main/assets/categoryPosts/js/categoryPosts.min.js','cPts-js',10,function(){for(var cId=document.querySelectorAll('[id^=categoryId]'),i=0;i<cId.length;++i){categoryPost({home:cId[i].getAttribute('data-home'),title:cId[i].getAttribute('data-title'),label:cId[i].getAttribute('data-label'),id:cId[i].id,time:'published',ldCl:'loaded',pstNm:6,thmbSize:600,snptLnth:120,pgn:true})};}); /*]]>*/</script>
  </b:includable>
</b:widget>


/* Category posts */ .ctgC{margin-bottom:20px} .ctgC.loaded{animation:opaC .5s 0s;-webkit-animation:opaC .5s 0s} .ctgC .blogPg >*{margin-left:auto;margin-right:auto} @keyframes opaC{0%{opacity:0}100%{opacity:1}} @-webkit-keyframes opaC{0%{opacity:0}100%{opacity:1}}
https://www.fineshopdesign.com/2022/06/make-categorised-posts-widget-for.html