Sunday, 16 September 2018

How To Make Blogger Blog Template From Scratch - Step by Step Tutorial

Many Bloggers prefers Blogger over WordPress.But still, the truth is most of the blogs are based on WordPress.This is the reason there has been a lot of development in WordPress Themes,Plugins tools etc.

But today, we are going to see how to make the theme of the Blogger blog from scratch. If you also want to make your own theme, for personal or commercial use, you require -

  1. Knowledge of HTML or XML
  2. Little CSS 
  3. And JavaScript(if you want to add the further functionality to the theme and its elements)
So let's start.
Make blogger theme from scratch

Creating A Blank Theme Template

We start first by creating a blank template.Later on we will go on adding elements.

You can start by making a XML file on your computer (local storage) OR directly start by typing in the Blogger's HTML editor.I will suggest to directly write in Blogger's HTML editor as you can execute the script there and other hand, check for the errors also.

Before writing, Backup your original theme and content.For that, follow these steps:-

  1. Go to Blogger.com.
  2. Then select Theme >> Backup/Restore.
  3. Click on Download theme to download the theme.
Theme will be downloaded in .xml file, which you can able to restore if any conjunction occurs in the theme you are currently creating.

Now to write the first theme, Go in Theme >> Click on Edit HTML.

You will see there a code already present of the existing theme.Select it and hit delete.Now click on Save theme button.
You'll get the following error-
Error parsing XML, line 1, column 1: Premature end of file.

Its because the Blogger theme should be a XML file with all the minimal required contents for the theme to successful render.Lets add these minimal components one by one to make our first blank theme.

First thing you need is common xml, html, body and head tags.So lets make them like below-
<?xml version="1.0" encoding="UTF-8" ?>
<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>
 </head>
 <body>
 </body>
</html>
Now when we try to save this script, Blogger gives following error.
There should be one and only one skin in the theme, and we found: 0

That means there should be only one skin in the theme.This is our second main component of the theme.Lets make it.
<b:skin>
  </b:skin>
We will put this inside the <head>.
Skin tag should contain all the CSS of the document.You can also put that anywhere in the document, but this tags are important.There can be only and only one <b:skin> in the document.

Now lets save this.But wait, Blogger gives us another error.
We did not find any section in your theme. A theme must have at least one b:section tag.

Here comes our third important component of the blogger template- <b:section> tag.Add the following tag in <body>.
<b:section id='section1'></b:section>
There should be at-least one section tag our template and each section should have unique id.

Click to save the theme.Now you can view your blog to see the very blank page of our blogger template.

Many of you may wonder about using of  <b: in the tags like section and skin.Let me tell you, they are namespaces used across the blogger.Blogger later changes them to <div> element.

Making Blogger Theme Sections

We already made a section above with a unique id.There can be many sections on each page such as post body, header, sidebar, footer and so on.We can letter assign them or stylise them by writing CSS in <b:skin>.

Sections contains widgets.We'll see how to make them later.Let's first make the sections.

You can choose most common design for the theme having 4 sections - header, blog post, sidebar and footer.I would like to make the theme somewhat like below.
So lets make 2 sections with their unique ids.Header and footer will be in <header> and <footer> tags and ads will be in <div>.
<body>   
   <b:section id='body'></b:section>
<b:section id='sidebar'></b:section>
</body>
After successfully saving this blogger template, go to layout.

You'll see 2 sections are already been made there.Now you can easily add the widgets from there.But wait! We need to position the sections according to our scratch using CSS and for that, we will assign classes to our sections.After assigning classes, the code will look like below.[There is no actual need of assigning classes to sections as we can select elements in CSS using their ids also.]
<body>
   <b:section id='body' class='body'></b:section>
<b:section id='sidebar' class='sidebar'></b:section> </body>

Okay so now we can position these elements using CSS. Note that <b:section> changes to <div> with their specified IDs after rendering so you can select them in CSS like following.
div#body{}
div#sidebar{}
But we have set classes to these elements so it is much easier to select them with classes.

Assigning Positions For Sections

For assigning positions for sections in our Blogger template, we will make use of some basic CSS properties like height, width, left, right, margin, padding etc.
<![CDATA[ 
.sidebar{
     height: 100%;
     width: 250px;
     position: fixed!important;
     z-index: 1;
     overflow: auto;
     background-color:#b5b5b5;
     animation:animateleft 0.4s;
}
 .body{
     margin-left:250px;
     padding: 20px;
}
]]>
So after adding the above CSS, the theme looks like this-
Magz theme for blogger.
The property of sidebar is set to be fixed.So that the sidebar will be fixed no matter how you scrolled down. I've added little dummy text 'Lorem Ipsum' to scroll and see whether the tings work fine or not.

You must have noticed that <![CDATA[ and ]]> comes before and after the CSS code in <b:skin>.

What does <![CDATA[ ]]>  means?

Lets take the definition directly from StackOverflow.
CDATA stands for Character Data and it means that the data in between these strings includes data that could be interpreted as XML markup, but should not be.
That means CSS will not be interpreted as XML.Note that CDATA should also be used to wrap JavaScript, or Blogger might give you an error.


Attributes Of Sections

One thing remained was attributes.Below is the table of possible attributes and their values that you can use in <b:section> tag.
Attribute
Required/Optional
Value
Default value
id
Required
A unique Id made up of letters and numbers.
(Null)
class
Optional
A class name with letters and numbers.
(Null)
maxwidgets
Optional
Maximum number of widgets that can be placed in the session. Value can be any number.
(If you don’t specify a limit, you can add unlimited widgets.)
showaddelement
Optional
Determines whether the Page Elements tab will show the 'Add a Page Element' link in the section. The possible values are ‘yes’ or  ‘no’.
Yes
growth
Optional
Determines the arrangement of the widgets .Possible values are ‘horizontal’ or  ‘vertical’.
vertical

So if you want to change any of the settings above you can change it with attributes.Below is the sidebar session after adding some attributes.
<b:section class='sidebar' id='sidebar' growth='vertical' maxwidgets='10'/>

Adding Widget to Blogger Template

Now next step comes to be adding of widgets to our Blogger Template. For that, go to layout > select a section and click on add gadgets.
You can also add widgets through markup.Widgets should be inside <b:section> and they should have unique id just like sections. Furthermore, a widget type is required or else Blogger will throw an error-
The new widget with id "abc" has no type. A widget type is required when adding a new widget.

Let's see the attributes in widgets.The below data is available on Google Blogger Help page.
Attribute
Required/Optional
Value
Default value
id
Required
A unique Id made up of letters and numbers.
(Null)
type
Required
Indicates the kind(type) of widget.
(Null)
locked
Optional
You can rearrange the widgets in layout when set to be ‘yes’. When widget is locked, we can’t move or delete it. Possible values are ‘yes’ or ‘no’.
You may have noticed movable icon on the left of the widget in layout.
no
title
Optional
Title to be displayed.
(If no display title is specified, a default title such as “List1” will be used.)
pageType
Optional
Possible values are ‘all’, ‘archive’,’main’,’item’. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)
all
mobile
Optional
Possible values are ‘yes’,’no’,’only’ ao ‘default’.Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'
default

The different types will be automatically added after you choose the widget in the layout > Add Gadget.However, I've given the list of common types(case-sensitive) below, which you can use making widgets.
  1. Logo
  2. NewsBar
  3. Feed
  4. SingleImage
  5. BlogArchive
  6. Blog
  7. BlogProfile
  8. Header
  9. HTML
  10. LinkList
  11. List
  12. Navbar
  13. VideoBar
Now coming back to the theme we were making, go to layout in menu.It will look something like below.
Layout in Blogger template.
Then click on add a gadget to add a widget.
First we will add name of the blog at the top of the sidebar.So we choose HTML/JavaScript.
Add HTML to Blogger template.
After adding HTML, click save.Its better to add the title or logo in <header>.

Now, when we reload, we see the following result.

Blogger Template in Browser.
Boom! Now if you want all h1-h6 tags in your own font, <input>, <p> in your own design, you can specify their CSS in <b:skin>.
Now next, we will add the Link list in same manner.After that, the main thing is blog post.To show the blog posts, we will use the following widget.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Then go in post and write a new post and publish.When you'll reload your blog, you'll see it there.
Final blog theme view
This was our theme.But wait! There is lot more to do.If you go back and look at the whole code,you'll see their auto generated markup under <b:widget>.They are includable and include.If you ever had a look at the professional themes, there are many other items.We will know about them in the next post.

If you haven't liked CSS magz's Facebook page yet, do like it.It will give you notification once the post is ready.So that's it how you can make a very simple looking theme in Blogger you can make it a little professional like with additional css.

Tuesday, 11 September 2018

The Truth About Meta Keywords

We always look into the matter of keywords or so called labels(tags) in blogspot that we should choose the right keyword or long tail keywords to rank higher.
Meta Keywords

I've seen many people waste a lot time on those keywords.Today, in this post I will tell you about the significance of meta keywords.

Look at the below result for the query css magz.
title tag and meta description tag.
title tag and meta description tag.
In the above picture, you can see the things highlighted.
These are title tag and meta description.They are far more important.Try to include the keyword that user tends to search more.

Now lets see what Google Webmasters say about the meta Keywords?

So that means meta keywords are of no use.Don't waste time on that. Instead you can utilise more time in writing better articles so that they can help the people.

In Blogger, these are called labels and are present at top left in the menu while writing the post.You can use these to group or categorise articles.For ex. https://blogname.blogspot.com/search/label/urlabel.

Thanks for reading this.I think you must be knowing about this.Do follow us for the more informative posts in future and don't forget to like css magz Facebook page.

Friday, 7 September 2018

Which Are The New Tags in HTML5 ?

Yes! Welcome! After many days, I sat to write this post, In which I am going to tell you about the new tags in HTML 5. Although it is much more time gone releasing HTML 5, I still decided to write about it.
List of new tags in HTML5.

So here there are 23 new tags mentioned that are added in HTML 5. Also, it is interesting to note that some tags removed in HTML 5. So we start one by one.

<article>

Okay, so you must be knowing about this tag. As the name suggests, it represents the part of a post or an article. It is defined and used for self-independent content in it such as story, news article, comments etc. Default display property of this element is block.

<aside >

If you use aside just like other tags, it will make no difference. Hence it is used to define some data aside from the original content. You can stylise that content using simple in tag CSS.

<audio>

Before this tag, the webmasters have to use the flash player to embed any audio to the web page,
But after HTML5, this has been so easy now.
Just add any audio to the site using this tag like video.

<canvas>

Canvas is an amazing new tag that enables us to draw on a webpage or within the element.
We can make games, graphics, illustrations and animate them too! we can draw 2d and 3d shapes and fill colors in it.
I will surely add a post on <canvas> soon.

<datalist>

Datalist provides the list of data to show while typing or as options in the <input> element.
In other words, it acts as 'autocomplete' feature.
For example, I'm filling a form then while typing, I can select the objects as follows-
Output:

Code:
<h2>Fill the Form:</h2>
  <b>Which prog language do you use most often?</b><br />
  <input type="text" name="favCharacter" list="characters" maxlength="50">
  <datalist id="characters">
   <option value="Javscript">
   <option value="PHP">
   <option value="Python">
     <option value='C'>
     <option value='C++'>
     <option value='C#'>
     <option value='Hack'>
     <option value='Go'>
  </datalist>

<details> & <summary>

<Summary> is used to make an open and closed textbox which will open if you click on the heading. <details> can be used to bind <Summary>.Details and summary tags can be used as follows.
<details>
<summary>Read more about the new HTML5 tags by clicking here:</summary>
<p>Only supportive browsers allows expand and collapse this details(text).
  If now, you should consider updating your browser to latest version.
  </p>
</details>
and Output:
You can use open attribute to keep it open by default.

<embed>

Embed tag is new in HTML5. You want to embed anything- website, video file, document, any special type of plugin file, you need to use this. Earlier we would use this tool to embed videos - even YouTube. But now with the introduction of the new video tag, we can embed video easily.
<embed type="" src="">
→Src: Source of the file.
→type: the MIME type of the file.

<figure> and <figurecaptions>

<figure> is used for annotationg picture, diagrams, figures, code boxes etc. And <figurecaption> is used in conjuction with <figure> to provide a caption for <figure> element's captions.
<figure>
  <img src="../Img/Taj.jpg" alt="Taj Mahal">
  <figcaption>Fig.1 - Taj Mahal, India.</figcaption>
</figure>

<footer>

<Footer> is used to define the footer of the document. There can be more than one footer to a single page. Footer is often used for wrapping the links of About Us, Privacy Policy etc.

<header>

Header tag is used to wrap the navigational links, h1-h6 tags or to show the version information etc. Note that you cannot place <header> in another <header>, <footer> or <adress> tag.

<mark>

<mark> is used to highlight the text on the web as same as we use a highlighter on paper.
<p>PHP 7 was
<mark>released on 2015-12-03</mark>
, and comes with some HUGE improvements</p>
Output:
HTML5 new mark tag.

<meter>

<Meter> is used to indicate the fractional or percentage value just like a progress bar.The deafult css propties for <meter> are as follows.
meter {
    -webkit-appearance: meter;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
    -webkit-user-modify: read-only !important;
}


<nav>

Nav stands for navigation. You can wrap this tag to all the links on the top of the homepage that helps the user to navigate. This is the new tag in HTML5.

<output>

An <output> is used to show the output of the result of a calculation(maybe by JavaScript). This tag is newly introduced in HTML5. Below is the example how you can use this tag.
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)">0
<input type="range" id="a" value="9">100
<b>x</b> 0<input type="range" id="b" value="1">100
=<output name="x" for="a b"></output>
</form>
Try it on jsfiddle.

This has 3 attributes.

  1. For:- To specify the relationship between the result of calculation and elements used. (value must be ID's separated by space.)
  2. Form:- Specifies the forms to which the result belongs to. (value in ID separated by space.
  3. Name- Name of the output element.

<progress>

Progress tag is used to show the progress of any specific. For example, you can show the progress of a file download.
<p><b>File Downloading in progress...</b></p>
<progress value="25" max="100">
</progress>
Value: Current progress value.
max: Maximum value of the progress.

You can use javascript to conjunct the progress bar. Further, CSS can be applied to give it the same look in all the browsers. The default look for progress bar element in chrome as of now is follows:-
file downloading in progress.

<section>

The <section> is used to represent section within a post. It is a new element in HTML5. The example of two different sections is given below.
<section id='Section1'></section>
<section id='Section2'></section>

<time>

Time tag is used to denote time within the element. It doesn't make much impact on the text.
You can use it like below.

Make a HTML5 video player
Click to see the tutorial.

<video>

Same as an audio tag, video tag can insert video (generally mp4, Ogg and avi) to the web page. We have already seen a post on that on how to make an HTML 5 player with custom controls. Custom controls can also be applied to audio.

<wbr>

<wbr> tag is used to show a line break opportunity. Suppose you have a long word and you want to show line break opportunity, you can use this tag over <br>.
In <br> tag, it forces the browser to break down, whereas <wbr> states it as line break opportunity.
You can simply use <wbr> as it has no end tag.

I've mentioned almost all the tags that were newly introduced in html5. In case, if any tags are remaining, you can mention it in comments!

Sunday, 2 September 2018

How to get Google Adsense Approval Fast

When it comes to monetizing, everyone wants to monetize their blog. There are many platforms available that can serve ads on your website. But many people choose to monetize their blog with Adsense, maybe because it is a Google product.
Get Google Adsense approval fast
Here, in this post, I'll tell you the 5 secret points that will help you to get Google Adsense approval faster.

1.Content

You must have heard that 'content is king'. So true! If you have lots of useful content, lots of posts then it can give you approval faster rather than having no content.

Now you will be thinking how much content is a lot of content? Well, there is no such measurement, but I can tell you a minimum of 10,000 words combining all the articles(posts) on your blog. That means, If you write 10 posts - each 1000-1500 words long, you can easily accomplish this task. But remainder the text you are writing should be engaging and should be useful to your readers. It is also interesting to note that most of the applications are rejected for lack of text.

Google not only wants a lot of text but also a few images in your posts - so don't forget to include the images in your blog posts. Read your guide to make unique images so that you can gain a lot of traffic from google images too!

Google will not approve your blog it has no content or you just post only images or embed videos from Youtube. You must have some text on your blog.

Also, your blog should be minimum 6 months old. This rule is applicable to some subcontinents such as India and China.

You should not use plagiarised content on your web page or posts. Also, use your own images. Images should be compressed so that your site loads faster and you don't lose any visitor.

2. Spelling, Grammar, and mistakes


Just now I said - "You should have a lot of content". But here I would like to mention that there should be no error in it. Not a single spelling or grammar mistake! It will help a lot in SEO and also to join the partnership program of Google.

Apart from this, Italic, bold and underline the text whenever and wherever required. Make shorter paragraphs. Divide your main topic into subtopic - for smoothen reading experience for your blog reading.

You can use Grammarly to avoid some common Grammer problems.

3. Make Sure You Have Only One Account


Many a time you have more than one Gmail accounts connected to each other. If you already tried to signup from the first account some months back(approved or disapproved) you cannot make Adsense
in another account.

If this is the case Google Ad sense will mail you something like below
mail from Google Adsense.

Until you take the action it will be the delay in the whole process. So keep this in mind and avoid doing such silly mistakes.

According to Google Adsense Team "You can have only main one account  for all your other Adsense account holding different platform such as youtube blogger or/and any other websites." 

4. Google Adsense Policy


At least once the Google Adsense official policy before signing up for Adsense so that you remain on the safer side from being disapproved.

Some of the points in the Policy to be highlighted are:-

  1. Content should be very original and not-plagiarised.
  2. Do not add the content that violates the Google policy and promotes hate, bad speech related to terrorism or child abuse.
  3. Don't display more Ads than the content. If you have a lot of content, you can increase the number of Ads. Furthermore, note that there is sufficient text between two ads.
  4. Do not trick readers to click on the ads OR ask them to click on the ads.
Read here the Google Adsense Policy.

5. Make All Easy To Get Started With


Before signing up for Adsense, make sure all the elements texts and titles visible properly. The fonts should not be too small or too big to read. Your site should be comfortable to use on mobile, tablets and desktop also.

Make About us, terms and conditions, disclaimer and privacy policy pages If not, I would say - About us and privacy policy pages are just as they will help your visitors to contact you or understand your site's policy.

You can also notify the user about the cookies used by your blog/website.

Different plugins like cookie script are available for the purpose.

In case of a web app, you can make the navigations or notification that will help the new users to get started with your web app.

In Short... The Conclusion


In short, the Google wants to show their users their solution for a particular keyword on the first link of the first page.

If you prepared for the specific keyword or query of your niche, you can rank well.

But it is also interesting to note that, the articles with more than 2000+ words usually rank on the first page of Google (or other search engines also) 

Make more enlightening content that will be liked by your traffic.

Be clear about what you are saying and make your site different from others so that they can experience an extraordinary special connection with you.

Let them connect with your blog, no matter which platform you are using. Thanks for reading if you want to read more like this, head to the blogging section above.

Few more articles to help you.      

Thursday, 30 August 2018

Remove Footer Credit From Blogger Template Without Redirecting To Their Website

So, you want to hide that 'footer credit' from the free blogger templates-and you tried editing the main HTML of the theme. You removed that footer element from there and went back to refresh page - It redirects you to their theme website!

Many of the Blogger template makers make the templates like Goyabi, Msdesign , Templetify etc..Most of them provide the same paid template free - but has that footer credits on it.There's nothing much to keep that templates name down the footer, some some people found it to be problem :(

Now how to remove that? These templates have encrypted JavaScript in it which checks if the footer credit is present or not. If not, it will simply redirect you to their website.

Here, I'll not show how to decrypt it, but how to remove that or hide that credit.There are many solutions already present but some works and other didn't. So I thought to came up with a ultimate way to solve this problem.

#1 Using CSS

You can easily set the opacity or visibility of that to none or 0.But in some cases, it still redirects to their main web page.
Steps are as follows for this method-
  1. Go to Blogger.com , Theme > Edit HTML.
    Edit html in blogger.
    Edit HTML in Blogger.
  2. Click Ctrl + F, but before that, make the text area focused(That means right click on the code anywhere.) then this will appear.
    search for the name
  3. Search the exact the thing that appear on footer. For eg - If it comes MSdesign , search for Msdesign.
  4. Then you will able to find the footer tag. If not, Search 'footer' and finally add between the tag.For eg, <div id='footerfix'> , change to <div id='footerfix' visibility='none'> .
Now lets move to the Second one.

#2 Using JavaScript OR Jquery

Here, we will be finding the element and using JS or Jquery.[after page loads ->> set opacity to 0.] 
Steps are as follows for this method-
  1. Go to your blog and open Inspect Element.(Ctrl+Shift+I on Google chrome for Windows).
  2. Click on select element (Ctrl+Shift+C) on the top left corner of Inspect window.
    Ctrl+Shift+C
  3. Locate the element you want to hide and note down the respective id.(If there is no id, note down the class.)Click on below image and look carefully.
  4. Add the below code in the <head></head> of your page, replacing the ID with your Id.(Do not remove the # and If you noted down class[as  in step 3], replace #ID to the class and add '.' in front of it.)
    1. <script>
    2. $(document).ready(function(){
              $(#mscontent).css('opacity','0');
      });
      </script>
  5. And for JavaScript, put below code at the end of the document-
  6. <script>
    document.getElementById("ID").style.opacity= 0;
    </script>
So here you knew about how to hide that.If you know about query or JavaScript, you can easly make it out.And, if you missed any steps and lost any where, simply comment your blogs URL down below and I'll give you direct Jquery and JavaScript code.