Kerangka Template dengan schema.org

Berikut ini adalah kerangka template dengan schema.org.
Kerangka ini juga kerangka yang saya gunakan pada template ini. Kerangka ini dapat anda gunakan sebagai kerangka default dalam langkah pembuatan template blog.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/ID_G-pluss' rel='author'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found ~ <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
</b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &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;http://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'/>
<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 == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Deskripsi - Blog' name='description'/>
<meta content='Keyword blog' name='keywords'/>
</b:if>
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
Disini nantinya akan di isi CSS untuk Layout Tata Letak
*/]]></b:skin>
<style type='text/css'>
/*
Name : Kerangka template dengan Schema.org
Designer: Rifan Hidayat
URL : http://ngudang.blogspot.com
*/

Tulis CSS anda disini, mulai dari outer-wrapper dan seterusnya 
</style>

Jquery disini

</head>
<body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>

<div id='outer-wrapper'> <!-- Disini posisi elemen outer-wrapper -->

<header class='header' id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<!-- Disini lokasi untuk Header judul dan deskripsi Blog -->
</header>

<div id='main-wrapper' itemprop='mainContentOfPage'>
<!-- Disini lokasi untuk posting dan komentar dan b:section dibawah ini adalah widget untuk posting dan komentar -->

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

</div>

<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<!-- Disini Lokasi sidebar blog yang berisi widget, dan kode b:section dibawah ini adalah kode untuk widget sidebar -->
<b:section class='sidebar' id='sidebar-kanan' showaddelement='yes'>
</b:section>
</aside>
<div class='clear'>&#160;</div>
<div class='clear'/> <!-- Pembatas dari outer-wrapper -->

<footer class='clear' id='site-footer' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

<!-- Disini lokasi footer, bisa di isi widget dan copyright desainer -->

</footer>

</div> <!-- Akhir dari outer-wrapper -->

&lt;!--</body>--&gt;&lt;/body&gt;</HTML>

33 Responses to "Kerangka Template dengan schema.org"

  1. wah boleh juga nih, keren mas...

    ReplyDelete
  2. coba dulu sob..... :D :D :D

    ReplyDelete
  3. Sederhana Tapi Hasilnya Bagus Sob.Itu Udah Valid Html 5 ya??

    ReplyDelete
    Replies
    1. untuk validasi HTML dan CSS3 akan saya bahas pada tutorial selanjutnya :-bd

      Delete
  4. makasih sob, bagus nih :)

    ReplyDelete
  5. thanks kerangkanya sob :bd
    mau ane bikin bikin

    ReplyDelete
  6. wah boleh juga nih gan :D

    ReplyDelete
  7. kerangka yang sangat sempurna
    izin ambil om

    ReplyDelete
  8. bagus nih
    commentback nya ya :-bd : http://halimtc.blogspot.com/

    ReplyDelete
    Replies
    1. ok gan

      nanti saya mluncur :-bd

      Delete
    2. I am test comment

      Delete
  9. Wah,kayanya epic banget nih \o/ coba dulu ahh.. B)

    ReplyDelete
  10. Sederhana tapi cepat gan!!

    ReplyDelete
  11. kerangkannya mantap,pengen belajar buat template tapi ribet ( ane nggak suka hal yg ribe :v )
    pake template orang lain aja deh :D

    ReplyDelete
  12. Mantapp gan, langsung praktekk :D

    ReplyDelete
  13. Makasih udah dishare gan, ane belajar dulu

    ReplyDelete
  14. wah, lumayan dapet post beginian, buat belajar lagi deh.
    salam mas saya pendatang baru di Blogger.
    hehe :)

    ReplyDelete
  15. wah boleh juga tuh kerangkanya, boleh ane edit lagi dan nerusin :D

    ReplyDelete
  16. pgn bljr ane gan buat template sndri, trusin tutorial nya ya gan

    ReplyDelete
  17. makasih yaa gan, ini sangat keren.

    maaf baru bisa kembali tadi pagi internet saya sedang down

    ReplyDelete
  18. waahhh patut ane coba nih gan :D

    ReplyDelete
  19. Boleh nih kerangkanya untuk buat template blog baru :-bd

    ReplyDelete
  20. Cocok nih buat yg lagi belajar bikin template, di jamin jadi bagus :D

    ReplyDelete
  21. \o/ Coba Dulu Nih... :D :p Mau bikin Template Baru

    ReplyDelete
  22. oke, thanks gan atas tempenya...

    ReplyDelete
  23. agan nih sepertinya kuliah di web design :W

    ReplyDelete
  24. nah ini yang saya cari2 untuk belajar membuat template sendiri... makasih mas.... |o| kalo berkenan kunjingi blog saya yang berantakan http://antoncabon.blogspot.com

    ReplyDelete
  25. schema.org untuk bagian komentar juga mas :D

    ReplyDelete
  26. Thanks infonya guys :)
    http://goo.gl/8yKBo1

    ReplyDelete