Membuat Related Post Ala Kang Ismet

Membuat Related Post Ala Kang Ismet - Hai sobat. Sekarang saya akan mengeshare nih, cara membuat related post ala Kang Ismet.Untuk demonya anda bisa melihat di sini.Related post ini menggunakan font awesome yang akan mempercantik blog anda.

Related Post

BERIKUT ADALAH TUTORIALNYA :

1. Buka Blogger.com
2. Pilih Blog Anda
3. Pilih Template lalu klik "Edit HTML"
4. Cari kode  ]]></b:skin> lalu letakkan kode di bawah ini tepat diatas kode ]]></b:skin>

.post-thumbnail-area {
  width: 180px;
  height: 130px;
  float:left;
  overflow:hidden;
}

.post-thumbnail {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:11px 0 0 36px;
  border:none;
  outline:none;
  position:static;
background:#e15c5c
}

.post-thumbnail img{
border:0;

padding:0;

width:100px;

height:100px;

border-radius:100px;

border:6px solid #e17676}

.post-thumbnail img:hover{

border:6px solid #e59393

}

._post-body-area {
  padding:20px 5px 20px 13px;
  margin-left:180px; /* Thumbnail width */
  font-size:13px;
}

.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; }

5. Cari Kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>

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

6. Cari Kode <data:post.body/> letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<!-- 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;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 src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js' type='text/javascript'/> </b:if> <!-- Related Post Widget End --> 

7. Simpan Template

Itu saja dari saya, semoga bermanfaat dan terima kasih.

NOTE

Kode <data:post.body/> memiliki kode lebih dari satu. Jadi cobalah satu persatu jika tidak bisa.

Kunjungi http://dasan-blog.blogspot.com