Home » Tip Trick Blog » Custom Blogger Valid HTML5
8:12:00 AM
0 comments

Custom Blogger Valid HTML5

 - All-head-content Blogger adalah sebuah baris kode yang pendek namun berisi beberapa kode penting yang berhubungan dengan mesin penelusuran seperti XML sitemap dan meta tag yang otomatis dikelola oleh Blogger. All-head-content Custom Blogger
Biasanya kode all-head-content ditempatkan di bawah title tag blog. Jika Anda mengikuti postingan tentang cara membuat tema custom blogger dari dasar, maka Anda akan menemukan kode all-head-content lebih jelas dan juga dapat mengetahuan kode apa saja yang dihasilkan dari kode all-head-content.
All-head-content Blogger ini penampakannya seperti berikut ini.

<b:include data='blog' name='all-head-content'/>
Dan jika diekstrak, kode tersebut isinya seperti berikut ini.

<b:includable id='all-head-content'>

  <meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>

  <b:if cond='data:widgets'>

    <b:comment>Chrome, Firefox OS and Opera</b:comment>

    <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>

    <b:comment>Windows Phone</b:comment>

    <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>

  </b:if>

  <data:blog.latencyHeadScript/>

  <data:blog.mobileHeadScript/>

  <meta content='blogger' name='generator'/>

  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

  <b:if cond='data:blog.adultContent'>

    <meta content='adult' name='rating'/>

  </b:if>

  <link expr:href='data:view.url.canonical' rel='canonical'/>

  <data:blog.feedLinks/>

  <data:blog.meTag/>

  <b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl'/>

  <b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>

  <b:if cond='data:blog.metaDescription'>

    <meta expr:content='data:blog.metaDescription' name='description'/>

  </b:if>

  <b:include name='openGraphMetaData'/>

  <data:blog.ieCssRetrofitLinks/>

  <!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>

<![endif]-->

</b:includable>
Kode-kode di atas ada yang hanya berlaku pada versi HTML Blogger tertentu seperti hanya berlaku pada versi 3 atau berlaku pada versi 1 dan 2.
Dan pada versi 1 HTML Blogger, kode all-head-content menghasilkan kode seperti berikut sebagai contohnya.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

<meta content='blogger' name='generator'/>

<link href='https://membuattemakustom.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>

<link href='https://membuattemakustom.blogspot.com/' rel='canonical'/>

<link rel="alternate" type="application/atom+xml" title="Membuat Blog - Atom" href="https://membuattemakustom.blogspot.com/feeds/posts/default" />

<link rel="alternate" type="application/rss+xml" title="Membuat Blog - RSS" href="https://membuattemakustom.blogspot.com/feeds/posts/default?alt=rss" />

<link rel="service.post" type="application/atom+xml" title="Membuat Blog - Atom" href="https://www.blogger.com/feeds/5584625439020352970/posts/default" />

<link rel="me" href="https://www.blogger.com/profile/10624324989863141903" />

<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->

<meta content='https://membuattemakustom.blogspot.com/' property='og:url'/>

<meta content='Membuat Blog' property='og:title'/>

<meta content='Ini adalah blog percobaan.' property='og:description'/>

<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
Atau seperti pada gambar berikut.

Klik gambar untuk memperbesar. Klik Esc di keyboard untuk kembali.
Namun jika Anda sedang mencoba membuat tema blog Anda valid HTML5, beberapa kode di atas ternyata error validasi HTML5.
Entah kenapa sampai sekarang Blogger belum membuat kode tersebut valid HTML5. Kode-kode yang error validasi HTML5 tersebut adalah kode di bawah ini.

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
Dan

<link rel="service.post" type="application/atom+xml" title="Membuat Blog - Atom" href="https://www.blogger.com/feeds/5584625439020352970/posts/default" />
Untuk itu, agar kode all-head-content valid HTML5, kode all-head-content seperti berikut.

<b:include data='blog' name='all-head-content'/>
Silahkan ganti dengan kode all-head-content Blogger valid HTML5 berikut ini. Dan pada kode ini saya juga melengkapinya dengan Facebook open graph yang lebih komplit dan juga Twitter Card.

<meta charset='utf-8'/>

<!-- Chrome, Firefox OS and Opera -->

<meta content='#2B0C93' name='theme-color'/>

<!-- Windows Phone -->

<meta content='#2B0C93' name='msapplication-navbutton-color'/>

<meta content='blogger' name='generator'/>

<link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

<link href='https://cdn.staticaly.com/img/3.bp.blogspot.com/-neRXGiMMl78/VwNf50cBEwI/AAAAAAAAmGk/jvUDozATUdU2fyPTXIc1fRjLdRLIpQQeA/s32/favicon-32x32.png' rel='icon' sizes='32x32'/>

<link href='https://cdn.staticaly.com/img/4.bp.blogspot.com/-_fuRWmsvvhw/VwNgCd9RvqI/AAAAAAAAmGo/IFhwNoh-_OIEsUORb-ie9gauR5HQgKAhQ/s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>

<link href='https://cdn.staticaly.com/img/2.bp.blogspot.com/-Ahu-Rk5-2pU/VwNgIz2ruDI/AAAAAAAAmGs/lt_weAllC2ArCyVu09nB7Gms_HUqJIeUw/s180/apple-icon-180x180.png' rel='apple-touch-icon'/>

<meta content='https://cdn.staticaly.com/img/2.bp.blogspot.com/-9y27HsKCpyc/VwNgnWg1DlI/AAAAAAAAmG0/3Vl1JcjOBGoPAcMCqKIDDaMg53UffCMDg/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>

<link expr:href='data:blog.canonicalUrl' rel='canonical'/>

<link expr:href='data:blog.canonicalHomepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot;- Atom&quot;' rel='alternate' type='application/atom+xml'/>

<link expr:href='data:blog.canonicalHomepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot;- RSS&quot;' rel='alternate' type='application/rss+xml'/>

<link expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot;- Atom&quot;' rel='alternate' type='application/atom+xml'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<link expr:href='data:blog.canonicalHomepageUrl + &quot;feeds/&quot; + data:blog.postId + &quot;/comments/default&quot;' expr:title='data:blog.title + &quot;- Atom&quot;' rel='alternate' type='application/atom+xml'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:blog.meTag/>

</b:if>

<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>

<link expr:href='data:blog.canonicalHomepageUrl' rel='openid.delegate'/>

<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/ka@master/v8/manifest.json' rel='manifest'/>

<link expr:href='data:blog.canonicalUrl' hreflang='x-default' rel='alternate'/>

<b:if cond='data:view.isArchive'>

<meta content='noindex,noarchive' name='robots'/>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<meta expr:content='data:blog.pageName.escaped' property='og:title'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription.escaped' name='description'/>

<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>

<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>

<b:else/>

<meta expr:content='&quot;Silahkan kunjungi postingan &quot; + data:blog.pageName.escaped + &quot; untuk membaca artikel selengkapnya dengan klik link di atas.&quot;' name='description'/>

<meta expr:content='&quot;Silahkan kunjungi postingan &quot; + data:blog.pageName.escaped + &quot; untuk membaca artikel selengkapnya dengan klik link di atas.&quot;' property='og:description'/>

<meta expr:content='&quot;Silahkan kunjungi postingan &quot; + data:blog.pageName.escaped + &quot; untuk membaca artikel selengkapnya dengan klik link di atas.&quot;' name='twitter:description'/>

</b:if>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<meta expr:content='data:blog.title.escaped' property='og:title'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription.escaped' name='description'/>

<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>

<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>

<b:else/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk membaca postingan-postingan menarik.&quot;' name='description'/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk membaca postingan-postingan menarik.&quot;' name='twitter:description'/>

</b:if>

</b:if>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;}'>

<meta expr:content='data:blog.pageName.escaped' property='og:title'/>

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription.escaped' name='description'/>

<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>

<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>

<b:else/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk mendapatkan informasi selengkapnya.&quot;' name='description'/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk mendapatkan informasi selengkapnya.&quot;' property='og:description'/>

<meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle.escaped + &quot; untuk mendapatkan informasi selengkapnya.&quot;' name='twitter:description'/>

</b:if>

</b:if>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='resizeImage(data:blog.postImageUrl,1200,&quot;1200:630&quot;)' property='og:image'/>

<meta content='1200' property='og:image:width'/>

<meta content='630' property='og:image:height'/>

<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>

<b:else/>

<b:if cond='data:blog.firstImageUrl'>

<meta expr:content='resizeImage(data:blog.firstImageUrl,1200,&quot;1200:630&quot;)' property='og:image'/>

<meta content='1200' property='og:image:width'/>

<meta content='630' property='og:image:height'/>

<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>

<b:else/>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='resizeImage(data:blog.postImageThumbnailUrl,1200,&quot;1200:630&quot;)' property='og:image'/>

<meta content='1200' property='og:image:width'/>

<meta content='630' property='og:image:height'/>

<meta expr:content='data:blog.pageName.escaped' property='og:image:alt'/>

<b:else/>

<meta content='https://cdn.staticaly.com/img/3.bp.blogspot.com/-ccUYbxIIDvM/VqSSu92MnZI/AAAAAAAAksc/HExcuDOoKIQ/s300/logo.png' property='og:image'/>

<meta expr:content='data:blog.title.escaped' property='og:image:alt'/>

<meta content='158' property='og:image:width'/>

<meta content='158' property='og:image:height'/>

</b:if>

</b:if>

</b:if>

<meta content='xxxxxxxxxxxxxx' property='fb:app_id'/>

<meta content='xxxxxxxxxxxxxx' property='fb:admins'/>

<meta content='xxxxxxxxxxxxxx' property='fb:profile_id'/>

<meta content='xxxxxxxxxxxxxx' property='fb:pages'/>

<meta content='Nama Anda' name='Author'/>

<meta content='https://www.facebook.com/xxxxxxxxxxxxxx' property='article:author'/>

<meta expr:content='data:blog.title.escaped' name='twitter:site'/>

<meta content='summary_large_image' name='twitter:card'/>

<meta content='@xxxxxxxxxxxxxx' name='twitter:creator'/>
Keterangan:

Hapus kode berikut jika sudah ada di tema, biasanya persis di bawah kode <head>

<meta charset='utf-8'/>
Sesuaikan kode warna #2B0C93 dengan warna body blog atau dengan warna dominan blog.


<link href='https://cdn.staticaly.com/img/3.bp.blogspot.com/-neRXGiMMl78/VwNf50cBEwI/AAAAAAAAmGk/jvUDozATUdU2fyPTXIc1fRjLdRLIpQQeA/s32/favicon-32x32.png' rel='icon' sizes='32x32'/>

<link href='https://cdn.staticaly.com/img/4.bp.blogspot.com/-_fuRWmsvvhw/VwNgCd9RvqI/AAAAAAAAmGo/IFhwNoh-_OIEsUORb-ie9gauR5HQgKAhQ/s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>

<link href='https://cdn.staticaly.com/img/2.bp.blogspot.com/-Ahu-Rk5-2pU/VwNgIz2ruDI/AAAAAAAAmGs/lt_weAllC2ArCyVu09nB7Gms_HUqJIeUw/s180/apple-icon-180x180.png' rel='apple-touch-icon'/>

<meta content='https://cdn.staticaly.com/img/2.bp.blogspot.com/-9y27HsKCpyc/VwNgnWg1DlI/AAAAAAAAmG0/3Vl1JcjOBGoPAcMCqKIDDaMg53UffCMDg/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
Kode berikut adalah manifest.json blog, silahkan ganti dengan manifest.json blog Anda.

<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/ka@master/v8/manifest.json' rel='manifest'/>
Kode URL berikut ganti dengan URL logo blog segiempat seperti untuk favicon blog untuk share homepage di Facebook.

https://cdn.staticaly.com/img/3.bp.blogspot.com/-ccUYbxIIDvM/VqSSu92MnZI/AAAAAAAAksc/HExcuDOoKIQ/s300/logo.png
Dan silahkan sesuaikan kode yang bertanda xxxxxxxxxxxxxx untuk keperluan share ke Facebook dan Twitter.
Sekian, semoga bermanfaat.

Labels:
Share: