If you are trying to add / edit the "Pages" widget on your Blogger blog's layout you may have noticed that it isn't working lately.
Full Sized Background Image on Blogger with Blur Effect
In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's background portion.
Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.
This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.
Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS
Copy the CSS code and paste it in another Notepad / Textedit window.
In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.
I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.
We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.
Let's suppose your code is this, the URL of your image is of course different than the one in the following one.
In the URL of your image, which may look something similar to this:
Change the number with the s prefixed to it to something smaller.
s32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.
You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.
Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.
This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.
Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS
Uploading the image
Whatever image you are going to use you have to upload it somewhere in its full size first. The best place to upload it is Blogger itself, it gives unlimited photo storage as well as fast servers from Google wouldn't ever slow your blog down.
- Open a draft post in your Blogger dashboard
- Upload the image
- When the image appears in the post area, right click on it and "Copy image address" or "Copy link address", the option might be different on different browsers.
- Paste the copied URL that is the image's address in a Notepad / Textedit app. We may get something like this
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg - Keep it with yourself, we will need this in the next step.
The CSS Snippet
CSS is what makes it possible for us to add designs to our websites and blog. This one does the job for adding a full screen background.
html, body {
background: url('IMAGE-URL-HERE') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Copy the CSS code and paste it in another Notepad / Textedit window.
In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.
html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.
- Log-into your Blogger Dashboard
- Go to the Theme
section - Click on "Customize"
- In the Theme Designer go to Advanced > Add CSS
- Paste the CSS snippet into the text area on the theme designer page and click on Apply to Blog on the top right
Open your blog to see the updated background image. Right now you wouldn't see the blur effect, we will see how to do that in the next step.
Let's give it a blurred effect
We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.
Let's suppose your code is this, the URL of your image is of course different than the one in the following one.
html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In the URL of your image, which may look something similar to this:
https://3.bp.blogspot.com/..............ynOTNfQCKgB/s1600/photo-1434394673726-e8232a5903b4.jpgChange the number with the s prefixed to it to something smaller.
https://3.bp.blogspot.com/..............ynOTNfQCKgB/s32/photo-1434394673726-e8232a5903b4.jpgs32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.
You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.
Help Needed?
On some third-party themes and even the original themes provided by Blogger the code may not work properly due to some other CSS setting that may be overriding it. If you are unable to get it working then please share your blog URL in the comments down below along with the code that you are using as it is. We would be glad to jump in to help.
Customizing Body Width of Soho Blogger Theme
Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either.
We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.
This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.
The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.
After copying keep it in a notepad / textedit app since we are going to need it in the next step.
You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.
We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.
This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.
Getting Started
Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px.The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.
CSS Snippet
Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code -/* For screen widths less than 1280px */
/* For screen widths less than 1280px */
@media screen and (min-width:1280px) {
.centered-bottom, .centered-top {
width: 1180px;
}
body.item-view .widget.Blog .post {
width: 800px;
}
}
/* For screen widths less than 1400px */
@media screen and (min-width:1400px) {
.centered-bottom, .centered-top {
width: 1300px;
}
body.item-view .widget.Blog .post {
width: 1060px;
}
}
After copying keep it in a notepad / textedit app since we are going to need it in the next step.
You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.
Applying the CSS
For a complete guide on adding CSS codes in Blogger refer to this tutorial - How to add CSS to your Blogger Blog.- Open your Blogger Dashboard and choose the blog
- Go to the Theme section
- click on Customize
- Navigate to Advanced > Add CSS
- In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this -
- Click on Apply to Blog to save the changes and go to the blog to see it live.
That's it. Once the CSS is applied you will start seeing the customized width live on the blog.
What's next?
We plan on posting more small tutorials like this on customizing parts of new themes. If you have any suggestions email it to us on depy45631@gmail.com or post your idea in the comments below.
Show Full Blog Posts in Homepage of Contempo Theme in Blogger
After so many years Blogger has finally brought advanced and modern themes, which are responsive, optimized for mobile devices and are beautiful!
The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.
For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.
Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.
The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.
For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.
Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.
Getting Started with the Tutorial
IMPORTANT - Since you will be working with template codes of your blog it is highly recommended that you take a backup of your Blog's theme before proceeding.
Follow each step carefully and in steps that deals with codes we've provided screenshots of what you should be looking for to make the process easy and fast.
Changing the Theme XML Code
The first and most important part is to change the XML code in the theme code that is responsible for showing blog posts in different styles.
- Sign-into your Blogger profile
- Select your blog from the blog list
- Go to the Theme section > click on Edit HTML button on the page
- When the theme code editor opens, put the cursor inside of it and press CTRL+F / ⌘ + F to open the in-page search box
- In the code editor you will be looking for the following block of code
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBodySnippet'/>
<b:include data='post' name='postJumpLink'/>
</b:if>
You do not have to enter the entire block of code in the search box, use only a small part from the code block which should bring you to the same exact code in a few tries.
This is how the code that you are looking for in the theme code editor
- Once the code is visible on your theme editor, use your cursor to select from
<b:if...part to the ending</b:if..part,
- Upon highlighting it, delete the highlighted part.
- Copy the following code which we will be placing in the place of the previous code (that we deleted in the last step)
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='postBody'/>
<b:else/>
<b:include data='post' name='postBody'/>
</b:if>
After successfully placing the code given above, the theme code editor should look like this with the code in place :
- Now click on the "Save theme" button to save the theme.
- Visit your blog to see the changes live, you may need to clear caches if you are not able to see any changes.
If you noticed that the blog posts are not snipped now but still aren't showing as full then probably you have put a page break in your blog post, removing it should fix this, see the section "Remove Page Breaks from Post" below.
Hide the "Keep Reading" Link
The "Keep Reading" jump link might have not gone away. This following CSS code will help in hiding the link from the posts on home page.
Copy the following CSS code :
And add it to your blog. [See how to add CSS in a Blogger Blog]
.jump-link {
display: none;
}
And add it to your blog. [See how to add CSS in a Blogger Blog]
Remove Page Breaks from Post
In case you put page breaks in your posts the posts may not appear full. So if you want a post to be shown full instead of till the page-break part remove the page break from the post.
- Sign in to Blogger.
- Click the post in the post editor.
- In the composer box, place your cursor after the page-break element (it is a grey horizontal line with dashes)
- Hit backspace to remove it.
- Save the post.
What about other themes like Soho, Emporio and Notable
We're glad you asked this - the same code doesn't exist in other themes so this tutorial isn't applicable for other new themes. Following are the tutorials for other new Blogger themes to do the same on it.
Blogger Page and Post Titles Style for Better SEO
Definitely content is the king, but how we present the content to the people and also the search bots is an important aspect. In this post we will talk about how to display page titles of your blog in order to get highest visibility on search engines like Google.
SEO short of Search Engine Optimization is a broad topic on how to maintain and create a website / blog that performs well enough with search engine bots so it comes up on user queries at the best ranking possible.
That doesn't mean SEO is a very complicated topic, yet applying it might be somewhat require a learning curve since editing code and adding functionalities to websites require one to be familiar with codes.
What's with the page title of Blogger Blogs?
Skip to the next section to learn how to optimize the blog's page title, to learn more about it read below.
The page title we are talking about is the document title of a web page that appears in most browsers in the tab - in HTML it is situated in the HEAD of a web page as
Majority of Blogger templates (expect for the themes that has been recently introduced) have a very unconventional and non-optimized for search way of display the page title on posts in Blogger blogs.
Each of your posts is a different web page on your blog, and it is important that all of them are optimized for SEO, primary focus should be on the content, and another important aspect, which we are discussing here, is the page title, it's the part that appears on search engine's results.
Check this and ask yourself, which one gives a human being more detail about the search result for the term "How to add CSS to Blogger Blogs"?
Search engines wants values small but descriptive page titles, it is a bad idea to take up a significant amount of space in your page title with your blog's title.
A page title on posts page can be and generally are consisted of two parts, "The post title - The Blog Title", the problem with many Blogger themes / templates are that it puts the blog title first even on post pages, so if one has a blog named "Alison's Travel Photography Blog" a blog post on the blog will have a page title like "Alison's Travel Photography Blog : This Is The Title of The Post"
We are just going to optimize this for search in Blogger.
Blogger has launched new themes recently which already has better page title than the old ones, but if you are using a third-party template or Blogger's default templates follow the steps below.
The following steps are for normal blogger templates that you can choose from the theme selection area in Blogger or third-party templates based on those templates.
Here's the code (similar to the code in the main steps, only added the description part):
Copy the code and paste it first in a notepad editor, and replace the part Enter your Blogs Tagline with your own tag line: Keep it short and descriptive, it is what will appear in searches along with your blog title, so make it attractive, short and simple.
The steps to add this code is similar to the steps given in the previous section.
If you have questions or have any suggestions then please do comment down below.
The tutorial will be updated to list steps for new Blogger themes...
The page title we are talking about is the document title of a web page that appears in most browsers in the tab - in HTML it is situated in the HEAD of a web page as
<title>Blog Title - Some Example Page</title>Majority of Blogger templates (expect for the themes that has been recently introduced) have a very unconventional and non-optimized for search way of display the page title on posts in Blogger blogs.
Each of your posts is a different web page on your blog, and it is important that all of them are optimized for SEO, primary focus should be on the content, and another important aspect, which we are discussing here, is the page title, it's the part that appears on search engine's results.
Check this and ask yourself, which one gives a human being more detail about the search result for the term "How to add CSS to Blogger Blogs"?
Search engines wants values small but descriptive page titles, it is a bad idea to take up a significant amount of space in your page title with your blog's title.
A page title on posts page can be and generally are consisted of two parts, "The post title - The Blog Title", the problem with many Blogger themes / templates are that it puts the blog title first even on post pages, so if one has a blog named "Alison's Travel Photography Blog" a blog post on the blog will have a page title like "Alison's Travel Photography Blog : This Is The Title of The Post"
We are just going to optimize this for search in Blogger.
Optimizing Page Title for Search Engines
This is a very small change to make though it can make significant amount of difference in your search rankings and we recommend you to do this if your page titles aren't optimized yet.Blogger has launched new themes recently which already has better page title than the old ones, but if you are using a third-party template or Blogger's default templates follow the steps below.
For Normal Blogger Templates and Third-Party Templates
It is recommended that you take a backup of your template before proceeding.The following steps are for normal blogger templates that you can choose from the theme selection area in Blogger or third-party templates based on those templates.
- Go to your Blogger Dashboard (https://www.blogger.com)
- On the blog's dashboard, go to the Theme section
- When you are in the Theme section, click on the "Edit HTML" button under your blog's preview.
- After the template code appears on the screen, focus in the template code area and hit CTRL+F / ⌘ + f and search for the following piece of code, tip: only enter
<title>should bring this up.<title><data:blog.pageTitle/></title> - Delete the line of code that found in the last step, and replace it with this code:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if> - Save the template and visit your blog. Check your page's title in the browser's tab to see if it is SEO optimized or not.
The "|" is a character that will separate your current page name and the main blog title, i.e "My Blog | An example blog post title" or "Stramaxon | How to add CSS" etc.
If you like you can change that to something else such as "/", ":", "||". It is a preference but may also have some effect on SEO, so pick a different one only when you are sure what you are doing.
EXTRA: Adding Blog's Tagline in Title
The instructions in the section above works great even without modifications but if you like you can add a tag line of your blog in the page title so that it appears in the browser's tab and most importantly in
Benefit of adding a tag line: If your blog's title is short, then adding a tag line makes fill up the left space. Your blog's results will look better and your reader can tell what your blog is about right from the search itself.
The code that you were given produces the result like A, and the following will produce the result B. It is highly recommended you add a tag line for your blog if your blog title is short.
Benefit of adding a tag line: If your blog's title is short, then adding a tag line makes fill up the left space. Your blog's results will look better and your reader can tell what your blog is about right from the search itself.
The code that you were given produces the result like A, and the following will produce the result B. It is highly recommended you add a tag line for your blog if your blog title is short.
Here's the code (similar to the code in the main steps, only added the description part):
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> - Enter your Blogs Tagline</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Copy the code and paste it first in a notepad editor, and replace the part Enter your Blogs Tagline with your own tag line: Keep it short and descriptive, it is what will appear in searches along with your blog title, so make it attractive, short and simple.
The steps to add this code is similar to the steps given in the previous section.
Search Optimization and Results
Following this tutorial and making this change to your blog may or may not give you immediate results. To improve your search visibility you still have to post genuine and content that your readers would like to read, this tutorial helps you make your blog's visibility better for what you already have and going to post in the future on your blog.
If you have questions or have any suggestions then please do comment down below.
The tutorial will be updated to list steps for new Blogger themes...
Solving Blogger Template Error for AdSense Ad Implementation
If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.
If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)
OR
The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.
In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme
The error that you might be getting when trying to add these code snippet in your template is
The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.
Notice the difference between the two snippets. We have set it
That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)
If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)
 |
| Demonstration of the ad code in Blogger template and the error that occurs |
<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
OR
<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.
In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme
The error that you might be getting when trying to add these code snippet in your template is
Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.
Fixing the error
There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes
Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),
<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]
The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.
<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]
Notice the difference between the two snippets. We have set it
async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)
How to Backup Your Blogger Theme / Template
A step-by-step guide on backing up a Blogger.com Theme / Template for the newest Blogger UI updates.
We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.
You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html
There are more reason why -
We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.
You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html
Why back-up a template / theme ?
In the Blogger environment we often want to add a new widget or a functionality in our blog and tutorials ask us to make changes to our templates, it is important we have a backed-up template so if anything goes wrong we can always fallback to the previous version.There are more reason why -
- Making changes to Blogger templates to add functionality or change design
- When trying out new themes / template
- Using the template / theme again on another blogger blog
Read below for steps on backing up a template / theme, note that we are going to use the terms "template" and "theme" interchangeably.
Backing Up the Template / Theme on BlogSpot
Let's start with backing up the template.- Log-into your Blogger account to go to your Dashboard.
- From the blog's drop-down list choose the blog
- On the left pane choose the "Theme" option
- In the Theme section page, click on the "Backup / Restore" button on the top right corner of the page
- A dialog box may appear, to download the template backup click on the orange "Download" button as shown below -
- A file with a name similar to theme-2887119284088758674.xml will be downloaded. This file is the backup template / theme file, it can be used to recover your template / theme on Blogger.
That's it, save the theme .xml file at a safe place where you can access it in the future in case you have a broken template. Make it a practice to take a backup of the template before making any changes to it.
Restoring the Template / Theme Using the XML file
In the previous section you learn how to download a backup of your template. Restoring the template is simple as well,
- in the last section follow till Step #4
- Now in the dialog box that opens, which looks like this click "Choose file" (maybe labelled differently on different browsers) -
- Browse to the template's XML file and then click on "Upload"
- Once the upload finishes your template will be restored.
That's it. Do let us know if you have any questions or suggestions regarding this tutorial.
Set Mobile Browser Theme Color for Blogger Blogs
More people now loves reading on the go, be it a news article or a travel blog, almost everyone's first choice for reading blogs and browsing social media sites are smartphones. Same goes for your readers, many may love reading on their smartphones, and setting a theme color would make your Blogger blog stand out in the crowd.
The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.
If you use Chrome you might have noticed that upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.
Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.
Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.
Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.
Before we proceed, copy this line of code -
<meta name="theme-color" content="#4285f4"/>
Once the code is at place it should look similar to the screenshot above. Now click on "Save template" on the screen and then load your blog in Chrome browser on your smartphone. You will now see that the top bar of Chrome has turned into another color other than the default light grey color.The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.
If you use Chrome you might have noticed that upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.
Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.
Setting Theme Color on your Blogger Blog
By default if you visit your blog on a mobile browser, here Chrome, you will see the default light grey color on the top bar, and that looks boring.Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.
Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.
Before we proceed, copy this line of code -
<meta name="theme-color" content="#4285f4"/>
- Now, go to your Blogger Dashboard and select your blog.
- Click on the "Template" option in the left panel
- Once the section is loaded, you will see a button with "Edit HTML" label, click on it to open the template editor.
- Inside the template editor hitCTRL+F / ⌘ + F and search for
<head>, it should be on the top already so you will find it easily
- Now paste the code we copied before immediately on the next line of
<head>
Set your desired color
You may of course want to set a color of your choice, the one that would be set in the default code provided in the tutorial you will get a dark blue color.To change the color that is set you have to make edit in the code that you use, this is the code -
<meta name="theme-color" content="#4285f4"/>
The yellow highlighted text #4285f4 (without the quotes) is the hex value of the color, in HTML colors also has hex values. If you aren't sure what is the hex value of the color you want, go to http://www.color-hex.com/ to choose the color and get your desired color's hex value. Then replace the yellow highlighted part with your own.
For example, if we want a certain shade of green, which has the hex value #215C03, we modify our code to this
<meta name="theme-color" content="#215C03"/>
That is simple. All you have to do is replace the hex value in the code with your desired color and place it in the template by following the steps in the previous section.
It's all. Impress your readers by doing what most Blogger blog owners don't think about.
Comment on the post if you like this, share it with your friends and family for them to make their blog look pretty as well. For any questions or suggestions feel free to comment.
Where to Find Blogger App for iOS
If you have been looking for the Blogger app on your iOS device then you are out of luck. Blogger took down its official iOS app and stopped supporting it and its been a pretty while.
There are many Blogger users who needs to update and post to their blog on a regular basis, from their smartphone and it is very inconvenient without an app to do that. And especially now that smartphone users are the majority, Blogger lags behind in providing an official app, which is not a great thing for such a popular Blogging platform.
Straightforward answer to the question is that, Blogger does not have any official app for smartphones. That's the sad and bitter truth, the good news is that there are tons of other apps on the app store available as well as other workaround to access Blogger on phones.
We do not guarantee the performance and usability of these apps. Check the reviews before you try them.
BlogGo for Blogger
BlogTouch Pro (for Blogspot Blogger)
Right now there aren't a lot of high quality apps for Blogger in the app store, but these are the best based on user reviews.
If you have any questions regarding Blogger or these apps, do let us know in the comments below.
There are many Blogger users who needs to update and post to their blog on a regular basis, from their smartphone and it is very inconvenient without an app to do that. And especially now that smartphone users are the majority, Blogger lags behind in providing an official app, which is not a great thing for such a popular Blogging platform.
Straightforward answer to the question is that, Blogger does not have any official app for smartphones. That's the sad and bitter truth, the good news is that there are tons of other apps on the app store available as well as other workaround to access Blogger on phones.
Use Blogger with Chrome
If you use Chrome you can access the full desktop version dashboard of your blogger account directly on your phone. The UI is the same as it is on desktop browsers thus there is nothing new to learn to get started.
Download Google Chrome browser on your iOS device, go to this page to download Google Chrome on your device. Set it up, sign-in with your Google account and you are good to go.
Simply access https://www.blogger.com in Chrome and you will see all your blogs in the dashboard, from there on you can add new post, edit them and change blog settings if you wish. It is basically the same as use on a desktop, only on a relatively smaller screen. You need to get used to pinch-zoom in and out, it takes a while but it is worth it.
Other third party app
BlogGo for Blogger
BlogTouch Pro (for Blogspot Blogger)
Right now there aren't a lot of high quality apps for Blogger in the app store, but these are the best based on user reviews.
If you have any questions regarding Blogger or these apps, do let us know in the comments below.
Spoiler Content Box for Posts in Blogger Blogs
It is difficult to warn users about possible spoilers in an article, if you are a blogger who blogs about TV shows, movies or books which are some common subjects of spoilers for its audience. Today you will learn how to implement a simple technique to handle spoiler contents on your blog posts.
Before you proceed any further you want to make sure that this is what you want to have as a feature on your blog, so try this live demo here
The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.
It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting
The best thing is that you don't have to write a lot of stuff to include it into your post every time, once you set it up, you just need the text content which is probably a spoiler, into a line of HTML which we will provide in the tutorial below.
Spoiler: This is easy to add to your blog!! See this.
It is a little addition, but we have created it to work on any kind of device a reader might be using so they get the best experience on your blog and keep themselves away from spoilers if they are unaware, following are some features worth noting
- Almost no work to do when adding these Spoiler box in your blog posts.
- Works on Blogger, WordPress, basically it is all HTML and CSS, thus works perfectly fine on any kind of website. The tutorial is meant for Blogger though.
- Your readers use mobile devices to read your blog? No problem, we got you covered, they just need to tap the boxes to show the hidden content
- Different colors! Match it with your blog's color scheme.
Let's Begin The Tutorial
You are here, it means you have made up your mind and would like to continue adding it to your blogger blog (or probably other sites like WP). Before we begin these are some steps you should follow:- Backup your Blogger Template - In case anything goes wrong you can restore it to the way it was.
- Open a plain text editor in your computer (Notepad or TextEdit, if you have a code editor then it is a plus but that's optional!)
- Coffee or tea? You choose :)
This tutorial is split into two parts, adding the CSS and then setting up the HTML, these are the only two things that you have to go through and we will give you a small hints about what's going on with each part so you don't feel lost.
Adding the CSS
CSS is the language used on the web to style things on a website, it plays a major role in our spoiler content box, as it is the back-bone of how our spoiler content show/hide box is going to work.Following is the CSS code we are going to use, this is the whole code, and is less than 2 kilobytes in size, that means no performance impact on your blog at all :
/*************************************
Spoiler Content Box
# By Deepak Kamat
# stramaxon.com
# depy45631@gmail.com
Get it for your blog at:
http://goo.gl/ZiJj3J
*************************************/
.spoiler {
position: relative;
border: 2px dotted rgba(0,0,0,0.1);
padding: 10px;
background-color: #ffe496;
margin: 10px 0;
}
.spoiler {
color: #ffe496;
color: transparent;
-webkit-transition: 0.4s all ease-in-out;
-moz-transition: 0.4s all ease-in-out;
-ms-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.spoiler:hover ,
.spoiler:active ,
.spoiler:focus {
color: inherit;
}
.spoiler::after {
content: "{Click or hover to see spoiler}";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #ffe496;
text-align: center;
font-size: 0.8em;
padding: 10px;
color: rgba(0,0,0,0.6);
font-weight: 600;
opacity: 1;
-webkit-transition: 0.4s all ease-in-out;
-moz-transition: 0.4s all ease-in-out;
-ms-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.spoiler:hover::after,
.spoiler:active::after,
.spoiler:focus::after{
opacity: 0;
}
/* Colors */
.spoiler.green { background-color: #c8fbb8;}
.spoiler.green::after { background-color: #c8fbb8;}
.spoiler.blue { background-color: #bfe1ff;}
.spoiler.blue::after { background-color: #bfe1ff;}
.spoiler.red { background-color: #ffbfbf;}
.spoiler.red::after { background-color: #ffbfbf;}
.spoiler.purple { background-color: #e4bfff;}
.spoiler.purple::after { background-color: #e4bfff;}
.spoiler.black { background-color: #222; color: #fff;}
.spoiler.black::after { background-color: #222; color: #fff;}
.spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); }
.spoiler.white::after { background-color: #fff; color: #222; }
Looks like a large piece of code? That's a very small snippet in comparison to what other plugins for these kinds of features takes.
Now follow these steps:
- Copy the entire CSS snippet above and place it in a Notepad/TextEdit application
- See how to add CSS to your Blogger Blog or,
- Go to your Blogger Dashboard - Template - Customize - Advanced - Add CSS
- And paste the CSS in the text box on the right hand side, now click on the "Apply to blog" button
Once you have the CSS code in place you can proceed to the next section to learn how to make use of the CSS we added in a blog post.
The HTML
We have to tell the browser "Hey web browser, this is a spoiler box, please hide its text content!", unfortunately we can't tell it in English, so we use HTML, that's the markup language, if you have been working on Blogs for long you might have come across it many times, because it's what makes everything on the web!
Without further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:
This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!
If you like you can apply different colors to the spoiler box, there are 7 color styles, namelyWithout further lesson on HTML, here's the markup we need, copy it, we'd need it in a moment:
<div class="spoiler">
The quick brown fox jumps over the lazy dog.
</div>
This is the base code we need, of course you want to replace The quick brown fox jumps over the lazy dog. to anything you want to appear inside the spoiler box, you can put images, text, headings, even videos!
Using the HTML
Follow these steps properly to learn how to add it to a blog post, you just have to carefully understand the process once and afterwards you would be able to easily modify the code as you like and add it to your posts.
- Open a post or a draft in your blogger dashboard
- On the top left corner of the post editor, you will see two buttons "Compose | HTML", click on the HTML button OR
- You could skip the above step by enabling "Interpret typed HTML" in the options in your post editor, on the right sidebar under Post Settings, click on Options and then choose "Interpret typed HTML"
- Paste the HTML in the post where you want it to appear. That's it, if you pasted the code in "HTML" mode, switch back to "Compose" and you will see the text in post editor with no styles, don't worry, when you load the post on your blog the spoiler content styles will be applied automatically.
Applying different colors
yellow (default) | green | blue | red | purple | black | white
You can easily change the color of a spoiler content box by adding the name in the
class="spoiler" part. How? See the example below:Default color:
<div class="spoiler">
...
</div>
Blue:
<div class="spoiler blue">
...
</div>
Green:
<div class="spoiler green">
...
</div>
And so on. You just have to add the supported colors name next to spoiler in the class attribute. If you know how to code CSS.
If you want to add new colors please let us know in the comments on this post and we will be happy to consider it if it is a good fit.
Generate Spoiler Content Box Code
Don't want to write the code each time you proceed to add it in your post? Use this generator to enter your desired content and get the code right away, works on mobile phones as well!A small tool to make your life easier :)
What else?
A similar functionality that you might want to take a look at which also can be used for spoiler content show/hide effect: Expandable Section in your Post on Blogger
Stuck with something and don't know how to proceed? Please leave us a comment on this post and we will get back to you as soon as possible. Or found a bug in the generator? Send me an email at depy45631@gmail.com
Like what I am doing and want me to make something similar but more customized for your blog/website? I am a web developer and you can hire me.
Fix Blogger Tracking Your Pageviews
Your blog's quick stats on the dashboard reflects the number of page views your blog received in a given time window, the stats can be inaccurate as it might also be counting your own pageviews.
Blogger does provide an option to stop tracking your pageview, though it doesn't work properly for many Blogger users.
Of course many blog owners might not want to track their own pageviews, especially when even low number of page views from their side may affect the overall stats, so it makes perfect sense that you may want to tell Blogger to stop tracking in on your account.
We recently started getting a lot of queries about "why blogger is still tracking my pageviews" and similar, on Twitter and in the forums in large quantity. Here's a tweet from a Blogger user with the hashtag #gHelp seeking for help with the issue
The most straightforward option is to set the option in your blog's dashboard, that can be done by following these steps (these are optional steps, you may have turned it on already):
Following screenshot shows the code entered in the JavaScript console on Chrome.
After pasting the code in place, hit enter and that's it. The cookie is set and now until the cookie expires or is manually removed (by clearing cookies off your browser) Blogger would not count your page-views when you access your blog from the browser.
Mozilla Firefox
To open the console in Firefox: CTRL+Shift+K on Windows or ⌘+Option+K on Mac. Or you could Right Click, then choose Inspect Element and then go to the Console tab.
Enter the code in the console window and hit enter. Here's how it must look like in Mozilla Firefox:
Blogger does provide an option to stop tracking your pageview, though it doesn't work properly for many Blogger users.
Of course many blog owners might not want to track their own pageviews, especially when even low number of page views from their side may affect the overall stats, so it makes perfect sense that you may want to tell Blogger to stop tracking in on your account.
We recently started getting a lot of queries about "why blogger is still tracking my pageviews" and similar, on Twitter and in the forums in large quantity. Here's a tweet from a Blogger user with the hashtag #gHelp seeking for help with the issue
I've tried to get my blog to stop tracking my views, but it's just not working. It's skewing my numbers and I'm just at a loss! Help! #gHelp— Shresh Ramsout (@ShreshRamsout) April 28, 2016
The most straightforward option is to set the option in your blog's dashboard, that can be done by following these steps (these are optional steps, you may have turned it on already):
- Go to your Blogger Dashboard
- Select the Stats -> Overview tab & then click on "Manage tracking your own pageviews"
- You shall be now taken to a new tab with the following URL format:
https://[yourblog].blogspot.com/b/statsCookieManage - Check the box that says "Don't track my views for this blog.", and that's it.
This is supposed to stop tracking your pageviews on the blog, but if you test it you will find that it doesn't work. You can check this if it works or not by refreshing your blog in the browser, and after that refresh the stats on your blogger dashboard - you will see that the views are still being counted rendering the option to turn it off completely useless.
A Valid Workaround
We know that it doesn't work, and Blogger engineers are still on it to fix it, but meanwhile many blog owners are affected and this has to be fixed somehow.
To tell Blogger to not count your pageview is not a magic, the technique is to set a cookie on your browser so that whenever you load your blog the server knows that you do not want your pageviews to be counted, if the cookie, which is nothing but a small text file saved for websites that contains data used by the browser and server, is not available it counts your views.
What the problem is
(You may want to move to the next section if you want to just know how to fix it)
The error is with where the cookie is set when you go to the options page that let's you choose if you want the blog to stop tracking your pageviews.
The URL is: https://[yourblog].blogspot.com/b/statsCookieManage
The cookie named "_ns" with the value of "2" is supposed to be set on blog address, but due to an error on the Blogger system the cookie is only set on the /b whereas it is supposed to be set on the "/" path which signifies that it must work on every page of your blog, but due to the error it is not.
Here are some screenshots with the information of cookies that is set while we toggle the option
Everything seems to work okay. As you can see, when the option in the second image in unchecked (highlighted in orange), the cookie named "_ns" disappears. That is how it is supposed to work, the problem actually is its Path value set to /b
Everything seems to work okay. As you can see, when the option in the second image in unchecked (highlighted in orange), the cookie named "_ns" disappears. That is how it is supposed to work, the problem actually is its Path value set to /b
And as the path is set to /b the cookie appears no where on the blog except for the page that starts on the path /b
The Workaround
To make this work i.e to have Blogger stop counting our own pageviews we just have to set a cookie on the blog, but this time manually as the options page that Blogger provides us doesn't work properly.
That can be done with a simple JavaScript snippet. All we will do is set a cookie with the name "_ns" and the value "2" on the root path of your blog.
Without any further delay here's the code we need (copy it to your clipboard):
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
createCookie("_ns", "2", 999);
The snippet will create a cookie with the passed values in
Google Chrome
You can open the console using the keyboard shortcut CTRL+Shift+J / F12 on Windows or CMD+Option+J, or you could right click on an empty area in the web page, then select Inspect and switch to the Console tab.
createCookie("_ns", "2", 999);, you do not need to understand anything about this for it work, only thing you might be interested is the number of days this cookie will be valid for, in the code we have set it to 999 days, after that the cookie will be removed itself from the browser. You can set the value higher or lower if you like.Using the code snippet
After you have copied the code open your blog's homepage. To run this code you need to access the JavaScript console, there are different ways to open the console in different browsers, I am mentioning how to do it in Chrome and FirefoxGoogle Chrome
You can open the console using the keyboard shortcut CTRL+Shift+J / F12 on Windows or CMD+Option+J, or you could right click on an empty area in the web page, then select Inspect and switch to the Console tab.
Following screenshot shows the code entered in the JavaScript console on Chrome.
After pasting the code in place, hit enter and that's it. The cookie is set and now until the cookie expires or is manually removed (by clearing cookies off your browser) Blogger would not count your page-views when you access your blog from the browser.
Mozilla Firefox
To open the console in Firefox: CTRL+Shift+K on Windows or ⌘+Option+K on Mac. Or you could Right Click, then choose Inspect Element and then go to the Console tab.
Enter the code in the console window and hit enter. Here's how it must look like in Mozilla Firefox:
On Safari
On your Safari browser click on the Develop menu and select "Show JavaScript Console" to open the JavaScript console where you will be entering the script you copied above.
If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”.
Important note: If you are on .blogspot.com URL then check which version of your blogspot has loaded, Blogger mainly redirects .blogspot.com URLs based on the visitors country, so if you are in the UK it will change to .blogspot.co.uk. Setting the cookie on .blogspot.co.uk or your country specific TLD won't work on other country specific TLDs. You can set the cookie on all of the variants if you like.
The Cookie's now set. That's it.
Now that you have run the code the cookie that we have been mentioning throughout the post will be set on in your browser. As long as the cookie stays in the browser any visits to your blog from that browser would not be counted towards the pageviews of your blog.
If you use different browsers, you may also use this code in those to stop tracking the pageviews from those as well.
Note that it is possible in browsers to set an option that deletes any cookies on a site once it is closed, so I recommend you to look for the option for cookies in your browser if this doesn't seem to work, if problem continues please post a comment on this post.
HTTPS Will Be Available by Default on Blogger Blogs
It was not long when the users were given the super-heroes like powers to serve their blogs (on .blogspot.com) over the secure protocol https which is good in many ways, but it was something not always liked by the masses and there are reasons behind it (which we will discuss soon.)
A little background on the matter if you are not sure what this is about:
Last year in September Blogger announced the support for enabling HTTPS (HyperText Transfer Protocol Secure) on their blogs. Blogger has now been sending notification to Blogger users with the following message:
A lot of blogger users who were not using a custom domain for their blogs tried out the setting to serve their blog over https many didn't see any change, but most of them didn't like it, the reason are many, HTTPS encryption is secure, it is the preferred protocol for any website that transacts important data over the internet to keep it safe.
It is that security which disturbed many users when they used the feature to enable HTTPS, it resulted into errors in the functionality of many blogs which was caused due to mixed content.
Please also see this pinned post on the official Blogger Help Forums which explains the matter with more details:
https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!topic/blogger/JGcHNmtIPiE
To begin with, you may want to learn more about HTTPS
A little background on the matter if you are not sure what this is about:
Last year in September Blogger announced the support for enabling HTTPS (HyperText Transfer Protocol Secure) on their blogs. Blogger has now been sending notification to Blogger users with the following message:
Coming in late April!
All visitors will be able to view your Blogspot domain blogs over an encrypted connection by visiting https://<your-blog>.blogspot.com. Existing links and bookmarks to your blogs will continue to work. As part of this change, the HTTPS Availability setting will disappear, and your blogs will always have an HTTPS version.If you were unaware of the updates of support for HTTPS encryption this might come as a surprise.
A lot of blogger users who were not using a custom domain for their blogs tried out the setting to serve their blog over https many didn't see any change, but most of them didn't like it, the reason are many, HTTPS encryption is secure, it is the preferred protocol for any website that transacts important data over the internet to keep it safe.
It is that security which disturbed many users when they used the feature to enable HTTPS, it resulted into errors in the functionality of many blogs which was caused due to mixed content.
Please also see this pinned post on the official Blogger Help Forums which explains the matter with more details:
https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!topic/blogger/JGcHNmtIPiE
How does it affect my blog?
First of all coming back to the message: There have been no announcements on the blog with detailed explanation of what is going to change. The notification message on the Blogger dashboard implies that the settings for enabling https will go away as starting late April everyone can visit your blog over the encrypted protocol i.e https://.To begin with, you may want to learn more about HTTPS
Are custom domain affected?
No, blogger blogs with custom domain can not be accessed on the https:// protocol. Only the blogs on <your-blog>.blogspot.com will see this change.
My Blogs will always be served over HTTPS?
There hasn't been any updates regarding this on the official blogs but from what we can see in the notification message it means that both versions will be available, a visitor would be able to either visit the HTTPS or the HTTP version.
Depending on what the user type in the protocol part of your blog address, for example if the users type: https://blogname.blogspot.com the secure version would be served, or if http is used, then the traditional http version.
Depending on what the user type in the protocol part of your blog address, for example if the users type: https://blogname.blogspot.com the secure version would be served, or if http is used, then the traditional http version.
It is difficult to say what the actual behavior would be, as Google wants to make each of their products available on the secure protocol, it is possible that the default protocol for all blogs may be changed to HTTPS.
Impact on old URLs and Search
As for bookmarks, old URLs etc, it may come in as a relief that those would continue working, as HTTPS availablity is the choice of the user, if they want they can visit the blog over HTTP by simply typing http:// before the URL, however there is still no information how would search engines treat this change, the question is that what version would be by default indexed by the search engines?
We do not still have much information on this, when the changes are rolled out and we have more details we will update our blog with more insight on this, so please follow our blog.
We do not still have much information on this, when the changes are rolled out and we have more details we will update our blog with more insight on this, so please follow our blog.
What are the benefits?
There are certainly benefits in having your blog served over HTTPS, most important of all is a sign of trust, HTTPS protocol as the name suggest is the secure way of serving content and having that on your blog as well gives the readers a sense of genuineness.
Here are some benefits of using it (mentioned here on this official BHF thread)
Here are some benefits of using it (mentioned here on this official BHF thread)
- It helps check that your visitors open the correct blog and aren’t being redirected to a malicious site.
- It helps detect if an attacker tries to change any data sent from Blogspot to the visitor.
- It adds security measures that make it harder for other people to listen to your visitors’ conversations, track their activities, or steal their information.
The disadvantage
Mixed content warnings are common to websites and blogs which has sub-resources on the lesser secure or as Google likes to call it insecure protocol, HTTP.
What this has to do with Blogger blogs? Well, if you like to add widgets and other stuffs on your blog from different sources it is quite possible your blog may be a victim of mixed content warnings if those widgets/scripts refers to any resource that is on the HTTP protocol, as these resources can be possiblity used by the unethical people to steal data even from sites with HTTPS encryption.
What this has to do with Blogger blogs? Well, if you like to add widgets and other stuffs on your blog from different sources it is quite possible your blog may be a victim of mixed content warnings if those widgets/scripts refers to any resource that is on the HTTP protocol, as these resources can be possiblity used by the unethical people to steal data even from sites with HTTPS encryption.
This is a disadvantage if your need of HTTPS has less importance than the widgets/scripts you use on your blog. Anyways it is not recommended to include these from sources you do not trust, and mostly the third-parties who provide these must be wise enough to serve their content over HTTPS too if they really want to help the users.
These are some resources to prepare yourself for any mixed-content warnings you may possibly get on your blog when these updates from Blogger regarding HTTPS changes rolls out. You may consider it doing now to futureproof your blog.
Blogger Help: Fix mixed content on your blog
Blogger Help: Fix mixed content on your blog
What's next
There's nothing you have to do in order for this change to take effect, later near the end of April this will roll-out to all the blogspot blogs.
Furthermore there might be some extra measures that needs to be taken once the changes are rolled out. We will keep updating this space for future updates on the topic, you can also follow StramaXon Blog & Gioogle Blogger Official Blog
Responsive Videos In Posts on Blogger
YouTube. Dailymotion, Vimeo.. who doesn't like to spend time on these sites. Chances are you embed videos from these platforms on your blog, but the worst thing? It doesn't fit on mobile devices, that too even if you are using a responsive template.
This version of the code works only on the videos wrapped inside a container with the class
So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.
When you do not want a video to be handled by the plugin, you can just wrap its code inside a
If it looks fine save the template and try it on a post.
If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.
Why is it important to make sure videos fits properly on mobile devices? If you would have asked this question about even just half a decade back we would said that it is not important, though times are changing a lot faster, majority of your readers maybe on some kind of mobile devices and that is why responsive web is such a big break-through in the internet World.
Question arises: How do I make sure videos on my blog, from either YouTube, Vimeo, Dailymotion (.. or other sources) properly fit on my blog page when viewed from a mobile device.
Before we begin the tutorial, we would like you to understand that this tutorial is meant for those blogs which uses a responsive web design approach, mostly the default blogger templates aren't those, and following this tutorial would bring nothing good, it would not bite, but wouldn't bring you any good either.
Tutorial Begins
FitVidsJS is a lightweight jQuery plugin that works very well in making videos fluid i.e fit with the width of the container, from many popular platforms (..and also other platforms that you can specify).
Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.
Demo - Fluid Videos
Demo it didn't happen.
While you are on the demo page, try reducing the size of your browser window and see how the video responds to the re-size event and adapts itself accordingly.Demo it didn't happen.
Back it up: Before you begin with the steps, I recommend you to backup your blogger template as we will make changes to the template, and if anything goes wrong you can always revert back using the backed-up template file.
Adding jQuery
It is a JavaScript framework that is used for various tasks like DOM manipulation, AJAX and other technical stuffs that helps make it easier to make a website interactive with JavaScript. The FitVids plugin is a jQuery plugin which means it would not work if you do not load jQuery.
Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-
Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or ⌘+F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:
If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:
Before we go on further, copy this script tag which we need in the steps mentioned next:
We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.
Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)
On the line 3 you can change
Check if you already have jQuery added Chances are that your template may already contain a version of jQuery (many do), it is not recommended to add jQuery twice, so check if you have jQuery already installed. How to do that :-
Go to the Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F or ⌘+F and search for the keyword 'jquery', go through the found instances and see if you have something similar to this:
<script type="text/javascript" src="https://....../jquery.min.js"></script>
If you do not have jQuery, add it - To add jQuery from Google's CDN, follow these steps:
- Go to your Blogger Dashboard -> Template -> Edit HTML
- Use CTRL+For⌘+F search for
</head> - Copy the following line of code, which is the script tag to include jQuery library in your blog -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
That's it. Now it must look something like this in the template code editor
Adding jQuery's code snippet in Blogger template. - Press the orange "Save Template" button to save it.
The main FitVidsJS plugin
It's time to add the JavaScript/jQuery plugin. We will add it from a CDN, that makes sure that the files load fast and doesn't impact on the performance of your blog.Before we go on further, copy this script tag which we need in the steps mentioned next:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
- Go to your Blogger Dashboard -> Template -> Edit HTML
- Use CTRL+For⌘+F search for
</head> - Paste the copied code immediately before line where
</head>is.
It is important that we put this script tag after the jQuery tag (wherever it is in the template), so if you already have jQuery somewhere else in the template consider putting this tag below it. These tags can be added anywhere, in the head, or even at the end of the body. - Following is an example of how it must look like after you have added it to the template. Note that the plugin code i.e Fitvids script tag must always be placed after jQuery's for it to work.
Initialize the plugin - Fitvids
Once we have the script tags in place we have to tell it to initialize the function on the videos, the plugin can't guess where do you have your videos, or which videos do you intend to make responsive so we have to specify it.We will provide different initialization code for different applications i.e if you want the plugin to work on all videos on your posts, or if you want it to work on some some that you can specify. It gives you more control over what you want to be handled by this plugin.
Choose the right initialize code and continue with the step to add it to your template (which is same as adding the script tags in the above steps, you just have to put the following codes below any script tags we added)
1. All videos in posts, or (recommended)
The code uses the class of the body of the post to identify which part of the page it must handle, mostly blogger templates include the class name "post-body" in the container of the post and assuming that your template does the same you can use this to initialize the plugin on all the videos in every posts.<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids();
});
</script>
On the line 3 you can change
.post-body to the class name you want to target. Most blogger templates this class name for posts, so this code may work right out of the box without any changes.2. Only some videos, or
If you do not want every video in your post be handled, then you can specify the ones you want to.<script type="text/javascript">
$(document).ready(function(){
$(".fit").fitVids();
});
</script>
This version of the code works only on the videos wrapped inside a container with the class
fit. It gives you a control over the videos you want to make responsive. As it has been said it needs to be wrapped inside a container, it means that your embed code must be put inside an element like this:<div class="fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>
So while you are including a video somewhere in your post you always have to make sure you wrap it inside this code.
3. All, but not some
The third option is to have selective videos not being handled by the plugin, all videos will become responsive i the posts except for the ones you specify.<script type="text/javascript">
$(document).ready(function(){
$(".post-body").fitVids({ ignore: '.not-fit'});
});
</script>
When you do not want a video to be handled by the plugin, you can just wrap its code inside a
div element with the class not-fit (notice the .not-fit in the code above). This is how you can wrap the embed code for the video inside the element, and then paste it in your post:<div class="not-fit">
<iframe src="...[embed code]" width="xxx" height="xxx">
</div>
And then put and code in place,
Choose an initialization script from any of the above sections and then include it in your Blogger template. To do that:- Go to Blogger Dashboard -> Template
- Edit HTML
- Now search for the line where we added the FitVidsJS <script...></script> tag. Paste the initialization code just after it. Here's a screenshot of how it must look once you have it in place.
If it looks fine save the template and try it on a post.
Questions or comments?
It is quite possible that this may not work properly for every blog due to different reasons, even if one part of the guide is not followed properly the chances are high that errors may come up during the set-up, so if you have any questions regarding this you can post a comment on this post (include your blog address) and we will try to help you set it up.If you have suggestions and comments on this tutorial please post it in the comment form, we would love to hear from you! This post may not cover every aspect of the jQuery library, or the FitVids plugin, as it would have made the post enormously large, to help others any bit of information that you think is vital would be appreciated.
Changing The URL Of Blogger Posts Even After It's Published
With small advancements in Blogger, users were provided many new options to customize their blog and blog posts for a better search experience, like adding search description and changing the permalink.
But there's a catch, once you publish your post and then try to edit the permalink, you can not! In this tutorial we will explain how you could change the permalink even after it has been published.
Note: Editing of permalink means the older links that points to the post would no longer work. And the customized post would be seen as a new post by the search bots, with the content that was located at another URL before.
Changing the permalink of the post after it has been published is not allowed, as long as the post is in the published status it wouldn't let you do that. That is for obvious reasons, but sometimes you might feel the need of customizing the URL of a post.
But there's a catch, once you publish your post and then try to edit the permalink, you can not! In this tutorial we will explain how you could change the permalink even after it has been published.
Note: Editing of permalink means the older links that points to the post would no longer work. And the customized post would be seen as a new post by the search bots, with the content that was located at another URL before.
Changing the permalink of the post after it has been published is not allowed, as long as the post is in the published status it wouldn't let you do that. That is for obvious reasons, but sometimes you might feel the need of customizing the URL of a post.
Change The Permalink
Let's get to the point, but before that let me warn you again that doing this is similar to creating a new post, copying the content of another published post, pasting it in the new one, setting the date and changing the permalink as per your need and then deleting the old one.
1. Reverting the post to draft
It is only possible to edit the permalink of the post when it is in the draft mode, so we have to first revert our post to draft in order to be able to edit it.
- Go to your Blogger Dashboard
- Navigate to the list of Posts and open a published post in Post Editor
- In the post editor, click on the "Revert to draft" button on the top right of the post editor page right next to the orange button that must read "Update".
- Now that the post is back in the draft mode, you might now be able to use the "Permalink" option under "Post Settings" to change its URL. Click on the "Permalink" tab on the right sidebar, select the "Custom" radio button and then enter your desired URL for the post.
That is it. Once you have input the desired permalink for the post you are set to publish the post again.
Blogger has a tool for setting custom redirects for URLs on your blog, and it is very easy. You may find this article by Help Blogger helpful to understand how custom redirects work and use it correctly.
How to Set Custom Redirects in Blogger http://helplogger.blogspot.in/2014/07/how-to-set-custom-redirects-for-blogger-post.html
Facing difficulties in going through the steps? Let us know in the comments below.
Redirecting Old URLs to the New
If your aim is to just change the URL for presentation purpose while keeping the old URLs still active (considering you have shared the blog post at a lot of places, or others have shared it on social sites and their blogs) then the best option for you is to set a custom redirect.Blogger has a tool for setting custom redirects for URLs on your blog, and it is very easy. You may find this article by Help Blogger helpful to understand how custom redirects work and use it correctly.
How to Set Custom Redirects in Blogger http://helplogger.blogspot.in/2014/07/how-to-set-custom-redirects-for-blogger-post.html
Facing difficulties in going through the steps? Let us know in the comments below.
Subscribe to:
Posts (Atom)