tutorial Creating a Blogspot Blogger Template \u2013 In a year that is increasingly developing as it is today, have you Bloggers, especially those using the Blogspot platform, able to create their own templates? Being able to create Blogger templates is a matter of pride, we can be creative in making various kinds of templates as we wish or just modifying existing templates to suit our tastes.<\/p>\n\n\n\n
HTML5 responsive blogger template<\/p>\n\n\n\n
If you already understand HTML, CSS and the basics of Javascript, then creating a blogger template is no longer a difficult thing to do, because basically a blogger template consists of an arrangement of HTML and CSS tags inserted with special XML tags from Blogger. These Blogger tags are pattern in nature and cannot be changed, so to use them, we have to memorize their functions. Don’t worry, Blogger tags are not programming languages \u200bthat require extra reasoning to understand them, Blogger tags are very easy to master for anyone.<\/p>\n\n\n\n
Before practicing making blogger templates, it’s good to know in advance what are the functions of the blogger tags? As with PHP programming, if you have heard of MySQL data communication with PHP, it is not much different from the Blogger tag whose function is as a communication language to the Blogger database server so that post data can be displayed on web pages, save page settings (Page) , save widget settings, display post time, display author, etc.<\/p>\n\n\n\n
For this reason, the main requirement for anyone who wants to be able to create their own Blogger template is to first master HTML, CSS and the basics of Javascript. It doesn’t have to be hard, you just need to understand the basics so that you will gradually get used to it. In order not to be lengthy and too long, here I choose a ready-made regular HTML5 template, this template is free as learning material from 1stwebdesigner, here we are only trying to convert or turn it into a Blogger compatible template. Download the basic template and see the demo.<\/p>\n\n\n\n
How to Create Blogger Templates<\/p>\n\n\n\n
Notice, below is the HTML5 template code originally. Please copy and paste in Notepad++ or your favorite other editor. Save with .html extension:<\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=\u201den\u201d><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
<title> 1WD HTML5 theme <\/title><\/p>\n\n\n\n
<meta charset=\u201dutf-8\u2033 \/><\/p>\n\n\n\n
<link rel=\u201dstylesheet\u201d href=\u201dstyle.css\u201d type=\u201dtext\/css\u201d \/><\/p>\n\n\n\n
<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033> <\/head><\/p>\n\n\n\n
<body class=\u201dbody\u201d><\/p>\n\n\n\n
<header class=\u201dmainHeader\u201d> <img src=\u201dimg\/logo.gif\u201d><\/p>\n\n\n\n
<nav><\/p>\n\n\n\n
<ul><\/p>\n\n\n\n
<li class=\u201dactive\u201d> <a href=\u201d#\u201d> Home <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Portfolio <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Blog <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Contact <\/a> <\/li><\/p>\n\n\n\n
<\/ul><\/p>\n\n\n\n
<\/nav><\/p>\n\n\n\n
<\/header><\/p>\n\n\n\n
<div class=\u201dmainContent\u201d><\/p>\n\n\n\n
<div class=\u201dcontent\u201d><\/p>\n\n\n\n
<article class=\u201dtopcontent\u201d><\/p>\n\n\n\n
<header><\/p>\n\n\n\n
<h2> <a href=\u201d#\u201d rel=\u201dbookmark\u201d title=\u201dPermalink to this POST TITLE\u201d> Second article <\/a> <\/h2> <\/header><\/p>\n\n\n\n
<footer><\/p>\n\n\n\n
<p class=\u201dpost-info\u201d> This was posted on the 2nd of March 2013 by Christian Vasile <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<content><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <\/p><\/p>\n\n\n\n
<p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. <\/p><\/p>\n\n\n\n
<\/content><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<article class=\u201dbottomcontent\u201d><\/p>\n\n\n\n
<header><\/p>\n\n\n\n
<h2> <a href=\u201d#\u201d rel=\u201dbookmark\u201d title=\u201dPermalink to this POST TITLE\u201d> First post <\/a> <\/h2> <\/header><\/p>\n\n\n\n
<footer><\/p>\n\n\n\n
<p class=\u201dpost-info\u201d> This was posted on the 5th of March 2013 by Christian Vasile <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<content><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <\/p><\/p>\n\n\n\n
<\/content><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<aside class=\u201dtop-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Top Sidebar <\/h2><\/p>\n\n\n\n
<p> Discover how to use new techniques to achieve an outstanding, cross-browser HTML5. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<aside class=\u201dmiddle-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Middle Sidebar <\/h2><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<aside class=\u201dbottom-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Bottom Sidebar <\/h2><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<footer class=\u201dmainFooter\u201d><\/p>\n\n\n\n
<p> Copyright \u00a9 2013 <a href=\u201dhttps:\/\/www.androphedia.com\u201d> 1stwebdesigner <\/a> <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
HTML5 Hold it, before it’s modified<\/p>\n\n\n\n
We copy paste the style.css file into a single html file and below is the modified HTML5 template above:<\/p>\n\n\n\n
<?xml version=\u201d1.0\u2033 encoding=\u201dUTF-8\u2033 ?><\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html b:version=\u20192\u2032 class=\u2019v2\u2032 expr:dir=\u2019data:blog.languageDirection\u2019 xmlns=\u2019https:\/\/www.w3.org\/1999\/xhtml\u2019 xmlns:b=\u2019https:\/\/www.google.com\/2005\/gml\/b\u2019 xmlns:data=\u2019https:\/\/www.google.com\/2005\/gml\/data\u2019 xmlns:expr=\u2019https:\/\/www.google.com\/2005\/gml\/expr\u2019><\/p>\n\n\n\n
<head> <title><data:blog.pageTitle\/><\/title> <meta content=\u2019width=device-width,initial scale=1,minimum-scale=1,maximum-scale=1\u2032 name=\u2019viewport\u2019\/> <meta content=\u2019text\/html;charset=UTF-8\u2032 http-equiv=\u2019Content-Type\u2019\/> <meta content=\u2019IE=edge,chrome=1\u2032 http-equiv=\u2019X-UA-Compatible\u2019\/> <b:include data=\u2019blog\u2019 name=\u2019all-head-content\u2019\/> <b:skin><![CDATA[<\/p>\n\n\n\n
\/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013 Blogger Template Style Name: Template Wussh\u2026 Designer: Syafaatfm URL: www.facebook.com\/syafaatfm \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013 \/ \/ =========================== ======= Body style ======== =========================== \/ body { background: #E0E0E0; color: #000305; font-size: 87.5%; \/ Base font size: 14px \/ font-family: \u2018Trebuchet MS\u2019, Trebuchet, \u2018Lucida Sans Unicode\u2019, \u2018Lucida Grande\u2019, \u2018Lucida Sans\u2019, Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; } .body { clear: both; margin: 0 auto; width: 70%; } \/ =========================== ========= Headings ======== =========================== \/ h2 { font-size: 1.571em } \/ 22px \/ h3 { font-size: 1.429em } \/ 20px \/ h4 { font-size: 1.286em } \/ 18px \/ h5 { font-size: 1.143em } \/ 16px \/ h6 { font-size: 1em } \/ 14px \/ h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; } .Header h1 { padding: -9999px 0; } \/ =========================== ======= Anchor style ====== =========================== \/ a { outline: 0; } a img { border: 0px; text-decoration: none; } a:link, a:visited { color: #CF5C3F; padding: 0 1px; text-decoration: none; } a:hover, a:active { background-color: #CF5C3F; color: #fff; text-decoration: none; } \/ =========================== ===== Main Navigation ===== =========================== \/ .mainHeader nav { background: #666; font-size: 1.143em; height: 40px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader nav ul { list-style: none; margin: 0 auto; } .mainHeader nav ul li { float: left; display: inline; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #fff; display: inline-block; height: 30px; padding: 5px 23px; text-decoration: none; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; } .mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader img { width: 30%; height: auto; margin: 3% 0; } \/ =========================== ======= Content Area ====== =========================== \/ .mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-bottom: 3%; } .bottomcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; } .content { width: 68%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .post-info { font-style: italic; color: #999; font-size: 85%; } \/ =========================== ======== Sidebar ========== =========================== \/ .top-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .middle-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .bottom-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; } \/ =========================== ========= Footer ========== =========================== \/ .mainFooter { width: 100%; float: left; margin-top: 2%; margin-bottom: 2%; padding-left: 0; background-color: #666; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; } .mainFooter p { width: 91%; margin: 2% auto; } \/ =========================== ====== Media Queries ====== =========================== *\/<\/p>\n\n\n\n
@media only screen and (min-width: 150px) and (max-width: 780px) {<\/p>\n\n\n\n
.body {<\/p>\n\n\n\n
clear: both;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
font-size: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav {<\/p>\n\n\n\n
background: #666;<\/p>\n\n\n\n
font-size: 1.143em;<\/p>\n\n\n\n
height: 160px;<\/p>\n\n\n\n
line-height: 30px;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav ul {<\/p>\n\n\n\n
list-style: none;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
padding-left: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav li {<\/p>\n\n\n\n
margin-left: 0 auto;<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav a:link,<\/p>\n\n\n\n
.mainHeader nav a:visited {<\/p>\n\n\n\n
color: #FFF;<\/p>\n\n\n\n
display: block;<\/p>\n\n\n\n
height: 30px;<\/p>\n\n\n\n
padding: 5px 0;<\/p>\n\n\n\n
text-decoration: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav a:active,<\/p>\n\n\n\n
.mainHeader nav .active a:link,<\/p>\n\n\n\n
.mainHeader nav .active a:visited {<\/p>\n\n\n\n
background: #CF5C3F;<\/p>\n\n\n\n
color: #fff;<\/p>\n\n\n\n
text-shadow: none !important;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav li a {<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader img {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
height: auto;<\/p>\n\n\n\n
margin-bottom: 3%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainContent {<\/p>\n\n\n\n
overflow: hidden;<\/p>\n\n\n\n
line-height: 25px;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-bottom: 2%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.topcontent {<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
padding: 2% 5%;<\/p>\n\n\n\n
margin-bottom: 4%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottomcontent {<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
padding: 2% 5%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.content {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.post-info {<\/p>\n\n\n\n
display: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.top-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.top-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.middle-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.middle-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottom-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0%;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 1%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottom-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainFooter {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
margin: 2% 0;<\/p>\n\n\n\n
padding-left: 0;<\/p>\n\n\n\n
background-color: #666;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
color: #FFF;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainFooter p {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
margin: 2% auto;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
]]><\/b:skin> <\/head> <body class=\u2019body\u2019> <b:section class=\u2019header\u2019 id=\u2019header\u2019 maxwidgets=\u20191\u2032 showaddelement=\u2019no\u2019> <b:widget id=\u2019Header1\u2032 locked=\u2019true\u2019 title=\u2019Cara Download Premium \u2013 Free And Premium Tutorial (Header)\u2019 type=\u2019Header\u2019 \/> <\/b:section> <header class=\u2019mainHeader\u2019> <nav><ul> <li class=\u2019active\u2019><a href=\u2019#\u2019>Home<\/a><\/li> <li><a href=\u2019#\u2019>Portfolio<\/a><\/li> <li><a href=\u2019#\u2019>Blog<\/a><\/li> <li><a href=\u2019#\u2019>Contact<\/a><\/li> <\/ul><\/nav> <\/header> <!\u2013 content wrapper start \u2013> <div class=\u2019mainContent\u2019> <!\u2013 post wrapper start \u2013> <div class=\u2019content\u2019> <article class=\u2019topcontent\u2019> <content> <b:section class=\u2019main\u2019 id=\u2019main\u2019 showaddelement=\u2019no\u2019> <b:widget id=\u2019Blog1\u2032 locked=\u2019true\u2019 title=\u2019Posting Blog\u2019 type=\u2019Blog\u2019 \/> <\/b:section> <\/content> <\/article> <\/div> <!\u2013 post wrapper end \u2013> <!\u2013 post wrapper start \u2013> <aside class=\u2019top-sidebar\u2019> <article> <b:section class=\u2019sidebar\u2019 id=\u2019sidebar\u2019 preferred=\u2019yes\u2019\/> <\/article> <\/aside> <!\u2013 post wrapper end \u2013> <\/div> <!\u2013 content wrapper end \u2013> <div class=\u2019clear\u2019\/> <footer class=\u2019mainFooter\u2019> <p>Copyright \u00a9 2013 <a href=\u2019https:\/\/www.androphedia.com\u2019>1stwebdesigner<\/a><\/p> <\/footer> <\/body> <\/html><\/p>\n\n\n\n
The HTML5 script has been converted into a valid blogger template.<\/p>\n\n\n\n
Save the template above with the extension up.xml, then upload it to your Blogger dashboard to see the results.<\/p>\n\n\n\n
You just need to learn the difference between the two HTML scripts above, copy and copy them to Notepad++ so that it looks clearer. Nothing has been changed, only a few Blogger tags have been inserted to match the allowed standard templates<\/p>\n\n\n\n
Blogger Tag Function Explanation<\/p>\n\n\n\n
Section <b:section class=\u2019header\u2019 id=\u2019header\u2019 maxwidgets=\u20191\u2032 showaddelement=\u2019no\u2019><\/p>\n\n\n\n
In creating a blogger template, Section is a section that serves to retrieve data from the Blogger database.<\/p>\n\n\n\n
class = CSS class functions will be applied in this section, can be modified at will.<\/p>\n\n\n\n
id = id css.<\/p>\n\n\n\n
maxwidgets = The number of widgets allowed in this section.<\/p>\n\n\n\n
showaddelement = yes or no, to display \u201cAdd a Gadget\u201d on the Layout page.<\/p>\n\n\n\n
Widget <b:widget id=\u2019Header1\u2019locked=\u2019true\u2019 title=\u2019Judulnya Blog\u2019 type=\u2019Header\u2019 \/><\/p>\n\n\n\n
id = optional, serves to give a name to the widget, the name of the widget must be unique and cannot be the same as the others.<\/p>\n\n\n\n
locked = true or false, if set to true then the widget cannot be deleted on the layout page and vice versa.<\/p>\n\n\n\n
title =optional, if not set then blogger will set it automatically.<\/p>\n\n\n\n
type = It is important to determine what type of widget you want to create, for example: for a header the widget type is Header , for displaying posts the widget type is Blog , for HTML\/Javascript the widget type is HTML.<\/p>\n\n\n\n
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link:\u00a0www.beadgroup.com<\/a><\/p>\n\r\n