Right way to embedded direct javascript code to Blogger template

I just usually forgot how to embedded javascript code to my Blogger templates. So I just want to share with you as a short quote and also help me each time I need add Js to a template. This tip always helps me prevent XML error when save template code.

At first, Access your blog dashboard, choose Template. Then click Edit HTML. Not, insert before </head> tag or </body> tag with your javascript wrapper code like below:

<script type='text/javascript'>
//<![CDATA[
// Place your javascript code here
//]]>
</script>

Then click Save template

Blogger host and direct embedded CSS / Javascript comparison

Blogger has no hosting for us to host css and javascript files. So we always find a free or cheap hosting to host our files. But before host them, we must compare the page speed to sure that way we host css / javascript files is faster than the way we embed them direct to our template HTML.

In this comparison, I will use Google Drive as free host for our files. At first, you must know how to upload your css / javascript files to your Google Drive.

Uploading files to Google drive

Of course, you need a Gmail account to login to your Google Drive. After logged in, click Upload button to upload your css / javascript files. In this test, I will upload two files: bloggeritems.com.css (100KB) and bloggeritems.com.js (500K)

After uploaded, you will see Upload Complete window. Click Share link of the file you had just uploaded to show Sharing settings window.

You can also click a file name and then click Share button to show Sharing settings window.

In Sharing settings window, at Who has access, click Change… link of Private – Only the people listed below can access option.

In next window, check to choose Public on the web option, then click Save.

After that, the window will come back the Sharing Settings window that allows you copy Link to share url. We will use this url for next section.

Add uploaded files to template code

Before you can use the link that copied above, you must replace “docs.google.com/file/d” to “googledrive.com/host” and remove “/edit?usp=sharing” in the link. Below is an example:

From this: https://docs.google.com/file/d/0B6J4nBUXfVekel9xZ0JrZ25zT28/edit?usp=sharing

To this: https://googledrive.com/host/0B6J4nBUXfVekel9xZ0JrZ25zT28

Use the replaced link to embedded to your template code.

With css:

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B

With javascript:

<script type="text/javascript" src="https://googledrive.com/host/0B6J4nBUXfVekel9xZ0JrZ25zT28"></script>

Comparing host and direct embedded code speed

After I used PageSpeed Insights to test, the result surprised me. Below is the result when we host 2 files on Google Drive:

PageSpeed Insights Result with hosted files from Google Drive

The below is with direct embedded:

PageSpeed Insights with Direct embedded code

Yes, the result is too different. With hosted files from Google Drive, the speed is only47/100. But if you use direct code embedded to template, the speed will be 84/100, too fast.

We are talking about Google Drive hosting, one of fastest and stable hosting of World, but as you see, the test showed us that the Blogger hosting is better than. So, that’s why I always embedded javascript and css direct in template code, and may be your customers also love that way (many customers used PageSpeed Insights to test my templates, so I must sure they satisfy with result).

Conclusion

Never use Google Drive to host css or javascript files, it’s slow. Just host your files in case you can not embedded it direct in Blogger template code, example: flash, media files, …

Wish you always enjoy your blog as the best way!

Add jQuery to your Blogger/Blogspot blog template

JQuery is the very important thing to make effects, animation and cool functions for your blog. Many Blogger plugins are also using jQuery. Just embed jQuery into our blog template, it will help us save the time to develop and also provide us many option to make beautiful effects on our designs.

A jQuery file is only about 100KB and available to cached, so don’t wory about the speed of your page after embedded it.

To embed jQuery, please access your blog Template and click Edit HTML

Open template editor

Before insert jQuery, you must check that is it alreay installed in your template?Please find “https://ajax.googleapis.com/ajax/libs/jquery” if you found nothing, mean you need to continue, if yes, just stop and do nothing because your template had a jQuery library.

In template Editor window, find the tag </head> and insert before it with the below line:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jq

Then click Save template.

Enable search preferences to begin SEO with Blogger

SEO (search engine optimize) is very important thing with your blog, this point will help your visitor easy know about your blog by searching on Google, Bing, or Yahoo, etc….

It’s lucky when you used Blogger because this platform support very good for SEO. But as default, when you create a blog, it is not set up for SEO, and you need enable it manually.

Access your blog dashboard, choose Settings > Search preferences. In Meta tagssection, click Edit link on Description field.

Enable Blogger search preference

When you see question “Enable search description?“, just choose Yes option and a box will show to help you input your blog description. It’s better if the description is shorter than 150 characters. After done, click Save changes to apply.

Input blog description in search preference

Discovery to success my friends 

Enable Search References for Better Blogger SEO

Blogger (Blogspot) upgraded their SEO features, and one of them allows you enable search references for better SEO effect on your blog.

Enable Search References for Blogger

At first, access your blog Settings, and choose Search preferences. At Descriptionoption. If you see [Disabled] mean your blog had not enabled Search Reference. You must click Edit link on this option.

Access Blogger Search References

Then check Yes, and input description for your homepage (maximum 150 characters and better contains your main keywords). When done, click Save Changes.

Input Home Page Description for Blogger

Now, the search references function was enabled, so, each time you create a new post, you will see an option called “Search Description” at right sidebar. Before publish new post, please input your post description (snippet) in this option and click Done.

Input Post Description before Publish

Checking Header Code for SEO

Your search references function will not be affected if your header code is not right. So, please make sure your template code before <b:skin> must similar as below:

<b:include data='blog' name='all-head-content'/>
 <title>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <data:blog.pageTitle/>
  <b:else/>
   <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <data:blog.pageName/> | <data:blog.title/>
   <b:else/>
    404 | <data:blog.title/> 
   </b:if>
  </b:if>
    </title>
 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
 <b:else/>
  <meta expr:content='data:blog.metaDescription' name='description'/>   
 </b:if>

News Pro - Responsive Blogger Template

Live Demo Download



 Documentation

News Pro is update to "News Blogger Template" or you can just call it V2.0 Both theme were designed by StudioPress and converted to blogger by SBTemplates. This theme is fast loading and responsive, we have added lots of seo settings to this theme which will help you to rank higher in SERP. This theme is totally free.

What you will get ???

Responsive Test

Retina Ready

Key Features

• Responsive Design: News Pro is a fully responsive Blogger template that automatically adjusts the resolution of the screen to support all devices and browsers of different resolutions.
• Browser Compatibility: News Pro is compatible with almost all browsers. Its responsive designs gives it the extra ability to perform the actions just accurately.
• SEO Friendly: When you talk about SEO, we are the best. With some high quality and extra-smart plugins, we have done some really awesome SEO work on this template. Its not just you, its about ranking your content at the top of Google search engine.
• Related Post: We have added modern related post widget to this theme which don't stretch images and it also help blog to decrease bounce rate of their blog.
• Adsense Ready: We have added lots of space for advertisement, you can add ads banner to header, sidebar, post and footer.

More Features: Social Share Button, Numbered Page Navigation Menu, jQuery ready, Threaded Comment Style and much more.

Do you like this blogger template ?

Free Download + Like And Share If It 's good for you. Thanks !

iNews 2014 Blogger Template

Live Demo Download

 Documentation

iNews is a professional blogger templates which provide an option to shows label separated posts. If you are running an online news portal then this theme is best choice for your blog. We have provided well documentation which will guide you and make it easier for you to install this template on your blog.

What you will get ??

Responsive Test

Label Separated Posts

Key Features

• Label Separated Post: You can show the post with different labels, like if you want to show only sports related post then use label sports.
• Responsive Design: iNews is a fully responsive Blogger template that automatically adjusts the resolution of the screen to support all devices and browsers of different resolutions.
• Latest Coding: This theme is build in HTML5 & Css3 and we are giving this theme for free as a new year prize. This theme is latest blogger template 2014.