Perlu dicatat, bahwa validasi baik HTML5 maupun CSS3 bukan sesuatu yang sempurna. Artinya, ketika sebuah blog valid HTML5 atau CSS3 tidak berarti sempurna dalam CSS dan HTML. Validasi hanya merupakan panduan dalam menyusun HTML dan CSS yang baik.
<b:skin><![CDATA[*
......
KODE CSS DI SINI
......
]]></b:skin><b:skin><![CDATA[* dengan <style type="text/css"><!-- /* <b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>]]></b:skin> dengan kode :</style>-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;border-radius:5px, oleh karena itu, hapus semua kode yang berawalan:-moz-
-khtml-
-o-
-webkit-DXImageTransformfont-family: 'Open Sans', 'Segoe UI', Arial, sans-serif
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head><?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/></html> dengan </HTML> (paling bawah di template)<b:include data='blog' name='all-head-content'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if><b:skin><![CDATA[ dengan kode dibawah :<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style><b:include name='quickedit'/><a expr:name='data:post.id'/><b:include data='post' name='postQuickEdit'/><b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable><div class='post-share-buttons goog-inline-block'>...sampai...</div>& dengan &alt pada gambar, contoh :<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMPRkfnLm7qBu5_-_TI9qfRLrNmov-OZ2Mw8iqkOGBaVB21xYuqyQN1vT1mUNfZV_aBk9A7VptgbyWdVcDf0GE_2vV0qovKsbGqcFTTmjq75a4tByi9DkM1H2E5w4z0_9JCg0Z0oju5wU/s1600/html5.png" />border="0" pada gambar, sebagai gantinya tambahkan kode :style="border:none"img{border:none}frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :style="border:none;overflow:hidden"iframe{border:none;overflow:hidden}a jangan menggunakan tag name seperti :<a name='comment-form'>id seperti :<a href='#comment-form'>id pada template.<b:include name='quickedit'/> setiap menambah widget baru.
</head><script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>]]></b:skin> atau </style>/* Iklan Teks ----------------------------------------------- */ #iklan-teks { width:304px; height:259px; background-color:white; position:relative; overflow:hidden; margin:0 auto; } #iklan-teks h2.iklan-header { cursor:pointer; background-color:white; background-image:none; font:normal 20px Verdana, Tahoma,Serif; color:blue; border-top:1px solid #d8d8d8; padding:10px; margin:0 0; position:relative; text-transform:none; letter-spacing:0; } #iklan-teks h2.iklan-header:first-child { border-top:none; } #iklan-teks h2.active { display: none; } #iklan-teks h2.iklan-header:before{ content:""; width:0; height:0; position:absolute; top:20px; right:15px; border:5px solid transparent; border-color:#b2b2b2 transparent transparent; } #iklan-teks div { height:100px; padding:10px 70px 10px 10px; font:normal 13px Verdana, Tahoma,Serif; color:white; border-top:1px solid #d8d8d8; } .judul { font:normal 20px Verdana, Tahoma,Serif; color:blue; margin:0 0 5px 0; } a.judul{ font:normal 20px Verdana, Tahoma,Serif !important; color:blue !important; text-decoration:none; display:inline-block; } a:hover.judul { font:normal 20px Verdana, Tahoma,Serif !important; color:blue; text-decoration:underline; } .isi-iklan a{ font:normal 13px Verdana, Tahoma,Serif; color:green; text-decoration:none; display:block; margin-bottom:10px; } .isi-iklan a:hover{ color:green; text-decoration:none; } .isi { padding-top:15px; color:#222; text-align:left !important; } .panah-besar { background: #4d90fe; border-radius: 50%; cursor: pointer; height: 34px; float: right; margin-right: -60px; margin-top: -40px; width: 34px; text-align: center; line-height: 34px; } .panah-besar:hover { background: #4472bd; } .info-icon { width:15px; height:15px; position:absolute; top:0; right:0; cursor:pointer; } .info-iklan { background:#d3d3d3; width:100px; height:15px; border-bottom-left-radius:4px; position:absolute; top:0; right:0; color:#000; font:normal 11px Arial,Sans-Serif; text-align:left; overflow:hidden; padding-right:19px; padding-left:5px; display:none; }
<div id="iklan-teks"> <!-- iklan ke 1 --> <div data-header="Blogger Tutorial" style="border-top:none"> <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a> <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a> <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span> <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQIe0nzQZpE2Zkwf6DExGcyPB8XD2GWsc0E7b2B1VjnJouxwe2su4MXyNXmYYqvLI21QOcHJPB2YMNONS7Z3HgTDrlh2g_qEpF0TdhE5kP-Kdi89X0xQvIf_su6Dd0L0QButWtvUG-SU/s1600/icon_chevron_white.png'/></a> </span> </div> <!-- iklan ke 2 --> <div data-header="Pasang Iklan di Sini"> <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a> <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a> <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan. <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQIe0nzQZpE2Zkwf6DExGcyPB8XD2GWsc0E7b2B1VjnJouxwe2su4MXyNXmYYqvLI21QOcHJPB2YMNONS7Z3HgTDrlh2g_qEpF0TdhE5kP-Kdi89X0xQvIf_su6Dd0L0QButWtvUG-SU/s1600/icon_chevron_white.png'/></a></span> </span> </div> <!-- iklan ke 3 --> <div data-header="Pasang Iklan di Sini"> <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a> <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a> <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan. <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQIe0nzQZpE2Zkwf6DExGcyPB8XD2GWsc0E7b2B1VjnJouxwe2su4MXyNXmYYqvLI21QOcHJPB2YMNONS7Z3HgTDrlh2g_qEpF0TdhE5kP-Kdi89X0xQvIf_su6Dd0L0QButWtvUG-SU/s1600/icon_chevron_white.png'/></a></span> </span> </div> <!-- iklan ke 4 --> <div data-header="Pasang Iklan di Sini"> <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a> <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a> <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan. <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGQIe0nzQZpE2Zkwf6DExGcyPB8XD2GWsc0E7b2B1VjnJouxwe2su4MXyNXmYYqvLI21QOcHJPB2YMNONS7Z3HgTDrlh2g_qEpF0TdhE5kP-Kdi89X0xQvIf_su6Dd0L0QButWtvUG-SU/s1600/icon_chevron_white.png'/></a></span> </span> </div> <!-- info --> <span class='info-iklan'>Iklan oleh Kang Ismet</span> <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRdaMBIWryS41bL_5A4y-UWhnvnr0hSrLe0pfMofg2ia_ZlXp9arhhmprDi8R0j6N3VMlaR0pZk-giKfTPL2vUjAJl5sTSUQzJiOJ-DhhdpJwWx7XopPraqPhprU0Y6IhBasTrZZCBO8/s1600/info-iklan.png'/></a></span> </div>
</head><script type='text/javascript'>
//<![CDATA[
var thumbnail_mode = "float",
summary_noimg = 350,
summary_img = 350,
img_thumb_height = 100,
img_thumb_width = 120;
/******************************************
Script Posting Read-More versi 2.0 (blogspot)
(C)2008 oleh Anhvo
********************************************/
function createSummaryAndThumb(a) {
var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
}
//]]>
</script><data:post.body/><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>]]></b:skin> atau </style>:.rmlink a {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rmlink a:hover {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).img_thumb_width dan img_thumb_height.