Cara Membuat Recent Posts Keren Dengan Nomor pada Blog
February 28, 2019
Recent Post merupakan widget pada blog yang berfungsi untuk menampilkan artikel terbaru yang biasanya dipasang pada sidebar blog. Dengan adanya Recent Post, pengunjung dapat mengatahui adanya postingan terbaru, sehingga memudahkan pengunjung blog untuk membaca artikel terbaru.
Pada widget Resent Post ini dibuat dengan tampilan seresponsive mungkin dengan tampilan dan kombinasi warna pada penomerannya, membuat Recent Post ini terlihat cantik pada blog anda.
Fungsi lain dari widget Recent Post ini juga dapat meningkatkan jumlah pengunjung pada blog anda. Untuk menambahkan Recent Post pada blog sangat mudah, saya akan memberikan langkah-langkah berikut bagaimana untuk dapat membuat Recent Post pada blog anda.
Cara Membuat Recent Posts Keren Dengan Nomor pada Blog
1. Login ke akun blogger
2. Selanjutnya pilih Tema > Edit HTML
3. Copy kode CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>
4. Letakkan kode dibawah ini </body> atau <!--</body>--></body>
5. Simpan tema, selanjutnya pergi ke Tata Letak > Tambah Gadget > HTML/JavaScript lalu tambahkan kode berikut.
6. Langkah terakhir, simpan dan lihat hasilnya.
Pada widget Resent Post ini dibuat dengan tampilan seresponsive mungkin dengan tampilan dan kombinasi warna pada penomerannya, membuat Recent Post ini terlihat cantik pada blog anda.
Fungsi lain dari widget Recent Post ini juga dapat meningkatkan jumlah pengunjung pada blog anda. Untuk menambahkan Recent Post pada blog sangat mudah, saya akan memberikan langkah-langkah berikut bagaimana untuk dapat membuat Recent Post pada blog anda.
Cara Membuat Recent Posts Keren Dengan Nomor pada Blog
1. Login ke akun blogger
2. Selanjutnya pilih Tema > Edit HTML
3. Copy kode CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>
/* Recent Posts www.carayunik.com */
#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}
#recent-articles a:link, #recent-articles a:visited {font-weight: normal}
#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}
#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}
#recent-articles ul li:last-child{border:none}
#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}
#recent-articles ul li:hover{background-color:#f5f5f5;}
#recent-articles ul li:hover:before{background-color:#24699A;}
#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}
#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}4. Letakkan kode dibawah ini </body> atau <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>5. Simpan tema, selanjutnya pergi ke Tata Letak > Tambah Gadget > HTML/JavaScript lalu tambahkan kode berikut.
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>6. Langkah terakhir, simpan dan lihat hasilnya.
Demikian yang bisa saya sampaikan tentang Cara Membuat Recent Posts Keren Dengan Nomor pada Blog. Apabila teman-teman kurang paham tentang artikel yang saya bagikan, silahkan berkomentar atau hubungi saya melalui form yang sudah saya sediakan. Sekian dari saya, Terima Kasih :(
