Mulai
Gambaran sekilas, cara menggunakan theme keRangka, pengenalan dan memahami konsep dari keRangka theme.
Pengantar
Blogger adalah cms yang sangat populer setelah WordPress, memiliki antarmuka yang mudah di pahami serta terhubung dengan banyak fasilitas yang diberikan oleh perushaan induknya "Google", menjadikan Blogger memiliki daya tarik tersendiri bagi para fanatik bloging.
Mempercantik tampilan blog terlihat lebih menarik dan tampak profesional menjadi impian banyak orang. Itulah dasar dari ide terciptanya keRangka, berbagi sebuah konsep lama. (bagi anda berkecimpung di dunia edit-edit blog, ini bukanlah hal baru dan fenomena)
Perkembangan teknologi saat ini khususnya Blogger telah merubah kode-kode xml-html. Struktur klasik dengan kode <$BlogPageTitle$> sudah kurang populer. Era <b:section id='main'><b:widget> menjadi pilihan terbanyak saat ini. Selain mudah juga telah dilengkapi dengan mobile theme.
Kerkurangan blogger menjadikan alasan untuk meninggalkannya, tetapi, ini bisa menjadi alasan terbaik untuk mengenalnya.
keRangka Layout
keRangka adalah sebuah konsep membangun blogger blog dengan mengunakan 1 widget Blog1, meng-import Header, Aside dan Footer ke widget Blog dan menghilangkan widget Header, Aside dan Footer.
Bootstrap - v4-alpha
Bersama Bootstrap framework, untuk menjawab responsif theme. Bootstrap adalah framework CSS yang sangat populer saat ini. Selain mudah untuk di pelajari, Bootstrap dilengkapi dengan fasilitas yang lengkap. Selain itu banyak komunitas yang membagikan thame secara gratis. Inilah yang menjadi alasan keRangka memilih framework tersebut.
keRangka Template
Ini adalah konsep dasar dari keRangka template, yang fokus pengembangannya pada bagian <b:section class='site-keRangka container-fluid' id='keRangka'/>.
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection' lang='en' prefix='og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<script>
//<![CDATA[
/* Get the full URL of the current blogger page */
var blog = document.location.href.toLowerCase();
/* Do not redirect if the domain is .com already */
if (!blog.match(/\.blogspot\.com/)) {
/* Replace the country TLD with .com and ncr switch */
blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");
/* Redirect to the new .com URL in the current tab */
window.location.replace(blog);
//]]>
}
</script>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>
<meta content='ie=edge' http-equiv='x-ua-compatible'/>
<title><data:blog.pageTitle/></title>
<meta name="description" content="mysite html5 framework with scheme.org" />
<meta name="keywords" content="html5, schema.org" />
<meta name="robots" content="noodp, noydir" />
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta expr:content='data:blog.title' name='author'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.homepageUrl + "atom.xml"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<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 Feeds"' rel='alternate' type='application/rss+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<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 expr:href='"http://www.blogger.com/rsd.g?blogID=" + data:blog.blogId' rel='EditURI' title='RSD' type='application/rsd+xml'/>
<!-- Bootstrap CSS -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css' rel='stylesheet'/>
<style> <!-- /*
<b:skin>
<![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: keRangka Bootstrap Theme
Designer: AbhrandJ
URL: abhrandj.com
----------------------------------------------- */
]]>
</b:skin>
<style>
<![CDATA[
body {
min-width: ;
}
]]>
</style>
<b:include data='blog' name='google-analytics'/>
<!--
</head>
-->
</head>
<body class="home" itemscope itemtype="http://schema.org/WebPage">
<b:section class='site-keRangka container-fluid' id='keRangka'/>
<!-- jQuery first, then Bootstrap JS. -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script>
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
//<![CDATA[
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
})();
//]]>
</script>
<script>
//<![CDATA[
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
$('select.form-control').removeClass('form-control').css('width', '100%');
}
//]]>
</script>
<!--
</body>
-->
</body>
</HTML><b:section class='site-keRangka container-fluid' id='keRangka'/>
Pada bagian ini kita akan menambahkan Header, Aside dan Footer - <b:includable id='1-kR-header' var='top'/>
<b:section class='site-keRangka container-fluid' id='keRangka'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='post'/>
<b:includable id='1-kR-header' var='top'/>
<b:includable id='1-kR1-title' var='1-kR-header'/>
<b:includable id='1-kR2-description' var='1-kR-header'/>
<b:includable id='2-kR-navbar' var='top'/>
<b:includable id='3-kR-article' var='top'/>
<b:includable id='4-kR-aside' var='top'/>
<b:includable id='5-kR-footer' var='top'/>
<b:includable id='5-kR1-content' var='5-kR-footer'/>
...
</b:widget>
</b:section><b:includable id='main' var='post'/> adalah setingan dasar blogger, setingan dasar ini tidak dapat dirubah namanya karena inilah penentu tampilan blog. Akan tetapi dalam struktur didalamnya dapat kita rubah sesuai dengan apa yang kita inginkan.
Kita akan bermain-main dengan kode-kede <b:includable id=' ' /> dan <b:include name=' '/> dalam post selanjutnya Header.