Cara Membuat Related Post Keren Seperti Blognya Kang Ismet [Tahap 5]

Cara Membuat Related Post atau Artikel Terkait Keren Seperti Blognya ( Ala ) Kang Ismet - Related Post / artikel terkait Versi Kang ismet saat ini sangat trend dan banyak di gunakan para blogger, Karena related post tersebut sangat keren dilengkapi dengan font awesome serta valid html dan responsive, pada mulanya related post ini sudah di share di blog kangismet, namun hasilnya masih terlalu lugu, maka dari itu kita perlu mengubah css nya agar meniru related post seperti kang ismet.

Cara Membuat Related Post Keren Ala Kang Ismet

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

Gimana mudah kan Cara Membuat Artikel Terkait Keren Ala Kang Ismet ,hehhehe pasti mudah karena sudah ada css dan htmlnya anda perlu memasang kedua kode tersebut untuk mendapatkan related post yang keren dan responsie ala kang ismet.

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Cara Membuat Related Post Keren Seperti Blognya Kang Ismet [Tahap 5]. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, Facabook LingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini.