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.

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 **

Share This Article

Facebook +Google Twitter Digg Technorati Reddit

Sumber Berita Ini: Cara Membuat Related Post Keren di Blog

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

• Rss
• Twitter
• FaceBook
• Follow This Blog

Baca Juga Artikel Terkait Lainnya

Berita Populer Lainnya