Bagaimana Menambahkan RELATED POSTS pada Blogger dengan cara Mudah - Monic's Simply Kitchen

Thursday, January 30, 2014

Bagaimana Menambahkan RELATED POSTS pada Blogger dengan cara Mudah

Penambahan Related Posts pada Blogger
Related Posts

Bagaimana menambahkan RELATED POSTS pada Blogger dengan cara Mudah?
Berdasarkan pengalaman saya, cara mudah yang akan saya berikan langkahnya di bawah ini sangat mudah dimengerti jika kita mengikuti langkah-langkahnya dengan cermat.
Dan apakah related post itu sendiri? Related Post terdapat pada bagian bawah setiap postingan kita, dimana merupakan posting artikel dengan label/tag/kategori yang sama.
Related post bertujuan supaya pengunjung paling tidak mengetahui ada artikel terkait dengan artikel yang dibaca. Sehingga pengunjung akan betah untuk sedikit lebih lama berada di blog kita.

Pada blogger pengaturan related posts ini tidak secara otomatis sehingga kita harus menambah sendiri formatnya. Nah bagaimana menambahkannya pada blogger, ini bisa kita lakukan dengan cara mudah sesuai dengan langkah sebagai berikut :

  1. Tampilkan blogger dashboard, klik Template dan pilih Edit HTML
    Edit HTML Related Post
    Edit HTML
  2. Klik di bagian mana saja di dalam template dan tekan CTRL + F (seperti biasa kalau kita mau mencari kata) baca : Control F
  3. Akan muncul search box di bagian kanan atas dan ketikkan atau copy paste kode ini : </head>, kemudian tekan Enter, lalu akan muncul tampilan seperti di bawah ini dimana kode </head> akan di highlight
    Memasukkan kode </head>
  4. Copy paste kode di bawah ini persis sekali di atasnya  </head> 
  5. <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts{float:left;width:auto;}
    #related-posts a{border-right: 1px dotted #eaeaea;}
    #related-posts a:hover{background: #f2f2f2;}
    #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
    #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
    #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
    #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
    <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  6.  Note:
    - Untuk merubah lebar  dan tinggi thumbnails, modifkiasi nilai 100px yang berwarna merah
    - Untuk merubah warna dan ukuran judul related posts, ganti nilai yang berwarna biru  color:#222,   font-size:14px
    - Hapus  line berwarna violet jika menginginkan related posts muncul juga di homepage
  7. Dengan cara yang sama dengan mencari kode </head> di atas maka kemudian cari kode berikut ini <div class='post-footer'> , dimana kode ini akan muncul dua kali, kita harus memilih dan berhenti di kode yang kedua, lalu copy dan paste kode no. 8 di bawah ini persis di atas kode <div class='post-footer'>
    Kode  <div class='post-footer'>
  8. <!-- Related Posts with Thumbnails Code 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>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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=5&quot;' type='text/javascript'/></b:if></b:loop>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div class='clear'/>
    </b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGPIHYqp-2v_8ohtstClJnqwcYDCrpr3TNwtuWc5SqbM-HAb5Bk8rh8k3Du0urONws8cwwKwiP3EyAo3EMPpXBJIKAwmgcOPWciD45CknU647DUP6ykawBASM9HaKBaiLdIDHSxznw_9C/s1600/best+blogger+tips.png'/></a>
    </b:if></b:if><!-- Related Posts with Thumbnails Code End-->
  9.  Note:
    - Rubah nilai  5 dari max-results=5 dengan jumlah posts yang mau kita tampilkan
    - Jika kita menginginkan related posts muncul juga di homepage maka hapus lines berwarna violet
  10. Save template
Hmmm... setelah membaca langkah-langkah di atas, bagaimana? mudah kan cara menambahkan RELATED POSTS pada blogger.
Mudah-mudahan bermanfaat ya...

 

6 comments:

  1. Thanks buat info nya mbak monic.
    sekalian mau nanya, kalau cara buat pages seperti punya blog mbak monic yang "makanan anak" "home" "cake&cookies" , cara nya bagaimana ya?

    ReplyDelete
    Replies
    1. he he he tuh dia...
      aku lupa eh mba lyn...secara dulu itu sepertinya buatnya langsung di dashboard blogger di menu page, nah mikirnya cara ini paling mudah tanpa harus edit html segala
      eh begitu lihat lagi tampilan page di dashboard kok beda ya sekarang? harus belajar lagi neh..
      nah kalau mau membuat menu horizontal seperti di blog ini, dengan edit kode html atau javscript, coba lihat di google, cari cara membuat horizontal menu di blogspot (jika gunakan blogspot) atau di wordpress jika gunakan wordpress
      nah nanti aku cari tahu dulu ya cara mudahnya..nanti kalau sudah ketemu aku posting yak...
      he he he maaf ya...belum bisa kasih tahu sekarang...

      Delete
  2. mbak monic makasi tutorialnya. boleh tahu blog mbak monic menggunakan template apa ya. simple dan elegant

    ReplyDelete
    Replies
    1. hai mba Kurniati... sama-sama mba..

      ini template dari blogger juga mba, designed by VeeThemes.com

      Delete
  3. Wah luar biasa, terima kasih banyak min. ini yang saya cari. Saya membeli templete SEO SIMPEL dari salah satu pembuat templete terkenal. Teryata nda ada artikel terkaitnya. Padahal di demo ada, saat saya tanya, tak urung direspon. Setelah dicari ke sana kemari dan akhirnya saya temukan tutorial di blog ini. Setelah dipraktikan ternayata work di blog saya yang bertemakan sepak bola. Terima kasih ya admin.

    Tulisannya bermanfaat,

    ReplyDelete
    Replies
    1. Malam pak Guru Norang, maaf saya baru publish dan balas komentar pak guru sekarang
      wah saya senang sekali kalau tulisan di blog saya ini bisa bermanfaat, terima kasih ya untuk waktu pak guru menuliskan komentar di sini

      Delete

Terima kasih sudah berkunjung ke sini dan mau meninggalkan komentar manis atau pertanyaan di sini. Komentar promosi produk dan jualan tidak akan saya tampilkan ya, begitu juga dengan nama URL yang saru. Dan untuk yang berkomentar anonymous mohon cantumkan nama ya biar saya tahu yang berkomentar siapa kan enak jadi bisa panggil mas atau mba. Terima kasih.
EmoticonEmoticon