Tips Cara Membuat Related Posts Blogger Blogspot 2015

Cara memasang widget/gadget Related Posts, Artikel Tulisan Terkait, You Might Want to Read This, Mungkin Anda perlu Membaca Ini dll baik dengan gambar thumbnail atau tidak di setiap akhir artikel blog di Blogger Blogspot. Tulisan ini diupdate pada 18 Agustus 2014. Penting: Direkomendasikan memakai Related Post dengan Gambar.

DAFTAR ISI

1. Tujuan Related Posts Artikel Terkait
1. Cara Buat Related Post Tanpa Gambar
2. Cara Buat Related Post dengan Gambar Thumbnail
3. Fungsi Related Posts
2. Cara Pertama: Menonaktifkan Navbar Blogger
1. Cara Kedua: Menghilangkan Navbar Blogspot
2. Cara Ketiga: Menyembunyikan Navbar Blogspot
3. Apakah Menghilangkan Navbar Melanggar TOS?

Related Posts atau Artikel Terkait adalah plugin atau widget yang akan menampilkan tulisan-tulisan yang berhubungan dengan tulisan yang sedang dibaca. 

TUJUAN ADA RELATED POSTS ARTIKEL TERKAIT DI BLOGGER BLOGSPOT

1. Agar pengunjung betah berlama-lama di blog kita sehingga meningkatkan pageviews atau halaman yang dilihat oleh setiap pengunjung.
2. Agar artikel lama dapat diindex lagi oleh Google sehingga menambah SEO (search engine optimization).

Perhatian: Ada dua tutorial di bawah. Pertama, Related Post biasa (tanpa gambar). Kedua, Related Post dengan Gambar Thumbnail (gambar kecil). Pilih salah satu sesuai selera Anda. 

Alkhoirot.net sendiri memakai cara pertama yaitu Related Posts yang biasa (tanpa gambar).


CARA MEMBUAT RELATED POSTS ARTIKEL TERKAIT DI BLOGGER BLOGSPOT

Cara bikin Related Posts biasa atau tanpa gambar adalah sebagai berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit 
2. Klik Layout / Tata Letak 
3. Klik Tambahkan Gadget -> klik gadget "HTML/JavaScript Tambahkan"
4. Letakkan kode berikut: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>

5. Klik Simpan.
6. Klik Simpan Setelan.

Selesai. Coba lihat salah satu halaman artikel Anda. Akan muncul Related Post di bagian paling bawah.


CARA MEMBUAT RELATED POSTS DENGAN GAMBAR THUMBNAIL DI BLOGGER BLOGSPOT

Maksud Related Post dengan Gambar adalah Related Post yang mengandung gambar di atas setiap artikel. Contohnya, lihat gambar berikut:

Ikuti panduan singkat berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit 
2. Klik Template -> Edit HTML 
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut di atasnya kode nomor 3:

<!--Related Posts with thumbnails Scripts and Styles Start-->
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Cari kode </head>
5. Letakkan kode berikut tepat di atasnya kode nomor 4:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbPNqyNikNRtbAVFpOKuVwrrR2dy3s5FnLZdvmdyUoZqNlcfaYb6wdvcqJTzNeFV2r1ggfoCPOs3alK-W6GVF4LyJgPfQOoUzyZHiOuA4feL8RQ0hd7fNDy_aF0-ZYOQTyY1jGhtzzmIC/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type="text/javascript" src="http://yourjavascript.com/233021883/www.mybloggerblog.com.js"></script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Cari kode berikut <p class='post-footer-line post-footer-line-1'>
7. Taruh kode berikut di bawahnya atau setelah kode nomor 6:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='www.mybloggerblog.com'></a>
</b:if></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8. Klik Simpan Template. Selesai.


MANFAAT RELATED POSTS

5 MANFAAT RELATED POSTS DI BLOG

Setidaknya ada 5 (lima) fungsi dari Related Posts yang dipasang di blog atau website:

1. Pengunjung akan tinggal lebih lama di situs kita. Setelah pengunjung membaca sebuah artikel maka mereka mungkin akan puas dengan posting yang dibacanya atau kurang puas. Apalagi mereka suka, maka mungkin mereka ingin terus membaca. Related post akan merekomendasikan sejumlah artikel yang serupa dengan yang sedang dibaca sehingga pembaca akan menikmati membaca lagi. Semakin lama tamu menggunakan waktu di situs anda, maka semakin mungkin mereka akan kembali karena mereka sekarang merasa punya komitmen pada website anda. 

2. Memunculkan kembali artikel lama. Saat orang melihat pada sebuah blog atau website, mereka biasanya akan melihat pada artikel terbaru. Sekalipun menu arsip ditampilkan, orang tidak akan mengklik artikel yang ditulis beberapa tahun lalu walaupun artikel lama ini kaya informasi. Related Post berguna untuk menampilkan lagi artikel lama agar supaya semua artikel di website, tidak hanya posting yang terbaru, dapat dengan mudah tampil di depan pembaca.

3. Zona panas. Studi menunjukkan bahwa perhatian pembaca berada di bagian tengah halaman yakni lokasi artikel. Dengan menempatkan Related Post widget langsung di bawah artikel, maka perhatian pembaca akan terfukus padanya. Ini juga cara yang bagus untuk mengintegrasikan iklan pada widget tersebut kalau memungkinkan.

4. Tukar link. Kebanyakan blogger memiliki blogroll atau patner tukar link atau dengan situs yang serupa. Widget Related Posts dapat mengelink pada situs lain yang biasanya tidak dipedulikan oleh pembaca atau sulit terlihat.

5. Rating klik yang lebih tinggi. Apabila ada link random di situs anda, maka pembaca mungkin tidak akan mengklik link itu. Akan tetapi apabila mereka melihat sesuatu yang menarik dan relevan dengan artikel yang sedang mereka baca, maka peluang lebih terbuka bagi pengunjung untuk mengklik link tersebut[]

________________________________

Cara menghapus menghilangkan menyembunyikan navbar blogger. Navbar (navigation bar) Blogger adalah kotak navigasi yang terdapat pada template bawaan dari Blogger Blogspot yang berada di bagian atas template. Di navbar tersebut ada kotak pencarian atau search box khusus blog dan menu-menu lain. Navbar di Blogspot dapat dihilangkan disembunyikan dengan mudah dan tidak melanggar TOS (terms of services) Blogger. Ada tiga cara untuk menonaktifkannya. Cara pertama adalah yang terbaru.


CARA PERTAMA: MENNONAKTIFKAN NAVBAR BLOGGER 

Ini cara terbaru yang dapat dilakukan langsung melakui widget Navbar di Layout / Tataletak. Caranya sbb:

1. Login/masuk ke blogger.com -> klik blog yang akan diedit.
2. Klik Tata Letak/Layout 
3. Klik Edit pada widget Navbar.
4. Pilih/beri tanda tik pada Off
5. Simpan. Selesai.


CARA KEDUA: MENGHILANGKAN NAVBAR BLOGGER 

Kalau Anda ingin menghilangkan atau menyembunyikan navbar tersebut, caranya cukup mudah sebagai berikut:

1. Login/masuk ke blogger.com -> klik blog yang akan diedit.
2. Klik Template -> Edit HTML -> Lanjutkan
3. Cari kode ]]> </b:skin> 
4. Letakkan kode berikut persis di atasnya kode no.3

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

5. Klik Simpan Template. Selesai. (lihat gambar)

CARA KETIGA: MENYEMBUNYIKAN NAVBAR BLOGSPOT 

Cara di bawah dapat juga dipakai untuk menghilangkan navbar di bagian atas blogspot dengan template asli.

1. Login/masuk ke blogger.com -> klik blog yang akan diedit.
2. Klik Template -> Edit HTML -> Lanjutkan
3. Cari kode <body>
4. Taruh kode berikut di bawahnya kode no.3

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

APAKAH MEMBUANG NAVBAR MELANGGAR ATURAN TOS?

Ini pertanyaan penting dan banyak terjadi perbedaan pendapat. Tapi yang saya tahu, menghilangkan navbar tampaknya tidak melanggar TOS blogger karena hampir semua blogger senior melakukannya dan tidak terjadi apa-apa pada blog mereka. Termasuk blog resminya Google yang memakai blogspot tidak memakai navbar. Untuk lebih jelasnya, silahkan lihat isi persyaratan layanan blogger (BLOGGER TOS) di bawah:

2. Penggunaan yang Layak. Anda setuju bahwa Anda bertanggung jawab sendiri terhadap penggunakan Layanan, untuk posting apapun yang Anda kirimkan, dan segala macam konsekuensi atas posting tersebut. Anda setuju bahwa Anda akan menggunakan Layanan sesuai dengan semua hukum dan aturan yang berlaku baik lokal, wilayah, nasional, dan internasional, termasuk juga hukum mengenai transimi data teknis yang diekspor dari nagara Anda dan semua hukum ekspor Amerika Serikat. Anda setuju untuk menerima Kebijakan Konten Blogger (http://www.blogger.com/content.g) dan peraturan dan batasan yang ada di dalamnya. ....

5. Konten Layanan. Google tidak bertanggung jawab terhadap konten pihak ketiga (termasuk, tapi tidak terbatas pada, virus, atau yang semacamnya), dan Google juga tidak memiliki kewajiban untuk memonitor konten pihak ketiga tersebut. Google memiliki hak kapapnpun untuk menghapus atau menolak mendistribusikan konten apapun pada Layanan, seperti konten yang melanggar persyaratan Layanan. Google juga memiliki hak untuk mengakses, membaca, mempertahankan, dan memberikan informasi jika dipercaya bahwa hal tersebut perlu ...

8. Publisitas. Penggunaan merk Google, merk dagang Google, merk layanan Google, logo, nama domain, dan fitur brans lainnya ("Fitur Brand"), termasuk "Blogger", "Blogger.com", "Blogspot", dan "Blogspot.com", harus sesuai dengan Perjanjian ini dan panduan Fitur Brand Google yang terbaru, dan konten yang dikandung atau dirujuk di dalamnya, yang dapat dilihat pada URL berikut: http://www.google.com/permissions/guidelines.html (atau URL lain yang diberikan Google di waktu lain).[V]