Friday, 9 August 2013

Cara Membuat Related Post Keren di Blog

Cara Membuat Related Post Keren - Related post merupakan , post yang menghubungkan antara post satu dengan post yang lain sesuai dengan kategori atau label , nama lain dari related post adalah artikel terkait , biasanya banyak yang membuat related post dengan Link wittin , tapi menurut saya itu kurang baik . saya ini tidak sombong ya , artikel post yang saya bagikan kali ini dapat mendongkrak seo blog anda , mengapa demikian , karena sudah ada title link di setia gambar dan Link.

Cara Membuat Related Post Keren

Beriku Langkah-Langkah Cara Membuat Related Post Keren di Blog

1. Login atau masuk terlebih dahulu ke akun Blogger anda
2. Pilih menu " Template " => EDIT HTML
3. Cari kode  ]]></b:skin>  ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Letakan kode di bawah ini tepat di atas kode  ]]></b:skin>

.related-post{  margin:2em auto 0;   font:normal normal 12px/1.4 Arial,Sans-Serif}
.related-post h4{ font-size:150%;  margin:0 0 .5em;color:yellow}
.related-post a{color:orange}
.related-post a:hover{color:olive}
.related-post-style-6 li{position:relative}
.related-post-style-6 .related-post-item-thumbnail{ width:50px;  height:50px;  max-width:none;  max-height:none;  background-color:#000;  border:1px solid olive;  padding:0;  float:left;  margin:0 10px 0 0}
.related-post-style-6 .related-post-item-title{ display:block;  font-weight:bold}
.related-post-style-6 .related-post-item-summary{ display:block;  overflow:hidden;  font-size:11px}
.related-post-style-6 .related-post-item-tooltip{ position:absolute;  bottom:100%;  left:-10px;  z-index:999;  margin-bottom:10px;  border:1px solid olive;  background-color:#000;  padding:10px;  width:90%;  height:auto;  box-shadow:0 1px 3px rgba(0,0,0,.2);  display:none}
.related-post-style-6 .related-post-item-tooltip:before, 
.related-post-style-6 .related-post-item-tooltip:after{ content:"";  display:block;  width:0;  height:0;  border:10px solid transparent;  border-top-color:olive;  position:absolute;  top:100%;  left:21px}
.related-post-style-6 .related-post-item-tooltip:after{ border-top-color:#000;  border-width:9px;  margin-left:1px}
.related-post-style-6 li:hover .related-post-item-tooltip{display:block}

5. Kemudian Cari kode <div class='post-footer'>
6. Taruh kode di bawah ini tepat di atas kode <div class='post-footer'>

</b:if>
    <!-- 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;Baca Juga Yang Ini&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 300,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 50,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 6,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://fullblogdesign-demo.googlecode.com/svn/trunk/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
7. Simpan template dan lihat hasilnya.

Itulah artikel tentang langkah-langkah Cara Membuat Related Post Keren di Blog , semoga artikel ini bermanfaat bagi anda , demonya akan terlihat ketika anda sudah mencobanya .

** SELAMAT MENCOBA **

No comments:

Post a Comment