You Are Reading

1

Tips n Trick | Cara Membuat Related Post / Artikel Terkait

Gie Morello Friday, April 22, 2011
Pada tutorial kali ini saya akan membuat tutorial tentang cara membuat related post. Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka. Tidak Seperti Wordpress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting.

Related Post akan menunjukkan posting mana saja yang mempunyai label yang sama. Lihat screenshot di bawah ini :


Cara Membuat Related Post di Blogspot :
    • Login ke akun blogger kamu, pilih blog yang ingin kamu edit, klik link Layout kemudian masuk ke Edit HTML.
    • Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
    • Download template anda untuk membackup jika terjadi error.
    • Masukkan kode script berikut sebelum tag </head> :
           <style>
          #related-posts {
          float : left;
          width : 540px;
          margin-top:20px;
          margin-left : 5px;
          margin-bottom:20px;
          font : 11px Verdana;
          margin-bottom:10px;
          }
          #related-posts .widget {
          list-style-type : none;
          margin : 5px 0 5px 0;
          padding : 0;
          }
          #related-posts .widget h2, #related-posts h2 {
          font-size : 20px;
          font-weight : normal;
          margin : 5px 7px 0;
          padding : 0 0 5px;
          }
          #related-posts a {
          text-decoration : none;
          }
          #related-posts a:hover {
          text-decoration : none;
          }
          #related-posts ul {
          border : medium none;
          margin : 10px;
          padding : 0;
          }
          #related-posts ul li {
          display : block;
          background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
          margin : 0;
          padding-top : 0;
          padding-right : 0;
          padding-bottom : 1px;
          padding-left : 21px;
          margin-bottom : 5px;
          line-height : 2em;
          border-bottom:1px dotted #cccccc;
          }
          #related-posts ul li:hover {
          background-color:#E2EBF8;
          border-top:1px dotted #cccccc;
          }
          </style>
          <script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>
      •  Kemudian cari kode berikut : 
        <data:post.body/>
        • Lalu letakan kode berikut sesudah  <data:post.body/> :
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div id='related-posts'>
          <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
          <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
          </script>
          Widget by <a href='http://anthneic.blogspot.com/' title='aNtH Blog'> aNtH Blog</a>
          </div></b:if>
          • Save template kamu. 
          kamu bisa mengganti tulisan yang warna merah dengan tulisan yang kamu inginkan. misal "Artikel Terkait".
            Selamat mencoba...
            Semoga bermanfaat, salam Blogger Indonesia...!! :D
            author

            Gie Morello

            Hey, what's up peoples! I'm Gie, nice to meet you... ^_^

            1 comments:

            Anonymous said...

            buy cheap phentermine phentermine 6 months - phentermine in mexico

            Post a Comment

            If you have any suggestions, please comment. Thanks ;)

            previous Next home
             
            Copyright 2010 GieShare™
            SELAMAT DATANG DI GieShare™ | SHARE BERBAGAI APLIKASI, MUSIK, GAME DAN TIPS N TRICK BLOGGER | Free Software - Free Music - Free Game - Tips n Trick Blogger | UNTUK KENYAMANAN MENDOWNLOAD GUNAKAN INTERNET DOWNLOAD MANAGER (IDM) ATAU DOWNLOAD ACCELERATOR PLUS (DAP) | TERIMA KASIH ATAS KUNJUNGANNYA --->