Cara Membuat Multi Recent Post By Label Di Laman Blog [Pengganti Sitemap Label]

Jika anda ingin mendaftarkan blog ke google adsense pasti pernah diminta untuk menyiakan sebaik-baiknya termasuk navigasi situs. Navigasi situs ini termasuk laman/url yang ada di navigasi. Mungkin anda pernah mendengar saran supaya tidak memasukkan url search label di menu navigasi ketika mendaftar google adsense. Hal tersebut dianggap Google Adsense membuat pengunjung sulit dalam menjelajahi blog anda.

Jadi anda harus mengarahkan url navigasi ke postingan. Namun hal ini juga masih menjadi misteri karena ada juga yang diterima GA walaupun menggunakan url yang langsung menuju label. Tapi untuk menghindari ditolak google adsense atau jika anda mendapatkan penolakan dengan alasan naigasi sulit maka anda bisa mengubah url naigasi anda.

Bagaimana solusinya? Anda bisa mengarahkan url di menu navigasi menuju laman/postingan secara langsung. Jika anda ingin mengarahkan pengunjung ke label tertentu anda bisa membuat sitemap berdasarkan label tertentu atau menggunakan membuat laman multi recent post berdasarkan label. Dengan memasang widget ini anda bisa mengatur jumlah recent post,label recent post,dan jumlah postingan di recent post.

Recent post ini bisa anda gunakan sebagai pengganti sitemap/daftar isi. Dengan recent post ini anda bisa memilih label apa yang ingin ditampilkan dilaman. Berbeda dengan daftar isi yang semua labelnya akan dimasukkan. Cocok untuk anda yang memiliki blog download untuk menampilkan kategori tertentu dengan mengatur nama-nama label yang dikehendaki.

Cara Memasang Multi Recent Post By Label Di Laman

Cara membuat recent post ini sangatlah mudah. Anda hanya perlu membuat laman baru ,laman baru ya bukan postingan baru supaya bisa selalu update. Ubah mode penulisan dari Compose menjadi HTML. Lalu salin saja kode yang akan saya bagikan dan pastekan/letakkan dilaman baru yang dibuat tadi. Berikut langkah-langkahnya.

Langkah 1

Silakan anda pasang font awesome dulu di blog anda. Jika sudah pernah masang font awesome lompati langkah ini. Baca : Cara Memasang Font Awesome Di Blog

Langkah 2

Buka blogger, pilih Laman → Laman Baru. Ubah mode penulisan dari Compose menjadi HTML

Langkah 3

Salin kode dibawah ini dan pastekan/letakkan dilaman baru yang dibuat. Jangan lupa untuk memberi judul laman.

<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:#2cba2c;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:#278d27;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="http://yourjavascript.com/19913175185/recentpost.js" type="text/javascript"></script>

• Ubah judul label dengan judul recent post anda.
• Ubah url blog dengan url blog anda
• Ubah nama tag sesuai dengan tag yang diinginakan

#NB. Untuk menambahkan/memperbanyak recent post cukup copas kode pemanggilnya yang ini 👇

        {
            name: "JUDUL LABEL",
            url: "URL-BLOG",
            tag: "NAMA LABEL"
        },

Keterangan tambahan :

• numPost: 4,show (Ubah angka 4 untuk mengatur jumlah post yang diinginkan tampil)
• Thumbnail: true, (Ganti true menjadi false jika ingin menghapus thumbnail di recent post

Jangan lupa untuk memplublikasikan laman. Cukup sekian tutorial yang bisa saya bagikan semoga bisa membantu dan bermanfaat.