Poles Lantai

Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog

Artikel terkait merupakan sebuah fitur yang harus dimiliki semua blog agar pengunjung dapat mengetahui artikel mana yang berkaitan dengan artikel yang sedang mereka baca. Nah, tutorial untuk membuat sebuah artikel terkait memang sangat banyak. Kebanyakan artikel terkait tersebut memakai javascript yang disimpan di server atau hosting luar sehingga membuat loading blog sedikit lambat. Juga, banyak related post yang tidak sesuai dengan aturan HTML5 sehingga memunculkan invalid pada validator HTML5. Setelah mencari-cari di google akhirnya saya menemukan related post yang tidak membutuhkan penggunaan javascript di server luar. Masalah loading selesai. Bagaimana dengan HTML5? Saya pernah mengecek di validator dan masalahnya hanya satu yaitu pada karakter "&" yang terbaca dan harus diganti dengan "&" namun, tetap terbaca "&" dan akhirnya saya mencoba mengakalinya dengan kode numerik.

Nah, ScreenShot di atas merupakan sebuah solusi untuk kode & yang masih terbaca menjadi &.

Tutorial

Letakkan kode berikut tepat di atas </head>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Letakkan Kode berikut tepat di bawah <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='rel-noval'>
<h3>Artikel Terkait</h3>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Letakkan kode berikut tepat di atas ]]</b:skin>

#rel-noval {
line-height: 1.7em;
font-size: 13px;
margin: 6px 0 0;
padding: 0 5px;
background: #f8f8f8;
border: 1px solid #e2e2e2;
color: #333;
overflow: hidden;
}
#rel-noval h3 {
color: #fff;
background: #2c3e50;
padding: 5px;
border-bottom: 0px;
margin-top: 5px;
display: block;
}

Kemudian simpan template

Hai, sebelumnya saya telah merilis template khusus Adsense yang mungkin hampir sempurna dari tata letak, HTML5, CSS3 dan Responsive di artikel Perfect4Adsense Template Sempurna untuk Adsense. Karena adanya beberapa masukan dan saran dari yang lain akhirnya saya merilis kembali update template Perfect4Adsense ini. Apa saja yang sudah saya perbaiki dari template ini? Lanjut baca yaa gan

Update Fixed

- Related Post yang menghilang

- Search box background menjadi hitam

- Penggantian navigasi menjadi seleksi pada ukuran 600px

- Style komentar dari KangIsmet

Special Fixed

Perbaikan spesial pada template ini yaitu, pada item page sudah VALID HTML5.

CHECK IT

Bagi yang sudah membeli template ini, silahkan cek email anda masing-masing.

Tentang Template Perfect 4 Adsense

1. Responsive

Seperti template yang sebelum sebelum nya saya share, pastinya template ini sudah responsive. Bisa lihat di SS berikut, atau cek di tools online responsive tester