Cara Membuat Related Posts Blogger Blogspot 2014

Cara Membuat Related Posts Blogger Blogspot 2014

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:
Cara Membuat Related Posts Blogger Blogspot 2014

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;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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[]

________________________________

menghapus navbar blogger blogspot

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)

navbar blogger

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]

Untuk langganan artikel Alkhoirot Net via Email gratis, klik di sini!

34 comments:

  1. cara membuat related post dengan gambar

    ReplyDelete
  2. cara membuat related post bergambar di blogspot

    ReplyDelete
  3. membuat related artikel blogspot gambar

    ReplyDelete
  4. membuat related artikel dengan gambar

    ReplyDelete
  5. related pos dengan gambar

    ReplyDelete
  6. salam ziarah,macam mana nak buat entry bergerak macam kt atas...

    ReplyDelete
  7. @MOBODICK: pakai template blogger yg memakai slider. lihat di premiumbloggertemplates.com

    ReplyDelete
  8. thanks atas infonya, salam kenal
    http://caramembuatyangakumau.blogspot.com

    ReplyDelete
  9. kalo buat di taruh di widget ada gak??

    ReplyDelete
  10. Kalo langsung html widgetnya ada ga gan? btw, nice share :)

    ReplyDelete
  11. wah kok gk ada code yang <div clas="post-footer-line-1 bos apa bisa pakai code yang lain ya gan ............? makasih sebelumnya atas infonya

    ReplyDelete
  12. Assalamu'alaikum.....
    www.eset9.blogspot.com/

    ReplyDelete
  13. makasih gan, tutor blognya bagus-bagus. klo sempet mampir sini

    ReplyDelete
  14. info yang menarik untuk personalisasi tampilan blog kita

    ReplyDelete
  15. kebanyakan semua blog ngasih tips buat bikin related post atau tulisan terkait nya sama. baik yang tulisan inggris atau yang bahasa indonesia. sekarang saya nemu kesulitan, karena pas dicari kode di skrip html template yang saya pake di http://deraldes.blogspot.com, kode gak ada. gimana dong?

    ReplyDelete
  16. @Delayung : udah si expand belum mas skrip htmlnya?karena banyak blogger yang saya tahu sering melewatkan expand html untuk edit templatenya. Salam.

    ReplyDelete
  17. Kode script no.6 itu diletakan dibawah kode no.5 yang 1, 2, apa dua duanya?

    ReplyDelete
  18. Oke makasih tutorialnya , mas

    ReplyDelete
  19. Makasih banyak untuk infonya yang sangat membantu.

    ReplyDelete
  20. Makasih mas tutorialnya..

    ini baru pas scriptnya..

    ReplyDelete
  21. mkasih mas..atas infonya...

    ReplyDelete
  22. Makasih ya mas...
    Ternyata masanya mudah banget.... Sy udah lama otak atik ternya cuma begitu... hihi

    ReplyDelete
  23. mas ,, mau nanya ,, bagaimana mengatur related post nya jadi vertikal ??? dan jgn lupa kunbal nya di anprat.blogspot.com

    ReplyDelete
  24. Terimakasih Akhirnya blog saya ada related postnya
    Tutorial Blog nya mantap deh

    ReplyDelete
  25. Terima kasih. Ini yg sesuai dgn template aq...

    ReplyDelete
  26. work gan .. trims.. mampir gan ke sni http://nukeshopbekasi.blogspot.com

    ReplyDelete

Kirim konsultasi Agama ke: alkhoirot@gmail.com Cara Konsultasi lihat di sini!