Share

25 Juli 2017

Widget Keren Popular Posts Valid HTML5

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.

Widget Keren Popular Posts

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

Pots

Widget Postingan Populer

Popular

- 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
Style1

<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

Style2

<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

Style3

<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

Style4

<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

Style5

<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.

Widget Popular Posts

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

    Choose :
  • OR
  • To comment
Tidak ada komentar:
Write komentar

Terima kasih atas minat Anda terhadap Kotak Komentar ini.
Berkomentarlah sesuai topik.
Dilarang Keras menautkan Link !!!

Terbaru
Back to top