Popular Post Samehada untuk Blogger

Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun.



Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu Bt-Samehada Clone 2020 Template Blogger.


Popular Post Samehada untuk Blogger

  1. Pertama Buka Blogger > Tata letak > Add Widget Popular Post (Jika sudah ada tidak perlu).
  2. Kemudian, Buka Tema > Edit HTML
  3. Simpan CSS berikut kedalam <style>...</style> atau <b:skin>...</b:skin>
    /* Popular post blogger new style - arlethdesign */
    #PopularPosts1 .widget-content.popular-posts{margin:auto}
    #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7}
    #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden}
    #PopularPosts1 ul li{margin:auto;padding:10px 0}
    #PopularPosts1 ul li:first-child .item-thumbnail-only{position:absolute;top:0;left:0;right:0;bottom:0;min-height:152px;width:100%}
    #PopularPosts1 ul li:first-child .item-thumbnail img{width:100%;height:140px;padding:0}
    #PopularPosts1 ul li:first-child .item-thumbnail-only .item-title{position:absolute;bottom:17px;left:0;right:0;padding:10px 10px 10px 45px;background:linear-gradient(to bottom,rgba(0,0,0,.05) 6%,rgba(0,0,0,0.85) 70%);z-index:1;}
    #PopularPosts1 ul li .item-title a{color:#FFF;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:normal}
    #PopularPosts1 ul li:first-child .item-thumbnail .loaders{margin:-30px}
    #PopularPosts1 .item-thumbnail{position:relative;float:none;margin:auto}
    #PopularPosts1 ul li:nth-child(1n+2) .item-thumbnail{float:left;max-width:50px;max-height:50px;margin-right:10px;border-radius:3px;overflow:hidden;padding:1px;border:1px solid}
    #PopularPosts1 ul li:before{float:left;padding:5px 8px;border:1px solid;margin:12px 7px 0 0;border-radius:5px;font-size:12px}
    #PopularPosts1 ul li:nth-child(1n+2){background:#F44336;padding:10px;color:#FFF}
    #PopularPosts1 ul li:first-child{padding:0;position:relative;overflow:hidden;min-height:135px}
    #PopularPosts1 ul li:nth-child(1):before{content:'1';position:absolute;bottom:0;left:10px;z-index:2;border:none;background:#F44336;color:#FFF;padding:10px;border-radius:0;min-height:50px}
    #PopularPosts1 ul li:nth-child(1n+2) img{padding:0}
    #PopularPosts1 ul li .item-thumbnail img{z-index:1}
    #PopularPosts1 ul li:nth-child(2):before{content:'2'}
    #PopularPosts1 ul li:nth-child(3):before{content:'3'}
    #PopularPosts1 ul li:nth-child(4):before{content:'4'}
    #PopularPosts1 ul li:nth-child(5):before{content:'5'}

  4. Selanjutnya, letakkan javascript berikut diatas </body>
    <script defer='defer' type='text/javascript'>//<![CDATA[
    // Popular post resize thumbnail and get time post published - arlethdesign
    $(document).ready(function () {
        $('#PopularPosts1 ul li:first-child .item-thumbnail img').each(function () {
            $(this).attr('src', $(this).attr('src').replace('w80-h80-p-k-no-nu', 'w347-h140-c'))
        });
        $("#PopularPosts1 ul li:nth-child(1n+2)").each(function () {
            var c = $(this),
                b = c.find(".item-title a"),
                a = b.attr("href");
            $.ajax({
                url: a,
                type: "get",
                success: function (f) {
                    var d = $(f).find(".published").text();
                    b.parent().after('<div class="item-meta"><span class="item-date">' + d + '</span></div>")
                }
            })
        });
    });
    //]]></script>

  5. Jika sudah save tema dan lihat hasilnya.


Related Posts