Membuat Artikel Terkait Keren Valid HTML5

Banyak sekali cara yang bisa kita lakukan untuk meningkatkan page view blog kita. Salah satunya adalah dengan memaparkan postingan blog kita kepada para visitor blog kita. Beragam cara untuk memaparkan postingan blog kita kepada para visitor, mulai dari membuat recent post atau artikel terbaru (ganti dengan link posting agan yang berjudul cara membuat recent post), popular post atau artikel terpopuler (ganti dengan link posting agan yang berjudul popular post warna –warni . . . ) sampai related post atau artikel terkait.

Banyak sekali style yang bisa kita coba untuk diterapkan di blog kita. Style recent post tanp gambar atau dengan gambar bisa anda coba. Nah, untuk membuat related post ini blogger tidak menyediakan widgetnya, tapi kita harus membuatnya dengan menambahkan kode ke template kita. Namun, perlu anda ketahui, bahwa tak semua kode related yang banyak di bagikan oleh blogger di luar sana belum tentu valid HTML5. Padahal HTML5 sekarang ini sangat penting untk sebuah blog, maka dari itu, disini saya akan membagikan tutorial cara membuat related post yang valid HTML5. Bagaimana caranya, langsung saja simak tutorialnya berikut ini.

Cara membuat related post keren valid HTML5 :

1. Terlebih dahulu log in ke dashboard blogger anda masing – masing.

2. Masuk ke menu “Template”.

3. Back up terlebih dahulu template anda.

4. Lalu klik “Edit HTML” pada menu template anda.

5. Sekarang cari kode ]]></b:skin di template anda, gunakan Ctrl + F atau tekan F3 untuk mempermudah pencarian, jika sudah ketemu ketakkan kode berikut diatasnya.
.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;
}

6. Lalu cari kode </head> dan letakkan kode berikut tepat diatasnya.

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

7. Cari kode <data:post.body/> biasanya kode tersebut terdapat lebih dari satu di dalam template anda, letakkan saja kode berikut ini tepat di bawah kode <data:post.body/> yang kedua. Jika tidak berhasil silahkan coba satu – satu saja

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

8. Langkah terakhir tekan “Save” atau “Simpan” untuk menyimpannya.

Berhasil tidak? Mudah sekali bukan cara membuat related post keren valid HTML5. Sekian tutorial kali ini, semoga bermanfaat bagi anda dan page view blog anda lebih meningkat.