Blogger Tips Pro

Why Google Should Turn Blogger into an Evernote Competitor

noreply@blogger.com (Don James) — Mon, 10 May 2021 02:04:00 +0000

Probably many of you have used some form of a cloud or markdown based note-taking tool like Evernote, OneNote, Google Keep, Notion, Obsidian, Bear, etc. I've been a big fan of note-taking tools since my grad school days about 7 years ago but have found each of them with various gaps that didn't satisfy everything I wanted. I started initially with Microsoft OneNote but just didn't like the feel of its old, bloated clunky interface - so I jumped to Evernote.

At the time, Evernote was the new kid on the block -- an awesome tool with good organizational structure, tags, nice note formatting and full cross-device syncing (I use Windows, iOS and MacOS which was really helpful when using Evernote). However, some years ago, Evernote put up a paywall on the max number of devices you could use (they restricted it to 2, I use 4). That was a big issue for me and I was about to pay the monthly fee until I discovered Google Keep.

At first, Keep seemed way too simple to use as a significant note-taking tool - no formatting, no cross-linking....but, integrated directly into Chrome -- simple and full cross-device support with no limits (other than tag and note length). As I used it more, I started to see how its simplicity started to benefit me. I always get stuck on the 'look and feel' of digital output and Evernote had me focusing too much on formatting over content while just trying to take notes. The real tipping point for me with Keep, however, was being able to combine a group of notes to a single Google Doc output and OCR of both cursive and printed text. That let me take multiple Keep notes of fragmented ideas, grabs of web pages, short content and focus them into one output for final editing.

Blogger as a Note-Taking App

Where am I going with this, you might ask? Well, much of my final output - sometimes known as evergreen notes - was ending up in Google Docs. That's great for a paper or published article - but not for deeper note-taking, learning and, of course, blog posts! Just copying and pasting Google Docs into Blogger is messy and the html output is bloated. But, if I could export multiple Keep notes to a draft Blogger post - now, something better than Evernote or OneNote is starting to become apparent.

Ok, as I thought about this I could see that Blogger is really just a couple of steps away from being a full-fledged Evernote and OneNote replacement. It has all of the necessary formatting features, tags, media embedding, templates, public or private, sharing, notes by email, etc. All Google would need to do at a minimum is to add cross-linking between posts, note taking templates, folder groupings and re-release their Blogger mobile app. Viola! You now have a full fledged deep note-taking environment as a serious note-taking competitor.

Of course some nice-to-haves would be writing notes in markdown, adding latex for math, Keep integration and import and export of notes - but, those could wait as future features. Overall, I believe this would be a great way to revitalize Blogger in Google ecosystem.

Hey Google!! Are you listening??

Build a Programming Blog on Blogger - Part 2

noreply@blogger.com (Don James) — Sun, 17 Mar 2019 02:48:00 +0000

Ok, in Part 1 I modified the Blogger Contempo default template into a very clean, responsive programming blog. I also pointed out some of the Google Blogger template structures--so if you've forgotten, just go back a take a look at the brief description. We'll be focusing on some of the code within the template this time. (If you're just too anxious to see the final result just click on this image:)

One quick fix that I forgot in Part 1 was to modify the blog topic labels to be more visible. Just go back into the main menu and select 'Theme/Customize' again to go into the Blogger Theme Designer. Select 'Advanced / Labels' and set the 'Label background color' to blue like this:

Press the 'Apply to Blog' button and take a look at one of your posts - you should see your labels in your posts (Note: if you didn't add labels to posts originally, go into each post and on the far right side of the post editor you'll see 'Labels' - just add subject labels there and save the post - your labels will appear in the blog post now) :

Your colorized labels also show up in the left sidebar of the blog as well.

Next step is to increase the widths a bit so that the side bar doesn't appear all the time at higher resolutions. This is going to be a personal preference for you, but, I'll show you how to modify those settings. Go back into Theme Designer again just like the last step and choose 'Advanced / Widths'. Set your 'Content width' to a value you like (I chose 1030px) and bump up 'Content margin' so that the sidebar doesn't show at higher screen resolutions (I set mine to 425px):

Modifying the Header and Footer

Ok, the blog is looking good now. Let's do a few touch-ups on the header and the footer to complete this tutorial. First, let's add an HTML gadget to the footer where you can have some additional information about your blog. Right now all that's in the footer is the Blogger attribution. Go to the main menu and select 'Layout'. Find the "Add a Gadget' box in the layout:

From the gadget menu select the HTML / Javascript component and give it a title of 'Footer' and some random text in the html section wrapped in a div tag:

Press 'Save' and you should see the gadget in the Sidebar blocks of the Layout. Drag that box from the Sidebar down to the top of the footer like this:

Press the 'Save arrangement' button and take a look at your blog. You should now see your footer section and text. That particular gadget allows you to place any html code within it. So, if you want a CSS table or other information laid out you can input anything in that gadget. For CSS formatting, we'll see below how to add custom CSS just for that footer.

One thing I don't like about the Contempo footer is that it only spans the post body width and not the full body width. I like blogs that have a black or gray bar on the bottom that spans the full screen width. To fix that in this template requires some code rearranging. Be sure to backup your template before you try this.

Start by going to the main menu and selecting 'Theme/Edit HTML'. Scroll down to the very end searching for this section in the template code '<b:section class='footer':

Copy and cut that section and paste it just after the ending </aside tag like this:

Warning! The <b:section code will expand when you paste it after the </aside ending tag. Don't worry, by clicking next to the section and widget sections on the line numbers they will expand and collapse in the editor. Also, be sure to add the single line above the section you just pasted: <div class='clearboth'/>. Go ahead and save your template - the footer should now span the full bottom of the blog!

To alter the footer color and style you'll need to add some custom CSS in the Theme Designer. When we added the HTML gadget and text you can see I gave the div tag id of 'topfooter' in its Content section. We'll use that in the custom CSS section. Go back to the main menu selecting 'Theme / Customize'. Add the following CSS code to the 'Advanced / Add CSS' selection like this:

#footer {
background-color:#333;
}

#topfooter {
display: flex;
justify-content: center;
width: 400px;
margin: 0 auto;
color: #ffffff;
}

You can see I've changed the full footer color to gray and the top footer custom html to be flex ready and centered. Click 'Apply to blog' and take a look at your new footer bar. You can now add custom HTML in the footer gadget and CSS for it in the theme editor - rinse and repeat for everything you want in that section. (Note: the gadget title of 'Footer' still is off to the far left side - just remove the title from the gadget in the Layout editor to remove it).

Now that we've learned how to modify the CSS, let's do the very same with the header to make it span the full screen width and alter its background color. The way I had to approach this was to set the full container body to 100% screen width and then increase the margins of the posts, popular posts and icon menus. Each of these CSS values override the CSS in the template. So, if you want to really start modifying it more, just find the CSS value in the template and then override it in the Theme Designer. You can see in the code below what the values were originally and what I modifed (BTP means BloggerTipsPro). Here is the additional code to paste into the 'Advanced / Add CSS' section:

.centered-top {
background-color: #000; /* BTP override top banner */
}

.page_body .centered{
max-width: 100%; /* BTP $(content.width); */
padding:0 0; /* BTP first value from 24px to 0 */
}

.centered-bottom,.centered-top-container,.centered-top-placeholder{
padding:0 0px
}

.blog-name{
margin:0px 0 26px 0px; /* BTP from 24px 0 16px 0 */
}

#page_body .FeaturedPost,.Blog .blog-posts .post-outer-container{
padding:0px 140px; /* BTP from 30px 40px */
}

.main .PopularPosts{
padding:16px 140px /* BTP from 16px 40px to 16px 120px; */
}

.post-snippet.snippet-container{
max-height:240px  /* BTP from 120px */
}

.hamburger-menu {
margin-left: 20px;
}

.sticky .hamburger-menu {
margin-left: 0px;
}

.search {
margin-right: 20px;
}

.sticky .search {
margin-right: 0px;
}

Feel free to work those CSS values to your liking! (I changed the top banner to black so you'll need to use the 'Advanced / Blog Title' to set the title and icons to white and 'Advanced / Search' to set the search bar white as well).

Finally, let's add the two pages as menu selections in the header. Go back to the main menu item 'Layout' and select the 'Page List (Top)' gadget like this:

You should see a dialog with the two pages you created in Part 1 along with the home page:

Simply select the 'Show Pages' check box and don't add a title. Make sure whatever pages you want to show are selected and save the gadget. Take a look at your blog - the page items will be just under the blog title and description. To alter their colors just go back into the Theme Designer again, pick 'Advanced / Tabs Text' and set them to the colors you like:

Press 'Apply to blog'. That's it!! Your blog is ready. Note: one reminder; in Part 1 we turned off the blog's being added to the search engine and listed in Blogger. You will have to delete your test posts and pages and turn these settings back on - don't forget that!!!!

Code Syntax Highlighting

As a final note any programmer knows you can't have a coding blog without a syntax highlighter. My preference is to using Prism.js for code highlighting. It's simple to add and you can tweak it any way you'd like. But let's get the fundamental plugins installed.

All you need to do is to add the Prism core javascript library and the language library you want to support. Go to the main menu and select 'Template / Edit HTML'. In the template code scroll to the very bottom and add these two lines (we'll be testing with Javascript as the core language):

script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js" type="text/javascript"
script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js' type='text/javascript'/

to .the very bottom of the template just above the ending </body> tag like this:

You will then need to also add the prism CSS to the top of the template as well:

link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css' rel='stylesheet'

just above the <b:skin section

You will see the result in my sample blog below in the Javascript post! Prism allows for many customizations for formatting so you can give the look and feel you want. In the post itself, you need to use the <pre><code class="language-js">...your code here...</code></pre> to enable the highlight.

Here's the final result (click on the image)!! Be sure to check out its responsiveness on a mobile device as well! Have fun!!

Build a Coding Blog on Blogger - Part 1

noreply@blogger.com (Don James) — Fri, 15 Mar 2019 03:14:00 +0000

In the last decade being or becoming a programmer or coder has become a path to one of the hottest job markets in the US and probably in the world. Coders are in very high demand and keeping up on new technology can be a challenge. Many coders learn not only through classes or jobs, but also through coding blogs.

Unfortunately Google seems to have missed the mark completely by bypassing Blogger as an amazing platform for technologists and coders. I should note, though, that it really isn't the platform that is the problem--it is the available templates and API integrations offered by Google. Yes, you can go out and find Blogger templates from third parties, but, if you (Google) haven't offered a set of clean coder templates along with Github integration you've clearly missed a significant opportunity.

That being said a clever programmer could certainly go out to the Blogger API to integrate posts into Github and attempting to hack template uploads as part of a continuous integration build. But, that's beyond the scope of this post. The goal today is to guide you, the coder, to a simple, clean, customized, extendable and reactive template that looks and feels like many of the blogs or articles you see on sites like Hackernoon or others.

Let's get started.

Choosing the Blogger Template

First step is to choose the right base Blogger template. Clearly, we only have four choices since we want a modern, reactive template (Contempo, Soho, Emporio, or Notable). Each has it's pluses and minuses but I'm going to use the Contempo template since it has a nice full-screen feel and is somewhat minimized.

I'm assuming you have a Google account already. But, if you don't go out and create one for yourself at Google Accounts. Once setup, you can just use that account to log into Blogger and create your first blog. There are plenty of tutorials out there to learn how to create your first blog if you haven't done it before. You can use this video (just note that the video references Google+ which is now gone and the section on the account will just be a standard Google account)

At the first time into Blogger you'll see a blog creation screen like this:

Be sure that you've chosen the Contempo template when you create the blog. Don't worry, at this point you'll have the basic shell for the blog but it's going to look very sparse to start out.

Before you do anything else, from the Blogger main menu go into Settings/Basic and find the Privacy item- 'Listed on Blogger. Visible to Search Engines' selection and select Edit:

Set both the values of 'Add your blog to our listings?' and 'Let search engines find your blog?' to No for the time being. The reason for doing this is because we'll be creating 6 test posts and 2 test pages to get the blog template complete. Then, we'll turn these settings back to Yes once you're ready to truly start blogging about your code and have deleted the test pages.

I'm assuming as a coder you're savvy enough to figure out how to create 6 posts and 2 pages of content or find tutorials online. Just be sure to use unformatted text copied from some document or page (otherwise the html formatting will embed in the post which you don't want to do). Make sure each post has at least 3 paragraphs and one image added.

Once you've created the posts and pages - Don't Panic!! I suspect you'll see the Contempo template looks really bad right now with poor layout, color and huge images in the posts like this:

Modifying the Template

Let's get a couple of things fixed right away. First, the top post in the template is a featured post. Let's turn that off in the Layout section of the main menu in Blogger. Find the template section called 'Page Body / Featured Post' and select the small edit pencil icon like this:

Unselect the 'Show Featured Post' check box and press 'Save'. It already looks much better. Next, let's remove that mountain background scene by removing that image in the Theme Customizer. Just select Theme in the main menu and press the Customize button - you should see something like this:

Choose 'Background' and 'Remove image' - press 'Apply to Blog'. Next, select the 'Advanced / Backgrounds' menus to set the page background color to white and press press 'Apply to Blog' again - then choose 'Blog Title' and set both it and 'Background icons color' to black. - finally going 'Back to Blogger'.

We've cleared that image and the main background. But, you need to also remove the gray background overlay that is remaining at the top of the template. Unfortunately the theme designer didn't let you modify this in the Customizer and we have to use the template HTML.

If you haven't looked at a Blogger template before I must warn you it isn't pretty - especially if you are a programmer. At a technical level it is an XML document that contains three major sections - the customizer parameters, the CSS and the Google Blogger gadget components / logic. When saved and executed, the XML template is processed and rendered as an HTML file with Javascript components dynamically added. I won't go into more detail but what we'll be doing mostly in these tutorials is altering the CSS section by replacing or modifying key document element formatting. If you're interested - here are the template data elements and data tags.

To get rid of the gray, go to the raw template by selecting 'Theme' again in the main menu and 'Edit HTML' under the image.

Once into the template raw HTML / XML click your mouse in the code screen and do a search
. for this CSS tag - .bg-photo-overlay. Change the background to: background:rgba(0,0,0, 0.0)

Press 'Save Theme' and take a look at your blog now - it's starting to look very clean and much like a tech blog now! If you're new to Blogger you should be getting the hang of modifying these components now. Before I stop this post for Part 2, let's just modify the fonts to be a be more tech styled. Go back into the Theme / Customize - Theme Designer and set the posts to Arial 17 and main page titles to Arimo 34. I also set the title font color to #770000 for some color:

That's it! You now have a starting tech blog template. You may notice if you have a very large screen that the sidebar doesn't hide unless the screen size is reduced. We'll fix that in Part 2. Enjoy!!!

Customize Social Share Icons in Blogger

noreply@blogger.com (Don James) — Sat, 09 Mar 2019 19:32:00 +0000

I've been spending a significant amount of time this year digging deep into the new Blogger responsive templates (Contempo, Soho, Emporio and Notable). There's quite a bit to be excited about yet there are some very frustrating components to the new responsive layouts that bother me. I will be posting more about them soon.

In the mean time I thought I would add a short post on how you can alter the social share icons in these four responsive templates (plus a similar change in the older V2 template icons at the end of this post). One of my frustrations with the new templates was that all of the social share buttons were set to the same color. You can alter their foreground and background colors as a group in the Template Theme designer which is good, but, they're all the same and don't match the standard colors of the social network logos. It seems that all four templates have used the same social sharing svg icon code.

SVG Icons

If you're not familiar with svg icons you can find more information here (SVG 101) and here (What is SVG?). When the new Blogger version 1.3 or V3 templates came out in early 2017, a significant amount of code was added dynamically as your blog renders for responsive images and SVG sprites. (If you want to find out your Blogger template version just look in the Template html - you'll see the version at the top. Most of us have been using version 2 for the last 10 years).

Altering the social share buttons is easy and only needs some custom CSS to make the modifications. In this example blog I have circled the share icon on the responsive Emporio template like so:

The other 3 responsive templates also have the same share and vary slightly in appearance--but the following change works for all four. When the share button is selected you see all svg share icons in a single theme color like this:

As you can see all of the icons are the same color. I can alter the group's foreground and background colors but not each individually.

Modifying Social Share Icons

The key to modifying each is to find within the final html output just where the svg code gets added to the rendering of the page. It's not in the template itself other than the template b:include snippet like this:

b:include cond="data:view.isSingleItem and data:widget.type == "Blog"" data="{ shareButtonClass: "post-share-buttons-top", overridden: true }" name="maybeAddShareButtons"

This does not get you to the actual svg icons directly. Good news is that once you've rendered your page you can hunt using the browser to find the div tag ids to get to them.

In all four templates, the CSS identifying tags are hinted at by the id .svg-icon-24, but, you need to get each individual one. Fortunately, after debugging the output page, the CSS ids are as follows:

.svg-icon-24.touch-icon.sharing-pinterest
.svg-icon-24.touch-icon.sharing-facebook
.svg-icon-24.touch-icon.sharing-twitter 
.svg-icon-24.touch-icon.sharing-email
.svg-icon-24.touch-icon.sharing-link

Now that we know what the document tags are we can modify them individually. I can now change their individual colors to the standard Facebook, Pinterest and Twitter official colors like so (as well and a custom color for email and link sharing):

.svg-icon-24.touch-icon.sharing-pinterest {
fill: #bd081c;
}
.svg-icon-24.touch-icon.sharing-facebook {
fill: #3b5998;
}
.svg-icon-24.touch-icon.sharing-twitter {
fill: #1da1f2;
}
.svg-icon-24.touch-icon.sharing-email {
fill: #d44638;
}
.svg-icon-24.touch-icon.sharing-link {
fill: #5d005d;
}

Simply copy the code above and add it to the Advanced/Add CSS section of the Blogger Theme Designer like this:

Simply press the Apply button in the upper right and viola, you now have customized social share icons in your V3 responsive templated blog:

This was only an example for altering the icon colors. You can now use the same technique to do unique changes to any svg icons you want in the new templates.

Altering the Old Blogger Template Icons

I focused mostly on the new responsive templates in this post. Actually, svg was nothing new back in V2 of the Blogger templates. However, in V2 they didn't use svg icons--rather, one image for all sharing icons and just moved the position around as you hovered over them.

You can alter the colors of the V2 share icons using the same technique. The CSS is hidden in the Blogger bundled CSS that you don't have direct access to. But, if you want the older template to show the proper social network colors without being grayed-out by default just follow the same steps above but with this CSS code pasted in the Advanced/Add CSS portion instead:

.sb-pinterest {
 background-position:-100px -20px !important
}
.sb-facebook {
 background-position:-60px -20px !important
}
.sb-twitter {
 background-position:-40px -20px !important
}
.sb-blog {
 background-position:-20px -20px !important
}
.sb-email {
 background-position: 0px -20px !important
}
a:hover.sb-pinterest {
 background-position:-100px -40px !important
}
a:hover.sb-facebook {
 background-position:-60px -40px !important
}
a:hover.sb-twitter {
 background-position:-40px -40px !important
}
a:hover.sb-blog {
 background-position:-20px -40px !important
}
a:hover.sb-email {
 background-position:0 -40px !important
}

It's a bit different than altering the responsive icons - but, does a similar job. You can see these in action on this blog.

Just interact with my share icons to see the change. Enjoy!

Google Plus Shutdown - Blogger Implications

noreply@blogger.com (Don James) — Mon, 04 Feb 2019 00:44:00 +0000

As most of you probably know by now Google is officially shutting down the consumer version Google+ in April 2019. Unfortunately for Blogger admins, this has some significant impacts for any Blogger blogs tightly integrated with Google+ widgets, comments and profiles. But, for me the real tragedy on this change is just how much Google had pushed Blogger owners to integrate Google+ into their blogs especially back in 2012 to 2014 like these - Socialize and Grow your Blog with Google+ or Automatically Share your Posts to Google+.

I know I was very tempted to convert my comments and add the Google+ widgets in BloggerTipsPro but thankfully I hadn't made the move since I already had so many native Blogger comments which was something I didn't want to lose. If Plus had grown a bit more I might have jumped.

So, what does this mean to you, the Blogger admin of one or more blogs? Well, the news isn't great. First, let's start with the easy change. If you have an About gadget on your blog and it is using the Google+ profile, it will be automatically converted back to the native Blogger profile like mine here. However, it will be blank and you will be prompted to create that profile with a image.

Next, all of the Google+ widgets will be removed from the Layout editor and from your blogs which might cause some layout issues if you have them in strategic positions on your blog layout. These include the +1 Button, Google+ Followers and Google+ Badge. This change is coming in two days from when I'm writing this post. Your options can be to find other social media gadgets to plug into these spots.

Then the Google+ share button will disappear from the navigation bar and from the social sharing buttons in posts and pages. This shouldn't affect you much except if you've added custom social sharing Javascript buttons on your blog. Those are typically provided by third party developers and will hopefully remove the Plus buttons.

Finally, the real kicker is comments. If you used Google+ comments instead of Blogger comments then you don't have many options. It's a bit uncertain just how comments will convert. According to Google any posts done from Blogger will convert whereas Google+ comments will not. So, if you had comments posted in Google+ by other Plus users, those will not convert. It seems there are some options to try and backup any Plus activity using Google Takeout. However, that just creates html pages of your posts and not the activities of other Google+ users.

What does this all mean? Backup, backup, backup!!!! There's no telling what Google will do with Blogger in the future. They've already converted their corporate blogs away from Blogger (except for the official Blogger blog). You should definitely backup your Blogger blogs fully just to be prepared - I really don't know what the Blogger ecosystem will look like in 2019.

You can read more about the shutdown here.

How to Backup Your Blogger Site Completely - 2019 Edition

noreply@blogger.com (Don James) — Sat, 10 Nov 2018 23:56:00 +0000

Well, if you're like me you have been putting off getting fresh backups of your Blogger site content, template, images and videos. It's amazing that Blogger has been around almost two decades and through that journey it has transformed its templates while modifying the underlying infrastructure to support it. Google has moved much of your content to newer services typically without you knowing it.

That is why it is time to take some fresh backups. But, be aware, many don't realize that your content is spread across different components--template, posts and comments, images and videos--so if you just had been using the single 'Backup' button you were not getting everything.

Let's start!

Step1: Backup your Template

Though this isn't totally necessary, you should backup your template separately just to make recreating your blog easier. Step 2 also backs up your template with your content but having them separate is a good idea. Be sure to create a backup folder somewhere for all of your site content. I typically use a Dropbox folder so it gets automatically backed up offline.

In your Blogger editor select 'Theme' and click the 'Backup/Restore' button in the upper right as shown below:

You will now see a popup screen to backup your template. Just click the 'Download theme' button and save it on your main drive or backup drive folder:

The file will have a name like theme-4829847293492863492873.xml.

Step 2: Backup Your Post and Comments Content

If you need to recreate your blog for any reason you're going to want all of the content you currently have from all posts, pages and associated comments. Just choose 'Settings/Other' and press the 'Back up Content' button:

A small pop-up will appear that prompts you to save all content across the site:

Just select the 'Save to your computer' button (you might see a browser popup that says 'Leave Page' or 'Stay on Page' - if you do, press the 'Leave Page' button). You will then get a prompt to save your file under a name like 'blog-11-10-2018.xml' which will contain everything. Be sure to save that in the same backup folder you created in Step 1.

Are we done? No, most people forget they need to backup their images as well.

Step 3: Backup Blogger Images

There was a time when Google purchased Blogger that all of your blog images were saved in Picasa. Google retired Picasa in 2016 and now your images are stored on a Google site called 'Album Archive' which is where all Google+, Photos, Blogger and Hangout images are stored. Simply navigate a new browser window to https://get.google.com/albumarchive/.

Now, depending on how much you use Google you might see a lot of images and folders on the default site like this:

Be sure to click on the 'Photos from Blogger'. If you have multiple blogs on your account you will then see a number of folders each with the blog name like this:

Find your blog image folder you're attempting to backup and click on it like I have circled in the image above. You will end up in the image folder of your blog like this:

If you've noticed I've circled the three vertical dots in the upper right. Just click on that and a small window will pop up allowing you to select 'Download Album'. Simply select that menu item--a new webpage will pop up and then the dialog save all images under your blog name.zip (in my case it is Blogger Tips Pro.zip). All your blog images are saved in the zip file. Save it in the same directory as Steps 1 and 2.

Step 4: Backup your Blogger Videos and Misc Media

Are we done yet? Yes and no, there is one last possible backup you need to do. Most of you probably have never used the video upload function in Blogger. But, Blogger has always had the option to upload video directly into posts and pages. These videos used to be saved in Picasa. However, in 2016 Google moved all directly uploaded video files to YouTube. The catch is that you can't see them directly in your YouTube account.

Digging deeper into how Blogger references directly uploaded videos--I found that google redirects to an odd URL like:

"https://r6---sn-vgqs7nl7.googlevideo.com/videoplayback?id=9b1137e71d583fcd&itag=18&source=blogger&mm=31&mn=sn-vgqs7nl7&ms=au&mv=m&pl=18&ei=-WnnW6q3NcuJuAWJsYTIAQ&susc=bl&mime=video/mp4&dur=7.058..."

I'm sure this looks like a lot of nonsense to most - but, the key part is that videos are located at googlevideo.com (just a front for YouTube) and there is no direct way to get to these as backups. The good news is that in the May 2018 post of Blogger Buzz they noted "Video Management: With our new management interface, you can easily download and remove videos you’ve uploaded."

If you didn't backup your original video when you authored it you can attempt to go to your browser cache after you play the video from the post and find the file in the temporary cache of Chrome, Firefox or Edge (I found mine easily in Firefox but had to add the .MP4 extension to the file). That is beyond the scope of this tutorial, however. Hopefully, you used YouTube instead all this time within your posts and your videos are safe there.

Finally, if you remember some years ago I had posts on how to add MP3 files to your blog. My choice was to save them on Google Sites which still exists today in 2018. This is only a reminder that you can go back to https://sites.google.com and find the folder you saved your MP3 files in. There is a simple download link next to each file in your sites 'files' folder.

That's it! You're backed up! Don't hold your breath, however. Google might alter some of these steps yet again in the future!

Using Bootstrap with Blogger Templates

noreply@blogger.com (Don James) — Sat, 09 Jan 2016 22:10:00 +0000

Well, some of you may have been waiting for my second part of the Wordpress vs Blogger review. But, I was sidetracked by a much more ambitious project - merging the dynamic Bootstrap web framework with Blogger. I knew initially that this would be quite a challenge to get it right - and was I correct in that assumption. Note: since this was written I was able to successfully replace this tutorial's Bootstrap 3 code with the Bootstrap 4 and new JQuery libraries. The newer Bootstrap CSS code has not yet been tested. More to come...

So just what is Bootstrap? You can go over to their site and read up, but, at a very high level it is designed as a starter kit for dynamic web UI layouts that utilize CSS and Javascript for a great user experience. If you've seen sites like this one, or this other one - you'll see how Bootstrap can be beautifully extended. In the case of Blogger almost all of their templates are very static and were designed in the 2005-2010 time frame. In the last few years the web has exploded with new, dynamic web frameworks that have reactive interactivity without page refreshes.

The easy path to my task would have been to strip out the entire Blogger template and add Bootstrap in its place as some of these template providers have done. But, if you read my Best Blogger Templates article you know that I am a stickler for keeping Google Blogger as pure to its original intent of a dynamic layout and user substitution of design elements vs a copy-paste of some Wordpress or other template like Bootstrap and just getting it to work.

If you want to try this I've at least laid down a path that will get you past the hardest parts (let me just say I spent days trying to get some of the Bootstrap basics up!) The key to merging templates is trying to navigate the structures and naming collisions so that both can work. Some of the functionality simply won't work directly in certain cases (such as the header image gadget). But, a creative Javascript programmer could solve some of these small problems - and, in the interest of time I needed to get the basics completed. If you want to try this you must understand web page html basics or otherwise you'll be lost. So, let's get started.

Stripping Out Blogger Templates

The first step is to pick a basic Blogger template and strip out a significant portion of the layout without damaging the Blogger functionality. I chose the Simple template as a the easiest path. What we'll be doing is removing most of the CSS, div tags and Variables to reduce the Blogger template down to its essential layout components so that both the Layout editor and Template editor can still work. (In many external Blogger template seller sites that have modified templates for sale or are free, the designers just strip away everything and render the Blogger editors basically useless).

This might be the hardest part of this tutorial for you. So, be aware you might want to practice on a test blog first. Remember, the goal is to keep Blogger functionality (template design and layout gadgets). Given that, the first step is to set the template to it's simplest form. Be sure you started with the basic white Simple template. Choose the 'Template' main menu item and then click the 'Customize' button:

Set the template to the simplest single page and column layout pressing the 'Layout' menu like this and press the 'Apply to Blog' button on the upper right:

Go 'Back to Blogger' and now select the 'Edit HTML' button. You will now be within your template. Find the section near the top called <b:skin> and expand it by clicking on the small black arrow next to it. Using your mouse highlight everything from line 27 down to about line 488 in my example (your line number might be slightly different) down to the ]]></b:skin> section and delete it - insuring you don't delete the ]]></b:skin> tag itself. The starting line you highlight must start with the <Group tag as show in my image. (Note: we're keeping the first few lines of the skin for later work). We're deleting all of the template's CSS here:

Press the 'Save Template' button. If you made an error the template editor will let you know. Next, find the <b:template-skin> section and expand it in the editor. Remove all of the CSS between the <![CDATA[ line and the ]]> line (but not removing those 2 lines) like this:

Press the 'Save Template' button again.

Next, we're going to remove the core template <div> tags that are outside the gadgets (note that gadgets themselves contain <div> tags as well but we'll keep those for now). This is a very tricky step but you'll find that the template editor is your friend here. As you remove <div> tags the editor will highlight the ending </div> tags that are mismatched.

The key to this step is that certain elements of the template need to stay in place so that the layout editor continues to function. The best way to do this is to remove small sets of <div> tags and then try to save to find which ending </div> tags to remove. The first set to remove is everything just after the Navbar gadget up to the <header> tag (the first tag should be <div class='body-fauxcolumns'>):

You'll have to try and keep saving the template after you delete this section above until you find all of the ending </div> tags to remove farther down in the template (be sure to keep the ending </header> tag. Continue to remove sections of <div> tags being very careful to keep any parts called <b:section and the lines in-between to the ending </b:section like this:

You're going to keep doing this through the template until all <div>s are gone by continually saving and removing (but keeping any div tags that are within a <b:widget section). Now that you've completed this step your template is now fully clean but should be able to still be functional in the main menu Layout section (try adding and deleting some Gadgets to verify). Also, the 'Customize' button should still work partially to add and remove right or left hand columns or footers in the 'Layout' section without any issues. Be sure to verify this. Congrats! You now have a Bootstrap ready template.

Adding Bootstrap Components to Blogger

Bootstrap utilizes the JQuery Javascript engine for part of its functionality as well as its own Javascript library. What we'll be doing in this step is adding the javascript library links and the Bootstrap CSS to the template. One BIG problem to solve in this step is the naming collision of the Bootstrap CSS components with the Blogger names. I will get to that in a bit.

Meanwhile, just add these library components just before the ending </body> tag of your clean template:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>

like this:

Go ahead and save the template being sure to test that you can preview it without any errors (yes, the template will look a bit odd at this point.)

Next step is to add the header information. Copy these lines and paste them just after the <head> tag right at the top of the template as shown below:

    <meta charset='utf-8'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Bootstrap -->
    <!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

like this:

These are the necessary mods for the mobile and browser compatibility settings. You've probably noticed that I commented out the bootstrap.min.css code here. This is because of the naming collisions with Blogger I noted earlier. What we're going to do is to get a copy of this CSS code, modify it and then place it in the <b:skin> section of Blogger's template.

Modifying Bootstrap's CSS Code

The best way to do this is to copy the Bootstrap CSS link of the bootstrap.min.css above (click on this line to get to the link). You should see the Bootstrap CSS in a new browser window now. Do a Select All and copy/paste this code into a text editor. Use the editor to do a global replace of any text with 'navbar' to 'navbar2'. You can see where my first instance of 'navbar' was changed to 'navbar2' here (there are over 50 more instances):

The reason we're doing this is due to the 'navbar' name in Blogger. It is different than Bootstrap's navbar so we have to alter the Bootstrap name. What this implies is that any time you add a Bootstrap navbar to Blogger you'll have to alter all of the navbar names to navbar2 which I'll show in a bit.

Next, just copy the modified CSS code from your text editor and paste it into your Blogger's <b:skin> section just like this:

Save your template now and make sure it works again by previewing it, checking if the Layout editor works and the template designer can alter your columns and footers.

Congratulations!! A ton of work has paid off! You now have a first functioning Bootstrap template.

Add the Bootstrap Navbar and Jumbotron

"Wait a minute!" you might ask! "I don't see anything yet!" That's correct. You now need to add the basic Bootstrap HTML to your template. I'm assuming you understand HTML fairly well so that you can add the Bootstrap components you desire. I'm just going to place an example here by starting with the Bootstrap navbar and jumbotron sections.

One of the best parts of Bootstrap's capabilities is the flexible navbar and upper image contained in the template when you view it on different devices. This is a very simple HTML addition now - just adding the <nav class section and <div class='jumbotron' section. Let's start with the navbar.

I've chosen a dynamic navbar from the Bootstrap example webpage. You could easily choose a different one if you like how it functions. All you need to do is copy and paste the HTML code. The Bootstrap dynamic navbar scales nicely when you view the Blogger page on a full PC screen or on a small smartphone. This particular code needs to be pasted in the Blogger template just after the <body tag and the Blogger navbar and this section right at the top of the template as shown below:

    <!-- Bootstrap navbar -->
      <nav class='navbar2 navbar2-default'>
        <div class='container-fluid'>
          <div class='navbar2-header'>
            <button aria-controls='navbar2' aria-expanded='false' class='navbar2-toggle collapsed' data-target='#navbar2' data-toggle='collapse' type='button'>
              <span class='sr-only'>Toggle navigation</span>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
              <span class='icon-bar'/>
            </button>
            <a class='navbar2-brand' href='#'>Project name</a>
          </div>
          <div class='navbar2-collapse collapse' id='navbar2'>
            <ul class='nav navbar2-nav'>
              <li class='active'><a href='#'>Home</a></li>
              <li><a href='#'>About</a></li>
              <li><a href='#'>Contact</a></li>
              <li class='dropdown'>
                <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='#'>Action</a></li>
                  <li><a href='#'>Another action</a></li>
                  <li><a href='#'>Something else here</a></li>
                  <li class='divider' role='separator'/>
                  <li class='dropdown-header'>Nav header</li>
                  <li><a href='#'>Separated link</a></li>
                  <li><a href='#'>One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class='nav navbar2-nav navbar2-right'>
              <li class='active'><a href='./'>Default <span class='sr-only'>(current)</span></a></li>
              <li><a href='../navbar-static-top/'>Static top</a></li>
              <li><a href='../navbar-fixed-top/'>Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

notice that I have altered any Bootstrap reference of the word 'navbar' to 'navbar2' in this code - (look for the section I've boxed in below to see where you should paste the navbar code underneath):

That's it! Now take a peek at the top of your template. It should look like this:

The best part is now when you alter your browser window down to a small size you should see the upper right menu button drop down the very same list that was horizontal in the wide screen mode:

At this point the actual menu items would have to be altered directly in the HTML code above to add your menu items and associated page links. Connecting it to the Blogger template editor would be tougher and I just wanted to get you based functionality first here.

Finally, in this tutorial I'll also add the jumbotron component. This is a large image that sits just under the navbar (if you have one) and will dynamically scale and scroll when you adjust your browser window. I found a simple image out on the Flickr Creative Commons for this particular test. If you've read my previous posts you need to add your desired image to Blogger's image pool first. All you have to do is add your image to a new Post, save it and publish it. Then revert it back to draft status. Your image is then saved on the Blogger network no matter if the post is active or not. Go back into your post and view the HTML. The image will have a long link like this - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZS0HoagKiXzZlk1hTm0e5xd73xifmW8bpossHbNflP0H6mW3jOzX_atH-LKDYnTg_mq12dlG58hQXhb1omeVwzcXKg_End84SWb_VSA4QAz8Zjs4gEKro_1L6NzKDx4sSRmYWLwK_nS8/s320/BloggervsWordpress.jpg.

Once you've uploaded the image you can now use this in the Bootstrap jumbotron component. What you'll want to do is to copy and paste this code just after the <header> tag and before the <b:section class='header' in the Blogger template like this:

     <header>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class='jumbotron'>
      <div class='container'>
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class='btn btn-primary btn-lg' href='#' role='button'>Learn more</a></p>
      </div>
    </div>

      <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>

Go ahead and save the template but not that this won't show the image yet. We'll place the image link into a jumbotron CSS section. This CSS section needs to be copied and pasted into the <b:template-skin part of the Blogger template:

.jumbotron {
    position: relative;
    background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqj-YREimMBKP9QJP3S_bY4Mzfb9XL-HTxWbJTCS2O7-om3yz0Z_gUMJUQl7feoysYuKD5GYxsMntR3VBCdb-22tasCbCCnCIwl06KsUlwfvhvU2vocUBKa5wHiDxpux1ceRYHedPToxt/s1600/NPineMain.jpg") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
    color: #fff;
}

In this code you can see the link to my guitar image with the url() section in the background. Be sure to replace your link with mine. Here is where I pasted it:

Save your template. We are just about ready to go. The last thing I want you to do is to add the single Bootstrap <div class='container'> section around everything under the </header> tag in the Blogger template. Just add it right after the </header> tag and place an ending </div> tag just after the </footer> tag at the end of the template.

That's it for Part 1!!! You now have a template with a scalable navbar and jumbotron image! The entire image and template should slide dynamically up and down when the menu is selected in a small mobile view. Here are my examples and here is a link you can try: dyplate.blogspot.com. Enjoy!!!

And now a mobile view:

Blogger vs Wordpress

noreply@blogger.com (Don James) — Sun, 02 Aug 2015 20:43:00 +0000

With the large number of free blogging sites out there, two still remain at the top for informational blogging - Blogger and Wordpress. Yes, there are other free blogging sites such as Tumblr, Weebly and Wix - but, they are not really my focus (other than Tumblr which I use for more visual blogging than informational blogging).

Invariably, however, someone will always ask me what's better - Blogger or Wordpress? By Wordpress here I mean the free online version at Wordpress.com and not the software you download from Wordpress.org and manage yourself on external hosting platforms such as Bluehost (that would be like comparing apples to oranges - running Wordpress on a custom host is really more like building your own website except with a content tool installed). Of course, 'better' is a relative term depending on what you want to do with the tool. Given that, though, let's take a deeper look at both.

Search Engine Optimization - SEO

First, I have to call out immediately that within the last 1 to 3 years you get no advantage for SEO utilizing either tool. Google has completely changed its strategy so that internal formatting such as tagging, long-tail keywords and metadata within the HTML is not nearly as important as the authoritative content you write and highlight. You can build rank directly with content, so, I'm not going to dig deep into the template structures other than to reinforce that content rules today. (For more information I agree with this SEO article generally but not as much with the keyword sections). This is an even tie for both tools.

Templates

Probably the most visible comparisons between Blogger and Wordpress are the out-of-the-box templates. Clearly, Wordpress has the advantage for a much better and beautiful set of templates. In fact, I've always been surprised that Google hadn't upped its template library for Blogger in the last 5 years.

Sample of Wordpress.com default templates.

As you can see above the design flare of Wordpress outweighs Blogger templates shown below (tough to see the details here but a sample of what you get) :

Sample of Blogger default templates

In fact, if you saw my earlier post on creating a Wordpress template in Blogger you now understand the motivation of attempting that. The reality is that both sites allow easy template substitution without impact (if you use Blogger out-of-the-box). But where Wordpress really shines is that they also offer professional paid templates that are already integrated into the toolset.

You can buy 3rd party Blogger templates but you have to integrate the template manually, and, as I noted in a previous post, most do not follow the Blogger template patterns. For ease of use and professional style - Wordpress.com wins on templates.

Layout Customizer

Both Wordpress and Blogger have layout editors to assist with the look-and-feel of your site. In Blogger it is very easy to find in the left menu under the 'Layout' item. In Wordpress you must first go into your Site and then select the 'Customize' left menu. The first noticeable difference is that Blogger has a much more flexible layout editor. You can drag 'gadgets' around and arrange them positionally within the chosen template. The default templates also allow you to rearrange the basic structure of left and right sidebars, footers and headers.

Wordpress, however, has a much more constrained view in its Customizer by only allowing you to work within the theme (a template) you've picked. The designer of the theme sets the positions and views so that if you want a different look you must pick or purchase a new template. You can see below that I can modify components of the layout but not actually rearrange it.

Some Wordpress themes have more options that allow you to change and update the parameters, but that is theme/template driven and not layout driven like Blogger. If you really need to alter the theme then you have to pay Wordpress a monthly fee to get more custom design access. In the free version you are constrained by the theme directly.

One additional feature I should mention about Blogger is the template designer selected from the Template menu item. I mentioned that Blogger allows more layout flexibility than the Wordpress Customizer. In the Template Designer you not only have the ability to set fonts, colors, accents, and widths (which Wordpress can do too), but to rearrange sections in the Body and Footer independent of the template you choose. (Please read my article above about 3rd party Blogger templates! Most of these types of sellers do not create them to Google's specifications and limit or disable this functionality).

You can see that sidebar and column layouts can be selected for all of the templates not just by theme/template. In my opinion Blogger wins on this feature-function with the slight edge on separating the layout from the template/theme - granted, finding templates that look as nice as the free Wordpress ones is difficult.

Gadgets and Widgets

Blogger is all about gadgets whereas Wordpress is all about widgets. In essence they are really the same thing. They are components you add to your template to enhance functionality with lists, stats, links, social media, calendars, profiles, etc. The functionality to add these to both tools is nearly identical. The most common components bloggers add are search, tags, archive links, top posts, profiles and some social media plug-ins for sites like Facebook or Twitter.

Blogger out-of-the-box gadgets are easily accessed from the Layout where you can simply select 'Add a Gadget' and select from this sample list:

All-in-all they're very functional and cover most of the cases bloggers need. However, Blogger also has a 3rd party set of gadgets (919!!) that are simply awful and haven't changed in years. Why they keep this list around with poor designs and some ridiculous functions is really beyond me.

Wordpress, however, has a very logical list and seems to be tuned more to social media. I really like the clean list layout and its simplicity in this example:

Overall, the widgets seem more useful than the Blogger gadgets if you're sticking to the standard lists on both tools. However, Blogger gets a HUGE plus for having an HTML/Javascript gadget that Wordpress doesn't have. This gives Blogger the ability to add functional code for any types of Javascript plug-ins or creative html where needed in the layout. It may not seem a big deal, but when a new social site appears with Javascript plug-ins, you can add these immediately to Blogger but not Wordpress. In my static home page example you can see a Javascript image slider added via this gadget.

Which one wins on this feature? I've got to give Blogger the edge only for the HTML/Javascript gadget. However, I find the Wordpress widgets to be much easier to use, more logical, clean and focused on the most popular and current social online trends.

Thus ends Part 1 of this comparison. I'll be digging deeper in Part 2 to talk about posts, images, advertising and site features. If you have time just sign up for both tools and give them both a tryout.

Google Blogger - It's Future

noreply@blogger.com (Don James) — Mon, 06 Jul 2015 01:38:00 +0000

It's funny, but I have been pondering just what might be going on behind the curtain over at Google with their Blogger team and the platform's future. You've probably seen a number of articles stating that Blogging is Dead or Google will shut down Blogger all together. Not to mention, the number of posts on their internal Blogger Buzz site has dropped from 40+ articles a year in 2011 down to less than 10 a year since. Update December 2018 - Google has no plans to drop Blogger

Source: DigitalRalph - Creative Commons

I really would not pay much attention to rumors like this considering the number of Blogger users in the world. In fact, Blogger is an excellent means for Google to get more people directly connected and to become more integrated into the Google ecosystem with profile information. This is extremely important since people with profiles utilize search giving Google a one-up on what people do online. ~~Also, you may or may not have noticed that all of Google's official blogs are running on Blogger~~ (this is no longer true in 2018 - only some are on Blogger now - not a positive sign).

What excites me more is my own speculation that the quietness surrounding the Blogger platform indicates to me that Google is working hard on upgrading it to become a richer HTML5 site with much more dynamic templates and usability that you find from sites built on responsive frameworks like Twitter's Bootstrap, Boilerplate or HTML Kickstart. These frameworks are completely designed to be fluid on all devices (something Google cares about deeply) so that one template can satisfy any device from Android phones/tablets, iPhones and iPads to full high resolution desktop displays.

Nevertheless, blogging has changed considerably in the last three years by being overrun by social networking, which, in its own way has become a kind of micro-blogging pattern. People now look across a vast landscape of options when they're looking for information which is pushing blogs away from personal interactive journeys to something else. What that 'something else' is may be difficult to describe, but in my honest opinion it is informational articles that coexist with social networks that are clearly linked to search.

Audiences are no longer built up directly on the blogging platform as much as they're collected through other means of Facebook, Google+, Twitter, Instagram, Pinterest, Tumblr and other social sources. It's a definition difference between a 'personal interactive journey' on social networks and 'important information' in blogs where that information is something that answers searchable questions.

What does this mean to you, the blogger? It means that you need to expand beyond the blog itself as the source of what you are online - a part of a bigger piece of the full network - especially more media and social awareness such as live blogging. The interaction happens socially -- whereas the information happens in your blog.

How to Use Blogger on the iPad

noreply@blogger.com (Don James) — Sat, 19 Jul 2014 21:21:00 +0000

As I noted in my previous post using the free default Blogger iPad application produced by Google can be done but has severe limitations. Thankfully I'm now sitting at the very same table using a different 3rd party application (which I will describe in a moment) that makes Blogger on the iPad a joy to use. In fact, I may just end up using this app more than my laptop for future posts. This isn't the only Blogger iPad application, I'm sure. But, it comes to the top of the list when you search the App Store at Apple. Let me dive in deeper on this.

My choice for Blogging on the iPad

The app I selected is called BlogTouch Pro (version 2.6.5) by Alexandru Denca. I had downloaded the free version initially but found immediately that the feature/functionality was so much greater than the Google tool that I just ended up buying it for only $4.99.

The first thing I noticed was the full editor feature set that was sorely lacking in the Google tool. I mentioned in my previous article that the smaller font size in the Google editor was driving my eyes crazy and made it mostly unusable for an iPad Mini (a larger iPad would probably be ok). Well, right away I altered this post's font size and now have a very comfortable screen to view and type on. I really like that the editor also fills the entire window with a very clean look.

The editor gives you the features you need to highlight, change font colors, use bold and italics, ~~strikeout~~, ^super-_subscripts and more. Of course, the standard paragraph formatting is available as well as image and video inserts which I'll cover next. Hyperlinking is also very easy if you want a valuable external link. However, if you're an expert on HTML you're really in luck because you can switch to HTML view and add any customizations to a post - awesome option!

Image Editing

Using the image uploader is a dream compared to the Google tool. You get full control of the image to resize, justify and set the picture properties. Here is the example of this post being written from a picture I just took from my iPhone. I used a small utility to scale the photo down a bit and crop it (just as I would on my laptop). Then, I just pressed the image icon to insert it from my photo gallery on the iPad.

As you can see the screen layout is much nicer with the larger font. There is also a video link embed icon for Youtube or Vimeo videos

Saving and Posting

After using this tool for a while I started to wonder about internet connectively while working. This iPad is Wifi only so it doesn't have a 4G option - what does this mean to editing and saving posts? Good news is that BlogTouch Pro has a Save Local feature that allows you to work in remote settings and not having to worry about connectivity - a great feature! You are given the option to save Locally, in Draft mode or to Publish. Draft and publish post to Blogger.

Accounts

I had no issues with multiple Google accounts - Blogtouch Pro can switch between them and the associated blogs so you can keep track of all your work. There are a few things that are not quite user friendly - such as having to manually hit the small refresh icon in the lower left to see the blog posts appear (you get a bit startled not seeing your posts when you switch).

All in all I have found this to be an excellent iPad application for Blogger. I cannot say if there are limits or bugs to large images or complex posts since I haven't used it for very long. But, I've attempted a number of test posts without problems (other than my own learning curve). Frankly, you could really use this app to be a great notetaking complement since you can adjust fonts, pictures and posts the way you want and just use a private blog for the notebook.

Highly recommended!

Blogger on the iPad - Part 1

noreply@blogger.com (Don James) — Sat, 21 Jun 2014 16:09:00 +0000

I love my iPad mini - in fact, I find myself using it more and more for most of my day to day work and even my home business work. Now that I have a Zagg keyboard for it as well I find it even easier. Some of the research I've been doing over the last few months is on what the best Blogger app is for the iPad. Blogging on the iPad is convenient and works great if you're traveling or on the move. Frankly, I hate carrying around a laptop on vacations and have fully adopted my both my iPhone and iPad for any remote work.

That said, there still are some problems with using Blogger mobile apps. The iPad mini is small and compresses your screen size significantly. Additionally, viewing web sites or using online tools becomes more problematic due to the sites switching to mobile modes which can be reduce usability especially for those sites that have been designed for full laptop or desktop work.

Google's Blogger Tool for iOS

I must say I was excited to see that right away Google had created an iOS tool (version 2.1.7.2) for both iPhone and iPad specifically for Blogger that was free in the App Store. I immediately downloaded it and began trying it out.

Well, I have to say it didn't go very well. There are a number of problems with the tool besides just not having the amount of flexibility you get with the web interface we all use today. In fact, I'm writing this post using the Google iOS app right now at the dining room table with the Mini and Zagg keyboard.

First issue is the default font size for posting. Right now my eyes are going completely buggy due to the very small posting font. There are no settings that allow you to directly alter this. What really bothers me the most about that is you're stuck either using this post editor with tiny fonts (the larger iPad might work a bit better), or, you have to use an external editor such as Write 2, Write for iPad, Notability or even Evernote to get a comfortable size.

Next, is the capability of the editor itself. It is severely limited in functionality. As you can see here the only thing I can do within the post is to create bold text with italics and/or underlined. That is all you can do - you can't alter the foreground or background color, the font, or this size. My first reaction was to alter the HTML of the post itself. But, Google declined to even have that feature.

Amazingly, you cannot even highlight some text to create a hyperlink.In fact, I had to use an external html editor in order to copy / paste this into this post. This seems to be the only way to get html into your posts. So, if you need special html within, you must find an iOS app in the App Store that allows html editing.

Thankfully, you can add photos to your posts but even that feature is very limited in scope:

As you can see from this picture taken right now just how limited the photo functionality is. First, I cannot adjust the size. This tool just blasts a full image across the post (In fact, I had to re-adjust this image to fit properly - if your template isn't standard the mobile photo upload probably will cause you issues). So, no matter the size of the photo it will be placed dead center in your post. Second, there are no additional justification, caption, alt text or border settings to allow any creative work.

You can save a post as a draft and then publish it later. Also, you can add keywords to the post itself. However, without any template adjustments, post adjustments, html editing or photo editing this app is sorely lacking and can only really be utilized by the most casual user for things such as travel blogs or family photos.

I have to stop this post now because I'm truly getting a headache. Once I had discovered the flaws in this iOS app I decided to find another blogging app that might give me a better user experience for Blogger on a mobile platform. In my next post I'll be reviewing a much, much better iOS app that really does what Google should have done for mobile posting.

How to Add Google Analytics to Blogger

noreply@blogger.com (Don James) — Sat, 18 Jan 2014 22:51:00 +0000

There is probably not a more interesting real-time or site statistics tool than Google Analytics. If you haven't used it before you'll find that it blows away the Blogger stats tool in the Blogger editor. I haven't added it to Blogger Tips Pro earlier since I've been intending to create the tutorial - but kept putting it off for other reasons. I do use it for my other sites, however.

Let's get started. If you don't have a Google Analytics account yet you just need to sign into your Blogger Google account to start. Now, if you have a large number of blogs under a parent name or company then I would suggest you monitor all of your sites from a single account. You be the judge.

Creating a Google Analytics Account

Once you're logged in, simply go to http://analytics.google.com - you should see a page like this. Just select 'create an account':

Now that you're into the main sign-up page just click the 'Sign up' button to start:

You'll now be presented with a number of options to get your account started. I chose 'Website' and 'Universal Analytics' as my options to start. I felt that the benefits of the Beta would be good to try out.

Scroll down the screen to find the rest of the options - enter your 'Account Name', 'Website Name' and 'URL':

There are some more options near the bottom of the sign-up screen called 'Data Sharing Settings' and I will let you pick and choose if you want to opt-in on those. Once you've done that just click on the 'Get Tracking ID' prompt at the bottom of the page, accept the Terms and Conditions and you're ready!

Adding Your Analytics ID to Blogger

You'll be brought into the main page with the 'Tracking ID'. One point to remember is that the ID is tied to a specific blog. If you have more that one blog be sure to go back in and create another ID for a different blog.

I've highlighted the ID below - this is the ID you're going to want to copy and paste into Blogger. Be sure to copy this ID right now by highlighting it and using a mouse click copy:

Now, go back and log into Blogger - open your specific blog - and choose the 'Settings', 'Other' menus and scroll down to the bottom of the form to find the 'Google Analytics' entry field like this:

Add your analytics ID in the empty field as I have above and press 'Save Settings' in the upper right of the screen. Your blog is now ready and monitoring all users hitting your site.

Viewing the Google Analytics Data

The best part of the analytics screens is just the overall breadth of what data is provided. My goal in this tutorial is not to give you an in-depth view. You can take a look at this step-by-step tutorial. However, go back into your Analytics account to get to the reporting data.

The main page you want to look at is the 'Reporting' screens where you'll see your traffic and other analytical information:

Here is a snapshot of one of my old sites with the type of data you'll see in your main Google Analytics dashboard:

My favorite view in the Analytics page is the real-time view of who's hitting the site. Here is BloggerTipsPro.com literally minutes after I added the ID:

You can see that a desktop, mobile and tablet hit the blog and what pages are being access. That is a very cool view of your site's traffic. There's so much more you can do with what Google provides. Enjoy!!

Best Blogger Templates - 2014

noreply@blogger.com (Don James) — Sat, 11 Jan 2014 20:06:00 +0000

So, this might be one of the most difficult posts that I have written on BloggerTipsPro.com. I have to start off by first apologizing to the creative authors out there that have produced some amazingly beautiful Blogger templates for the world to use. That said, I have some unfortunate comments to make to my readers that may or may not persuade you to use what Google provides out of the box or just to go get one of these templates.

Here it goes - I have spent many, many hours and days trying to find any template out there that qualifies as a 'best Blogger template' and found nothing - absolutely nothing. I've gone through hundreds of websites all pitching either free or paid Blogger templates and not a single one has made the grade of what a Blogger template should be. People have pitched their templates directly to me to add to this site but still did not qualify in my mind.

Blogger Templates are not Wordpress Templates

The problem - web designers totally understand page layout and design - however, they do not understand Blogger templates. Part of that must be blamed on Google for not adequately explaining the technical aspects of the template.

You see, Blogger templates are not Wordpress templates or vice versa. Yes, CSS design is the same but the deeper technicalities are not. What I have found in almost all cases (there are some exceptions I will explain) is that the web designers have taken Wordpress template CSS code directly or modified and just replaced it in Blogger.

Most of the websites pitching 'Best Blogger Templates' out there are all using the very same core of templates from a Creative Commons set that have be placed in the marketplace for free - many come from these sites (Templateify, Soratemplates, Templatism, Premiumbloggertemplates, Bloggertipsandtricks, Mybloggerlab, etc. dot-com. I won't honor these sites with links since I personally don't think they are in the spirit of what a blogger template should be - you are free to add the .com to each and take a look). These are great designs - don't get me wrong.

The Blogger Template Designer

What they all missed was the very essence of a Blogger template - the core template designer from Google. Since you the readers are aware of the Blogger template designer in out of the box templates you know that you can modify many of the parameters of each template - from colors, fonts, widths, outlines, etc. If you're not familiar with what I'm saying - here is an image of the designer with the sections I just mentioned outlined:

However, in the case of the templates offered in the marketplace, they've missed this point completely by stripping out the template designer code from Google and just pasting in other CSS code. The template designer is configured to allow you to modify CSS without knowing CSS - a key point!

Now, is that a bad thing overall? No, it isn't earth-shattering. However, by removing the template designer you're stuck with what you get with their templates and cannot modify them without having deeper CSS knowledge to edit the CSS code directly. Many bloggers do not understand CSS code - and the beauty of the template designer is that a template author could provide user enabled modifications down to the deepest CSS levels - it is fully extensible.

Consequences

What that means for you the reader is that if you install one of these free templates you are stuck with the look-and-feel unless you know CSS (Want to learn? Go to Code Academy - Web Fundamentals). Your only other option is to install another template from scratch. If you don't mind doing that then by all means do so - there are some very nice designs out there. Just be aware of the consequences when you do that.

I did find a few template offerings out that that did use the template designer - but, unfortunately, they just modified the Google templates directly which I think is a copyright violation since there are no Creative Commons licensing statements in the Google free templates. You are much better off just using a Google template and extending it directly as I showed in the tutorial - Build a Basic Wordpress Theme in Blogger.

Or, if you're really ambitious, learn how a Blogger template works, strip out all of the CSS and build your own resell-able templates with the template designer.

I would love to hear some feedback from both users and authors on this post. What have you found? Are you an author that I missed? Are you wondering if some templates you have found qualify?

Google Adsense Penalty - How it Cut My Blog Traffic Nearly in Half

noreply@blogger.com (Don James) — Sun, 29 Dec 2013 19:38:00 +0000

Let me start by saying that I am a big fan of Google. This post is by no means a Google bashing or rant about their products and services. I use a lot of the Google products for some very productive work - including Blogger which I do promote significantly. Additionally, I know some of the Google employees and have visited their campus. I believe Google is one of the most exciting places to work in America today.

However, the background to this post is that I felt that there might be some benefit to getting some small advertising revenue utilizing Google Adsense with this blog. Considering my traffic was running nearly 1000 visits a day this seemed like a good option based on the content and history of this blog.

I've used Adsense for quite a few years now in my earlier web work and have found it to be beneficial for high volume web pages. At one point some years ago I was able to make $10-$50 a day in revenue - that was a very unique case due to a popular surge online for a specific topic. In this case I was expecting about $1 a day since advertising tied to blogging is not a very competitive space. Ads such as hosting centers or blogger tools don't drive significant payout revenue as do some of these top paying Adsense keywords.

Some people make a living on Adsense revenue but it takes some significant savvy with deep traffic knowledge to do that. Others try to scam Google by building false links back to fake sites that have the high paying keywords just smattered throughout the site to generate profits. This aggravates Google and gives honest online workers a bad name.

Adsense Penalty

On December 16th I decided to implement Adsense on Blogger Tips Pro having not paid much attention to what was going on with it in the last two years. Within one day I dropped from 943 visits to 757 - not really much concern since I do get traffic dips. By day 2 I was down to 682 visits falling down to 534 by day 4. That is when the alarm sounded for me!!

What I hadn't realized was that as a result of the Adsense scammers, Google has been been penalizing web site search rankings based on their usage of Adsense to try and remove false content sites from the search results that rolled out in 2012. However, the impact was high as noted by Aaron Wall of Seobook.

I really didn't think that I had a lot of ads above the fold but felt that my traffic was much more important that a few dollars a month in revenue. I removed the ads on December 24th. But, the real question is just how much my traffic will be hurt from this point on when I went from a growing 900-1000 visits a day now down to 600-700 a day as you can see here:

Clearly, the Google Adsense penalty is real and can hurt your traffic. Don't believe me? Read this statement and take a look at Google Page Layout Algorithm & Penalty.

If anyone else has experienced this effect I would love to hear from you - especially if you were able to revive the traffic back either by ad placement or removing Adsense all together. Also, if you're from Google please chime in - I think all of my readers would like to know more.

Adding Related Posts to Blogger Blogs

noreply@blogger.com (Don James) — Wed, 11 Dec 2013 03:53:00 +0000

NOTE: LinkWithin no longer exists. This post will not work any more.

There has been a change in Blogger and LinkWithin. A number of users have found that LinkWithin is not working for them. Be aware you might find some issues. If you find you are having the issue, select Other for your Platform and manually add the script to a HTML Widget. You've probably seen a number of blogs that have related internal blog posts tagged at the end with inter-linking across the site. It's a very nice feature that has been made even easier by a online utility called LinkWithin.com.

The steps to adding this feature are so simple that it only takes a few minutes to get a great looking extra look-and-feel without much effort. Start by navigating to LinkWithin.com. Right away you'll see the starting point by entering your information into the widget form on the main page like this:

As you can see all I did was enter my email, link address, Blogger as the platform and 4 stories. From there click the 'Get Widget' button to continue. You'll see a dialog that looks like this:

Click the Install Widget link that will open Blogger into a new window. You'll see the Blogger dialog pop up that prompts you for a blog name and widget title. Be sure to select the right blog if you have a number of them. You can also add the widget title (but I chose to leave it blank):

Just click 'Add Widget' to add the related posts to your blog posts. What happens next is that LinkWithin will add an HTML widget to your Layout that will automatically add the related posts to all of your blog posts. You'll see it in your main blog Layout menu page like this:

The widget will be an HTML/Javascript most likely added to the right side of your layout. I've only tried this on the standard static Blogger templates and don't know if this works with the Dynamic templates. However, I think it should work.

There's nothing else to add!! You're blog posts will now have related posts at the bottom of each one. You can see the example right after this post. Enjoy!!

How to Create a Favicon for Blogger

noreply@blogger.com (Don James) — Wed, 17 Jul 2013 19:32:00 +0000

Have you ever asked 'what is that little icon in the address bar?' or 'what is the little image next to the url called?' I would hazard to guess that asking someone who has worked online probably never bothered to learn what the word 'favicon' means (though, guessing that it meant 'favorite icon' wouldn't be too tough to figure out). First released in 1999 in Internet Explorer 5, the World Wide Web Consortium adopted it soon after.

Creating favicons for Blogger is pretty easy these days and can be done in literally minutes. The hard part is trying to map your logo or symbol into such small dimensions. And, to add to that, the expansion of icons of larger sizes has exploded over the last few years with mobility and the evolution of browsers.

Overall, however, it is a simple task at hand with only the need of a paint program (with a supplement - possibly) and a great online tool called Iconifier. These will allow you to create favicons and icons for almost all browsers and devices. If you're really interested in the history and aspects of the favicon you can jump over to Jonathan T. Neal's very comprehensive article called Understand the Favicon.

Here we'll just be concerned for favicons for Blogger. I'll walk you through some of the key considerations when designing your own with an emphasis on using simplicity as your guide (more creative folks who have deeper digital artistic skills can go much deeper).

Step 1: Draw Your Favicon Template

The example I'm going to use here is to attempt to simulate (only as a sample, Google team - don't sue me!) the Google search favicon. It's a very simple design of a blue, rounded rectangle with a Times lower case 'g' in the middle as you can see at the beginning of my post.

Our goal will be to create a similar graphic that mimics this icon that we'll then convert into a favicon. Your first step is to open a paint program and set your canvas to 144 by 144 pixels with a clear or white background. As a Windows user you can simply use Paint to set the Image/Attributes (or if using Windows 7 and above set the Home/Resize) to pixel settings of 144x144.

Why 144x144? If you read Jonathan's article you'll see that IE 10 will need this size in the future.

Next let's just draw a reddish, rounded rectangle without a border like this (be sure to save your file in PNG format for now):

Pretty simple at this point - your background is ready. Next, let's draw a large Times New Roman lower case letter in this background using nearly white (set your color to as close to white as possible but not fully white - RGB value of #FEFEFE or 254, 254, 254). I'll use the letter 'y' as my example.

I set the text size to about 110 pixels and then drew the y on the background like so:

Perfect! Our first icon logo is just about ready for IE 10 Metro!

Step 2: Setting the Border Transparency for the Favicon Template

The next step is to make a small adjustment on your icon. Now, if you have a paint program that can set the white border (which you can't see here) around the red template to a transparency, then go ahead and jump to Step 3. For all others we'll use the online tool called LunaPic I found in my earlier articles to set the transparency.

By having no transparency I mean that the white border still shows if you paste it onto another color like so:

You can still see the white border - if that had been set to be transparent you would not have seen that border when pasted and the black would have shown through as if the border was transparent. So, your next step is to upload your image into LunaPic. Simply choose the 'Upload' menu item and find the 'Browse' button down in the lower left of the screen from your LunaPic home page to get your image ready for Editing:

Now, just press the 'Upload Now!' button to load your image onto the screen. To set the favicon transparency just choose the 'Edit' menu item - 'Transparent' command like this:

Carefully use your mouse to click on any part of the white border to set it to be Transparent. You should see a faint checkered border now in LunaPic as I've shown with the red arrow here:

If you don't see it then try it again until you're sure the transparency is set. The letter 'y' in the middle should not show the checkered pattern since we set its color to be slightly off-white.

You're now ready to save your modified image back to your system by selecting 'File' / 'Save Image' in LunaPic like this:

Be sure to select the 'Save as PNG' option when you're doing this. The image will have a new name now on your PC that you can now utilize as the core image for your favicon:

You're now ready to convert your base image into all icon formats for Blogger and other applications.

Step 3: Converting Your Blogger Favicon Template

The next step for a Blogger favicon is to convert this image to the standard 16x16 pixel image you see on almost all modern browsers in the URL bar. There are quite a few free icon generators out there today but I prefer using Iconifier because it generates all possible sizes from browsers to tablet icons.

Simply go to Iconifier.net to bring up the main screen. All you need to do is select your image from Step 2 from your system and press the 'Iconify' button like this:

After a few seconds all of the necessary file sizes will be created for you as you can see here:

The file you're most interested in for Blogger is the one I've circled entitled 'favicon.ico' - this will be the one you'll use for blogger. You can either right-click and download (Save Image As...) the zip file with all icons or just right-click the one I've circled and save it to your system.

Step 4: Installing the Favicon into Blogger

At last the final step is to add your downloaded file, 'favicon.ico', to Blogger. This is a very simple step using the Blogger main menu. Just go to your Blogger Layout menu item and find the Favicon gadget in the layout like this:

Select the 'Edit' link to bring up the icon selection screen. Use the 'Choose File' button to find the downloaded 'favicon.ico' file you just created in Step 3 and then press 'Save' like this:

Just save your Layout by pressing the 'Save arrangement' button on the Layout screen (this might be an unnecessary step but I do it anyway) and you are done!! The favicon is now added to your Blogger blog.

Don't worry - you can modify this any time. Here's my test blog with our example that I created:

This will add a professional flare to your blog!

How to Post Blogger Automatically to Facebook

noreply@blogger.com (Don James) — Wed, 26 Jun 2013 00:53:00 +0000

When I started this post I had the preconceived notion that automatically posting from Blogger to Facebook would not be an issue at all. For some reason in the back of my mind this was as simple as using email notification to the Facebook email-to-post feature, or using Google's Feedburner.

Well, I was quite wrong about this. Trying to use the email-to-post feature in Facebook only added the blog name and title to my Facebook wall with no content or links. From Feedburner, it looked like Facebook might work but they're only supporting Twitter in their socialize feature.

Now, there are a number of Facebook plug-ins such as RSS Graffiti you can use to grab your blogger RSS feed and post it to your wall. However, I found another tool so useful that I think this might be the easiest path for anyone to use.

If This then That - or, If Blogger then Facebook

A new online utility has appeared that can simply move your social postings around between sites called IFTTT.com (or, in other words, If This, Then That). It is so incredibly intuitive and easy to use that I had no issues setting it up.

I won't lead you on how to setup an account - you'll just need a user name and password - that's very easy to do. As you start you'll just need to activate and register your Blogger account and select your desired blog like this:

And then tie your Blogger blog to the IFTTT account:

Once registered your first step is to 'Create a Recipe' - and in our case it is going to be from Blogger to Facebook:

Simply click on the blue 'this' text to select Blogger as you source choice:

You can see that there are many options for source - I've highligted the Blogger button. Next, just 'Choose a Trigger' type. In this case we want new Posts to be published to Facebook. However, you might want the second label option:

Go ahead and select 'Any new post' for now. Now you will see the Trigger that will kick off the event.

Just select the 'Create Trigger' button to continue. You're going to be directed now to the action that occurs when you trigger off a Blogger Post. Just select the 'that' blue link to continue:

Now you'll see the full list again of social media sites. There are some great options here - but, for our tutorial just click on the 'Facebook' icon:

If this is your first time into IFTTT then you'll need to register your Facebook account much like how you did your Blogger account. Be sure you're logged into your desired Facebook account first.

Now you'll have to make a selection if you want the Blogger post to be fully copied to Facebook, or, just a link back to the blog. I prefer the second option 'Create a link post' - but you make your choice:

This is the tricky part - how you want the message formatted on your Facebook page. You can certainly experiment with this - but, you'll want to Create an Action that has the URL in the link field and the subject with your own text mixed with your blog post:

Just press 'Create Action' when done and you should have something like this:

You can see I used the PostContent field - but, you certainly don't have to fill your wall with the full Blogger post. Your connection is now ready!!

Now that your link is active you can test it by posting to Blogger, then jumping over to IFTTT.com and clicking on the Recipe you just created and selecting the 'Check' button on the right side of the screen like so:

This normally runs every 15 minutes - but, by clicking on Check your post will appear on Facebook in seconds.

A Great tool in my mind! Enjoy!!

How to Make Category Tabs in Blogger

noreply@blogger.com (Don James) — Mon, 20 May 2013 00:57:00 +0000

NOTE (March 2014): Blogger has moved the function to set the category URL from the Pages section below to the Pages Gadget. You don't add category links in the Page but add them in the Gadget - this will be updated soon. It was a great addition to Blogger when they added the tab menus as a feature. However, many times I've heard people asking how they can alter their menu tabs to be Blogger categories instead of Pages. Good news is that this is a very simple thing to do and only requires a few steps.

What you may not have realized is that in the Blogger Pages menu item is the ability to link to a URL instead of a Blogger Page and that Blogger categories (or labels) are just that - blogger URLs.

Getting the Category URLs

First thing you want to do is to make sure each of your posts have labels defined. If you want your posts to be seen in only one category then you can only give each post a single label. Next stepis to find the URL of one of your Blogger categories by clicking on the category directly like this:

In my Wordpress test template blog you can see I have 2 labels or categories defined. Once you click on it go up to your browser's URL to see what the category link is. Interesting result -- they're just searches:

You can sese that the label URL is just (yourblog)/search/label/(labelname). Make a copy of your label URL and save it off to the side for a moment.

Setting the Tabs to Point to a URL

Now, go to the Blogger main menu and select the 'Pages' item and 'New Page':

What you'll see at this point is a drop down selection of if you want a new Blank page or to enter a Web address. Select the 'Web address' like so:

What you'll want to do now is to enter your Lable/Category in the first text box and the URL you just saved in the 'Web address (URL)' box like this:

Press 'Save' to add this category page to your list of Pages. If you read some of my earlier tutorials you saw that in order for tab menus to appear on you blog, you first have to set the 'Show pages as' to 'Top tabs':

in order for them to show up on your blog. Be sure the 'Pages' widget is added as well in the Layout manu of your blog in the right spot - this is where the Tabs will show (ignore the 'Edit' button here - just make sure the Pages widget is there):

Once you save your template you should see your new tab at the top of your blog:

If you click on this what happens is you're directed to the URL you entered in the Pages section. One thing you may notice right away, however, is this not so nice search result image at the top of your blog:

Removing the Search Label

If you don't like that appearing you can remove it by editing your template directly. Just go into the template editor and choose 'Edit HTML':

If you hadn't noticed there was a change in the html editor for Blogger. Key things to note are the expand triangle on the side, the new 'Jump to widget' dropdown, and the selections within:

The search result image that we want to remove is located just above the Blog section of your template. In my case it is called 'Blog1' which is the default. However, yours may have a different name if you named your Blog widget different. Just select that from the drop down and expand the triangles next to the lines that have widget: id='Blog1' and widget: id='main' like this:

What you're looking for is the ling that says b:include data='top' name='status-message'. That is the status image we want to disable. Just add the html comment characters () to both end like I've circled above to disable that message. Save your template.

That's it! You now have a menu tuned to your categories rather than pages. This will be especially useful if you have a news site. You can look at my tab example called 'Backgrounds' on my Wordpress test template blog here:

Good luck!

Best Blogger Showcase

noreply@blogger.com (Don James) — Wed, 20 Mar 2013 20:07:00 +0000

Time to highlight some of my Blogger Tips Pro reader's blogs that I've taken a look at and have found to be both great uses of Blogger that are also using some of the techniques highlighted. These bloggers haven't asked me specifically to showcase or critique their blogs. Nevertheless, every time someone posts a comment anywhere on Blogger Tips Pro, I take a look at their profile and blog link to see what kind of blog they've created. Sometimes my own inspiration comes from scanning through other's blogs.

My Blogger Showcase

Here are three that I've found to be great Blogger examples (in no specific order)

Oahu Scuba Diving - this is a great use of Blogger to highlight a business. Many of the elements presented here are incorporated into an intriguing combination that easily shows the right information, focused photo usage and customization of the standard, out-of-the-box 'Picture Window' Blogger template!
Where this blog really shines is with the usage of a Blogger static home page, background image, customized page titles, and more. If you have a business you'd like to promote - take a look at this site for a great example.

Interior Decorating by Sophie is an excellent use of the standard 'Watermark' template provided by Blogger. Again, another site that has a personal business focus really demonstrates the power of Blogger to be a full-fledged website. Similar to the last site, Sophie's use of the Blogger custom background image and the static home page, plus a good splash of images really give this blog a simple business flare.

Inge has done a very nice job of creating an experience with Blogger in Fashion En Vie - especially with the use of photography as an integrated part of the blog. I've really chosen her blog based on taking the 'Simple' Blogger template and doing some very basic stylization such as the social network buttons ( Pinterest Button ), great use of the Disqus comment replacement for Blogger comments (for which, by the way, I will be adding as a tutorial soon ), and general font / style changes. She shows that just some basic changes with photography can really make a blog shine!

Highlighting Your Blogger Blog?

If you think your blog might be one to be highlighted in the future just be sure to leave a useful question or comment on any of my posts. I always take a look at your profiles - but, please, no direct solicitations for showcasing. I will, however, accept private messages for questions, issues or direct critiques.

Also, please don't feel slighted if I didn't highlight your blog. I may have missed a comment here and there or just didn't get the time to really look closer. Remember, some of this is just personal taste and has no reflection on your work!

Using Google Web Fonts within Blogger

noreply@blogger.com (Don James) — Wed, 16 Jan 2013 03:49:00 +0000

Creative Commons - fontfont

Want to really spice up your Blogger blog? How about using a little more stylized font for your posts? If you haven't seen them before, Google Web Fonts are a great free alternative to the standard, out-of-the box web fonts you normally get with any standard HTML website including Blogger.

Choosing a Google Font

Google Web Fonts are really easy to install into your template and only take a few steps to get there. What most people don't realize is that they are available directly within Blogger. The first step is to jump into the Template Designer using the 'Customize' button:

Selecting the Blogger Designer

Next, just choose the 'Advanced' and 'Page' sections of the Designer. If you go over to the 'Font' section and scroll down a bit you'll see the Google Web Fonts available in Blogger. Normally, these would have to be added manually into any web template but Google has incorporated them into Blogger already:

Finding Google Web fonts in the Designer

Simply scroll down and find the font you'd like for your blog - it is that easy. Just be sure to preview it and then select the 'Apply to Blog' button:

That's it! You now have some more stylized fonts for your blog posts. Enjoy!

Blog Traffic - How I Increased My Traffic by 10x

noreply@blogger.com (Don James) — Sun, 13 Jan 2013 22:43:00 +0000

BloggerTipsPro.com daily blog traffic

It has been a full year since I launched BloggerTipsPro.com as my Blogger help site after my initial strategy in January 2012 was first developed. I've been using Blogger since 2005 and have come to really enjoy the flexibility of the platform for various types of blogs.

I know that many prefer Wordpress over Blogger but I still think having Google host my platform with more open customization vs. using custom hosting is an easier option.

That said, the blog traffic results for this site after one year are astounding! This being the 21st post in one year seems quite small overall - in fact, that is only averaging about 1.8 posts a month. Yet, this blog is dominating Google results for many keyword phrases surrounding Blogger customization.

Blog traffic increasing 50% every month

Let's take a look at the numbers - since January 2012 the number of visitors has increased about 50% per month to a total of 35,000 visitors. As you can see the vertical growth is very fast now reaching about 400 visits a day or 12,000 visits a month. As of today - January 13th - I have 4778 visits. The peak traffic in December is about 8500 visits. You can see my current daily traffic at the top of this post hovering at about 300-400 visits a day - these are great numbers!

One thing I would like to point out about blog traffic is that I did no back linking strategy to this site other than having a hosted planning site that pointed to this blog as I built it and then a few social media sites - Twitter.com, Stumbleupon.com and Last.fm. Twitter was my only active links back - whereas Stumbleupon and Last.fm were just accounts that had profile links. I use Stumbleuopn and Last.fm to sporadically update my Twitter feed to keep it active.

What does this really mean to you? This truly means that you only need relevant content to drive higher search results with stronger blog traffic - and that Google will reward you for many search phrases if you target your posts. If you subscribe to my email list above, I'll give you deeper insight on how I approached this blog and how you can do the same for your blogspot traffic results.

How to Add PowerPoint to Blogger - The Definitive Guide

noreply@blogger.com (Don James) — Wed, 26 Dec 2012 21:02:00 +0000

One of the most asked Blogger questions on forums and help sites is 'How do I add a PowerPoint presentation within Blogger?' It surprises me that many of the answers talk about multiple conversion techniques such as to Adobe PDF or to bitmap files to embed as pictures. Also, there are multiple slide sharing sites such as Slideshare.net, Scribd.com and Docstoc.com that can be used as upload sites to host your presentation and then share publicly.

Though these options are valid, the best option is to use a Microsoft tool since the level of support for the presentation view will be the highest. This is actually a very easy option and allows you to keep your presentation in the .ppt or .pptx formats.

Using Microsoft OneDrive for PowerPoint

What you may not have realized is that Microsoft's Live products - one of which is OneDrive, allows you to upload your PowerPoint presentations, edit them in place and then embed them into any web site with a viewer. Plus, OneDrive is free cloud storage with an initial limit of 5GB which should handle most PowerPoint presentations. You can always start paying for more storage if you need it.

Setting up a Microsoft Live account with OneDrive is easy to do - if you have a Hotmail account you may already have one. Just go to the Microsoft OneDrive Signup page to start and create your account. Note the message I highlighted if you do not have a Hotmail or Live account already:

If you didn't have an account here is the signup page:

Once you've created you Live account you can now access your OneDrive. Just confirm your Microsoft account and login under your ID and Password. Go directly to OneDrive with this link. You should see the OneDrive main page:

What you are seeing here are my OneDrive folders - Documents, Pictures and Public. I've highlighted 'Public' because that is where you will be uploading your PowerPoint presentation. Go ahead and click on the Public folder which is anywhere in the entire blue box. You'll now be within that folder:

As you can see I already have a test folder called 'PPTest' in Public - yours should look empty. Go up to the menu item called 'Create' to create your presentation folder. You don't have to do this but I like to just to keep the files organized. When you click on 'Create' you'll see an option for 'Folder'. Choose that and name your new folder. It will be another blue box like my PPTest folder above in the picture. Click on that blue box and you'll be within an empty folder:

You can see that I've circled the name of my new folder and the message that you're now ready to upload your PowerPoint presentation.

Uploading PowerPoint to OneDrive

Your next step will be to upload your PowerPoint presentation. This is a very easy step. Simply click on the 'Upload' menu item on the top bar in OneDrive. Choose the option to 'Select them from your Computer' to upload:

You can see that I've navigated to my 'Blogger Strategy.pptx' file on my local drive. Just click 'Open' to upload the file. As you can see my file is now within the new folder:

Embedding Your PowerPoint Presentation in Blogger

The last step is to just find the public link to embed your presentation. Simply hover over the orange file box in the upper right and click on the little box:

Once you've clicked on the file you'll see some new menu items appear at the top. You'll want to choose 'Embed' to add your file to your Blogger post. You'll see this dialog - choose the 'Generate' button:

You should see your presentation appear in a few seconds with the embedding link like so:

Just copy the HTML code to embed that I've highlighted and paste it into your blog post by switching to the HTML view and pasting it where you would like it - like this:

That's it! You are done! The PowerPoint is now embedded in your blog posting. The best news is that you can use Microsoft's online tools to edit the presentation in place if needed. Here is my simple example - enjoy!

Hide the Blogger Sidebar - Quick Tip

noreply@blogger.com (Don James) — Sat, 15 Dec 2012 15:55:00 +0000

Many times when you want a static home page you don't want to see the sidebar widgets. You probably noticed that on my test site for the Static Home Page I was able to hide the sidebar that you normally see on you layout in the blog posting page. Removing this is a simple trick and just requires some basic CSS and Blogger template code to adjust. The key to doing this is to simply use CSS to hide, or, display:none on your sidebars and then adjust the width of your page to fit your design needs.

First step is to just into your Blogger template editor and then choose the 'Edit HTML' button like this:

Click the 'Proceed' button to jump into your template. You don't have to worry about 'Expand Widget Templates' here because we're only working within the CSS section. Seach for the part of your template that has the keyword ]]></b:skin> like this:

You can see the section I've highlighted in my circled region - plus, I've shown about how far down in the template you need to go to find it.
What we're going to do is add some simple template code between the ]]></b:skin> line and the <b:template-skin> line. What you want to pay attention to, however, is the type of template you have - is the sidebar on the right, left or both sides?? Now, this code will only affect your static pages and not the main blog posting page. To test this you'll need to have a static page created ahead of time. We'll come to that in a bit.

Next, copy this code below right between the circled lines above:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <style>
  .sidebar {display:none;}
  #main-wrapper{width: 95%; float: none; margin: 0 auto;}
  .main-inner .column-center-inner {width: 900px;margin-left: 0px;}
  </style>
</b:if>
<b:if cond='data:blog.isMobile'>
  <style>
  .main-inner .column-center-inner {width: 100%;}
  </style>
</b:if>

If you've noticed - I've highlighted two parts in this code - the width: and the margin-left:. This code right now is only setup for a right sidebar. The pasted code should look like this:

Remember, you'll need a static page to test so your Preview button will only tell you if the pasted code works - you won't see it visually until you navigate to a static page. The key adjustments you'll want to make are now the margin-left and width values I highlighted in the code.

IMPORTANT:
1. If your blog has a right sidebar, then only adjust the width: value to your proper size.
2. If your blog has a left sidebar, then adjust the margin-left: to a negative value depending on your template - such as -200px or -300px. Then adjust your width: value.
3. If your blog has both sidebars do the same as #2 but just reduce the value for margin-left:.

Press the 'Save template' button to save and test your static pages. You'll have to do some trial and error to get the values just right. I know you could use the tempate values of content.width, etc. but many templates are different and you may find that some don't have the standard template variables so fixed values work better for me. One other note - if you noticed, the mobile template must be adjusted as well so as not to have a full fixed content width. Otherwise, it extends too far to the right on a mobile device.

That's it! You're done. All of your static pages will now have full widths across the width of your blog. Enjoy!

Add a Slider to Blogger

noreply@blogger.com (Don James) — Mon, 10 Dec 2012 00:47:00 +0000

APRIL 2013 UPDATE!! Serveral readers have discovered that part of this tutorial does not work for domains other than the standard Blogspot.com domains. There is a fix here, however!! If you have a custom domain you will need to follow this tutorial - but also the section called 'Addendum 1' at the bottom of this post in order for the slider to work correctly.

Life can get pretty darn busy at this time of year. I had to take some time off posting just to get my grad school work done as well as my job. There's a ton of new tutorials I have in my back pocket but just haven't had time yet to do the work. But, my paper is done for school and I'm now relaxing in a snow storming weekend.

What I didn't expect was that I would be spending hours trying to find a good image slider for Blogger that didn't run into weird problems or wasn't too complex to implement. Image sliders are very cool but are implemented in so many different ways - typically in Flash or Javascript. In this case I had to work through about four different free sliders to find one I liked or that worked right. Blogger does have a Slideshow gadget, but it doesn't have any real customizable features.

Let's get started. The Image Slider template I chose is from a company called Menucool.com and offers a free slider framework. You can view a sample of it in action by clicking on the image in the upper left of this post. The part that sold me on it was the fact that it didn't require JQuery script code in order for it to be implemented. That's good for us because it reduces the load time for your blog and is easier to install (note that easier is relative here - it is still a bit of a trick to get it setup correctly).

Uploading and Installing the Main Script

The main Javascript code for Menucool requires you to install some javascript code somewhere. Well, as you know Blogger doesn't have a place to install a file. You could extract the script and embed it into your template. But, I like to add it to Google Sites as a file then reference it. Your first step is to go to the Menucool.com Javascript Slider page. From there scroll down a bit to download the image slider code. All we want right now is the main Javascript file - click on the Download button:

The file is going to be in zip format. So, depending on your system you may need to download an unzip utility. Once downloaded and unzipped you should see something like this:

Navigate to the folder called jsImgSlider\jsImgSlider\themes\1 - this is where you will find your code file entitled js-image-slider.js:

Now, you'll need to install this file on a visit external site somewhere.

IMPORTANT UPDATE: If you have a custom domain name (not [blogname].blogspot.com) then don't upload the .js file to Google Sites (please see the Addendum 1) and jump down a few paragraphs to Adding the Nav Button!! This next section only works for .blogspot.com domains.

As I noted I use Google Sites for this. I'm not going to repeat my tutorial on how to install a file in Google Sites. Just take a look at my MP3 posts on installing a file. You'll want to upload the js-image-slider.js file to your Google Site exactly like an MP3 file. Follow the steps in Add an MP3 File to Blogger - Part 1 and Part 2 of how to upload a file to Sites.

Once your file is uploaded you'll want to find the full link to it as I did in the MP3 tutorial by right-clicking the down arrow on the far right and choosing 'Copy Link Location':

Save your link location in a word processor or text editor somewhere. It should look something like this:
https://sites.google.com/a/bloggertipspro.com/myfiles/mp3/js-image-slider.js?attredirects=0&d=1 Be sure to remove the '?attredirects=0&d=a' part. You can also change the https to just http.

Add Links and CSS to Your Blogger Template

Now you're ready to install the scripts and layouts to your Blogger template. First step is to add this line you just saved to your template's HTML with the script tags added - be sure to change my URL to yours:

<script src='http://sites.google.com/a/bloggertipspro.com/myfiles/mp3/js-image-slider.js'/>

Go to the Blogger main menu and choose to Edit HTML in your Template:

At the very top of the Template add your script line above like this just after your title code. Be sure to save your Template:

Adding the Nav Button
Now you have the image slider code ready to be used. One part of this code requires a simple image upload to your blog - the navigation buttons. This file is called bullet.png - you can see it in the unzip file list above when we got the javascript file. Copy this file from the unzip list and add it to any post in your blog as an inserted image and save the post. Then, just go into the HTML of your Post and find the image link like this:

Copy that link code from your post and save it in a word processor or text editor. You want this for later. Go ahead and delete the image from your post. Don't worry, Blogger keeps all images even after your delete the post image.

IMPORTANT: follow the very same steps when adding your banner images as well. Add them to a post, save the post, copy their links and then delete the images. In my case I have three 900px by 120px images that I added to a post - which you can see here. I could delete them - it wouldn't matter - but I left them for you to see.

Next step is to add the right CSS code to format your images. In my example I'm using banner images that are 900px wide by 120px tall. You can modify the CSS for any image size. The CSS code below will be setup for that size. Next step is to go into your template Customize section:

Once in go into the Advanced section of the customizer:

Here is the CSS code you want to add - just ignore the code in the image above. You'll want to copy and paste this into the window on the right (you can see some of the pasted code in the image above - ignore the .post pre section). If you have code already there - just paste below it:

/* http://www.menucool.com */

#sliderFrame {position:relative;width:900px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/

#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:-4px;background:url(ribbon.png) no-repeat;z-index:7;}
        
#slider {
    width:900px;height:120px;/* Make it the same size as your images */
 background:#fff url(loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
 bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0px;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:130px; left:400px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibLXCVgY35C0thuaW0daE_fCoBk2AEjIL9PbTfACUk0wzYZHNWzyVIcnnDzQgX5WjeS1T9vElhSYV70dcz2xU7N5OCXjd2m9E_JlTLrKGX-YimjqBxFJ6sYFNQhCj46VK8ZQiVrcHAvXgH/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -11px;}


/* --------- Others ------- */
#slider 
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

Find the part in the code near the end that references the 'div.navBulletsWrapper' and the part that says 'background:transparent url' - paste in the bullet.png image link you saved earlier to replace the one here. Once you've pasted in this CSS code be sure to hit the orange Apply to Blog button!

Ok, you're just about set. The last part is to have your images ready for the slider. So, if you're using this same tutorial - try images of my sample size first. If you want to alter the sizing - find the CSS section entitled '# slider {' in the code above. You should see the slider width and height that you can adjust for your images. Also, adjust the '#sliderFrame {' section to the width as well if you want. You may need to adjust the 'div.navBulletsWrapper {' section too to move any banner test positioning.

Place the Images in the Slider HTML

Your final steps are to go into your Blog layout section - choose the main manu Layout and Add a Gadget:

Choose a standard HTML/Javascript gadget like this:

Next, you'll want add the HTML code that will spin the banner images. A couple of notes to change in the code below - a) be sure to copy your banner image links in, b) you can add as many images as you want - just add additional img tags, c) alter the banner text and links to what you want, d) alter the last caption to go to any link you'd like, e) add links with a href tags if you want a clickable image:

<div id="sliderFrame">
        <div id="ribbon"></div>
        <div id="slider">
            <a href="http://www.bloggertipspro.com/" target="_blank">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtaGq1DFVsRz_62xBIQ1Cd76LOq8qerd6UJjyQMVcx04S_9cBYr5nzCtQpXhfsyvBmy4jdsGq8OliRaDIHmoFNS5L9icGdcDnuA8A__yGMGGxYaoCx7-2cR2btrKM-pquzGzaH9LIL5T7r/s1600/aimage1.jpg" alt="Sliding Images for Blogger" />
            </a>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybha_M4VBTBHib4ZWwacFf0j6zjLMl-jX2MUe49ejunZVRerfq9lYtLpC6kVmVZE4U4P8FB0Exym-oylMKHak2AnIZkJK1FwvhqrTwuPSjoJw2j_YAZWVlzLWOKSuDyjmR_0IKxgg1jKH/s1600/aimage2.jpg" alt="Multiple Transition Options" />
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzHeVgfkmCgFlmfI-Fos0xS6IHN_D2UqbL9X9P9uROK60vnhmSKpcUDz127ghlMYeOr_K8lrymKT8v9ErVGEG31yOHqsJg5w0DMJiaMnWUcLNydF7QASkRluc3TiV7g8A3FxRM2_uJPJy/s1600/aimage3.jpg" alt="Full Instructions at BloggerTipsPro.com" />

        </div>
        <div id="htmlcaption" style="display: ;">
            <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
        </div>
 </div>

You can see my image links above where I pasted them in. Go ahead and save your gadget code and position it where you want. I've placed my example near the top - but, you can be creative and add the code where you'd like:

That's it - be sure to save your layout! Your rotating slider images are ready. If you go back to the Menucool.com site you can find more ways to adjust the slider properties and do some more creative things. Enjoy - here's the link again to my sample blog: http://statichomepage.blogspot.com

Addendum 1- Fixing the Javascript for Custom Domains

Apparently, Google Sites wraps the Javascript code above in HTML if your domain is not .blogspot.com but a custom one just like BloggerTipsPro.com. Rather than added an external link, all you need to do is to copy the Javascript code directly into an HTML widget. Just add a new HTML widget anywhere on your layout. Then, open the file 'js-image-slider.js' in a text editor and copy the code into the HTML widget surrounded by the script tags like this:

<script type='text/javascript'>
var sliderOptions=
{
 sliderId: "slider",
 effect: "series1",
 effectRandom: false,
 pauseTime: 2600,
 transitionTime: 500,
 slices: 12,...lots of code here......getElement:function(){return K(j.sliderId)}}}
</script>

You can see how I pasted the code here:

Go ahead and save your gadget code and you should be good to go!

Addendum 2- Allowing Your Slider Only on the Home Page

This part is a bit tricky and you'll have to be sure to backup your template in case of errors. There was a question in the comments about how to limit your slider only to the home page. Now, if you have a Static Home Page like my tutorials before then what I'll show you is the way to do it. However, if you want to show the slider only on the Blog Posting main page you'll have to change a couple of things.

The key to doing this is to add code to your template that will only show the HTML widget above when a certain page type and page name loads. This isn't a great idea because now you'll have that page name embedded in your code - REMEMBER THIS - if you ever change the page name you'll have to go back into the template and change the code!!!

You'll need to find the HTML widget in your Template by expanding it and searching for it. Here is how I found my code in the Blogger Static Home Page template and example for this:

As you can see I found the widget and added these two lines:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.pageTitle == &quot;Blogger Static Home Page: Home Page&quot;'>

These lines are checking to see if the page is first,a static page, then, trying to compare the page title. In this case, if the page is of type static_page and the title is 'Blogger Static Home Page: Home Page' then show the slider - otherwise, ignore it. Remember to add the two </b:if> statements at the end. Your page types (pageType variable which can have the values 'item', 'archive', 'static_page' or 'index') and Titles will vary - take care to work through this.

Add a Background to a Blogger Post

noreply@blogger.com (Don James) — Mon, 01 Oct 2012 00:13:00 +0000

Sometimes spicing up your Blogger posts with image manipulation can be a good thing. Images are a core part of the blogging experience and having some simple tools can make a bland post look great. I wanted to quickly show how you can add a simple near-transparent background to a single Blogger post.

Free Online Image Tool

Adding a background image is really quite simple. Some have tried using many of the CSS transparency tricks to do this but that typically runs into problems with different browsers and versions. The best way is to just find an image, scale it to the right size and then lighten it up for the illusion of a transparency.

Ok, I happened to stumble into a free online tool called LunaPic that allows you to either capture an image online or upload an image while giving you basic image editing features. You could certainly use another, more sophisticated tool but I thought this gives the basic user the functions needed.

There are really only two things you'll want to do with your image editing tool - scale the image down to close to your blog post window size and lighten or brighten the image so it looks washed out - or, gives it a transparency feel.

So, I'll first apologize for the LunaPic interface - it really is pretty bad. However, I'm going to add a background to this post for the example. First, go to the free LunaPic Editor. Here's the main screen - choose the 'Browse...' button to find an image from your disk:

I've chosen a 3MB image from my digital camera. Once you pick the image you'll need to select the 'Upload Now!' button and it should show up on the LunaPic screen like this:

You can see that I circled the 'Edit' menu item above. Choose the 'Resize Image' option if your image is really large. In my cse this image is 4000x3000 pixels - much too large:

I decided to scale the image down to 700x525 just so I don't use a bunch of Google storage but also to fit on the post a bit better. Be sure to keep your aspect ratio right. In my case my original was 4 by 3. So, if I set the width to 700 then multiply by 3/4 to get the height. Otherwise just eyeball it. Enter the values and press the 'Resize Image' button like this:

Next step is to lighten up the image as much as you can so that it looks very transparent. Hover over the 'Adjust' menu item and select 'Brightness' like this:

You'll want to make the image fairly light so that your text doesn't get muddled in the image when you post. Use the slider bar to the right to lighten it. Once set, select the 'Set Brightness' button to save your change. Once done you can now save your image back to your computer by scrolling down to the bottom of it like this:

Note that you can also Undo any changes in your history as well. Go ahead and save the image back under a new name by selecting the 'Save To: Your Computer' option. You're now ready to add the image to your post.

Adding an Image Background to a Blogger Post

The next trick is to upload your modified image to Blogger so that it is saved for the background. Google will keep the image in storage so don't worry about losing it. You'll just want to upload the image directly to your post using the Blogger post editor Image button:

Simply select the image you just saved from LunaPic using the image 'Browse' button and uploading it like so:

Once you've uploaded the image, Blogger will have the URL of it buried within your HTML of the post. You're going to want to copy the URL location of that image. You'll want to first find that URL within your post so you can copy it for later. Since you just added it - it should be at the very end of the HTML like this:

You can see that I added my LunaPic image to this very post in the HTML. I've shown you what specifically to copy to use later as the backgroud. Be sure to copy it now and paste it into a word processor or notepad. Once copied, go ahead and go back to the 'Compose' view of your post and delete the image from within the post itself that you just added. Don't worry! It is still out on Blogger's storage.

Now that you have your image uploaded you'll need to add this div tag to the second line of your blog posting's HTML. Note that I added some padding so that your text is slightly indented from the image:

<div style="background: url(&quot;your-full-blogger-image-url-here.jpg&quot;); 
padding: 5px;">

Copy this line and paste it just after the post's first <div> tag that should look pretty close to this when viewing your post in the editor. Select the 'HTML' button in the upper left and add your line. Be sure to replace 'your-full-blogger-image-url-here' with the URL you copied earlier:

<div dir="ltr" style="text-align: left;" trbidi="on">

<div style="background: url(&quot;your-full-blogger-image-url-here.jpg&quot;); 
padding: 5px;">
Your blog's Post text here....

Be sure to add a </div> end tag to the very bottom of your full post in the HTML to have the tags balance:

</div>

Once you've done that be sure Blogger isn't complaining about your tags and take a look with the 'Preview' button to see if all looks good.

That's it! You're done. A couple of notes to point out. First, the background image will not span through the title of the post and may have a margin depending on your template. You could try to add this deep within the template itself and create so type of CSS style tag to flag certain posts. This would be very difficult.

Enjoy!