• 1. 6 Alasan Pengunjung Membenci Blog Anda
  • 2. Cara Menigkatkan Trafik Dan Pagerank Dengan Jutaan Pengunjung
  • 3. Cara Meningkatkan Pagerank Dan Jumlah Pengunjung Dengan Link Refferal
  • 4. 7 Cara Agar Website Muncul di Halaman Pertama Google
  • 5. Tips Gratis Meningkatkan Traffic Blog
  • 6. Blog paling di benci pengunjung dan google
  • 7. 8 Alasan Pengunjung Menyukai Blog Anda
  • 8. Cara Memasang Widget Live Traffic Feed Feedjit di Blogger
  • 9. Cara Memasang Widget Histats di Blogger
  • 10. 4 Cara Agar Blog Ramai Pengunjung
  • 11. Cara Membuat Blog Dofollow (Untuk blogger yang ingin meningkatkan posisi SERP blog mereka)
  • 12. Dofollow (backlink yang bisa membantu sebuah web/blog untuk meningkatkan pagerank)
  • 13. Membuat Tab View Sederhana Di Sidebar
  • 14. Cara membuat Kotak Tukaran Link / Link Excange di Blog
  • 15. 5 Keuntungan Membacklink Postingan Orang Lain
  • 16. Rahasia Blog Berbahasa Indonesia Go Internasional
  • 17. Rahasia Mendapatkan 100 Pengujung Blog Perhari
  • 18. Perbedaan Blog Dofollow dan Blog Nofollow
  • 19. Meratatengahkan Judul Pada Widget Blog
  • 20. Menyatukan Beberapa Widget Dalam Satu Tempat Dengan Efek Marquee
  • 21. Cara Membuat Kotak Kode HTML Dengan Warna Pada Postingan
  • 22. Daftar Adsense tanpa Blog
  • 23. Membuat Menu Navigasi Slide Horizontal Blogspot
  • 24. Cara Agar klik kanan disable atau NO COPAS
  • 25. Tips Mendongkrak Alexa Rank Blog Anda
  • 26. Tampilan Baru Blogger
  • 27. Cara Mengembalikan Permanen Link yang Asli
  • 28. Cara Menambahkan Judul Posting dibelakang Baca Selanjutnya(Read More) di Blogger
  • 29. Cara Membuat Gadget "Follow by Email" di Blogger
  • 30. Cara Membuat Kotak "Like" Facebook Di bawah Postingan Pada Blogspot
  • 31. Cara Membuat Related Posts Untuk Blogger

  • Thursday, October 13, 2011

    Cara Membuat Related Posts untuk Blogger


    Menampilkan link ke posting terkait bersama dengan posting yang sesuai akan membantu anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk melihat posting terkait ketika mereka disajikan berita atau artikel. Ini adalah salah satu media yang dihasilkan oleh blogger untuk setiap posting.
    Untuk menampilkan widget Related Posts ini, saya akan menggunakan gambar upload untuk posting yang menggunakan gambar blogger(dari editor posting) Related Posts Widget dengan Thumbnail untuk Blogger. Berikut adalah langkah-langkah selengkapnya untuk menginstal widget/script posting terkait untuk blogger :

    1. Pertama masuk ke dashboard blogger anda dan arahkan ke Layout >> Edit HTML dan centang kotak "Expand Template Widget"

    2. Sekarang cari kode </head> dengan menggunakan Ctrl + F dan copy paste kode berikut sebelum kode </head>
    <!--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: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, &#8220;Times New Roman&#8221;, 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 type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWcGNZy2UPNrPnrlXurSozq-p6ROeovcZuuERy4X60iyIACAAMu1cbJDDd6NvJS-Anj6gAcTadbpQIczA_d0xF_NkIstjgaIMxFn2h9i3YC5RQ9WmwgpzgCnYle3jMRBHSpsMJgB55Cw/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
    </head>
    3. Sekarang silahkan cari kode berikut :
    <div class='post-footer-line post-footer-line-1'>
    Dan jika anda tdk menemukan kode diatas maka anda bisa mencari kode berikut ini
    <p class='post-footer-line post-footer-line-1'>
    Setelah salah satu kode tsb ketemu, tempatkan potongan kode berikut ini setelah kode diatas
    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><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='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->
    4. Anda juga dapat menyesuaikan jumlah maksimum dari posting terkait yang ditampilkan dengan mengedit kode di baris ini :
    var maxresults=5;
    5. Untuk mengedit judul widget, anda dapat mengubah kode dibaris ini :
    var relatedpoststitle="Related Posts";
    6. Untuk mengubah thumbnail aslinya, anda dapat mengedit kode dibaris ini :
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWcGNZy2UPNrPnrlXurSozq-p6ROeovcZuuERy4X60iyIACAAMu1cbJDDd6NvJS-Anj6gAcTadbpQIczA_d0xF_NkIstjgaIMxFn2h9i3YC5RQ9WmwgpzgCnYle3jMRBHSpsMJgB55Cw/s400/noimage.png";
    7. Untuk mengubah warna baris pemisah, silahkan edit :
    var splittercolor="#d4eaf2";
    untuk mengubah warna yang lain maka anda harus mengubah/memodifikasi kode CSSnya. Saya harap anda mau memberikan saya saran tentang cara untuk meningkatkan widget ini.
    Tentang bagaimana untuk menampilkan posting terkait pada setiap halaman dan tidak hanya pada halaman posting, anda hanya perlu menghapus dua baris yang dimulai dengan <!-- remove --> dari kedua langkah no. 3 dan langkah no. 2 Seperti ini :
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    Dan
    <!-- remove --></b:if>

    9 komentar:

    chelonia said...

    Punya sy malah ilang gan, sebelumnya saya pasang di bawah postingan..
    napa bisa gitu ya gan??

    Berbagi Ilmu Pengetahuan said...

    @chelonia : ilang gmn gan?, tp saya liat agan sdh pasang artikel terkait yg ada d sidebar...oh ya apa langkah2nya sudah benar gan?

    febrialdi said...

    menarik gan

    Berbagi Ilmu Pengetahuan said...

    @febriadi : thanx's gan :D

    AreL said...

    Wahh... bagus neh,,
    sepertinya blogspot lebih mudah dimodif daripada cms lain...
    banyak tutorialnya...

    jadi pengen pakek blogspot...
    :D

    Shinobi Caemk said...

    keren jg nih...
    tapi, kayaknya bikin lambat loading blog dhe'... :)

    Berbagi Ilmu Pengetahuan said...

    @arel : benar sekali gan :D

    @admin : silahkan gan :)

    @shinobi : loading lambat ato ga itu tergantung dr templatenya gan :D

    RIsMa SMKDA said...

    Kalo "Related Post" yang tanpa thumnail ada ga? Baca Postingan yang ini ya... Persiapan Training Center IPM

    Alat Bantu Sex said...

    wahmantep gan ini yang ane cari2

    Post a Comment

    Blog ini sudah dofollow silakan komentar di bawah ini

    TUKAR LINK
    Silahkan bagi sobat blogger yang berminat tukar link dengan blog ini, tinggal copas aja kode yang ada di bawah ini. Untuk syarat2nya bisa dibaca di sini, bagi para sobat blogger yg ingin ngecek linknya silahkan lihat di bawah ini :



     

    Blog'e Cah Nganjuk Copyright © 2011 -- Template Powered by Blogger