Nice Mood HD

Wednesday, 24 August 2022

I Need You Baby 2022

I Need You Baby 2022

nimoody August 24, 2022 Komentar

Sunday, 19 December 2021

Widget Popular Posts Judul dan Nomor

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, ".");
    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

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.

Related Post Thumbnail Image Fast Loading

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 == "item"'>
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>

3, Save Template!

Allysa December 19, 2021 Komentar

KumpulanTemplate Blog SEO Friendly Keren Premium Gratis Free Download

Template Template Blog Template SEO

Kumpulan Template Blog SEO Friendly Keren NEW, Premium Gratis, Free Download

MENGGUNAKAN template blog SEO Friendly dengan ciri utama Fast Loading dan Responsive sangat penting bagi blogging agar mudah dan cepat terindeks Google dan banyak pengunjung.

Template blog SEO Friendly banyak yang gratis. Bahkan, template blog SEO Friendly yang premium pun banyak yang digratiskan atau ada versi gratisnya. Bedanya, yang gratis tidak bisa menghapus credit link desainer, sedangkan premium bebas credit link footer.

Sebagai blogger yang beretika, kita tidak boleh menghapus credit link di template gratis. Kalau ingin bebas credit link, kita harus beli premium. Murah kok, kisaran 50 ribu hingga 200 ribu (paling mahal).

Berikut ini koleksi Free Premium Blogger Templates terbaru versi NiMoody. Template gratis kualitas premium atau template blog seo friendly versi gratisnya. Cocok untuk berbagai niche blog --berita, galeri, foto, video, catatan harian, majalah online, blog pribadi, dsb.