Kali Ini Saya Akan Share Cara Membuat Related Post Di bawah Postingan
- 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'/>
- 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;}
- 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 == "item"'> <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'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4>Artikel Terkait:</h4>", numPosts: 5, titleLength: "auto", containerId: "related-post", 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 -->
- SImpan Template dan Lihat Hasilnya
Sumber : http://rahmatcreations.blogspot.com/2014/10/cara-membuat-related-post.html#ixzz3FFQPXgkr