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 + " no-js rwd"' 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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<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 + "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:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Deskripsi - Blog' name='description'/>
<meta content='Keyword blog' name='keywords'/>
</b:if>
<style type="text/css"><!-- /* <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'> </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 -->
<!--</body>--></body></HTML>
wah boleh juga nih, keren mas...
ReplyDeletecoba dulu sob..... :D :D :D
ReplyDeleteSederhana Tapi Hasilnya Bagus Sob.Itu Udah Valid Html 5 ya??
ReplyDeleteuntuk validasi HTML dan CSS3 akan saya bahas pada tutorial selanjutnya :-bd
Deletecoba dlu kang :D
ReplyDeletemakasih sob, bagus nih :)
ReplyDeletethanks kerangkanya sob :bd
ReplyDeletemau ane bikin bikin
Mantab Nih :D Coba Pake Ya :D
ReplyDeletewah boleh juga nih gan :D
ReplyDeletekerangka yang sangat sempurna
ReplyDeleteizin ambil om
bagus nih
ReplyDeletecommentback nya ya :-bd : http://halimtc.blogspot.com/
ok gan
Deletenanti saya mluncur :-bd
I am test comment
DeleteWah,kayanya epic banget nih \o/ coba dulu ahh.. B)
ReplyDeleteSederhana tapi cepat gan!!
ReplyDeletekerangkannya mantap,pengen belajar buat template tapi ribet ( ane nggak suka hal yg ribe :v )
ReplyDeletepake template orang lain aja deh :D
Mantapp gan, langsung praktekk :D
ReplyDeleteMakasih udah dishare gan, ane belajar dulu
ReplyDeletewah, lumayan dapet post beginian, buat belajar lagi deh.
ReplyDeletesalam mas saya pendatang baru di Blogger.
hehe :)
wah boleh juga tuh kerangkanya, boleh ane edit lagi dan nerusin :D
ReplyDeletepgn bljr ane gan buat template sndri, trusin tutorial nya ya gan
ReplyDeletemakasih yaa gan, ini sangat keren.
ReplyDeletemaaf baru bisa kembali tadi pagi internet saya sedang down
waahhh patut ane coba nih gan :D
ReplyDeleteBoleh nih kerangkanya untuk buat template blog baru :-bd
ReplyDeleteMantap Bro :)
ReplyDeleteCocok nih buat yg lagi belajar bikin template, di jamin jadi bagus :D
ReplyDelete\o/ Coba Dulu Nih... :D :p Mau bikin Template Baru
ReplyDeleteoke, thanks gan atas tempenya...
ReplyDeleteagan nih sepertinya kuliah di web design :W
ReplyDeleteThank you bro !
ReplyDeletenah ini yang saya cari2 untuk belajar membuat template sendiri... makasih mas.... |o| kalo berkenan kunjingi blog saya yang berantakan http://antoncabon.blogspot.com
ReplyDeleteschema.org untuk bagian komentar juga mas :D
ReplyDeleteThanks infonya guys :)
ReplyDeletehttp://goo.gl/8yKBo1