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.

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

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>

Note:

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 kali ini, Cara Memasang Widget Multi Recent Post Di Halaman Statis Blog.

Semoga bermanfaat dan terimakasih.

Wassalammuallaikum, wr, wb.

Source: arlinadzgn.com

Blogger
Disqus
Select your comment system

1 comment

Nice artikel kk...sgt bermanfaat 😊

Balas