Ads

Multi Tab Popular Post Blogger

Multi Tab Popular Post Blogger
Dagruel

Kali ini saya akan membagikan source code untuk membuat Multi Tab Popular post untuk Blogger.

CSS

Untuk css bisa di pasang di dalam template tepat nya di atas tag </style> atau ]]></b:skin>.

.mp_Item ul li,.mp_Title{border-bottom:1px solid #f1f1f1}.MultiPopular{background:#fff;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;margin-bottom:18px}.mp_Title{padding:8px 15px}.mp_Title h2{font-size:15px;color:#2f2f2f;line-height:20px;font-weight:500;margin:0}.mp_Tab ul{list-style:none;margin:10px;padding:6px;overflow:hidden;border-radius:3px;background:#f1f1f1;display:flex;flex-wrap:nowrap}.mp_Tab ul li{color:#2f2f2f;flex-grow:1;width:100%;margin:0 2.5px;text-align:center;cursor:pointer}.mp_Tab ul li:hover{color:#1062ce}.mp_Tab ul li.active{background:#1062ce;color:#fff;border-radius:3px}.mp_Item{overflow:hidden;display:none}.mp_Item.active{display:block}.mp_Item ul{padding:0;margin:0;list-style:none;counter-reset:section}.mp_Item ul li{padding:12px 15px;overflow:hidden;display:flex;flex-wrap:nowrap;justify-content:space-between}.mp_Item ul li div{position:relative}.mp_Item ul li .mp_Image{margin-left:45px;line-height:0;overflow:hidden;width:58px;max-height:72px;margin-right:10px;border-radius:3px}.mp_Item ul li .mp_Image img{width:100%;height:auto;object-fit:cover}.mp_Item ul li .mp_Data{flex:1}.mp_Item ul li .mp_Count:before{counter-increment:section;content:counter(section);width:25px;height:25px;text-align:center;line-height:25px;font-size:1em;color:#1062ce;position:absolute;top:30px;left:0;border:.5px solid #1062ce;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.mp_Item ul li .mp_Data h3{font-size:.98em;font-weight:500;margin:0 0 3px;line-height:1.4em}.mp_Item ul li .mp_Data h3 a,.mp_Item ul li .mp_Data span a{color:#2f2f2f;text-decoration:none}.mp_Item ul li .mp_Data h3 a:hover,.mp_Item ul li .mp_Data span a:hover{color:#1062ce}.mp_Item ul li .mp_Data span{white-space:unset;font-size:.9em;color:#2f2f2f;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.mp_Data span a:after:not(:last-child){content:','}.mp_score:before{content:'';display:inline-block;min-width:18px;min-height:18px;margin-right:2px;vertical-align:middle;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffd600'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px}

Javascript

Begitu pula untuk script nya, letakkan di atas tag </body>.

<script type="text/javascript">/*<![CDATA[*/
  document.querySelector(".mp_Tab ul li")&&(document.querySelectorAll(".mp_Tab ul li").forEach(e=>{e.addEventListener("click",function(){const e=this.getAttribute("id");"mp7"==e?(document.querySelector(".mp_File#PopularPosts1 .mp_Item").classList.add("active"),this.classList.add("active"),document.querySelectorAll(".mp_File:not(#PopularPosts1) .mp_Item, .mp_Tab ul li:not(#mp7)").forEach(e=>{e.classList.remove("active")})):"mp30"==e?(document.querySelector(".mp_File#PopularPosts2 .mp_Item").classList.add("active"),this.classList.add("active"),document.querySelectorAll(".mp_File:not(#PopularPosts2) .mp_Item, .mp_Tab ul li:not(#mp30)").forEach(e=>{e.classList.remove("active")})):(document.querySelector(".mp_File#PopularPosts3 .mp_Item").classList.add("active"),this.classList.add("active"),document.querySelectorAll(".mp_File:not(#PopularPosts3) .mp_Item, .mp_Tab ul li:not(#mp360)").forEach(e=>{e.classList.remove("active")}))})}),document.querySelector(".mp_Tab ul li").click());
/*]]>*/</script>

HTML

Di sini mungkin kalian akan kesulitan untuk menemukan tempat yang pas untuk meletakkan html nya.

Kalian harus mencari tag sidebar yang ada di dalam template kalian.

Contoh: template SeleSeven tag sidebar nya adalah <aside>. Jadi kalian hanya perlu meletakkan html nya tepat di bawah tag tersebut.

<div class="MultiPopular">
  <div class="mp_Title">
    <h2>Popular Post</h2>
  </div>
  <div class="mp_Tab">
    <ul>
      <li id="mp7">Mingguan</li>
      <li id="mp30">Bulanan</li>
      <li id="mp360">Semua</li>
    </ul>
  </div>
  <b:section id='popularTab' showaddelement='true'>
    <b:widget id='PopularPosts1' locked='false' title='' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
        <b:class name='mp_File' />
        <b:include name='mainPost' />
      </b:includable>
      <b:includable id='mainPost'>
        <div class='mp_Item'>
          <ul>
            <b:loop index='i' values='data:posts' var='post'>
              <b:include name='singlePost' />
            </b:loop>
          </ul>
        </div>
      </b:includable>
      <b:includable id='singlePost'>
        <li>
          <div class='mp_Count' />
          <b:include name='imagePost' />
          <b:include name='dataPost' />
        </li>
      </b:includable>
      <b:includable id='imagePost'>
        <div class='mp_Image'>
          <a expr:title='data:post.title' expr:href='data:post.url'><img loading='lazy' expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 65, "3:4") :  resizeImage("https://1.bp.blogspot.com/-q5XNfPSweVQ/X-Gpih2Z9rI/AAAAAAAAHyo/7VArMT1coTM4n792SDJ6lYMBxpChGjnvgCPcBGAsYHg/s0/dagruel-no-image.png", 65, "3:4")' expr:title='data:post.title' alt='data:post.title' /></a>
        </div>
      </b:includable>
      <b:includable id='dataPost'>
        <div class='mp_Data'>
          <h3><a expr:href='data:post.url' title='data:post.title'>
              <data:post.title />
            </a></h3>
          <span><b>Genre: </b><b:include name='genrePost'/></span>
          <b:include name='rating'/>
        </div>
      </b:includable>
      <b:includable id='genrePost'>
        <b:with value='["Action","Adventure","Cars","Comedy","Dementia","Demons","Drama","Ecchi","Fantasy","Game","Harem","Historical","Horror","Josei","Kids","Magic","Martial Arts","Mecha","Military","Music"]' var='genre1'>
          <b:with value='["Mystery","Parody","Police","Psychological","Romance","Samurai","School","Sci-Fi","Seinen","Shoujo","Shoujo Ai","Shounen","Shounen Ai","Slice of Life","Space","Sports","Super Power","Supernatural","Thriller","Vampire"]' var='genre2'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:label.name in data:genre1 or data:label.name in data:genre2'>
                <a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
              </b:if>
            </b:loop>
          </b:with>
        </b:with>
      </b:includable>
      <b:includable id='rating'>
        <b:loop values='data:post.labels limit 1' var='label'>
          <span class="mp_score"><data:label.name/></span>
        </b:loop>
      </b:includable>
    </b:widget>
    <b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
        <b:class name='mp_File' />
        <b:include name='mainPost' />
      </b:includable>
      <b:includable id='mainPost'>
        <div class='mp_Item'>
          <ul>
            <b:loop index='i' values='data:posts' var='post'>
              <b:include name='singlePost' />
            </b:loop>
          </ul>
        </div>
      </b:includable>
      <b:includable id='singlePost'>
        <li>
          <div class='mp_Count' />
          <b:include name='imagePost' />
          <b:include name='dataPost' />
        </li>
      </b:includable>
      <b:includable id='imagePost'>
        <div class='mp_Image'>
          <a expr:title='data:post.title' expr:href='data:post.url'><img loading='lazy' expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 65, "3:4") :  resizeImage("https://1.bp.blogspot.com/-q5XNfPSweVQ/X-Gpih2Z9rI/AAAAAAAAHyo/7VArMT1coTM4n792SDJ6lYMBxpChGjnvgCPcBGAsYHg/s0/dagruel-no-image.png", 65, "3:4")' expr:title='data:post.title' alt='data:post.title' /></a>
        </div>
      </b:includable>
      <b:includable id='dataPost'>
        <div class='mp_Data'>
          <h3><a expr:href='data:post.url' title='data:post.title'>
              <data:post.title />
            </a></h3>
          <span><b>Genre: </b><b:include name='genrePost'/></span>
          <b:include name='rating'/>
        </div>
      </b:includable>
      <b:includable id='genrePost'>
        <b:with value='["Action","Adventure","Cars","Comedy","Dementia","Demons","Drama","Ecchi","Fantasy","Game","Harem","Historical","Horror","Josei","Kids","Magic","Martial Arts","Mecha","Military","Music"]' var='genre1'>
          <b:with value='["Mystery","Parody","Police","Psychological","Romance","Samurai","School","Sci-Fi","Seinen","Shoujo","Shoujo Ai","Shounen","Shounen Ai","Slice of Life","Space","Sports","Super Power","Supernatural","Thriller","Vampire"]' var='genre2'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:label.name in data:genre1 or data:label.name in data:genre2'>
                <a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
              </b:if>
            </b:loop>
          </b:with>
        </b:with>
      </b:includable>
      <b:includable id='rating'>
        <b:loop values='data:post.labels limit 1' var='label'>
          <span class="mp_score"><data:label.name/></span>
        </b:loop>
      </b:includable>
    </b:widget>
    <b:widget id='PopularPosts3' locked='false' title='' type='PopularPosts' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
        <b:class name='mp_File' />
        <b:include name='mainPost' />
      </b:includable>
      <b:includable id='mainPost'>
        <div class='mp_Item'>
          <ul>
            <b:loop index='i' values='data:posts' var='post'>
              <b:include name='singlePost' />
            </b:loop>
          </ul>
        </div>
      </b:includable>
      <b:includable id='singlePost'>
        <li>
          <div class='mp_Count' />
          <b:include name='imagePost' />
          <b:include name='dataPost' />
        </li>
      </b:includable>
      <b:includable id='imagePost'>
        <div class='mp_Image'>
          <a expr:title='data:post.title' expr:href='data:post.url'><img loading='lazy' expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 65, "3:4") :  resizeImage("https://1.bp.blogspot.com/-q5XNfPSweVQ/X-Gpih2Z9rI/AAAAAAAAHyo/7VArMT1coTM4n792SDJ6lYMBxpChGjnvgCPcBGAsYHg/s0/dagruel-no-image.png", 65, "3:4")' expr:title='data:post.title' alt='data:post.title' /></a>
        </div>
      </b:includable>
      <b:includable id='dataPost'>
        <div class='mp_Data'>
          <h3><a expr:href='data:post.url' title='data:post.title'>
              <data:post.title />
            </a></h3>
          <span><b>Genre: </b><b:include name='genrePost'/></span>
          <b:include name='rating'/>
        </div>
      </b:includable>
      <b:includable id='genrePost'>
        <b:with value='["Action","Adventure","Cars","Comedy","Dementia","Demons","Drama","Ecchi","Fantasy","Game","Harem","Historical","Horror","Josei","Kids","Magic","Martial Arts","Mecha","Military","Music"]' var='genre1'>
          <b:with value='["Mystery","Parody","Police","Psychological","Romance","Samurai","School","Sci-Fi","Seinen","Shoujo","Shoujo Ai","Shounen","Shounen Ai","Slice of Life","Space","Sports","Super Power","Supernatural","Thriller","Vampire"]' var='genre2'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:label.name in data:genre1 or data:label.name in data:genre2'>
                <a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
              </b:if>
            </b:loop>
          </b:with>
        </b:with>
      </b:includable>
      <b:includable id='rating'>
        <b:loop values='data:post.labels limit 1' var='label'>
          <span class="mp_score"><data:label.name/></span>
        </b:loop>
      </b:includable>
    </b:widget>
  </b:section>
</div>

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>