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>

41 Responses to "Kerangka Template dengan schema.org"

  1. 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
  2. wah buat bahan membuat template blog neh :D

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

    ReplyDelete
  4. Mantab Nih :D Coba Pake Ya :D

    ReplyDelete
  5. kerangka yang sangat sempurna
    izin ambil om

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

    ReplyDelete
  7. Wah,kayanya epic banget nih \o/ coba dulu ahh.. B)

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

    ReplyDelete
  9. Mantapp gan, langsung praktekk :D

    ReplyDelete
  10. Makasih udah dishare gan, ane belajar dulu

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

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

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

    ReplyDelete
  14. Schema org memang penting untuk template :) biar seonya nambah :D

    ReplyDelete
  15. makasih yaa gan, ini sangat keren.

    maaf baru bisa kembali tadi pagi internet saya sedang down

    ReplyDelete
  16. waahhh patut ane coba nih gan :D

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

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

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

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

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

    ReplyDelete
  22. 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
  23. schema.org untuk bagian komentar juga mas :D

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

    ReplyDelete
  25. BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
    http://zapplerepair.com/iPhone-6-lcd-ada-bayangan-hitam-diganti-baru-juga-sama.html

    ReplyDelete