Cara Membuat Related Post

Kali Ini Saya Akan Share Cara Membuat Related Post Di bawah Postingan

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 */
   .related-post {margin:2em auto 0;font-size:15px;background:#fff;border-radius:4px;}
   .related-post h4 {font-size:14px;margin:0 0 .5em;background:#5295c6;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:#2B6EA6;
   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

Share this

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email