Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbp1S1mg2iDsh4hNQ6xqXyu4k4ygOO-7i3YJV8M2hXALfGnJqRjBguYt24nrHMLfAouC_X_BuzAou97rePVLQm_J6JD2QK_GhEX3z9U7AgwLhHJWpy-x1dsy5QCvlmgTPn6dIpLRNkl8/s1600/related+post.png"><img alt="Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbp1S1mg2iDsh4hNQ6xqXyu4k4ygOO-7i3YJV8M2hXALfGnJqRjBguYt24nrHMLfAouC_X_BuzAou97rePVLQm_J6JD2QK_GhEX3z9U7AgwLhHJWpy-x1dsy5QCvlmgTPn6dIpLRNkl8/s1600/related+post.png" title="Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog" /></a></div><br /><div style="text-align: justify;">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. <b>Bagaimana dengan HTML5</b>? Saya pernah mengecek di validator dan masalahnya hanya satu yaitu pada karakter "<b>&</b>" yang terbaca dan harus diganti dengan "<b>&amp;</b>" namun, tetap terbaca "<b>&</b>" dan akhirnya saya mencoba mengakalinya dengan kode numerik.</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYWtOLWuZWRVtmI2kn9zlVs2dBVY_TEWRIbUMr1HHXhoX7yDMPd_7XzvlyisQiawqMccIR7YTN8heutyMsce3vjvml_jnUqcLrJtj5FR6e5yN7k456gzVnTGxo6TQlLfunbZ8ab-2VMs/s1600/amp.png"><img alt="Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYWtOLWuZWRVtmI2kn9zlVs2dBVY_TEWRIbUMr1HHXhoX7yDMPd_7XzvlyisQiawqMccIR7YTN8heutyMsce3vjvml_jnUqcLrJtj5FR6e5yN7k456gzVnTGxo6TQlLfunbZ8ab-2VMs/s1600/amp.png" title="Cara Membuat Related Post Valid HTML5 dan Fast Load di Blog" /></a></div><div style="text-align: justify;"><br />Nah, ScreenShot di atas merupakan sebuah solusi untuk kode <b>&amp;</b> yang masih terbaca menjadi <b>&</b>.<br /><br /><h3>Tutorial</h3>Letakkan kode berikut tepat di atas </head><br /><blockquote class="tr_bq"><script type='text/javascript'><br />    //<![CDATA[<br />    var relatedTitles = new Array();<br />    var relatedTitlesNum = 0;<br />    var relatedUrls = new Array();<br />    function related_results_labels(json) {<br />    for (var i = 0; i < json.feed.entry.length; i++) {<br />    var entry = json.feed.entry[i];<br />    relatedTitles[relatedTitlesNum] = entry.title.$t;<br />    for (var k = 0; k < entry.link.length; k++) {<br />    if (entry.link[k].rel == 'alternate') {<br />    relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />    relatedTitlesNum++;<br />    break;}}}}<br />    function removeRelatedDuplicates() {<br />    var tmp = new Array(0);<br />    var tmp2 = new Array(0);<br />    for(var i = 0; i < relatedUrls.length; i++) {<br />    if(!contains(tmp, relatedUrls[i])) {<br />    tmp.length += 1;<br />    tmp[tmp.length - 1] = relatedUrls[i];<br />    tmp2.length += 1;<br />    tmp2[tmp2.length - 1] = relatedTitles[i];}}<br />    relatedTitles = tmp2;<br />    relatedUrls = tmp;}<br />    function contains(a, e) {<br />    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br />    return false;}<br />    function printRelatedLabels() {<br />    var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />    var i = 0;<br />    document.write('<ul>');<br />    while (i < relatedTitles.length && i < 20) {<br />    document.write('<li><a href="' + relatedUrls[r] + '">' +<br />    relatedTitles[r] + '</a></li>');<br />    if (r < relatedTitles.length - 1) {<br />    r++;<br />    } else {<br />    r = 0;}<br />    i++;}<br />    document.write('</ul>');}<br />    //]]><br />    </script></blockquote><br />Letakkan Kode berikut tepat di bawah <b><data:post.body/></b><br /><blockquote class="tr_bq"><b:if cond='data:post.labels'><br />    <b:loop values='data:post.labels' var='label'><br />    <b:if cond='data:blog.pageType == &quot;item&quot;'><br />    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/><br />    </b:if><br />    </b:loop><br />    </b:if><br />    <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='rel-noval'><br />    <h3>Artikel Terkait</h3><br />    <script type='text/javascript'><br />    removeRelatedDuplicates();<br />    printRelatedLabels();<br />    </script><br />      </div><br />    </b:if></blockquote><br />Letakkan kode berikut tepat di atas <b>]]</b:skin></b><br /><blockquote class="tr_bq">#rel-noval {<br />line-height: 1.7em;<br />font-size: 13px;<br />margin: 6px 0 0;<br />padding: 0 5px;<br />background: #f8f8f8;<br />border: 1px solid #e2e2e2;<br />color: #333;<br />overflow: hidden;<br />}<br />#rel-noval h3 {<br />color: #fff;<br />background: #2c3e50;<br />padding: 5px;<br />border-bottom: 0px;<br />margin-top: 5px;<br />display: block;<br />}</blockquote><br />Kemudian simpan template<br /><br /></div>

Artikel terkait merupakan sebuah fitur yang harus dimiliki semua blog agar pengunjung dapat mengetahui artikel mana yang berkaitan dengan ar...

BACA

Update Perfect4Adsense Template

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1btPIWvrnlfp0uW9nty-DmUEEAOys5sevs3qczwcBJ2d3EjYjeesFAArquf047v9n29nN2gYO6_PiHTLncAq5J_jJBvbeI32rHhww0wwXi0QNqr5S1cc884lSW-IdjVUvZfiOCtKLic/s1600/responsive.png"><img alt="Update Perfect4Adsense Template " height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1btPIWvrnlfp0uW9nty-DmUEEAOys5sevs3qczwcBJ2d3EjYjeesFAArquf047v9n29nN2gYO6_PiHTLncAq5J_jJBvbeI32rHhww0wwXi0QNqr5S1cc884lSW-IdjVUvZfiOCtKLic/s640/responsive.png" title="Update Perfect4Adsense Template " width="640" /></a></div><br /><div style="text-align: justify;">Hai, sebelumnya saya telah merilis template khusus Adsense yang mungkin hampir sempurna dari tata letak, HTML5, CSS3 dan Responsive di artikel <b><a href="http://www.noval.web.id/2013/12/perfect4adsense.template.html" target="_blank">Perfect4Adsense Template Sempurna untuk Adsense</a></b>. 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</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Update Fixed</b></div><div style="text-align: justify;">- Related Post yang menghilang</div><div style="text-align: justify;">- Search box background menjadi hitam</div><div style="text-align: justify;">- Penggantian navigasi menjadi seleksi pada ukuran 600px</div><div style="text-align: justify;">- Style komentar dari KangIsmet</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Special Fixed</b></div><div style="text-align: justify;">Perbaikan spesial pada template ini yaitu, pada <b>item page sudah VALID HTML5</b>.</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKo-shmDRl1hXuokwJYmSri6pqORn3dWftewYjyWPK7q4TRE4wqV5pBfJpQ1IgV6CHG9SGpkQXqoJB_0l1jAbuOThxH14UtDsgM-5bXaUqs6TREea8p4_BSLBnRfaKXYKpzrJ8Fc5m5J8/s1600/html5+itempage.png"><img alt="Update Perfect4Adsense Template " height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKo-shmDRl1hXuokwJYmSri6pqORn3dWftewYjyWPK7q4TRE4wqV5pBfJpQ1IgV6CHG9SGpkQXqoJB_0l1jAbuOThxH14UtDsgM-5bXaUqs6TREea8p4_BSLBnRfaKXYKpzrJ8Fc5m5J8/s640/html5+itempage.png" title="Update Perfect4Adsense Template " width="640" /></a></div><div style="text-align: center;"><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fperfect4adsense.blogspot.com%2F2013%2F12%2Fcurhat-jokowi-di-meja-makan.html&charset=%28detect+automatically%29&doctype=Inline&group=0" rel="nofollow" target="_blank">CHECK IT</a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Bagi yang sudah membeli template ini, silahkan cek email anda masing-masing.<br /><br /><h3>Tentang Template Perfect 4 Adsense</h3><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">1. Responsive</b></div><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">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</div><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWzcUFlsoT09TFaEWIJUE-9Eu2rqmve_bnGfPpdVtf7bgjVTNlnE2Rxj_mMOCapWoKN7UFyy23tyNMZ_g-VBKc60KWyqDqxJljt3cowBQRT6ftX9Mct3NA4ALuA-9dbYkTwExKkFxZvw/s1600/responsive.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; color: #3498db; margin: 0px 1em; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Perfect4Adsense Template Sempurna untuk Adsense" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWzcUFlsoT09TFaEWIJUE-9Eu2rqmve_bnGfPpdVtf7bgjVTNlnE2Rxj_mMOCapWoKN7UFyy23tyNMZ_g-VBKc60KWyqDqxJljt3cowBQRT6ftX9Mct3NA4ALuA-9dbYkTwExKkFxZvw/s640/responsive.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="Perfect4Adsense Template Sempurna untuk Adsense" width="640" /></a></div><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></div><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2. SEO (by chkme)</b></div><div style="background-color: white; border: 0px; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYax0ROQcq-Y3a_8VGKhg2TMWmzMP3TmOkWMS-Hc_Z157AtULdjvIrKJ2xG8qtyApW1P5Kkhqu1oFMdkd29sBbtp5FoVbVXb3-_IVjdJCrk_z-iJcZX7X3wd7OdFKh0Z1h0UAGXQQSPsQ/s1600/seo.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; color: #3498db; margin: 0px 1em; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYax0ROQcq-Y3a_8VGKhg2TMWmzMP3TmOkWMS-Hc_Z157AtULdjvIrKJ2xG8qtyApW1P5Kkhqu1oFMdkd29sBbtp5FoVbVXb3-_IVjdJCrk_z-iJcZX7X3wd7OdFKh0Z1h0UAGXQQSPsQ/s640/seo.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">3. Valid HTML5 (Homepage)</b></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></b></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPWKLEFm2jB3HPu2kjO3CUTDfWLAICDhmOD197pNna8zWTsmcMnWl3KMCCDcSfu9P5wPWlhwEi3LqjcoNGM7-DV1-RWx_fOoGLYLDl0Uj0rFB6hT7TKOXa2eC5rBv-NfobVZ5CCi7R7A/s1600/html5.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; color: #3498db; margin: 0px 1em; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPWKLEFm2jB3HPu2kjO3CUTDfWLAICDhmOD197pNna8zWTsmcMnWl3KMCCDcSfu9P5wPWlhwEi3LqjcoNGM7-DV1-RWx_fOoGLYLDl0Uj0rFB6hT7TKOXa2eC5rBv-NfobVZ5CCi7R7A/s640/html5.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">4. Valid CSS3</b></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0yI4iKsKGhb5Ks4wI1wGPpz2pYVOEAXhUmJnYSGLgxhqXdt_9wJWnYchU_OsXm3ZyN9iHaVNpb0WJ41ZlXQjRTeQHbX2ThoRL9UhL9zhPH8_TEBsntpumRA6txEzLK4UCq4dewB9uro/s1600/css3.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; color: #3498db; margin: 0px 1em; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0yI4iKsKGhb5Ks4wI1wGPpz2pYVOEAXhUmJnYSGLgxhqXdt_9wJWnYchU_OsXm3ZyN9iHaVNpb0WJ41ZlXQjRTeQHbX2ThoRL9UhL9zhPH8_TEBsntpumRA6txEzLK4UCq4dewB9uro/s640/css3.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><b style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">5. Fast Loading</b></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: left; vertical-align: baseline;"><br /></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #2c3e50; font-family: calibri; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaeAApDU6utHZJiw5Q4CaPPe76VaODb_tfTx0J7zpLH2Hgbn7soB_RqP3CdNLmO0nexUsEC96j_xSCea-yyJU85Dmj-RGwsabfmswQAp43I7ganOvwj11Xenb5VRAXl-oft1iUidqlpO4/s1600/speed.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; color: #3498db; margin: 0px 1em; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaeAApDU6utHZJiw5Q4CaPPe76VaODb_tfTx0J7zpLH2Hgbn7soB_RqP3CdNLmO0nexUsEC96j_xSCea-yyJU85Dmj-RGwsabfmswQAp43I7ganOvwj11Xenb5VRAXl-oft1iUidqlpO4/s640/speed.png" style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; border: 0px; height: auto; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div><br /></div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="background-color: #e74c3c; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px 5px; text-align: center;"><div style="color: white;">Jika anda tertarik dengan template tersebut saya memberikan harga murah untuk template ini.</div><div style="color: white;">Template ini saya beri harga</div><div style="color: white;"><br /></div><div style="color: white;"><span style="font-family: Trebuchet MS, sans-serif; font-size: x-large;"><b>IDR 50.000</b></span></div><div style="color: white;"><br /></div><div style="color: white;"><br /></div><div style="background-color: #2c3e50; background-position: initial initial; background-repeat: initial initial; color: white; padding: 5px 0px;"><span style="border-bottom: 2px solid; clear: both; font-size: 20px; width: 100%;">Pembayaran</span><br />Pembayaran dapat dilakukan melalui Bank <b><i><u>BCA</u></i></b> dan <u><i><b>Bank Mandiri</b></i></u>.<br />Khusus bank Mandiri, anda perlu mengirimkan bukti pembayaran.</div><div style="background-color: #3498db; padding: 5px 0px;"><div style="color: white;"><span style="border-bottom: 2px solid; clear: both; font-size: 20px; width: 100%;">Contact</span></div><div style="color: white;">Anda dapat menghubungi saya melalui:</div><div style="color: white;"><br /></div><a href="http://facebook.com/mas.bintangblog" rel="nofollow" target="_blank"><span style="color: white;">Facebook</span></a><br /><a href="http://twitter.com/mnovalbs" rel="nofollow" target="_blank"><span style="color: white;">Twitter</span></a><br /><div style="color: white;">0856-9432-5922 (SMS only)</div></div></div>

Hai, sebelumnya saya telah merilis template khusus Adsense yang mungkin hampir sempurna dari tata letak, HTML5, CSS3 dan Responsive di artik...

BACA

Perfect4Adsense Template Sempurna untuk Adsense

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99fgExOGkMrierNkJcYLF0Q3jiORNPzNTy-lNya3ZQGcXvgGmn5IvZiC0shbAnvUlJ_2zZ1xXTfHn5UPN_UtGSwCKwAX3hsW3oQ-Zjf4T1LJZ5mKH5Sn5N5p5Ap9DoGFmo0Z9DGVh2jA/s1600/home1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsense" border="0" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99fgExOGkMrierNkJcYLF0Q3jiORNPzNTy-lNya3ZQGcXvgGmn5IvZiC0shbAnvUlJ_2zZ1xXTfHn5UPN_UtGSwCKwAX3hsW3oQ-Zjf4T1LJZ5mKH5Sn5N5p5Ap9DoGFmo0Z9DGVh2jA/s640/home1.png" title="Perfect4Adsense Template Sempurna untuk Adsense" width="640" /></a></div><br /><div style="text-align: justify;">Minggu lalu, ada seorang agan di facebook yang merequest kepada saya untuk membuat sebuah template yang cocok untuk adsense. Okelah, saya terima request tersebut. Karena saya sebelumnya tidak mengerti template seperti apa yang cocok untuk adsense terutama Google Adsense, maka saya mulai mencari di google seperti apa template yang disukai mbah Google ini. Kemudian saya melihat dalam sebuah video yang dirilis oleh Google sebagai referensi untuk membuat template adsense tersebut.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Dalam video tersebut, google menyukai adsense nya ditempatkan di lokasi tertentu di template blogspot. Misalkan, ukuran adsense 300 x 250 ditempatkan di sidebar kanan atas, 728 x 90 px di bawah header dan adsense 160 x 600 px ditempatkan di sidebar kiri paling bawah. Dan di video tersebut juga terlihat beberapa widget yang ditempatkan di template tersebut.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Karena tidak ingin ada kekurangan, saya pun membuat template dengan meniru semua yang ada di video tersebut. Sebelumnya apa saja fiturnya</div><div style="text-align: justify;"><br /></div><h3>Fitur</h3><div style="text-align: justify;"><b>1. Responsive</b></div><div style="text-align: justify;">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</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWzcUFlsoT09TFaEWIJUE-9Eu2rqmve_bnGfPpdVtf7bgjVTNlnE2Rxj_mMOCapWoKN7UFyy23tyNMZ_g-VBKc60KWyqDqxJljt3cowBQRT6ftX9Mct3NA4ALuA-9dbYkTwExKkFxZvw/s1600/responsive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsense" border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWzcUFlsoT09TFaEWIJUE-9Eu2rqmve_bnGfPpdVtf7bgjVTNlnE2Rxj_mMOCapWoKN7UFyy23tyNMZ_g-VBKc60KWyqDqxJljt3cowBQRT6ftX9Mct3NA4ALuA-9dbYkTwExKkFxZvw/s640/responsive.png" title="Perfect4Adsense Template Sempurna untuk Adsense" width="640" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>2. SEO (by chkme)</b></div><div style="text-align: justify;"><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYax0ROQcq-Y3a_8VGKhg2TMWmzMP3TmOkWMS-Hc_Z157AtULdjvIrKJ2xG8qtyApW1P5Kkhqu1oFMdkd29sBbtp5FoVbVXb3-_IVjdJCrk_z-iJcZX7X3wd7OdFKh0Z1h0UAGXQQSPsQ/s1600/seo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYax0ROQcq-Y3a_8VGKhg2TMWmzMP3TmOkWMS-Hc_Z157AtULdjvIrKJ2xG8qtyApW1P5Kkhqu1oFMdkd29sBbtp5FoVbVXb3-_IVjdJCrk_z-iJcZX7X3wd7OdFKh0Z1h0UAGXQQSPsQ/s640/seo.png" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>3. Valid HTML5 (Homepage)</b></div><div class="separator" style="clear: both; text-align: left;"><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPWKLEFm2jB3HPu2kjO3CUTDfWLAICDhmOD197pNna8zWTsmcMnWl3KMCCDcSfu9P5wPWlhwEi3LqjcoNGM7-DV1-RWx_fOoGLYLDl0Uj0rFB6hT7TKOXa2eC5rBv-NfobVZ5CCi7R7A/s1600/html5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPWKLEFm2jB3HPu2kjO3CUTDfWLAICDhmOD197pNna8zWTsmcMnWl3KMCCDcSfu9P5wPWlhwEi3LqjcoNGM7-DV1-RWx_fOoGLYLDl0Uj0rFB6hT7TKOXa2eC5rBv-NfobVZ5CCi7R7A/s640/html5.png" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>4. Valid CSS3</b></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0yI4iKsKGhb5Ks4wI1wGPpz2pYVOEAXhUmJnYSGLgxhqXdt_9wJWnYchU_OsXm3ZyN9iHaVNpb0WJ41ZlXQjRTeQHbX2ThoRL9UhL9zhPH8_TEBsntpumRA6txEzLK4UCq4dewB9uro/s1600/css3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0yI4iKsKGhb5Ks4wI1wGPpz2pYVOEAXhUmJnYSGLgxhqXdt_9wJWnYchU_OsXm3ZyN9iHaVNpb0WJ41ZlXQjRTeQHbX2ThoRL9UhL9zhPH8_TEBsntpumRA6txEzLK4UCq4dewB9uro/s640/css3.png" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>5. Fast Loading</b></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaeAApDU6utHZJiw5Q4CaPPe76VaODb_tfTx0J7zpLH2Hgbn7soB_RqP3CdNLmO0nexUsEC96j_xSCea-yyJU85Dmj-RGwsabfmswQAp43I7ganOvwj11Xenb5VRAXl-oft1iUidqlpO4/s1600/speed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsens" border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaeAApDU6utHZJiw5Q4CaPPe76VaODb_tfTx0J7zpLH2Hgbn7soB_RqP3CdNLmO0nexUsEC96j_xSCea-yyJU85Dmj-RGwsabfmswQAp43I7ganOvwj11Xenb5VRAXl-oft1iUidqlpO4/s640/speed.png" title="Perfect4Adsense Template Sempurna untuk Adsens" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Bagaimana dengan semua fitur yang di atas? Saya masih menerima saran dan pendapat untuk template ini kok. Bagaimana pun itu untuk kesempurnaan template tersebut. Nah, untuk memberikan gambaran bagaimana jika anda telah memiliki template tersebut seperti apakah dalaman template ini? Oke sekarang saya berikan SS layout template Perfect4Adsense.</div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg9acLMxCaS7dX8XRoyrEV8JrbF7RuURudgRnqAn3VOXXVmekAW-rDQnyCJ7DOardq55MWEY8FuxUHAtb93O5JM2aC4M1uddph3Jlli-BjT05BbInz71-IvRfxh1dLr-UZiCupNdq22wM/s1600/layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Perfect4Adsense Template Sempurna untuk Adsense" border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg9acLMxCaS7dX8XRoyrEV8JrbF7RuURudgRnqAn3VOXXVmekAW-rDQnyCJ7DOardq55MWEY8FuxUHAtb93O5JM2aC4M1uddph3Jlli-BjT05BbInz71-IvRfxh1dLr-UZiCupNdq22wM/s640/layout.png" title="Perfect4Adsense Template Sempurna untuk Adsense" width="640" /></a></div><div class="separator" style="clear: both; text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: justify;">Tata letak di atas direferensikan oleh video dari google tersebut. Dari tata letak tersebut, template ini mendukung:</div><div class="separator" style="clear: both; text-align: justify;"></div><ol><li>Ads 728 x 90 px</li><li>Ads 300 x 250 px</li><li>Ads 160 x 600 px</li></ol><div>Namun, pada demo yang akan saya tunjukkan nanti saya masih memakai adsense lazada bukan google adsense. Karena saya belum pernah memakai google adsense sampai saat ini.</div><div><br /><div style="text-align: center;"><a class="demo" href='http://perfect4adsense.blogspot.com'>DEMO</a></div><br /></div><div>Nah, bagaimana anda dapat memiliki template tersebut? Nih akan saya berikan cara mendapatkannya<br /><br /></div><div style="background-color: #e74c3c; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 10px 5px; text-align: center;"><div style="color: white;">Jika anda tertarik dengan template tersebut saya memberikan harga murah untuk template ini.</div><div style="color: white;">Template ini saya beri harga</div><div style="color: white;"><br /></div><div style="color: white;"><span style="font-family: Trebuchet MS, sans-serif; font-size: x-large;"><b>IDR 50.000</b></span></div><div style="color: white;"><br /></div><div style="color: white;"><br /></div><div style="background-color: #2c3e50; background-position: initial initial; background-repeat: initial initial; color: white; padding: 5px 0px;"><span style="border-bottom: 2px solid; clear: both; font-size: 20px; width: 100%;">Pembayaran</span><br />Pembayaran dapat dilakukan melalui Bank <b><i><u>BCA</u></i></b> dan <u><i><b>Bank Mandiri</b></i></u>.<br />Khusus bank Mandiri, anda perlu mengirimkan bukti pembayaran.</div><div style="background-color: #3498db; padding: 5px 0px;"><div style="color: white;"><span style="border-bottom: 2px solid; clear: both; font-size: 20px; width: 100%;">Contact</span></div><div style="color: white;">Anda dapat menghubungi saya melalui:</div><div style="color: white;"><br /></div><a href="http://facebook.com/mas.bintangblog" rel="nofollow" target="_blank"><span style="color: white;">Facebook</span></a><br /><a href="http://twitter.com/mnovalbs" rel="nofollow" target="_blank"><span style="color: white;">Twitter</span></a><br /><div style="color: white;">0856-9432-5922 (SMS only)</div></div></div>

Minggu lalu, ada seorang agan di facebook yang merequest kepada saya untuk membuat sebuah template yang cocok untuk adsense. Okelah, saya te...

BACA

Cara Agar Template Blog Fast Loading

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcA-QiYuqfVxeipoo-Pw6WhSDbnumfU0CitFRWfr6LYt8SM4YIDRIAcxAzb0k_VRwz2ZWDZRQnnKqxgSadz0IUuOi9xyJzjsDDA7sgxYSzTKu-pypxgD9NV19arhIzGjm7RLSK9KQvCf4/s1600/noval.web.id-fastload.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Agar Template Blog Responsive" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcA-QiYuqfVxeipoo-Pw6WhSDbnumfU0CitFRWfr6LYt8SM4YIDRIAcxAzb0k_VRwz2ZWDZRQnnKqxgSadz0IUuOi9xyJzjsDDA7sgxYSzTKu-pypxgD9NV19arhIzGjm7RLSK9KQvCf4/s640/noval.web.id-fastload.png" title="Cara Agar Template Blog Responsive" width="640" /></a></div><br /><div style="text-align: justify;">Template yang fast loading atau yang cepat untuk diload merupakan template blog yang sangat friendly dengan visitor atau reader blog. Bagi sebagian blogger, membuat templatenya fast load juga merupakan sebuah keharusan agar tidak memperberat visitor untuk mendownload keseluruhan halaman dengan lambat. Membuat template fastload juga dapat membuat hidup anda lebih <strike>go green</strike> dan hemat. Karena dengan template yang fastload berarti template anda tidak memakai banyak kuota internet untuk mendownload keseluruhan halaman. Lalu, bagaimana caranya agar template anda menjadi fastloading? Berikut beberapa tips yang mungkin bisa agan lakukan.</div><div style="text-align: justify;"><br /></div><h3>1. Hapus CSS Reset Blogger</h3><div style="text-align: justify;">Untuk menghapusnya anda harus membuka template editor template blogger, kemudian cari dan ganti <b><u><b:skin><![CDATA[</u></b> dengan kode berikut</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[</blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Kemudian simpan Template</div><div style="text-align: justify;"><br /></div><h3>2. Hapus Javascript Widget Bawaan</h3><div style="text-align: justify;">Sama dengan tips nomer 1, anda harus membuka editor template blogger, kemudian cari dan ganti <b><u></body></u></b> dengan kode berikut</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq">&lt;!--</body>--&gt;&lt;/body&gt;</blockquote><div style="text-align: justify;"><br /></div><h3>3. Minimalkan Gambar dengan Javascript</h3><div style="text-align: justify;">Di beberapa template yang saya share, pada halaman home atau homepage saya menggunakan javascript untuk meresize thumbnail (gambar artikel). Menurunkan ukuran thumbnail gambar dengan mengatur lebar thumbnail pada source javascript. Seperti berikut javascriptnya</div><div style="text-align: justify;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN7mXFNQLNKBZxS7RGEXu98s_bDfKKZvj943UmdqlOEOujFzSbkNX4Idq8DeDWhKr_Nkll5kzBrOs0Tviq10jf6Pmt5Knbvu7nqoBJcsyDwG5kdtT-lEIQYbnxDfGyRUR3H9NvFJHbI9w/s1600/thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tips Agar Template Blog Responsive" border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN7mXFNQLNKBZxS7RGEXu98s_bDfKKZvj943UmdqlOEOujFzSbkNX4Idq8DeDWhKr_Nkll5kzBrOs0Tviq10jf6Pmt5Knbvu7nqoBJcsyDwG5kdtT-lEIQYbnxDfGyRUR3H9NvFJHbI9w/s640/thumbnail.png" title="Tips Agar Template Blog Responsive" width="640" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Pada javascript di atas, variable image_size memiliki value lebar thumbnail gambar pada homepage. Silahkan dicari tentang autoread more untuk blogger di google. Sebelumnya saya lihat di blog DTE ada tentang autoreadmore dengan textarea, bisa mengatur banyaknya karakter dan ukuran thumbnail.</div><div style="text-align: justify;"><br /></div><h3>4. Lainnya</h3><div style="text-align: justify;">Cara lainnya yaitu tidak memakai widget yang terlalu memberatkan, kurangi penggunaan source dari luar seperti gambar, javascript, font, dan css yang berasal dari selain dari blog anda.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Semoga tipsnya bermanfaat</div><div style="text-align: justify;"><br /></div>

Template yang fast loading atau yang cepat untuk diload merupakan template blog yang sangat friendly dengan visitor atau reader blog. Bagi s...

BACA

CSS Gambar Agar Responsive

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzhkiF10Tfe2_JL_Q6X8fJbvUdAJYOigLGtDoBgAYQYbPYjDBwgcHPJi6ZDKEygoFSpeW06Y67-EY6gx5UNkBpf1iOtF2HQikbA2kbhPahrjjeyN15Mt31z5Jp97cd9uj35ZIX1ewVRM/s1600/gambar+responsive.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Gambar Agar Responsive" border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzhkiF10Tfe2_JL_Q6X8fJbvUdAJYOigLGtDoBgAYQYbPYjDBwgcHPJi6ZDKEygoFSpeW06Y67-EY6gx5UNkBpf1iOtF2HQikbA2kbhPahrjjeyN15Mt31z5Jp97cd9uj35ZIX1ewVRM/s640/gambar+responsive.png" title="CSS Gambar Agar Responsive" width="640" /></a></div><br /><div style="text-align: justify;">Bagi anda pecinta responsive pastinya tidak mau artikel anda kacau karena gambar di artikel tidak menyesuaikan ukuran device. Jika semua element sudah responsive, hal yang harus diamati yaitu gambar pada artikel. Pada dasarnya, saat anda membuat artikel dan mengupload gambar ke artikel tersebut di source HTML nya terdapat<i> <b><u>class "separator"</u></b></i> dan value height dan width pada gambar. Blogger telah memberikan opsi untuk ukuran gambar, yaitu small, medium, large, x-large dan original size. Ohiya lupa, bahwa separator yang ikut dalam source image tersebut memiliki style yang membuat gambar anda sedikit berantakan, yaitu pada separator terdapat style "margin-left dan margin-right". Kemudian pada ukuran gambar juga ada height dan width. Bagaimana agar gambar anda otomatis responsive walaupun anda tidak dengan manual menghapus / mengatur source gambar separator dan ukuran gambar tersebut?</div><div style="text-align: justify;"><br /></div><h3>Tutorial</h3><div style="text-align: justify;">Caranya yaitu pertama anda harus masuk ke pengaturan template/edit template. Kemudian cari ]]</b:skin> dan letakkan kode berikut tepat di atas kode ]]</b:skin></div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq">.separator a{margin-left:0px !important;margin-right:0px !important;}</blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;">CSS tersebut untuk menggantikan CSS separator yang otomatis terpakai saat upload gambar di artikel. CSS tersebut juga berarti tag <b>a</b> untuk Memaksa <b>separator</b> tidak memiliki jarak dari kiri dan kanan elemen di luarnya. Kemudian tambahkan CSS ini juga</div><div style="text-align: justify;"><br /></div><blockquote class="tr_bq">.post img{max-width:100%;height:auto;}</blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;">CSS ini berarti pada gambar di post (artikel) memiliki ukuran lebar 100% atau full dan tinggi otomatis.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Selamat mencoba</div><div style="text-align: justify;"><br /></div>

Bagi anda pecinta responsive pastinya tidak mau artikel anda kacau karena gambar di artikel tidak menyesuaikan ukuran device. Jika semua ele...

BACA