Bloguma aklıma gelenleri yazıyorum. Bazan da bulduğum sonra arayıp bulması zor bilgileri saklıyorum. Şimdi yazdıklarım da böyle bilgiler.
Blog bir web sayfası hazırlamayı kolaylaştırarak yazanın HTML kodları ile uğraşmadan yazılarını kelimelerle anlatması için düşünülmüştü. Şimdi XML ve HTML5 bu ortamı hazırlayan altyapılar.
Bir blog yazı karakterleri, boyutları, vurgulamaları, renklendirmelerı, kolon, sütun ve resimler ile bir bütün oluşturuyor. Bu özelliklerin kompozisyonları çeşitli temalar altında gruplandırılmış. Kendi temamı yaratayım derseniz altyapıları öğrenmeniz ve araştırmanız gerekiyor.
Blogger içinde bir HTML editörü var. Buraya kopyala yapıştır yaparak dosya aktarılabiliyor. Sakla yaptığınız zaman XML yardımı ile yapı ve desen bilgileri son haline geliyor ve blog görünümü şekilleniyor.
https://learn2programming.itentertainment.org/2014/12/how-to-create-blogger-template-from.html
Aşağıdaki bilgiler ilk öğrendiklerim.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
</b:skin>
</head>
<body>
<b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
</b:section>
</body>
</html>
Fig. 3 - Simplest template code.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
</body>
</html>
Daha sonra bulduğum bağlantı da çok faydalı oldu.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content' />
<title>
<data:blog.pageTitle/>
</title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS code goes here... */
]]>
</b:skin>
</head>
<body>
<div id="blog-wrapper">
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<div id="content-wrapper">
<div class="content-table">
<div class="content-row">
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
<aside class="column">
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<div>
</div>
</div>
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}
Widget yapmak için de
https://www.freshtechtips.com/2013/02/how-to-create-blogger-widget.html
/* Sample widget code for displaying current web page URL in a colored box */
<b:section class='mysection' id='mysection' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML10' locked='true' title='Box for displaying current Page URL' type='HTML'>
<b:includable id='main'>
<b:include name='showpageurl'/>
</b:includable>
<b:includable id='showpageurl'>
Current web page URL is: <data:blog.url/>
</b:includable>
</b:widget>
</b:section>
CSS
div#HTML10 {
background: #f7f3e2;
border: .1em solid #e5e597;
padding: 0.833em 0.467em;
text-align: center;
font-weight: bold;
font-size: 18px;
}
