12 November 2016

Kerangka Template Polos Untuk Membuat Template Blog Sendiri

Kerangka Template Polos Untuk Membuat Template Blog Sendiri - Sudah lumayan banyak template blog yang saya buat, saya membuat template blog dengan menggunakan template blog yang masih polos, atau kerangka templatenya saja.

Kerangka Template Polos Untuk Membuat Template Blog Sendiri

Kerangka template ini hanya berisi komponen-komponen dasar template blog saja, seperti bagian post page, dan sidebar, dan lainnya. Untuk menggunakan atau mengembangkan kerangka template ini, sobat perlu paham tentang HTML, CSS dan juga Javascript agar bisa memodifikasi kerangka template ini menjadi template yang layak pakai di blog sobat. seperti menambahkan warna - warna tampilan, menu navigasi, dan jangan lupa menjadikannya responsive.

Kerangka template ini sangat ringan alias fast loading, karena masih polos tidak ada komponen - komponen yang membuat loadingnya menjadi berat, jadi sebisa mungkin saat sobat memodifikasi kerangka ini jangan meletakkan komponen - komponen yang membuat loading template ini menjadi berat.

Langsung saja ini dia kerangka templatenya.

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

Tempat untuk meletakkan CSS Layout Tata Letak

*/]]></b:skin>
<style type='text/css'>
/*
Name : Kerangka template dengan Schema.org
Url : www.musafus.web.id
*/

Tempat untuk meletakkan CSS

</style>

Tempat Untuk meletakkan Jquery
</head>

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

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

<header class='header' id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

<!-- tempat untuk widget header blog -->

</header>

<div id='main-wrapper' itemprop='mainContentOfPage'>
<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'>
<b:section class='sidebar' id='sidebar-kanan' showaddelement='yes'>
</b:section>
</aside>

<div class='clear'>&#160;</div>
<div class='clear'/>

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

<!-- Tempat untuk meletakkan Footer widget dan credit -->

</footer>

</div> <!-- end outer-wrapper -->

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

Itulah kerangka template polos yang saya gunakan untuk membuat template blog, yang saya lakukan adalah merombak kerangka template tersebut agar terlihat lebih menarik dan memiliki fungsi yang layak untuk digunakan di blog, selamat berkreasi dan semoga bermanfaat.
Disqus Comments