How To Create Your Own Template For Blogger
Developing Blogger Template or Blogger template designing is not easier. But this comprehensive guideline with separate tutorials will help you to create a mobile responsive Blogger template from scratch Footstep-By-STEP.
We provide Custom Blogger Theme Blueprint Services.
You will have been found Blogger template designer software on Google search but those has many limitations for that you don't like this.
Disadvantages of using Blogger Template Designer Software
- You lot are compelled to choose the given blueprint example: card, layout, etc.
- Y'all won't larn how to lawmaking on a blogger template in future. So you can't customize your template where it is needed.
- You won't larn the bones structure of Blogger template etc. Just this Blogger template design guideline will make you lot success to create a full responsive, professional and custom Blogger theme or template that will be installed successfully and your visitors will run into the changes what you lot volition practice now.
Thinking about publishing post to own designed and developed blog is just about thrilling, isn't it?
How to create Blogger Template from Scratch
Earlier starting Blogger Theme Development
Check yourself. Are y'all skilled in the followings? If you don't take any skill then you accept to be skilled in HTML & CSS (At least). You can learn Spider web design with HTML & CSS courses from w3schools. It offers another popular courses free. Ane of them Bootstrap, JavaScript, jQuery.
- HTML (Required)
- CSS (Required)
- JavaScript (Optional)
- XML (Optional)
- Responsive Framework (Optional)
Read: How to create your kickoff Responsive Web log HTML Template
The components yous need:
1. HTML/CSS Editor. Off-line is recommended. Notepad++, Sublime Text, Dreamweaver, Geany etc. On which you prefer to code.
2. Notebook to relieve the essential codes, tips etc.
Probably, you had tried to upload your designed HTML template on Blogger manually or copy-paste. But every time you failed to see the changes because many errors are shown on notification bar in Blogger HTML Editor.
Today you won't be failed to see your designed HTML template through Blogger platform. Not simply the outlooking changes of your Template, but also y'all will make your HTML template dynamic such as Header, Postal service Title, Post Body, Sidebar, Footer volition show generated data. You tin can custom logo, Blog Title, Sidebar etc through Blogger Dashboard without customizing whatever HTML code.
How-do-you-do Globe in Blogger
i. From Blogger Dashboard → Theme → Edit HTML and make clean upwards all codes. Select all by Ctrl + A and DELETE or Backspace.
2. Now paste the raw HTML of basic page on the bare infinite. Then salve the theme. Assume, our selected codes are as below:
<html>
<head>
<title>Title of Blog</title>
</caput>
<torso>
<p>Hello World</p>
</trunk>
</html>
If you try to save the theme, you will run into a notification every bit "There should be i and but ane pare in the theme, and nosotros establish: 0". It shows because we have to put simply one peel within <caput></head> tag. And that is -
<b:skin>
<![CDATA[
/****CSS CODE*****/
]]>
</b:skin>
Please put this code subsequently </championship> tag and at present save your theme.
Ops ! Over again notification ! And this notification is:
"We did non find any section in your theme. A theme must have at least one b:department tag."
Blogger Editor shows this considering we didn't add whatsoever section in torso tag. So just copy-paste the followings lawmaking in body tag. You tin paste just before <p>Howdy Globe</p>
<b:section id="howdy" form="howdy"></b:section>
N.B. We will discuss about this after a while.
Now salvage the theme. Yep ! There is no notification showing now. Merely relax and preview. It is showing Hello World, isn't it? At present become to your weblog URL and meet what happened.
OMG ! Y'all take said Hello World through Blogger ! Y'all accept succeeded to run your HTML code !
Though it isn't plenty to create a Blogger template, only you lot take almost washed. Information technology is the primary and bones stride.
Yous may inquire What is <b:skin>...</b:skin> tag? This is for containing custom CSS code for decorating your Web log.
Creating a New Post to Come across How Look Information technology is
Lets create a new mail from Blogger Dashboard → Posts → New Post and write some dummy text to see what happened in published Blog.
After publishing new post, we don't encounter any post and our text.
You lot exclaimed, "What !!! Zilch to run across ! Where is our mail service? Why this?"
This is why we didn't tell Blogger where the post volition be shown. We didn't create and select whatsoever department for blog. Non only for blog post if nosotros want to show Header, Sidebar, Footer we accept to determine those by creating sections and widgets.
Instantly, copy-paste the followings codes in <trunk></body> tag.
<b:section grade='chief' id='main' showaddelement='aye'>
<b:widget id='Blog1' locked='false' championship='Blog Posts' type='Weblog' version='i'/>
</b:section>
And relieve your theme. If you see the preview you volition see a published post with title and post. That means, y'all have successfully published your blog. Now visit your weblog. Obviously, you will exist happy.
If you reload Blogger Editor, you will see some additional codes has been auto generated.
- Some code has been generated before
<head>tag and - Some code has been generated within
<b:widget></b:widget> -
Generated code earlier<head>tag defines xml version and others to return this template properly.
If you aggrandize the code within weblog widget you will run into principal, postal service, comment-form, share-button etc.
This is for default tools that is needed when nosotros publish post.
Agreement Section and Widget in Blogger
Though you take been succeeded to publish your weblog by following the above instructions, probably you didn't sympathise near section and widget. Why this? You should must learn the reasons. Because it will be needed in future to create new section and widget, subsequently all we didn't see how dynamic sidebar, header works.
Since we want to larn and make a professional Blogger theme, we should work on redesigned but full responsive HTML template that contains Header, Navbar, Chief, Sidebar, Footer etc. These features are not bachelor on our current HTML template where nosotros are working.
Information technology volition exist better decision to utilise built in full responsive framework like Bootstrap, W3CSS, etc. Just I prefer to work with Bootstrap and this weblog is likewise built with it.
You no need to download Bootstrap. Hither is the fix-fabricated Bootstrap html empty template and we will work on this template.
Get to Blogger Dashboard → Theme → Edit HTML and make clean upwardly all codes from your current theme. Y'all can fill-in your theme later deleting.
At present paste the following Bootstrap HTML template to editor and salvage. Now we will work on this template and forget the previous template. :) This is our republic of guinea pig template.
<html lang="en"><head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come commencement in the head; any other head content must come *subsequently* these tags -->
<title>My First Blogger Theme</title><!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/iii.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/iii.3.seven/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Reply.js doesn't work if yous view the folio via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/ane.iv.2/answer.min.js"></script>
<![endif]--><b:skin>
<![CDATA[
/**PUT YOUR ALL CSS Hither**/
]]>
</b:skin>
</head><body>
<div class="header-wrapper">
<div class="container">
<div class="brand">
<!--Put Header Section Here--></div>
</div>
</div>
<div class="content-wrapper">
<div class="container">
<div grade="row">
<div class="col-md-ix">
<div class="postal service-wrapper">
<!--Put Master Section Hither--></div>
</div>
<div class="col-md-3">
<div class="sidebar-wrapper">
<!--Put Sidebar Department Hither--></div>
</div>
</div>
</div>
</div>
<div grade="footer-wrapper">
<div class="container">
<p>Powered by <a href="http://www.blogger.com">Blogger</a></p>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body></html>
The blueprint of this template is like as:
Nosotros have said to show the post we created, it needs a department. Creating a department on Blogger theme is very easy.
What is section in Blogger?
A blogger section is a allocated infinite on Blogger theme to contain widgets.
Rules of creating department in Blogger
1. Each section has the starting tag and ending tag. Starting tag is <b:section> and ending tag is </b:section>. After publishing post if you inspect section from browser with Inspect element, you will see a div class instead of department. But in Blogger HTML Editor the sections are not changed to div grade.
ii. Each section must have an unique class and id. Naming the course and id of 1 section to another section is illegal. Since section is converted into div, the class and id of section are remain in div as attributes. And so we can customize the design of section by this class and id.
3.You lot are not allowed to nested of section. Under a section, creating another department is not valid.
four. You can insert only the given attributes.
5. It would exist amend to create section under a div.
Attributes of Department Tag
The given chart will show why, how you will utilize attributes within section tags.
| Attributes | Values | Required/Optional | Refers to |
|---|---|---|---|
| id | Unique proper name. Only letters and numbers are immune. Instance: header, navbar, sidebar, footer etc. | Required | Determining and customizing section with id. |
| course | Aforementioned as id. | Optional | Determining and customizing department with form. |
| maxwidgets | In numbers. Example: ane, 2, 3, 10 etc. | Optional | How much widgets we want to keep within this department. |
| showaddelement | Values of this are in Boolean. Yep and No. | Optional | If yes then the section will allow to add gadgets as widget, otherwise none. |
| growth | horizontal and vertical. | Optional | If vertical then section volition be arranged side-by-side. Othewise stacked. |
What is widget in Blogger?
Nosotros tin can phone call it Blogger plug-in. If nosotros want to insert or install external gadgets and so widget can create the scope to plug-in Blogger section. By default Popular posts, Search Bar, Email Subscription, Link List, Images, Text, Labels, HTML/CSS/JavaScript Code etc. are bachelor on Blogger equally gadgets.
Rules of widget
- You can use starting and ending tag in declaring widget. Starting tag is
<b:widget>and ending tag is</b:widget>. Or you lot can use but single closing tag as<b:widget/>. After publishing mail if you inspect widget from browser with Inspect element, you will run across a div class instead of widget. Just in Blogger HTML Editor the widget are not changed to div class. - Each widget must have an unique id and a blazon attributes. Naming the course and id of one section to another section is illegal. Since widget is converted into div, the id of widget are remain in div as attributes. Then we can customize the design of widget past this id.
- You lot are not immune to nested of widget. Under a widget, creating another widget is not valid.
- You can insert only the given attributes.
- Yous must have to create widget inside create department.
- You are not allowed to insert HTML inside widget.
Attributes of widget tag
| Attributes | Values | Required/Optional | Refers to |
|---|---|---|---|
| id | Unique name. Merely letters and numbers are allowed. Instance: header, navbar, sidebar, footer etc. | Required | Determining and customizing section with id. |
| blazon | Header, Blog, Profile, PageList, AdSense, Attribution, HTML | Required | Define the type of widget. |
| locked | yes, no | Optional | If yes then you can't delete or move this widget. |
| championship | Put any title name. Example: Tools, Advert, Lists etc. | Optional | Evidence the championship of this widget. |
| pageType | all, archive, master, item, static, all | Optional | Define the page type of widget. |
| mobile | aye, no, default | Optional | If yep, and so the widget volition be shown on mobile device. |
Differences betwixt Department and Widget in Blogger
| Department | Widget |
|---|---|
| Department is independent surface area. | Dependent Folio Elements that depends on Section. |
| Each Department can concur single or multiple widgets. | Widget can't hold section. |
| Department can't be added dynamically. | Widget can exist added from Folio Elements Tab (Add a Gadget) |
| Section has no attribute to control displaying or hiding on mobile devices. | Widget has an attribute to control displaying or hiding on mobile devices. |
| Section has no championship aspect to display or hide whatever title. | Widget has title aspect to display or hide the name of title. |
| Section allows to add together inner HTML direct. | Widget doesn't permit to add inner HTML directly. |
Similarity betwixt Department and Widget in Blogger
| Section | Widget |
|---|---|
| Section can't hold another section. | Widget also can't another widget. |
| In published blog Department tag is replaced with a new div. | Widget is likewise replaced with a new div. |
| Each Section has unique id. | Each Widget has unique id. |
| Department has no attribute to control displaying or hiding on mobile devices. | Widget has an attribute to control displaying or hiding on mobile devices. |
| Section has no title aspect to display or hide any title. | Widget has title attribute to display or hibernate the name of title. |
| Section allows to add inner HTML directly. | Widget doesn't permit to add together inner HTML straight. |
Advantages of naming the course of section:
i. Though it is optional to name the grade of section, we should add it considering, the naming will help Blogger to determine how to transfer weblog content when irresolute theme.
2. The native name of classes are 'navbar' for navigation menu, 'header' for header section, 'main' for post section, 'sidebar' for sidebar department where we put popular post, contempo post, labels etc. and 'footer' for footer section of blog.
At present create new sections and widgets, where you want to put this. Without header & blog widget, I do recommend, create all section but information technology would be meliorate to no create widgets in editor, since y'all can add widgets from Dashboard → Layout.
How to Make Blogger Mobile Responsive Menu
Y'all can make top bar responsive navigation menu for Blogger theme every bit y'all have washed on raw HTML template. Using static Navigation carte du jour in Blogger is the best mode to avert many bug. Though you can use 'Pages', 'Link list' gadget to insert link dynamically into your card, it will exist difficult for drop downward menu.
So you lot don't need to dynamic information as you did and will practice for others layout on Blogger. If y'all utilize Bootstrap Framework, then you tin apply navebar from here Or you tin bank check the actionable article almost responsive menu from w3schools.
Put the codes into your XML theme, where you want to show navigation menu bar. After creating Mobile responsive bill of fare just paste the targeting URLs into anchor tags. Example:
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
But you can dynamic homepage URL into <li></li> tag as <li><a expr:href='data:weblog.homepageUrl >Homepage</a></li>
Making Dynamic Blogger
Since the basic structure of Blogger Theme are:
1. Header
2. Blog
iii. Sidebar
four. Footer
we should brand this dynamic so that we don't demand lawmaking once again.
one. Making a Dynamic Header:
Put the following lawmaking in header div.
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='' type='Header' />
</b:section>
ii. Making Dynamic Blog Post:
Put the following code in mail service div.
<b:section form='main' id='principal' showaddelement='no'>
<b:widget id='Blog1' locked='truthful' title='Blog Posts' blazon='Web log' version='1' />
</b:department>
3. Making Dynamic Sidebar:
Put the following code in sidebar div.
<b:section grade='sidebar' id='sidebar' preferred='yes' showaddelement='yes'></b:department>
four. Making a Dynamic Footer:
Put the post-obit lawmaking in footer div.
<b:section form='sidebar' id='sidebar' preferred='yep' showaddelement='yes'></b:department>
Uses of Dynamic Default Data in Blogger
Blogger offers some default data tags by which we can call specific data to testify. Example: If nosotros want to the proper name of author of published mail in every post, then we can apply <data:post.author/> .
Use this after the following tags.
<div class='mail service-footer-line post-footer-line-ane'>
Similarly, there are many Blogger data tags to show specific data in published Blog. This Blogger Data Tags will piece of work merely in Blog widget.
| Blogger Information Tags | What Show |
|---|---|
<data:post.dateHeader/> | The post'due south date equally header. |
<data:title/> | The web log'southward title. |
<data:description/> | The blog'southward clarification. |
<data:olderPageTitle/> | Title of the older page of posts. |
<information:newerPageTitle/> | Title of the newer page of posts. |
<data:commentLabel/> | Number of Comments. |
<data:authorLabel/> | It will testify "posted by". |
<information:post.title /> | The post'southward title. |
<information:mail.torso/> | The post'south content. |
<information:post.writer/> | The postal service's author name. |
<information:post.url/> | The mail' url link. |
<information:post.timestamp/> | The post's appointment and fourth dimension. |
<data:characterization.name/> | The mail service'southward label. |
You tin go more Blogger Information Tags from Blogger Support.
What is dynamic anchor tag in Blogger?
Dynamic Anchor In Blogger is converted to full general ballast text with URL. Case: If the URL of homepage exist http://www.ictist.com then the following tag will be converted <a expr:href='information:web log.homepageUrl >Homepage</a> to
<a href="http://www.ictist.com">Homepage</a>
Some dynamic anchor tags for Blogger Theme
| Dynamic Anchor URL | What Bear witness |
|---|---|
<a expr:href='information:blog.homepageUrl >Homepage</a> | A text with homepage'due south URL |
<a expr:href='data:mail service.url'>Read More</a> | Read More Text with Post'due south URL |
<a expr:href='data:label.url' property='v:title' rel='five:url'><data:label.name/></a> | Characterization Proper noun with Label's URL |
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> | Newer Postal service Text with Newer Post URL |
<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a> | Older Post Text with Older Post URL |
<a expr:href='data:annotate.authorUrl' rel='nofollow'><information:comment.author/></a> | Writer's name with URL |
<a expr:href='data:comment.url' title='comment permalink'><information:annotate.timestamp/></a> | Comment Text to annotate with URL |
Avant-garde More Dynamic Operation
Bear witness/Hide, Custom Pattern, Landing page depending on page type and URL
If nosotros desire to hide sidebar in Homepage but want to evidence in post, folio we have published or if we want to show separate and new design of body when the URL of blog is http:www.ictist.com/p/contact.html, then it has access to do it with using conditional tags. Using conditional tags, we can use additional HTML, CSS, JavaScript as nosotros want and this make Blogger more dynamic.
Create Landing Folio in Blogger
Yous can put the code before </head> tag or after <body> tag.
<b:if cond='data:web log.pageType == "index"'>
<fashion>
.sidebar {
brandish: none;
}.post-wrapper {
width: 100%
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "detail"'>
<b:if cond='data:web log.pageType == "static"'>
<way>
.sidebar {
display: block;
}
</style>
</b:if>
</b:if>
Learn more dynamic provisional tags for Blogger. By this provisional tags you can target specific URL, Page etc.
#Making Dynamic Championship Tag
Now permit'due south go to make dynamic your Blog title tag. Information technology is combinational of Blogger Data Tags and Provisional Tags.
Replace your <title></title> tag with the following codes.
<b:if cond='data:blog.pageType == "index"'>
<title>Blogger, Code and Ubuntu Platform -
<information:web log.pageTitle />
</title>
<b:else />
<b:if cond='data:weblog.pageType != "error_page"'>
<title>
<data:blog.pageName /> -
<data:web log.title />
</championship>
</b:if>
</b:if>
<b:if cond='information:blog.pageType == "error_page"'>
<championship>Page Not Institute -
<information:weblog.title />
</title>
</b:if>
Supersede Blogger, Lawmaking and Ubuntu Platform with your desired championship name for your blog.
#Custom Design Blogger Templates with CSS
Nosotros have already finished 80% of Blogger Theme Evolution. The residual 20% is about custom designing with CSS.
Earlier editing the blueprint you should learn how to edit Blogger template.
Finding all form & id of div, section, nav etc is and then hard, bored, time-wasting by manually. Simply I will tell you the tricks to collect all class and id with default CSS inside few seconds.
1. Copy all the free CSS code for Blogger from the link.
2. Paste on to beatify or formatting.
iii. After formatted copy the all CSS and paste on any HTML/CSS editor.
4. Modify CSS class and id if whatsoever have bad formatted.
five. Paste on your Blogger Theme within <b:peel> [[ /******CSS ******/ ]]></b:skin>.
6. Save your theme.
7. Adjacent customize your CSS with inspector tools from browser.
Tips for Bootstrap: You tin can insert CSS class into specific HTML element. Suppose if you lot want to insert Bootstrap label into <information:post.author/>, then wrap this elements with span and insert label course as below:
<span course='characterization label-success'><data:mail.author/></span> Tips for Font-Awesome: You can insert Font Awesome icon as beneath.
<span course='label label-success'><i form='fa fa-user'/><data:postal service.author/></span> More Blogger Theme Customization
How to conform Writer, Labels, Engagement up and downward from postal service body?
1. Beginning go to Blogger Dashboard → Layout → Blog Posts → Edit and yous will see an pop window.
2. From 'Post Page Options' check the button what you desire to show and uncheck the pick you lot desire to hibernate.
3. Afterward scrolling down you will get 'Arrange Items'. Drag your selected item up and down to set.
four. Save.
If it doesn't piece of work and then move related lawmaking from Blogger Editor by manually.
How to add jump break in Blogger posts
Meet this article nearly how to add together jump break / read more button on Blogger.
How to customize date header Blogger
Add the following CSS to Blogger Theme as according to your customization.
.date-header{}
How to show/hide labels on Blogger
Add the following CSS to Blogger Theme
.post-labels{display:none;visibility:hidden} to hide and
.mail-labels{display:block;} to prove.
How to remove appointment and time from Blogger mail service
Put the CSS Into your Blogger Theme.
.post-timestamp{display:none;visibility:hidden}
How to add appointment and time in Blogger
Go to Blogger Dashboard → Layout → Blog Posts → Edit → Post Folio Picks
Check the date selection yous want to show.
Or
Use the following code in your Blogger theme later on <div class='post-footer-line mail-footer-line-1'>
<span class='post-timestamp'>
<b:if cond='information:peak.showTimestamp'>
<data:top.timestampLabel />
<b:if cond='data:post.url'>
<meta expr:content='information:mail service.url.canonical' itemprop='url' />
<a grade='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
<data:post.timestamp />
</abbr></a>
</b:if>
</b:if>
</span>
How to change author name in Blogger
Find for <data:post.writer/> from your Blogger HTML editor and replace with your desired proper noun with p tag. Example: <p>Elliyas</p>
How to remove author name from Blogger posts
Put the CSS Into your Blogger Theme.
.post-writer vcard {brandish:none;visibility:hidden}
How to add breadcrumb on Blogger
Run into this article about how to add breadcrumb on Blogger.
How to customize Dashboard Layout on Blogger
See this article well-nigh how to customize dashboard layout on Blogger.
How to customize featured postal service on Blogger
See this commodity about how to customize featured postal service on Blogger.
How to remove errors of Schema Markup on Blogger
Come across this article about how to remove errors of schema markup on Blogger.
How to apply font crawly on Blogger
See this commodity near how to use Font Awesome on Blogger.
How to apply Google font on Blogger
See this article about how to use Google Fonts on Blogger.
How to insert SEO Friendly Meta Tags on Blogger
See this article almost SEO Friendly Meta Tags on Blogger.
Creating professional Blogger theme depends on how exercise you know code, how practise you lot inspect chemical element, stylesheet, how is your concept, idea to design. Though this tutorial provides the guideline to create Blogger theme professionally, your effort & patient volition define how much skilled you will exist side by side.
Happy Coding !
Have got this article helpful or not working? Put your comment below.
How To Create Your Own Template For Blogger,
Source: https://www.ictist.com/2017/07/create-and-design-responsive-blogger.html
Posted by: randallevould.blogspot.com
0 Response to "How To Create Your Own Template For Blogger"
Post a Comment