Struktur Dasar Template Blog Valid HTML 5 dan Schema.org - Selamat malam sobat blogger semuanya, kali ini saya akan memberikan sedikit informasi tentang bagaimana cara membuat kerangka tentang pembuatan sebuah template blog valid HTML5 dan Schema.org.
Untuk lebih jelasnya lagi silahkan Copy semua code HTML dibawah ini, setelah itu simpan dalam format .XML
<?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: SAGITARIUS KUSADHI
URL : http://shaggyweb.blogspot.com
--------------------------*/
Tulis CSS anda disini, mulai dari outer-wrapper dan seterusnya
/* make sidebar nav vertical */
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</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 -->
<div class="row"> <div class="col-sm-3"> <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Menu Vertikal</span>
</div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"> <li><a href="#">Dropdown Satu</a></li>
<li><a href="#">Dropdown Dua</a></li>
<li><a href="#">Dropdown Tiga</a></li>
<li class="divider"></li>
<li class="dropdown-header">Lainnya</li>
<li><a href="#">Yang Lainnya</a></li>
</ul> </li>
<li><a href="#">Menu Empat</a></li>
<li><a href="#">Komentar <span class="badge">1,118</span></a></li>
</ul> </div> <!--/.nav-collapse -->
</div> </div> </div> <div class="col-sm-9"> Main konten ada di sini
</div></div>
<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>
</HTML>
Silahkan copy kode diatas dalam mode edit HTML pasa template kamu, jika ada syntax yang error jangan sungkan untuk memberitahukan kepada saya melalui form komentar di bawah ini. Terimakasih.
EmoticonEmoticon