Cara Membuat Related Post atau Artikel Terkait Sederhana di Blogger - Related Post atau kalau diterjemahkan dalam Bahasa Indonesia yaitu Artikel Terkait, merupakan artikel-artikel yang masih mempunyai kekerabatan dengan artikel yang sedang dibaca oleh pengunjung.
Bagi pengguna Blogger, fitur ini sudah tidak absurd lagi. Related Post sengaja dipasang untuk memudahkan navigasi pengunjung yang ingin membaca artikel yang bekerjasama dengan artikel yang sedang dibaca.
Dengan semakin banyak jumlah artikel yang dibaca, akan meningkatkan page view blog tersebut. Banyaknya page view pada posting blog merupakan poin yang baik bagi blog tersebut di mata mesin pencari.
Nah, kali ini blog akan membuatkan tutorial menciptakan related post atau artikel terkait di bawah postingan blog. Artikel yang masuk dalam kategori terkait atau related atau artikel yang bekerjasama yaitu artikel-artikel dalam satu label atau kategori blog.
Simak caranya di bawah ini.
1. Pada dashboard Blogger, masuk ke Edit HTML Template. Caranya pilih Template, lalu pilih Edit HTML.
2. Pasang CSS untuk mengatur tampilan sederhana Related Post-nya.
Letakkan sebelum isyarat ]]></b:skin>
Bagi pengguna Blogger, fitur ini sudah tidak absurd lagi. Related Post sengaja dipasang untuk memudahkan navigasi pengunjung yang ingin membaca artikel yang bekerjasama dengan artikel yang sedang dibaca.
Dengan semakin banyak jumlah artikel yang dibaca, akan meningkatkan page view blog tersebut. Banyaknya page view pada posting blog merupakan poin yang baik bagi blog tersebut di mata mesin pencari.
Membuat Related Post atau Artikel Terkait Sederhana di Blog
Nah, kali ini blog akan membuatkan tutorial menciptakan related post atau artikel terkait di bawah postingan blog. Artikel yang masuk dalam kategori terkait atau related atau artikel yang bekerjasama yaitu artikel-artikel dalam satu label atau kategori blog.
Simak caranya di bawah ini.
1. Pada dashboard Blogger, masuk ke Edit HTML Template. Caranya pilih Template, lalu pilih Edit HTML.
2. Pasang CSS untuk mengatur tampilan sederhana Related Post-nya.
Letakkan sebelum isyarat ]]></b:skin>
CSS
#related-post {
background:none;
width:100%;
margin:2px 0px;
}
.related-post h5 {
font-size:120%;
margin:0 0 5px;
padding:0;
font-weight:bold
}
.related-post li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJqPnGfTl9-FLeVnaJ4Vh75cVt2TZDyrBC1mPq-2RV4d1aSX-5P5KXSUs5CU1hkxCs-6h8R2LEzLZkJoxOi3eLQfeUaMycGGlQ6xsK3JiZgaMkl6w-PEynYtx0kfyqYmWx4hDep_1tG2A/s1600/arrow_state_grey_right.png") no-repeat 58px 3px;
color:#2c3e50;
text-indent:0;
line-height:1.6em;
margin:0;
padding:0 0 3px 75px
}
.related-post .widget {
margin:0;
padding:0
}
.related-post ul {
list-style:none;
margin:0;
padding:0;
}
background:none;
width:100%;
margin:2px 0px;
}
.related-post h5 {
font-size:120%;
margin:0 0 5px;
padding:0;
font-weight:bold
}
.related-post li {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJqPnGfTl9-FLeVnaJ4Vh75cVt2TZDyrBC1mPq-2RV4d1aSX-5P5KXSUs5CU1hkxCs-6h8R2LEzLZkJoxOi3eLQfeUaMycGGlQ6xsK3JiZgaMkl6w-PEynYtx0kfyqYmWx4hDep_1tG2A/s1600/arrow_state_grey_right.png") no-repeat 58px 3px;
color:#2c3e50;
text-indent:0;
line-height:1.6em;
margin:0;
padding:0 0 3px 75px
}
.related-post .widget {
margin:0;
padding:0
}
.related-post ul {
list-style:none;
margin:0;
padding:0;
}
3. Berikutnya yaitu memasang script yang akan memanggil Related Post.
Cari isyarat <data:post.body/> di dalam template. Saya menemukan 2 buah isyarat di template saya. Letakkan script di bawah isyarat yang pertama.
Patokan lain yaitu sebelum isyarat <div class='post-footer'> yang kurang lebih mempunyai arti bab bawah postingan.
Script
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h5>Artikel Terkait:</h5>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h5>Artikel Terkait:</h5>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->
Berikut sedikit klarifikasi mengenai teks berwarna merah.
- Artikel Terkait merupakan title atau judul, dapat diganti dengan Related Post atau yang lain.
- numPosts: 5, mengatakan jumlah link artikel terkait yang akan ditampilkan sebanyak 5 buah.
4. Jika sudah, Save Template. Cek salah satu postingan blog Anda.
Sekian tutorial Membuat Related Post atau Artikel Terkait Sederhana di Blog. Jika tidak berhasil silahkan sampaikan di kotak komentar di bawah, ya. Nanti kami bantu hingga bisa. Cara ini sudah dicoba dan sukses menyerupai yang aku terapkan pula di blog ini.
Sumber https://duarupa.blogspot.com/
widgetTitle: "<h5>Artikel Terkait:</h5>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->
Berikut sedikit klarifikasi mengenai teks berwarna merah.
4. Jika sudah, Save Template. Cek salah satu postingan blog Anda.
Sekian tutorial Membuat Related Post atau Artikel Terkait Sederhana di Blog. Jika tidak berhasil silahkan sampaikan di kotak komentar di bawah, ya. Nanti kami bantu hingga bisa. Cara ini sudah dicoba dan sukses menyerupai yang aku terapkan pula di blog ini.
Sumber https://duarupa.blogspot.com/
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->
Berikut sedikit klarifikasi mengenai teks berwarna merah.
- Artikel Terkait merupakan title atau judul, dapat diganti dengan Related Post atau yang lain.
- numPosts: 5, mengatakan jumlah link artikel terkait yang akan ditampilkan sebanyak 5 buah.
4. Jika sudah, Save Template. Cek salah satu postingan blog Anda.
Sekian tutorial Membuat Related Post atau Artikel Terkait Sederhana di Blog. Jika tidak berhasil silahkan sampaikan di kotak komentar di bawah, ya. Nanti kami bantu hingga bisa. Cara ini sudah dicoba dan sukses menyerupai yang aku terapkan pula di blog ini.
Sumber https://duarupa.blogspot.com/
Related Posts
- Cara Memasang Gambar Background Random Di Blogger Membuat tampilan blog semakin menarik itu penting, semoga pengunjung situs setia Anda tidak bosan ketika sedang membaca artikel Anda. Banyak seka ...
- Cara Menghilangkan Icon Obeng Dan Tang Atau Quick Edit Di Blogger Pengguna blogger mungkin sering melihat ada icon gambar obeng dan tang kecil di bab widget atau sidebar blog. Icon obeng dan tang ini merupakan t ...
- Cara Mengatasi Tidak Dapat Masuk Ke Akun Blogger Penyebab tidak dapat masuk ke akun blogger yaitu lantaran Anda masih memakai profile Google+ pada akun blogger Anda. Google telah mengirimkan pes ...
- Cara Menciptakan Hidangan Navigasi Blog Horizontal Sederhana Salah satu ciri blog yang disukai oleh pengunjung yakni mempunyai hidangan navigasi yang terang sehingga tidak membingungkan pengunjung dalam menelu ...
- Cara Mengatasi Tombol Reply Komentar Blog Tidak Dapat Di KlikBagi pengguna blogger mungkin Anda penasaran, tiba-tiba tombol reply atau tombol balas komentar di blog error tidak dapat di klik. Hal ini terjadi d ...
- Cara Menciptakan Notifikasi Untuk Pengguna Adblocker Adsense AdBlocker Adsense Cara Membuat Notifikasi Untuk Pengguna AdBlocker Adsense - Hallo Sahabat Kali ini aku akan menciptakan sebuah artikel tentang&n ...
