Cara Membuat Related Post Keren

1. Pertama kita pasang dulu script font awesomenya karena related post tersebut menggunakan font awesome

   <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

2. Kemudian Simpan kode CSS ini di atas ]]></b:skin> atau </style>
   

   .related-post{margin:2em auto 0;font-size:13px;background:#fff;border-radius:4px}
   .related-post h4{font-size:14px;margin:0 0 .5em;background:#9dcb63;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;border-radius:4px 4px 0 0;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}
   .related-post h4:before{content:"\f074";font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#8db857;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:13px 20px;position:absolute}
   ul.related-post-style-1{padding-left:0!important;margin-top:-12px}
   .related-post-style-1 li{list-style:none;padding:15px 20px;border-top:1px solid #eceef5}
   .related-post-style-1 li a{color:#79798d;text-decoration:none}
   .related-post-style-1 li a:hover{color:#33aea5;text-decoration:none}
   .related-post-style-1 li:before{content:"\f08e";font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:13px}

3. Setelah anda pasang kode diatas kemudian langkah selanjutnya adalah sobat pasang HTML ini di bawah kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )
   

   <!-- Related Post Widget Start -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='related-post' class='related-post'/>
     <script type='text/javascript'>
     var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
             &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
         </b:loop></b:if>];
     var relatedPostConfig = {
         homePage: &quot;<data:blog.homepageUrl/>&quot;,
         widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
         numPosts: 5,
         titleLength: &quot;auto&quot;,
         containerId: &quot;related-post&quot;,
         newTabLink: false,
         widgetStyle: 1,
         callBack: function() {}
     };
     </script>
     <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
   </b:if>
   <!-- Related Post Widget End -->

4. SImpan Template dan Lihat Hasilnya