Widget Popular Posts Judul dan Nomor

Widget Popular Posts Judul dan Nomor

Blogger Blogging Desain Blog

Widget Popular Posts Judul dan Nomor

Penggunaan Widget Popular Posts merupakan widget wajib yang terdapat pada blog. Tentunya karena Ia secara otomatis menampilkan posting yang paling banyak dikunjungi.

Biasanya widget ini terpasang di sidebar blog yang mana berfungsi sebagai Internal Link dan sekaligus sebagai navigasi bagi pengunjung untuk melihat postngan terbanyak yangdibaca pada sebuah blog.

Berikut ini adalah kode Widget Popular Posts dengan menggunakan judul dan Nomor Mirip seperti yang terdapat dalam situs-situs Berita, seperti Popular News media.com dan lainnya.

Daftar posting yang tampil hanya berupa judul dan angka. Mengapa Tidak ada thumbnailnya ? karena menampilkan popular post dengan gambar thumbnail menyebabkan loading blog menjadi berat, bahkan terkadang mengurangi seo blog.

Cara Memasang Widget Popular Posts Judul dan Nomor

1. Silahkan kalian msuk pada edit html yang terdapat pada menu Template > Edit HTML dan kemudian

2. Silahkan Copy kode berikut ini dan pastekantepat diatas kode ]]></b:skin> atau </style>

#PopularPosts1 ul{list-style-type:none;margin:0;padding: 0}
#PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out}
#PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;}
#PopularPosts1 ul li:first-child  {  border-top:none;  }
#PopularPosts1 ul li:last-child  {  border-bottom:none;  }
#PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important;  display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em}
#PopularPosts1 a:hover {color: #B80103 !important;  text-decoration: none;}

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul {  padding-left: 0;
  counter-reset: trackit;
 }
.popular-posts ul li { 
border-bottom: 1px solid #f0f0f0; 
list-style: none outside none !important; 
margin-left: 0 !important; 
overflow: hidden; 
padding: 10px 0 !important; 
transition: all 0.25s linear 0s;
counter-increment: trackit;
  }
.PopularPosts ul li:before{
content: counters(trackit, &quot;.&quot;);
    padding: 0 .1em 0 10px;
    font-size: 20px;
    font-weight: bold;
    color: #F66;
    float: left;
    margin-right: 10px;
}

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
}

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}

.PopularPosts .item-thumbnail, .PopularPosts .item-snippet { 
display: none!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}

3. Save Template!

Allysa December 19, 2021 Komentar

Related Post Thumbnail Image Fast Loading How To

Related Post Thumbnail Image Fast Loading How To

Blogger Blogging Desain Blog

Relate posts atau posting terkait adalah widget yang biasanya berada di bawah postingan. Widget ini berfungsi sebagai internal link dan navigasi menuju posting lainnya dalam blog.

Widget Related Post mempunyai peran penting dalam meningkatkan Pageviews terutama. Banyak sekali pilihan model widget related post, Mulaidari yang sederhana hingga menakjubkan. Salah satunya related post berupa judul  tulisan yang disertai gambar thumbnail.

Cara Membuat Related Posts dengan Gambar yang Fast Loading

1. KODE CSS

Pertama silahakan masuk pada edit html pada blogger kemudian Copas berikut ini di atas kode ]]></b:skin> atau </style>

/*Related Posts Widget with Image Thumbnail */
#related-posts h3{
    border-bottom:4px solid #333333;
    font-family:Oswald,arial,Georgia,serif;
    font-size:18px;
    padding-bottom: 5px;
    text-transform: uppercase;}
#related-posts ul {margin-bottom: 20px; padding: 10px 0; }
#related-posts ul li{
    float:left;
    height:150px;    margin:0 10px 10px 0;
    width:180px;    font-size: 15px;}
#related-posts img{padding:0 0;width:182px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts img:hover{opacity:0.7;}
#related-posts ul li:nth-child(3n+3){margin-right:0;}
#related-posts ul{margin:0;padding:0;list-style:none;}
/*Related Posts Widget with Image Thumbnail */

2. KOE HTML/JAVASCRIPT

Selanjutnya setelah css sudah ditempatkan silahkan Copas kode berikut ini di bawah kode  <data:post.body/> atau di bawah kode
<div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="tb911hborder"><span>Related Posts</span></h3></br>';rn='<h3 class="tb911hborder"><span>No related article available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpFGl-kJ3JpI2rZwPM5q2DIbxRQjxBbuVuahvAiuOpqehh9M9I0-7Q8uzaTSWa9v1Sc-tQYkN-sOL2JNhplAakMIjZVO_eqFR2dtf44nHozKoGQzkzMEjZSEwYhTM1RNxsPV692VXNQhw/s1600/BS+No+Image.gif '};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>

3, Save Template!

Allysa December 19, 2021 Komentar