Related Post Ala Blog Dian Anarchyta

Rifki Andrean    7/20/2014    Blogging    2 comments   

----YOU ADS---

----YOU ADS---

Related Post Ala Blog Dian Anarchyta

Related post atau artikel terkait yang dimiliki Blog Dian Anarchyta banyak sekali peminatnya. Blog yang mengcloning Kang Ismet ini sudah marak di publikasikan, banyak sekali template yang menyerupainya.
Disini saya akan share tentang bagaimana cara memasang Related Post Ala Blog Dian Anarchyta.

Cara Memasang Related Post Ala Blog Dian Anarchyta

Pertama anda harus masuk ke blogger dan edit template.
Cari code ]]></b:skin> , setelah ketemu pastekan kode dibawah ini tepat diatas ]]></b:skin>

/* Related Posts
----------------------------------------------- */
.related-post { margin : 6px auto 0; font-size : 13px; background : #fff; border-radius : 4px; color : #999; }
.related-post h4 { font-size : 1.3em; margin : 0 0 0.5em; background : #1abc9c; color : #fff; font-weight : normal; padding : 8px 0; border-radius : 4px 4px 0 0; position : relative; font-family : "Oswald", Verdana, Sans-Serif; text-transform : uppercase; } 
.related-post h4:before { content : "\f02c"; font-family : FontAwesome; font-size : 22px; font-style : normal; font-weight : normal; padding : 8px 16px; margin : 0 10px 0 0; border-radius : 4px 0 0; } 
.related-post-style-2, .related-post-style-2 li { margin : 0; padding : 0; list-style : none; } 
.related-post-style-2 li { padding : 10px; border-top : 1px solid #ecf0f1; overflow : hidden; } .related-post-style-2 li:first-child { border-top : none; } 
.related-post-style-2 .related-post-item-thumbnail { width : 50px; height : 50px; padding : 0; float : left; margin : 2px 10px 0 0; border-radius : 4px; } 
.related-post-style-2 .related-post-item-title { font-family : "Oswald", Verdana, Sans-Serif; font-size : 110%; } .related-post-style-2 .related-post-item-summary { color : #555; display : block; overflow : hidden; } 
.related-post-style-2 .related-post-item-more { display : none; } 

Setelah dimasukan kode diatas, sekarang memasukan Javascriptnya. Dan cari kode </article> dan pastekan kode dibawah ini tepat dibawah </article>

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='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;Mungkin Artikel Ini Juga Membantu :&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 120,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 50,
      noImage: &quot;https://lh4.googleusercontent.com/-tczaYUfVXk0/AAAAAAAAAAI/AAAAAAAAAAA/6gWVaMuQ648/photo.jpg&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
</script>
<script src='http://yourjavascript.com/2214513241/related-post.js' type='text/javascript'/>
<div class='clear'/>
</b:if>
<!-- Related Post Widget End -->

Setelah itu Save template dan lihat hasilnya. :D

Catatan : Apabila anda mencari </article> tidak ada kode tersebut, anda bisa memasukan tepat di footer post.

----YOU ADS---

----YOU ADS---