√ Memasang Multi Recent Posts di Halaman Statis - Berita Seputar Teknologi
News Update
Loading...

Memasang Multi Recent Posts di Halaman Statis

komisi 5 dollar dari safelinku
Memasang Multi Recent Posts di Halaman Statis

Kali ini Tech.Kuamangmedia.com akan berbagi widget yang cukup menarik yaitu Memasang Multi Recent Posts di Halaman Statis yang akan menampilkan deretan daftar postingan terbaru dari blog yang bisa sobat tentukan berdasarkan label terpilih.

Widget ini Saya dapat dari blog www.dte.web.id yang telah sedikit dimodifikasi biar lebih keren... Ok langsung saja ke cara penerapannya :

Sebelum menerapkan widget ini ada baiknya di template yang sobat gunakan sudah terdapat link fontawesome, jika belum ada silakan terapkan link di bawah ini sebelum tag penutup </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Penerapannya pun sangat mudah, sobat hanya perlu menambahkan kode di bawah ini pada post halaman statis (Tab HTML)

Memasang Multi Recent Posts di Halaman Statis

<style scoped="scoped" type="text/css">
/* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400}
.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}
@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>
<div id="feed-list-container">
</div>
<div style="clear:both;">
</div>
<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "JUDUL LABEL",
url: "URL-BLOG",
tag: "NAMA LABEL"
},
{
name: "JUDUL LABEL",
url: "URL-BLOG",
tag: "NAMA LABEL"
},
{
name: "JUDUL LABEL",
url: "URL-BLOG",
tag: "NAMA LABEL"
}
],
numPost: 4,
showThumbnail: true,
showSummary: false,
summaryLength: 0,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "Selengkapnya",
endParam: "?max-results=5"
}
};
</script>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/multi-feed.js" type="text/javascript"></script>


2. Simpan laman dan lihat hasilnya.


Keterangan :

  • numPost : Menentukan jumlah posting yang ingin ditampilkan
  • showThumbnail : Ganti nilai menjadi false untuk menyembunyikan gambar
  • showSummary : Ganti nilai menjadi true untuk menampilkan ringkasan postingan
  • summaryLength : Menentukan jumlah karakter pada ringkasan
  • thumbSize : Menunjukkan ukuran thumbnail yang ditampilkan
  • text : Ganti tulisan "Selengkapnya"
  • endParam : Menentukan jumlah post yang akan ditampilkan saat menekan tombol read more.

Untuk keterangan lebih lanjut silakan kunjungi halaman source.

Sekian mengenai cara Memasang Multi Recent Posts di Halaman Statis, semoga bermanfaat.

Source : https://www.dte.web.id/2013/04/widget-blogger-untuk-menampilkan-daftar.html


--PASTE KODE DI SINI--

Share with your friends

1 komentar

  1. 6 Cara Bikin Wajah Bersih, Mulus dan Cerah

    Kulit yang bersih mencerminkan tubuh yang sehat. Mendapat kulit yang bersih pun bukan hal sulit. Yang perlu kamu lakukan adalah melakukan sedikit perawatan.

    Berikut ini beberapa cara mencapatkan kulit cerah, bersih dan mulus dikutip dari laman Times of India.

    Mencuci wajah dua kali sehari
    Mulailah dengan mencuci wajahmu dua kali sehari. Satu kali di pagi hari dan satu kali di malam hari.

    [img]https://thumb.viva.co.id/media/frontend/thumbs3/2021/07/22/60f9933c1dd58-ilustrasi-wanita-skincare-kecantikan_665_374.jpg[/img]

    Gunakan cleanser
    Pilihlah cleanser atau pembersih wajah yang ringan yang bisa menghilangkan minyak berlebih dan kotoran.

    Pelembab
    Gunakan pelembab yang baik dan jangan aplikasikan losion tubuh ke wajah dengan alasan apapun.

    BalasHapus

Tips memasukan gambar pada kolom komentar dengan cara menambahkan kode dibawah ini.

[img]URL Gambar Anda[/img]

Notification
Terima kasih telah berkunjung di situs kami.
Done