Belajar membuat templat sendiri paling mudah

Cara mudah membuat templat blog, adalah hal yang mudah bagi kalian yang memahami bahasa pemrograman seperti css,html,java script dan lainya, namun bagi anda yang belum mengetahuinya mungkin agak sulit.
Bagi anda yang belum mengerti tentang bahasa pemrograman dan ingin membuat templat sendiri maka anda bisa belajar dengan tutorial dibawah yang akan saya bahas dengan detail.

Dasar templat blog

Dasar dari sebuah templat sendiri adalah di awali code <html> dan di tutup dengan code</html>

<html>
 <head>

  </head>
 <body>

  </body>
 </html>

Setelah anda mengetahui dasar templat tersebut kita menuju langkah selanjutnya copy kode di bawah

<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>
<head>

<meta charset='utf-8'/>

<!-- Seo Title Tag -->
<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>

<!-- Seo Meta Tag -->

<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[

CSS untuk Layout
*/]]></b:skin>
<style type='text/css'>

/*____________________________________

Name : Templat Keren Schema.org
Designer: Mas Ary
Author: Mas Ary
URL : http://blogseokeren.blogspot.com/
_____________________________________*/


CSS outer-wrapper
</style>

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

<div id='outer-wrapper'> <!-- outer-wrapper -->


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


<div id='main-wrapper' itemprop='mainContentOfPage'>
<!-- Wiget Post 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'>
<!-- 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'>
<!--lokasi footer -->

</footer>

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

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

Demo

Tags: