Cara Membuat Artikel Terkait Valid HTML5

Unknown

Blogger

Kamis, 19 Juni 2014

Belum ada komentar

Membuat atau Memasang Artikel Terkait (Related Post) di blog valid HTML5 dan CSS3 fungsinya untuk membuat pengunjung membaca artikel kita yang lainnya dan tentunya yang masih berhubungan dengan berita yang mereka baca sebelumnya, ini sangat membantu visitor/pengunjung untuk lebih leluasa membaca artikel lain yang mungkin bermanfaat untuk diketahui. Cara membuat artikel terkait di bawah postingan ini bisa dibilang adalah Sebuah Link atau Url yang di kelompokan dan saling berkaitan atau berhubungan dan bahkan bisa satu topik, makanya di dalam script artikel terkait tidak akan bisa bekerja jika postingan Anda belum Anda kasih Label. dan tentunya artikel terkait yang akan di buat ini sudah valid HTML5 dan CSS3.

Yang sudah ingin mencoba,  berikut adalah cara membuat artikel terkait (Related Posts) seperti pada bagian bawah artikel ini :

1. Masuk ke blogger

2. Pilih Template > Click Edit Template.

3. Lalu cari kode <data:post.body/>..!! jika Anda menemukan banyak kode tersebut, gunakan kode yang kedua.

Note : Biasanya pada pemasangan inilah trik ini tidak berhasil, jadi hati-hatilah dan teliti dalam meletakkannya.

4. Copy-paste kode berikut ini tepat di bawahnya:

<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://abadua-related-post.googlecode.com/svn/Abadua-Related-post-Valid-HTML5.js' type='text/javascript'/></b:if>

5. Kemudian cari kode ]]></b:skin> atau </style>
6. Copy-paste code CSS berikut ini tepat diatasnya :

.related-post { margin:0 auto; font-size:13px; background:#fff; border-radius:4px}.related-post h4 {margin:0 0 10px;border-bottom:4px solid #999;color:#333;padding:6px 20px 6px 5px;font-weight:normal;position:relative;font-family:Oswald,Arial, Sans-Serif;text-transform:uppercase}ul.related-post-style-1 {padding-left:0 !important; margin-top:-12px}.related-post-style-1 li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL_kZVGbL5cspN-Qr_HVB4ChnWUSJDFo-XIBSyOiOd93x-ZeROTSwsLPsfU5MdpQXDfP2-r9UhVSf2ns8FanwVcJ3aKYqqfuMtaw1E3wswOs2rRl4x409oUOisHSzAFVwUDwq1_7SuR7g/s1600/Art-abadua.png) no-repeat 8px 14px;list-style:none; padding:10px 20px 8px 30px; border-top:1px solid #eceef5}.related-post-style-1 li a{ color:#555; text-decoration:none}.related-post-style-1 li a:hover{ color:#39a6f3; text-decoration:none}

Keterangan :

1. Artikel Terkait : Anda juga dapat menggantinya dengan tulisan yang Anda sukai.

2. background:#fff : adalah warna backgroundnya, Anda bisa menggantinya sesuai dengan keinginan sobat, silahkan lihat disini : Daftar kode warna HTML

3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL_kZVGbL5cspN-Qr_HVB4ChnWUSJDFo-XIBSyOiOd93x-ZeROTSwsLPsfU5MdpQXDfP2-r9UhVSf2ns8FanwVcJ3aKYqqfuMtaw1E3wswOs2rRl4x409oUOisHSzAFVwUDwq1_7SuR7g/s1600/Art-abadua.png, Anda juga dapat merubah gambar ini dengan memasukkan link url gambar Anda sendiri.

7. Simpan Template Anda.