Widget Keren Popular Posts Valid HTML5 - Erend Elektronik

Widget Keren Popular Posts Valid HTML5 - Kenapa harus valid HTML5 ? Karena kita akan membuat Widget Keren Popular Posts Dengan Thumbnail atau dengan gambar. Gambar yang ada pada widget Postingan Populer adalah salah-satu penyumbang error pada W3C. Insya Alloh Pada postingan yang akan datang kita bahas khusus tentang Error ini.

Untuk menambahkan Widget Keren Popular Posts Valid HTML5 ini tidaklah sulit. Hal pertama yang harus sobat lakukan adalah Login ke Akun Blogger sobat. Langkah selanjutnya klik Tata Letak, lalu Tambahkan Widget Baru. Setelah muncul, pilih Postingan Populer.

Konfigurasikan Postingan Populer

Widget Postingan Populer

- Langkah ke-2 adalah memasukan kode JavaScipt dibawah ini diatas kode </ Body>
Yang saya beri tanda cat merah kalau misalnya sudah ada kode JavaScipt-nya di template sobat silahkan dibuang saja.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

- Lalu langkah ke-3 adalah menyimpan kode Css dibawah untuk Style Popular Post diatas kode

 ]]></b:skin>

Silahkan pilih Code Css-nya sesuai selera sobat :

Kode Css Popular Posts Style 1

<style type='text/css'>
    .sidebar .PopularPosts ul {
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 10px;
    }
    .sidebar .PopularPosts .item-thumbnail {
    height: 190px;
    margin: 0;
    overflow: hidden;
    width: 100%;
    }
    .sidebar .PopularPosts .item-title {
    position: relative;
    }
    .sidebar .PopularPosts img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title a {
    color: #FFFFFF;
    font: 15px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px;
    position: absolute;
    right: 0;
    left: 0px;
    margin: 0px auto;
    text-align: center;
    text-decoration: none;
    top: 40px;
    width: 60%;
    height: 26px;
    overflow: hidden;
    z-index: 2;
    }
    .sidebar .PopularPosts .item-snippet {
    background: rgba(0, 0, 0, 0.35);
    border-top: 6px solid rgba(0, 0, 0, 0.1);
    border-bottom: 6px solid rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    padding: 65px 10px 10px;
    position: absolute;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    text-align: center;
    top: 35px;
    width: 60%;
    z-index: 1;
    }
    .sidebar .PopularPosts .item-content {
    position: relative;
    }
    </style>

Kode Css Popular Posts Style 2

<style type='text/css'>
    .sidebar .PopularPosts ul {
    counter-reset: popularcount;
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    width: 100%;
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
    position: relative;
    border: 0;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    height: 120px;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
    }
    .sidebar .PopularPosts .item-thumbnail::before {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 29px solid #fff;
    border-left: 29px solid transparent;
    border-right: 29px solid transparent;
    bottom: 0px;
    content: &quot;&quot;;
    height: 0;
    width: 0px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    z-index: 3;
    }
    .sidebar .PopularPosts .item-thumbnail:after {
    color: #000;
    content: counter(popularcount, decimal);
    counter-increment: popularcount;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    list-style-type: none;
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    z-index: 4;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    width: 100%;
    height: 120px;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title {
    font: 15px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    text-align: center;
    margin: 0px auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    padding: 10px 15px;
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    text-align: center;
    }
    </style>

Kode Css Popular Posts Style 3

<style type='text/css'>
    .sidebar .PopularPosts ul {
    padding: 0;
    margin: 0;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    overflow: hidden;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 130px;
    height: 130px;
    border-right: 5px solid #fff;
    margin: 0px 10px 0px 0px !important;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts ul li {
    float: left;
    margin-bottom: 5px;
    max-height: 130px;
    min-width: 250px;
    overflow: hidden;
    }
    .sidebar .PopularPosts ul li:first-child {
    background: #D9EDF7;
    }
    .sidebar .PopularPosts ul li:first-child + li{
    background: #F2DEDE;
    }
    .sidebar .PopularPosts ul li:first-child + li + li {
    background: #DFF0D8;
    }
    .sidebar .PopularPosts ul li:first-child + li + li + li {
    background: #FFEEBC;
    }
    .sidebar .PopularPosts ul li:first-child + li + li + li + li{
    background: #E0E0E0;
    }
    .sidebar .PopularPosts .item-title {
    font: 13px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    padding: 10px 5px 10px;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    padding-right: 5px;
    }
    .sidebar .PopularPosts .widget-content ul li {
    padding: 0px 5px 0px 0px!important;
    }
    </style>

Kode Css Popular Posts Style 4

<style type='text/css'>
    .sidebar .PopularPosts ul {
    padding: 0;
    }
    .sidebar .PopularPosts ul li:first-child{
    width: 100%;
    max-height: 100%;
    opacity: 0.9;
    }
    .sidebar .PopularPosts ul li:nth-child(even){
    margin-right: 2%;
    }
    .sidebar .PopularPosts ul li {
    box-sizing: border-box;
    position: relative;
    padding: 0px !important;
    width: 49%;
    max-height: 120px;
    opacity: 0.4;
    overflow:hidden;
    float: left;
    margin-bottom: 2%;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    }
    .sidebar .PopularPosts ul li:hover {
    opacity: 1;
    }
    .sidebar .PopularPosts .item-thumbnail {
    margin: 0;
    width: 100%;
    }
    .sidebar .PopularPosts ul li img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding:0;
    }
    .sidebar .PopularPosts .item-content:hover .item-title a,
    .sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
    visibility: visible;
    opacity: 1;
    }
    .sidebar .PopularPosts .item-title a {
    color: #fff;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
    text-decoration: none;
    position: absolute;
    text-align: center;
    font: 13px &#39;Oswald&#39;, sans-serif;
    left: 0;
    right: 0;
    bottom: 0%;
    padding: 100px 10px 10px;
    opacity: 0;
    visibility: hidden;
    }
    .sidebar .PopularPosts .item-snippet {
    display: none;
    }
    </style>

Kode Css Popular Posts Style 5

<style type='text/css'>
    .sidebar .PopularPosts ul {
    counter-reset: popularcount;
    margin: 0;
    padding: 0;
    }
    .sidebar .PopularPosts ul li {
    float: left;
    max-height: 130px;
    min-width: 250px;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail::after {
    color: rgba(255,255,255, 0.63);
    content: counter(popularcount, decimal);
    counter-increment: popularcount;
    font: 70px &#39;Oswald&#39;, sans-serif;
    list-style-type: none;
    position: absolute;
    left: 5px;
    top: -5px;
    z-index: 4;
    }
    .sidebar .PopularPosts .item-thumbnail::before {
    background: rgba(0, 0, 0, 0.3);
    bottom: 0px;
    content: &quot;&quot;;
    height: 100px;
    width: 100px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    position: absolute;
    z-index: 3;
    }
    .sidebar .PopularPosts .item-thumbnail a {
    clip: auto;
    display: block;
    height: auto;
    overflow: hidden;
    }
    .sidebar .PopularPosts .item-thumbnail {
    width: 100px;
    height: 100px;
    margin: 0px 10px 0px 0px !important;
    position: relative;
    }
    .sidebar .PopularPosts .item-thumbnail:hover:before {
    display: none;
    }
    .sidebar .PopularPosts .item-thumbnail img {
    position: relative;
    padding-right: 0px !important;
    height: 100%;
    width: 100%;
    object-fit: cover;
    }
    .sidebar .PopularPosts .item-title {
    font: 13px &#39;Oswald&#39;, sans-serif;
    text-transform: uppercase;
    padding: 0px 5px 10px;
    }
    .sidebar .PopularPosts .item-title a {
    color: #000;
    text-decoration: none;
    }
    .sidebar .PopularPosts .item-snippet {
    font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
    }
    .sidebar .PopularPosts .widget-content ul li {
    padding: 0px 5px 0px 0px !important;
    }
    .sidebar .PopularPosts .item-content {
    padding: 5px 0px;
    border-bottom: 1px dotted #dedede;
    overflow: hidden;
    height: 100px;
    position: relative;
    }
    </style>

Untuk saat ini saya memasang Widget Popular Post atau Widget Postingan Populer yang sangat sederhana, memakai judul Yang Banyak Dibaca. Dengan pertimbangan masih pilih-pilih posisi widget postingan populer.

Semoga Widget Keren Popular Posts Valid HTML5 ini bisa bermanfaat.
Happy Blogging !

Artikel Terkait