Widget Popular Posts Samehadaku

Widget Popular Post seperti Samehadaku, kali saya akan membagikan widget yang dicustom sedemikian rupa seperti web Samehadaku.

Tutorial ini untuk Blogger bukan WordPress, langsung saja simak cara nya dibawah sobat.

widget-popular-post-samehadaku-blogger
Dagruel

Pemasangan Widget

Untuk memasang widget nya kalian bisa buka "Blogger" > "Tema" > "Edit HTML".

Step 1

Salin Kode HTML dibawah.

<b:widget cond='data:view.isHomepage' id='PopularPosts2' locked='false' title='Popular' type='PopularPosts' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
          <b:widget-setting name='showThumbnails'>true</b:widget-setting>
          <b:widget-setting name='showSnippets'>false</b:widget-setting>
          <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
        </b:widget-settings>
        <b:includable id='widget-title'>
          <b:comment>Don&#39;t show.</b:comment>
        </b:includable>
        <b:includable id='main' var='this'>
          <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
            <b:include name='super.main'/>
          </b:with>
        </b:includable>
        <b:includable id='snippetedPosts'>
          <div class='Dagruel-Slider'>
            <div class="Slider-Title">
              <h3>
                Popular Post
                <div class="nav_items_modules">
                  <a class="btn prevf">
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M14,7L9,12L14,17V7Z"/>
                    </svg>
                  </a>
                  <a class="btn nextf">
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M10,17L15,12L10,7V17Z"/>
                    </svg>
                  </a>
                </div>
              </h3>
            </div>
            <div id="SlideFile" class="load_slider flashit" style="display: block;">Loading.....</div>
            <div class="relat widget-post slidfer SlideFile">
              <b:loop values='data:posts' var='post'>
                <b:include name='snippetedPostContent' data='post'/>
              </b:loop>
            </div>
          </div>
        </b:includable>
        <b:includable id='snippetedPostContent'>
          <div class='AniPost'>
            <div class='AniPosx'>
              <b:if cond='data:this.postDisplay.showFeaturedImage'>
                <a class="AniLink" expr:href='data:post.url' expr:title='data:post.title'>
                  <div class="content-thumb">
                    <div class="ply"></div>
                    <img
                      class='lazy'
                      expr:title='data:post.title'
                      expr:alt='data:post.title'
                      expr:src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 480, "4:3") :  resizeImage("https://1.bp.blogspot.com/-msLPy2sUgRs/XsaanLh7hdI/AAAAAAAAIjQ/sMfL_VE-30MWP5PI9at8dzKtZW0igRHDgCK4BGAsYHg/s1600/igniplex-noimage.png", 480, "4:3")'/>
                    <div class="type TV">
                      <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels where (l => l.name in ["TV","Movie","OVA"]) limit 1' var='label'>
                          <data:label.name/>
                        </b:loop>
                        <b:else/>
                        Uncategorized
                      </b:if>
                    </div>
                    <div class="score">
                      <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels where (l => l.name in ["Remaja", "Dewasa", "Anak"]) limit 1' var='label'>
                          <data:label.name/>
                        </b:loop>
                        <b:else/>
                        None
                      </b:if>
                    </div>
                  </div>
                  <div class='data'>
                    <div class='title'>
                      <data:post.title/>
                    </div>
                    <div class='type'>
                      <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels where (l => l.name in ["Ongoing","Completed","Batch"]) limit 1' var='label'>
                          <data:label.name/>
                        </b:loop>
                        <b:else/>
                        Uncategorized
                      </b:if>
                    </div>
                    <b:if cond='data:this.postDisplay.showSnippet'>
                      <b:comment>Don&#39;t show.</b:comment>
                    </b:if>
                  </div>
                </a>
              </b:if>
            </div>
          </div>
        </b:includable>
      </b:widget>

Dan Tempelkan tepat diatas Kode.

<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' visible='true'>

Step 2

Tempelkan CSS dan script dibawah tepat diatas tag </head>.

<link href='https://cdn.statically.io/gh/dagruel/External/main/owl.carousel.min.css' rel='stylesheet'/>
<style>
.Dagruel-Slider{margin-bottom:25px;width:100%;background:#fff;border-radius:2px;padding-bottom:0;box-shadow:1px 1px 15px 0 rgba(0,0,0,.06)}.Dagruel-Slider .Slider-Title{border:0;padding:9px 19px;margin-bottom:10px;border-bottom:1px solid #f1f1f1}.Slider-Title h3{float:none;color:#0c70de;font-size:19px;font-weight:500;margin:0}.nav_items_modules{float:right;display:inline-block}a.btn.nextf,a.btn.prevf{padding:0;border:none;color:#222d34;cursor:pointer}a.btn.prevf{border:none!important}a.btn.nextf:hover,a.btn.prevf:hover{color:#0d79e5}.flashit{-webkit-animation:flash linear .5s infinite;animation:flash linear .5s infinite}@-webkit-keyframes flash{0%,to{opacity:1}50%{opacity:.1}}@keyframes flash{0%,to{opacity:1}50%{opacity:.1}}.load_slider{padding:60px;text-align:center;background:#f8f9fb;margin-top:13px;margin-bottom:13px}.relat{overflow:hidden;display:block;position:relative;padding:0 10px;margin:0}.slidfer{margin:0;display:none}.slidfer .AniPost{width:100%}.owl-carousel{display:block!important}.AniPost{float:left;width:20%;position:relative}.AniPost .AniPosx{position:relative;overflow:hidden;margin:10px;transition:all .2s;-webkit-transition:all .2s;-moz-transition:all .2s}a.AniLink{text-decoration:none}.AniPost .AniPosx .content-thumb{padding:140% 0 0;position:relative;overflow:hidden;background:#f1f1f1}.AniPost .AniPosx .content-thumb .ply,.AniPost .AniPosx .content-thumb img{width:100%;height:100%;top:0;position:absolute}.AniPost .AniPosx .content-thumb .ply{z-index:1;background:rgba(0,0,0,.67);visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s linear}.AniPost .AniPosx .content-thumb .ply:before,.score:before{content:'';background-repeat:no-repeat;background-position:center}.AniPost .AniPosx .content-thumb .ply:before{position:absolute;top:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z' fill='%23fff'/%3E%3C/svg%3E")}.AniPost .AniPosx:hover .content-thumb .ply{visibility:visible;opacity:1}.AniPost .AniPosx:hover .content-thumb .ply:before{opacity:15}.AniPost .AniPosx:hover .content-thumb .score,.AniPost .AniPosx:hover .content-thumb .type{display:none}.AniPost .AniPosx .content-thumb .ply svg{color:#fff;font-size:32px;top:44%;position:absolute;left:44%}.AniPost .AniPosx .content-thumb .status{position:absolute;top:13px;left:-22px;line-height:normal;color:#fff;text-transform:uppercase;font-weight:700;z-index:1;padding:2px 18px;font-size:9px;background:#de3b3b;box-shadow:0 2px 2px rgba(0,0,0,.5);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.AniPost .AniPosx .content-thumb .type{position:absolute;left:0;z-index:1;padding:5px;font-size:11px;font-weight:600;color:#fff;background:#29b6f6;top:7px;text-transform:uppercase}.AniPost .AniPosx .content-thumb .score{position:absolute;right:0;z-index:1;padding:5px;font-size:11px;font-weight:500;bottom:0;background:rgba(0,0,0,.8);color:rgba(255,255,255,.9)}.score:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,7H13A2,2 0 0,1 15,9V11C15,11.84 14.5,12.55 13.76,12.85L15,17H13L11.8,13H11V17H9V7M11,9V11H13V9H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,16.41 7.58,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='%2329b6f6'/%3E%3C/svg%3E");display:inline-block;background-size:20px;min-width:20px;min-height:20px;margin-right:2px;vertical-align:middle}.slidfer .AniPost .AniPosx .title{font-size:14px;overflow:hidden;bottom:0;line-height:21px;width:100%;color:#222d34;padding-top:8px;font-weight:500;display:block;text-overflow:ellipsis;white-space:nowrap}.slidfer .AniPost .AniPosx .data{font-size:13px;color:#666;height:auto}.AniPost .AniPosx .data .type{margin-top:3px;color:#757a7d}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Step 3

Tempelkan script dibawah diatas tag </body>

<script>
//<![CDATA[
$(document).ready(function(){$(".SlideFile").owlCarousel({loop:!0,dots:!1,autoplay:!1,pagination:!1,responsive:{0:{items:2,nav:!1},600:{items:4,nav:!1},800:{items:4,nav:!1},1e3:{items:5,nav:!1}}});var e=$(".SlideFile");e.owlCarousel(),$(".nextf").click(function(){e.trigger("next.owl.carousel")}),$(".prevf").click(function(){e.trigger("prev.owl.carousel",[300])})}),$.each(["#SlideFile"],function(e,n){1<=$(n).length&&($("#content").ready(function(){$(n).css("display","none")}),$(".content").load(function(){$(n).css("display","none")}))});
//]]>
</script>
    <script src='https://cdn.statically.io/gh/dagruel/External/main/owl.carousel.min.js'/>

Jika 3 Step diatas sudah dilakukan coba cek "Blogger" kalian apakah berhasil. saya berhasil melakukan cara diatas dengan menggunakan "Template Contempo Bawaan Blogger".

Terima kasih mau berkunjung keblog saya, jika ada yang ingin ditanyakan silahkan berkomentar dibawah.

https://demo.eastheme.com/eastplay/

Comments