Cara Membuat Widget Recent Post di Blog

Malestea
Malestea
Cara Membuat Widget Recent Post di Blog

Recent post atau artikel terbaru biasanya selalu dipasang untuk memberikan informasi kepada para pengunjung lewat widget atau sidebar agar mereka mengetahui ada artikel baru di situs tersebut tanpa perlu cek ke homepage.

Recent post yang saya bagikan ini simple dan tidak membuat kinerja blog lambat jadi cukup bagus buat sobat yang tetap ingin menjaga kecepatan loading untuk situs nya.

Cara Membuat Widget Recent Post di Blog


Pertama sobat buka Blog > klik HTML > klik Edit HTML

Kedua tambahkan kode dibawah ini tepat diatas kode </head>
<style type='text/css'>
/*<![CDATA[*/
ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none}
ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;box-shadow:2px 2px 3px rgba(0,0,0,.05)}
ul#recent-posts li img{width:90px;height:70px;margin:0 10px 0 0;float:left}
ul#recent-posts li .title_post{padding:10px!important;line-height:1;position:relative;margin-left:90px}
ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none}
ul#recent-posts li a:hover{color:#8e8efa}
ul#recent-posts:after{content:"";display:block;clear:both}
/*]]>*/
</style>
Selanjutnya tambahkan kode berikut tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
var homePage = window.location.origin,numPosts = 5;
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/CodingT4/[email protected]/Js/artikelterbaru.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Kemudian Simpan tema

Terakhir silakan tambahkan kode berikut di sidebar melalui tata letak/layout pada gadget HTML/Javascript
<ul id="recent-posts"></ul>

Bagi sobat yang ingin melihat bagaimana hasil dari Recent Post tersebut, sobat bisa klik tombol berikut


Perhatikan kode yang ditandai, ubah angkanya sesuai kebutuhan.

Comments : Cara Membuat Widget Recent Post di Blog