Cara Paling Mudah Memasang Multi Recent Post By Label Di Halaman Statis

Pada tutorial kali ini mungkin saya akan sedikit berbagi tentang bagaimana cara memasang sebuah widget recent post, yang tentunya ini bisa kalian terapkan pada halaman statis blog kalian.

Tahukah kalian, bahwa widget ini yang nantinya akan menampilkan sederetan daftar - daftar atau jumlah postingan dari blog, yang bisa kalian tentukan berdasarkan dengan lebel yang dipilih.

Sedikit Tambahan,
Bilamana di dalam template kalian belum terjamah atau belum ada fontawesome, maka silahkan terapkan terlebih dahulu dan masukan linknya seperti di bawah ini. Ingat! Tempatkan sebelum kode </head>.

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

Oke, mungkin kita langsung saja untuk cara dan tahap penerapan widget multi recent post ini.
Pemasangan nya cukup mudah, simple dan tidak sulit. Bisa kalian perhatikan seperti berikut ini:

1. Yang pertama seperti biasa, login ke akun blogger kalian.

2. Jika sudah masuk, silahkan pergi ke menu halaman, buatlah sebuah halaman baru dan terapkan pada mode HTML bukan COMPOSE.

3. Selanjutnya kalian copy paste kode syntax nya, seperti yang terlihat di bawah ini:

<style scoped="scoped" type="text/css">
.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:#0095d8;color:#fff;text-shadow:1px 1px 1px #333;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02e";font-family:fontAwesome;font-size:17.5px;font-style:normal;background-color:rgba(0,0,0,0.2);color:#fff;text-shadow:1px 1px 1ox #333;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:#777;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#0095d8}
.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:tranparent;border:1px solid #eee;padding:1em 1.5em;position:relative;font-weight:600;color:#777;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#80cbc4;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f061";font-family:fontAwesome;font-size:16px;font-style:normal;background-color:#0095d8;color:#fff;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:rgba(0,0,0,0.2);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: "Nama Lebel",
            url: "Url Blog",
            tag: "Tag Label"
        },
        {
            name: "Nama Lebel",
            url: "Url Blog",
            tag: "Tag Lebel"
        }
],
    numPost: 3,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 50,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=6"
    }
};
</script>
<script src="https://raw.githack.com/seotechman/root/master/multi-feeds.js" type="text/javascript"></script>

Lihat pada kolom feedsUri disitu saya beri tanda, untuk kalian memasukan nama lebel, url blog kalian dan tag lebelnya.

Numpost: Yang akan menampilkan jumlah post.
ShowThumbnail: Jika bernilai true, berarti gambar post akan tampil. Sebaliknya, jika false berarti menyembunyikan gambar.
ShowSummary: True menampilkan ringkasan post.
SummaryLength: Menampilkan jumlah karakter ringkasan.
ThumbSize: Ukuran dari pada gambar post.
Text: "Selengkapnya" bisa kalian ubah sesuai keinginan kalian.
endParam: Menentukan jumlah post yang akan tampil berikutnya melalui tombol read more.

Untuk tahap yang terakhir, kalian langsung saja klik simpan dan lihat hasilnya.

Bagaimana menurut kalian, mudah kan? Selamat mencobanya dan semoga berhasil.

Demikianlah tutorial ini saya buat, cara memasang widget multi recent post by label di halaman statis blog.

Semoga bermanfaat dan terimakasih.

Wassalammuallaikum, wr, wb.

Source: arlinadzgn.com

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini