Showing posts with label related. Show all posts
Showing posts with label related. Show all posts
Wednesday, December 14, 2016
Cara Memasang Related Post Pada Blog Website
Cara Memasang Related Post Pada Blog Website
Memasang Related Post pada halaman postingan kita memang banyak yang menganggapnya sepele, bahkan tidak menggunakannya sama sekali. Mereka tidak tahu manfaat apa yang bisa didapatkan dengan pemasangan Related Post ini di bawah postingan kita. Padahal manfaatnya sangat berguna sekali terutama berkaitan dengan SEO. Menurut pakar SEO sendiri, Related Post adalah suatu cara untuk membuat konten di blog gampang terindeks di google.
Related Post adalah deretan link judul artikel yang memiliki kaitan isi konten atau yang dikelompokkan berdasarkan kategori pada label dipostingan kita. Sehingga, saat seseorang sedang membaca sebuah artikel, lalu dia merasa tidak puas dengan artikel yang dibacanya tersebut, kemungkinan terbesar dia akan tertarik dengan link artikel yang ada pada Related Post. Sehingga dia akan mengklik link tersebut, dan tentunya hal ini menambah keuntungan bagi blog kita, dimana akan semakin bertambahnya page view pada artikel-artikel blog kita.
Pengalamanku Dalam Memasang Related Post
Sebetulnya sudah sejak lama sekali aku ingin memasang Related Post ini di blog Penghuni 60 ku, akan tetapi selalu saja gagal dan gagal lagi. Padahal sudah banyak sekali kode script yang aku coba, sampai-sampai, aku mengalami titik buntu, gimana caranya memasang Related Post ini. Namun, hal itu tidak mematahkan semangatku untuk terus mencoba, meskipun aku sudah merasa mumet untuk mengutak-atik templateku, akan tetapi, jujur, aku sangat menginginkan sekali, penampakan Related Post ini muncul di blogku.
Akhirnya, aku memutuskan untuk terus mencari berbagai macam kode Related Post yang banyak aku temukan di blog teman-teman yang mempostingnya. Dan Alhamdulillah, akhirnya aku menemukan kode script yang cocok dengan templateku ini. Alhasil, kalian bisa lihat sendiri kan, penampakan Related Postku di bawah postingan ini. Keren kan?
Lalu bagaimana cara membuatnya?
Bagi sobat Penghuni 60 yang ingin memasang Related Post ini di bawah postingan, silahkan ikuti langkah-langkahnya berikut ini:
Cara Memasang Related Post Di Bawah Postingan:
- Silahkan Login terlebih dahulu ke akun blogger kalian
- Masuklah ke menu Template – Edit HTML
- Sebelumnya, Back Up terlebih dulu template kalian, untuk menjaga jikalau pemasangan kode script ini malah mengacaukan template kalian. (Cara memback upnya cukup kalian copy- pakai CTRL+A biar cepat, setelah itu paste pada Notepad dan simpan)
- Kemudian, carilah kode </head> - pakai CTRL+F untuk mempermudah
- Jika sudah ketemu, silahkan copy code script dibawah ini lalu paste tepat di atas kode </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == alternate) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write(<ul>);
while (i < relatedTitles.length && i < 20) {
document.write(<li><a href=" + relatedUrls[r] + "> +
relatedTitles[r] + </a></li>);
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write(</ul>);}
//]]>
</script>
- Jika sudah, carilah kode <data:post.body/>
Perhatian :"biasanya akan ada beberapa kode <data:post.body/> di template anda, maka dari itu anda coba gunakan kode <data:post.body/> satu persatu untuk mem paste kode di bawah ini, ingat, hanya salah satu saja. - Copy paste kode di bawah ini tepat di bawah kode <data:post.body/>
<b:if cond=data:post.labels>
<b:loop values=data:post.labels var=label>
<b:if cond=data:blog.pageType == "item">
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5" type=text/javascript/>
</b:if>
</b:loop>
</b:if>
<b:if cond=data:blog.pageType == "item">
<h4>Related Post</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();</script>
</b:if>
- Setelah selesai, silahkan kalian simpan, dan cobalah preview blog kalian. Jika masih belum muncul Related Post nya, berarti kemungkinannya kalian salah penempatan kode, cobalah cari mana kode <data:post.body/> yang tepat.
- Selesai
Tips: Umumnya akan ada 3 kode <data:post.body/>. Biasanya kode yang tepat adalah kode yang ada diurutan ketiga dari atas. Namun, jika blog kalian memakai Fungsi Read more, maka tempatkan kode tersebut tepat setelah kode Readmore.
Nah, itulah cara memasang Related Post di bawah postingan blog kita. Hasilnya akan terlihat seperti di bawah postingan ini.
Semoga tips ini bermanfaat... ^_^
Available link for download
Wednesday, November 9, 2016
Cara memasang widget Related Post artikel terkait dengan thumbnail di blog
Cara memasang widget Related Post artikel terkait dengan thumbnail di blog
Sobat blogger bentar lagi kan lebaran saya punya tutorial baru nih tentang Widget "Artikel terkait" apa sih artikel terkait?.Artikel terkait adalah Daftar link yang berhubungan dengan sebuah artikel yang kita baca.Kalo masih bingung langsung aja praktekin,tapi sebelum itu kalian wajib follow blog saya dulu setelah itu kita mulai:
1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian centangExpand Template Widget
6.Kemudian cari kode </head> (agar lebih mudah mencarinya gunakan f3)
7.Letakkan kode berikut di atas kode </head>
7.Letakkan kode berikut di atas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond=data:blog.pageType == "item">
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js type=text/javascript/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<b:if cond=data:blog.pageType == "item">
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=https://sites.google.com/site/webmiftah/js/relatedpostthumbnail.js type=text/javascript/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
8.Kemudian cari kode <div class=post-footer-line post-footer-line-1> kalo gak ketemu jangan panik bisa car kode seperti ini <p class=post-footer-line post-footer-line-1>
9.Kalo udah ketemu salah satu letakkan kode dibawah ini di bawah kode yang anda barusan temukan:
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != "true">
</b:if>
<b:if cond=data:blog.pageType == "item">
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6" type=text/javascript/></b:if></b:loop>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=clear:both/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
<b:if cond=data:blog.pageType == "item">
<div id=related-posts>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != "true">
</b:if>
<b:if cond=data:blog.pageType == "item">
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6" type=text/javascript/></b:if></b:loop>
<script type=text/javascript>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=clear:both/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
10.Tinggal di Save deh
KETERANGAN:
-Ganti tulisan yang berwarna MERAH dengan kode wana sesuai kesukaanmu
-Ganti tulisan yang berwarna KUNING sesuai jumlah artikel terkait yang ingin anda munculkan
-Ganti tulisan yang berwarna CYAN dengan Tulisan yang ingin anda tampilkan (judul) di atas related post
Available link for download
Subscribe to:
Comments (Atom)