Friday, 26 June 2015
How Firebug Helps You Design Your Blogger Blog
For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frightening. HTML5, CSS, and other coding elements are their own virtual language and for the average Blogger user looking to update a personal blog, the automatic settings are about as good as it gets. What if there was a better way to code a blog, whether a beginner or a pro, that could be done within the browser itself?
If you're using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.
What Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you're editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don't like it? Just undo your changes.
It's really that easy.
To download Firebug and get more details regarding its powerful features, visit: Firebug for Firefox, or if you are using Chrome, get the Firebug Lite app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.
Once Firebug is installed, a small bug icon will be available in the upper right of your Web browser's address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser's window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.
To customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the "Inspect Element with Firebug" item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.
For example, let's say that we want to change the title of the "Blog Archive" gadget. After we clicked the inspect button, mouse over the "Blog Archive" title which will be highlighted as shown in the screenshot below. To change this element, click on it:
Now that we decided which element we want to change, right click on the "Style" panel and select the "Add rule" option:
This will give the class or the id of the highlighted element - in our case, the heading of the Blog Archive (#BlogArchive1 > h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:
And here comes the fun part. Let's say that we want to make the title red. We will type color and hit Enter, then we will type the color value or the red text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):
The cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we'll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).
To apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.
Before making any change, it's highly recommended to make a backup of your current template. Go to "Template" and click the "Backup/Restore" button on the upper right side. On the same "Template" location, click on the "Customize" button and navigate to "Advanced" > "Add CSS". Paste the CSS rule that you just copied into the CSS box:
Click the "Apply to blog" button on the upper right corner to save the changes and view your blog.
From there, all you've got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure - but Firebug does all of the primary work for you.
All you've got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you've been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!
If you're using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.
You No Longer Need To Edit Through Blogger!
If you've ever tried to update a Blogger theme through the editing functions of the website, then you know how difficult it can be. You can preview your designs, but you can't save any changes to officially see what is going to happen with your site until you publish the edits. If you've missed just one line of code or forgotten one small element, you're going to have to go back into the editing matrix, find the error, update it again, and repeat until you have a responsive blog once again.What Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you're editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don't like it? Just undo your changes.
It's really that easy.
Using Firebug to Customize CSS in Blogger
This guide will show you how to modify the CSS code of a Blogger template. Usually, the Blogger Template CSS style declarations are editable through the style.css file, found between the <b:skin> and </b:skin> tags.To download Firebug and get more details regarding its powerful features, visit: Firebug for Firefox, or if you are using Chrome, get the Firebug Lite app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.
Once Firebug is installed, a small bug icon will be available in the upper right of your Web browser's address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser's window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.
To customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the "Inspect Element with Firebug" item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.
For example, let's say that we want to change the title of the "Blog Archive" gadget. After we clicked the inspect button, mouse over the "Blog Archive" title which will be highlighted as shown in the screenshot below. To change this element, click on it:
Now that we decided which element we want to change, right click on the "Style" panel and select the "Add rule" option:
This will give the class or the id of the highlighted element - in our case, the heading of the Blog Archive (#BlogArchive1 > h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:
And here comes the fun part. Let's say that we want to make the title red. We will type color and hit Enter, then we will type the color value or the red text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):
The cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we'll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).
To apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.
Before making any change, it's highly recommended to make a backup of your current template. Go to "Template" and click the "Backup/Restore" button on the upper right side. On the same "Template" location, click on the "Customize" button and navigate to "Advanced" > "Add CSS". Paste the CSS rule that you just copied into the CSS box:
Click the "Apply to blog" button on the upper right corner to save the changes and view your blog.
Firebug Also Gives You One Distinct Advantage...
One of the best reasons to install Firebug into Chrome or Firefox is that it allows you to emulate some of your favorite website designs quickly and easily. Instead of hiring a web designer to do the work, which could cost you thousands, you can simply start Firebug and see what the CSS styles are for your favorite site. This allows you to create a similar widget.From there, all you've got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure - but Firebug does all of the primary work for you.
All you've got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you've been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!
How to Center the Blogger Header Image
The header of a website is what distinguishes your blog; it's your identity or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. Therefore, it's important to develop a header that is both prominently placed and telling of your brand name.
What would seem to be counterintuitive to that idea is the default Blogger settings for header positioning. Whenever you upload a header to the site, it will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, incomplete, or indistinguishable from the rest of their content.
If you find yourself in the second category of users, there is a way to adjust the positioning of your header so that it is displayed as a center Blogger header. By centering your site header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.
Making the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually. All you need to do is to modify the CSS of your blog that can be found directly through your Blogger dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.
Step 1. Log in your blogger account and select your blog, then go to "Template" and click the "Customize" button on the right side.
Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box:
Step 3. Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button.
Here are some other aligning options for your headers:
If by chance you don't see the changes to the header, go back through the code that you modified and make sure that you have copied and pasted the information into the file exactly as instructed. Even minor modifications in the code, or a missing semicolon may fail to make the changes you are trying to achieve, or come away with different results than what's expected.
The great thing about CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you're comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications.
What would seem to be counterintuitive to that idea is the default Blogger settings for header positioning. Whenever you upload a header to the site, it will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, incomplete, or indistinguishable from the rest of their content.
If you find yourself in the second category of users, there is a way to adjust the positioning of your header so that it is displayed as a center Blogger header. By centering your site header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.
Center Header Image with Blogger Template Designer
Making the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually. All you need to do is to modify the CSS of your blog that can be found directly through your Blogger dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.
Step 1. Log in your blogger account and select your blog, then go to "Template" and click the "Customize" button on the right side.
Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box:
#header-inner {If you have a small image and you want it to become full width, add this CSS instead:
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}
#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}
Step 3. Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button.
Here are some other aligning options for your headers:
Align Blogger Header Banner and Text Side by Side
Image on the right and title on the left
#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
Image on the left and title on the right
#header-inner {Note: for larger images, you may need to resize them in order to make them appear side by side with the text.
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
That's it!
After making the changes to the CSS and saving your modifications, you may navigate back to your homepage. Refresh the page and you'll notice that the header is now centered, instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog.If by chance you don't see the changes to the header, go back through the code that you modified and make sure that you have copied and pasted the information into the file exactly as instructed. Even minor modifications in the code, or a missing semicolon may fail to make the changes you are trying to achieve, or come away with different results than what's expected.
The great thing about CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you're comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications.
How To Upload and Use Custom Fonts in Blogger
Just about anyone can write and publish his or her own blog. In fact, there are about 152 million blogs out there on the internet. But, if you want your blog to stand out you need to impress visitors with the little things. You need to be able to catch there attention and keep it so that they want to come back.
Complementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.
Within each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an @Font-Face kit, but this will be discussed later on.
Using the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant. Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.
To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':
Step 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a link to the style sheet found in the 'Standard' tab (point 3) and the CSS style (point 4).
The link to style sheet would look like this:
Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the "Backup/Restore" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.
Step 4. From the same "Template" location, press the "Edit HTML" button:
Step 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type <b:skin> inside the search box. Press Enter and it will take you to the <b:skin> tag, which will be highlighted in yellow:
Step 6. Directly above the <b:skin> tag, copy & paste the link to the style sheet provided by Google Web Fonts (step 2). To prevent any errors, add a forward slash (/) right before the closing angle bracket (>), like this:
For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:
You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.
Step 8. Finally, press the "Save Template" button and you're all set!
If you are using the Font Squirrel Webfont Generator: press the "Add Fonts" button, choose the font file that you saved on your desktop and check the "Yes, the fonts I'm uploading are legally eligible for web embedding." checkbox. After the font has been successfully uploaded, click the "Download your kit" button.
This should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet & the html file for the demo page. The only files that you need to extract are the ones with the .woff, .tff, .svg, .eot extension and the stylesheet.css file.
Once you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose "Copy public link..." and press the "Copy to clipboard" button. Paste each link separately in a Notepad, so that you can link to that location later.
Next, open up the stylesheet.css file that came with the kit and it will show you a similar code:
For example, if you uploaded the font .tff file with this name:
Finally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the "h3.post-title, .comments h4 {" CSS selector:
Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!
Complementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.
The Different Types of Font
Before you can upload any font files, you need to find the right font and typeface that will fit your style. Typeface is the design and symbols used for the letters; font is the actual characters. Some of the most common typeface terms that you should probably be familiar with before starting are:- Serif - distinguished by small decorative lines that are attached to the end of letter strokes; best used for the paragraph or body content.
- Sans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.
- Script - a handwriting typeface that looks like cursive letters or custom strokes.
- Display - typeface that is designed to stand out from the rest of the page; characterized by a broad and unique use of informal letter designs and transparency. Display typeface is best used on titles and headers.
Within each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an @Font-Face kit, but this will be discussed later on.
Where to Find Font
You can find custom font all over the internet when you're ready to get started. Some custom fonts in Blogger are free to use and can be downloaded to your computer, others you are considered 'premium' and you have to pay to use them, so please check twice whether they are having Commercial or Personal licenses. Google offers its own font service known as Google Web Fonts which can be a good place to start looking around for custom fonts in Blogger.Using the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant. Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.
Adding a Custom Font to Blogger from Google Web Font
Step 1. To browse the Google Fonts library, access www.google.com/webfonts. There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':
Step 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a link to the style sheet found in the 'Standard' tab (point 3) and the CSS style (point 4).
The link to style sheet would look like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>And the CSS style would look like this:
font-family: 'FONTNAME', cursive;
Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the "Backup/Restore" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.
Step 4. From the same "Template" location, press the "Edit HTML" button:
Step 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type <b:skin> inside the search box. Press Enter and it will take you to the <b:skin> tag, which will be highlighted in yellow:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css' />Step 7. To apply the font on a specific part of our blog, we'll need to find the CSS selector and add the CSS style (point 4) just AFTER the curly bracket. If you don't know how to find the id/class selector, please read this tutorial: Add CSS rules to Design a Blogger blog using Firebug
For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:
h3.post-title, .comments h4 {Where "h3.post-title, .comments h4 {" is the class selector for the post and comments titles. Note: to change the size of your font, add the "font-size: 28px;" part as well, and change the "28px" value to make the font bigger/smaller.
font-family: 'Rancho', cursive;
font-size: 28px;
}
You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.
Step 8. Finally, press the "Save Template" button and you're all set!
Using a Custom Font that isn't on Google Web Fonts
Some of the good places to find free fonts are DaFont, FontSquirrel and UrbanFonts. Click to download the kit (unzip it if necessary), and save the TFF or OFT file on your desktop.Step 1: Convert the Font File
The font file that you've downloaded is most likely in a TFF or OFT file since this is the most popular type. You need to convert this file into a @Font-Face kit. Many online services can help you do this, but here are two recommended sites:If you are using the Font Squirrel Webfont Generator: press the "Add Fonts" button, choose the font file that you saved on your desktop and check the "Yes, the fonts I'm uploading are legally eligible for web embedding." checkbox. After the font has been successfully uploaded, click the "Download your kit" button.
This should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet & the html file for the demo page. The only files that you need to extract are the ones with the .woff, .tff, .svg, .eot extension and the stylesheet.css file.
Step 2: Upload The Font Files To Blogger
Custom fonts in Blogger have to be uploaded before you can use them. For this, we are going to use Dropbox and upload them to Public folder (upload only the files with the .woff, .tff, .svg and .eot extension).Once you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose "Copy public link..." and press the "Copy to clipboard" button. Paste each link separately in a Notepad, so that you can link to that location later.
Next, open up the stylesheet.css file that came with the kit and it will show you a similar code:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 2, 2014 */Edit the link location to point toward the font file that you just uploaded to the Dropbox Public folder and pay attention to each extension which should correspond with that found in the stylesheet.css file.
@font-face {
font-family: 'fontname';
src: url('font-name.eot');
src: url('font-name.eot?#iefix') format('embedded-opentype'),
url('font-name.woff') format('woff'),
url('font-name.ttf') format('truetype'),
url('font-name.svg#fontname') format('svg');
font-weight: normal;
font-style: normal;
}
For example, if you uploaded the font .tff file with this name:
https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf...change the CSS link in blue in this line:
url('font-name.ttf') format('truetype'),to point to:
url('https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf') format('truetype'),After you've added all the links, copy the stylesheet.css code that you modified to your clipboard.
Step 3: Editing Blogger's CSS
Open up the CSS on your Blogger site. This can be found by navigating to Template > Edit HTML. Next, click inside the code area and press the CTRL + F keys to open the search box, then type the tag below and hit Enter to find it:]]></b:skin>Just ABOVE this tag, add the code that you copied in the stylesheet.css file.
Finally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the "h3.post-title, .comments h4 {" CSS selector:
h3.post-title, .comments h4 {Obviously, the fontname will be the actual name of the font. This will make sure that your blog can use the custom fonts in Blogger. After we've made these changes, press the "Save Template" button and exit.
font-family: 'fontname';
font-size: 28;
}
Step 4: Test Out the Site
Navigate back to your sites homepage and you should now see the custom fonts in Blogger that you uploaded during the last few steps. Every time you go to make a new post, the site will now be able to use your font.In Conclusion:
Website design is an important part to maintain a successful blog. As a blog owner, you are responsible for providing content that isn't just fun to read, but looks good. Modifying the font is just one easy way that you can help your blog stand out without making any major changes to your blog itself.Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!
How To Host Blogger CSS and JavaScript Files in Google Drive
Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.
Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.
Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.
If you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.
Some of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.
Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.
Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.
This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.
For example, the link to mycssfile.css that I copied looks like this:
If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:
If you want to add a Javascript file, search for the following tag:
Finally, press the 'Save template' button to save the changes. And you're done!
Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.
As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.
Things To Think About
When you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:Site Loading Speed
By combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.
File Storage Affects SEO
In addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren't going to know what to do with the information.Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.
Storage Locations Affect Editing Abilities
Shuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.If you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.
Some of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.
Storing Javascript/CSS Files With Google Drive
Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.
Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.
This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.
Step 1. Prepare the CSS/JavaScript Files
- First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the <style> and </style> tags, remove them).
- In the Notepad menu, select 'File' > 'Save as' and type the file name with the .css extension just like I did with mycssfile.css - see the screenshot below.
- In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.
- If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the <script>...</script> tags if you see them). Click "Save" and navigate to the location where you want to save the file.
Step 2. Upload Your File on Google Drive
- Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.
- Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.
- Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.
- After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share':
- In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.
Step 3. How to Add an External CSS/JavaScript file to Blogger
Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.For example, the link to mycssfile.css that I copied looks like this:
https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharingNotice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:
https://googledrive.com/host/Add the file ID like this (remove the '/edit?usp=sharing' part):
https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2SlkNow log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:
If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:
<head>Just BELOW the <head> tag, add this line:
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk" />And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:
If you want to add a Javascript file, search for the following tag:
</body>And add this line just ABOVE it:
<script src='https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg' type='text/javascript'></script>Replace the line in blue with your URL:
Finally, press the 'Save template' button to save the changes. And you're done!
In Conclusion
Once you have successfully saved all your file folders and closed out of the drive. Open your site in a browser and make sure that all the changes have completed successfully.Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.
As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.
How To Add an Instagram Widget in a Blogger Blog
If you're not familiar with Instagram, it's a photo-sharing network that can be downloaded to your smart phone as an application. Think of it as Facebook without the status updates. By developing a simple service that does one thing, and does it well, Instagram has become one of the most prominent photo sharing apps on the market.
The great thing about using Instagram is that it's not just for individuals. Businesses and non-profits alike can take advantage of this service to share their day and passions with their dedicated customers and fans. These fans number nearly 200 million active users a month, and approximately 7.3 million new daily posts. That's an astonishing number of potential new customers available for you to capture.
By adding Instagram on Blogger as a widget, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren't members of Instagram could benefit from such a service.
It doesn't matter what you are sharing. Whether you're the type of person that loves to share pictures of your dinner with the world, or business owner that loves showcasing their brand in everyday life, Instagram can work for you. Adding Instagram on Blogger as a widget also offers an incredibly accessible tool for stock photos to use in new posts.
This guide will explain how to add an Instagram widget to your site with step-by-step instructions. The design of your new Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site. When you're finished, you'll find that the Instagram widget will blend together effortlessly with your current theme and make your Blogger site truly stand out from the rest.
2. Type in your username > select Grid or Slideshow:
3. Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not
4. To change the Background Color, simply click on the empty box and pick your favorite color
5. If you want to show the Sharing buttons on your widget, select 'Yes', otherwise, click 'No'.
6. Once you're satisfied with the widget, press the "Get Code" button and copy your code.
7. Log into your Blogger account and select your blog > navigate to Layout and click on the "Add a Gadget" link on the right side:
8. In the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:
9. Paste the code that you got from the Instagme website into the content section and press the 'Save' button to save the widget.
10. Click and drag your widget if you want to change its position and press the "Save Arrangement" button on the upper right side.
And that's it! Now you have your very own Instagram widget on your Blogger blog to share new photos with visitors, and provide just a glimpse of your life when you're away from the computer. To change or add any of the photos that are displayed in the widget, you'll have to go directly through the app itself, or log on to your account via Instagram's website.
Once you're ready to show off your new work, let all your customers or fans know by posting a Facebook link to the site or a tweet about the changes and asking them to follow you. Just make sure that you've added a few photos before making the announcement, so that they have something to look at. After they access your widget, they can like your new photos and interact with you in entirely new ways.
The great thing about using Instagram is that it's not just for individuals. Businesses and non-profits alike can take advantage of this service to share their day and passions with their dedicated customers and fans. These fans number nearly 200 million active users a month, and approximately 7.3 million new daily posts. That's an astonishing number of potential new customers available for you to capture.
By adding Instagram on Blogger as a widget, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren't members of Instagram could benefit from such a service.
It doesn't matter what you are sharing. Whether you're the type of person that loves to share pictures of your dinner with the world, or business owner that loves showcasing their brand in everyday life, Instagram can work for you. Adding Instagram on Blogger as a widget also offers an incredibly accessible tool for stock photos to use in new posts.
This guide will explain how to add an Instagram widget to your site with step-by-step instructions. The design of your new Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site. When you're finished, you'll find that the Instagram widget will blend together effortlessly with your current theme and make your Blogger site truly stand out from the rest.
How to Add An Instagram Widget in Blogger
1. To get the Instagram widget, access the Intagme website here: http://www.intagme.com/2. Type in your username > select Grid or Slideshow:
3. Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not
4. To change the Background Color, simply click on the empty box and pick your favorite color
5. If you want to show the Sharing buttons on your widget, select 'Yes', otherwise, click 'No'.
6. Once you're satisfied with the widget, press the "Get Code" button and copy your code.
8. In the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:
9. Paste the code that you got from the Instagme website into the content section and press the 'Save' button to save the widget.
10. Click and drag your widget if you want to change its position and press the "Save Arrangement" button on the upper right side.
And that's it! Now you have your very own Instagram widget on your Blogger blog to share new photos with visitors, and provide just a glimpse of your life when you're away from the computer. To change or add any of the photos that are displayed in the widget, you'll have to go directly through the app itself, or log on to your account via Instagram's website.
Once you're ready to show off your new work, let all your customers or fans know by posting a Facebook link to the site or a tweet about the changes and asking them to follow you. Just make sure that you've added a few photos before making the announcement, so that they have something to look at. After they access your widget, they can like your new photos and interact with you in entirely new ways.
Add a Pinterest Pin It Mouseover Button on Blogger Images
Images have always played a prominent role in attracting new visitors through search engines like Google and Bing. But when Pinterest decided to enter the social media mix, it upped the ante in a big way.
Pinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.
The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.
Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your very own Pinterest button.
When the editor opens up, it may look a bit foreign to you if you don't have much experience using HTML. Click anywhere inside the code area and search by pressing the CTRL + F keys for the </body> tag - hit Enter to find it:
If you want to hide the pinit button from a specific image, when you create a post, switch to the HTML tab of your post editor and type class="nopin" right before the closing slash and angle bracket of your image element, like this:
The only downside of this button is that it doesn't take the information from your custom image titles. It's automatically set to take the title of the blog post where the image is located. So, you'll need to pay closer attention to the title of the posts so that it fits closely with the images being shown.
Remember that when you have this code activated, you have to label your titles so that they are relevant to the photos you are posting. This might sound obvious, but sometimes you create a post with an image as a joke that won't make sense in the context of viewing it on Pinterest.
If you use Google Analytics, you can start to see traffic flooding into your site from Pinterest. You should also create your own Pinterest account so that you can manage the content and track how it's being shared. That's it. Enjoy and happy blogging!
Pinterest lets blog owners use their service to add a 'pin' to photos or content images on the site. When visitors of that site see a photo they like, they can choose to click on the red Pinterest button for Blogger, and add it to their Pinterest account.
The person who pressed your Pinterest button for Blogger can now see your photo on their dashboard, and share it with friends or followers on the service. They can also come across this photo when users add keywords or category tags to the image. More importantly, that photo links to your site when clicked on and will contain a description title of your blog name or post.
Therefore, adding the Pinterest button for Blogger will help you to benefit from tons of new traffic coming from Pinterest and people who had found your photos and post links using the service. Here are some steps to add your very own Pinterest button.
1. Access your Blogger Template
The first thing to do is to edit the code of your template so that it knows when to display this Pinterest Button for Blogger with the content. You can do this by logging into your Blogger Dashboard and finding your way to "Template" > "Edit HTML".When the editor opens up, it may look a bit foreign to you if you don't have much experience using HTML. Click anywhere inside the code area and search by pressing the CTRL + F keys for the </body> tag - hit Enter to find it:
</body>The body tags makes up the general content in your webpage. Think of it like the settings panel of a website. If you were to delete everything in this section your site would turn into a blank white page.
2. Add The Pinterest Pin it Script
Once you found the </body> tag, insert the following script just above it:<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uJeUa0St3OXFs84uOI19EiCtyYqO0gCHmlJArCuYx21mfZvY8ssWM6GKe5A7eY12_ssp9mkoc8XzqmvPda0HgcDUbRQMe55GQW2vC76MVcqUGU_ltHqCecAfcEpZjh1z_t40cpmIsvfe/s1600/pinit-button.png";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit helplogger.blogspot.com for more widgets and tricks.
</script>
3. Changing the Position of the Pin it! button
The cool thing about this code is that you have some freedom over where the Pinterest button for Blogger will go over the image. Take a look at the code that you just copied and pasted into the HTML for the word 'center'.var pinit_button_position = "center";To move the pin to a different area of the photo, replace center with one of these texts:
topleftAnd to change the Pin it! button that appears on mouse over, replace the address in blue from above with your own:
topright
bottomleft
bottomright
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uJeUa0St3OXFs84uOI19EiCtyYqO0gCHmlJArCuYx21mfZvY8ssWM6GKe5A7eY12_ssp9mkoc8XzqmvPda0HgcDUbRQMe55GQW2vC76MVcqUGU_ltHqCecAfcEpZjh1z_t40cpmIsvfe/s1600/pinit-button.png";
4. Save The Template
Make sure that you added everything correctly, then save the template and navigate to a recent post that you made that contain images. Hover your mouse over the image and you should now see a red Pinterest button for Blogger displayed on the image. Test it out and see it how it works.If you want to hide the pinit button from a specific image, when you create a post, switch to the HTML tab of your post editor and type class="nopin" right before the closing slash and angle bracket of your image element, like this:
The only downside of this button is that it doesn't take the information from your custom image titles. It's automatically set to take the title of the blog post where the image is located. So, you'll need to pay closer attention to the title of the posts so that it fits closely with the images being shown.
Remember that when you have this code activated, you have to label your titles so that they are relevant to the photos you are posting. This might sound obvious, but sometimes you create a post with an image as a joke that won't make sense in the context of viewing it on Pinterest.
If you use Google Analytics, you can start to see traffic flooding into your site from Pinterest. You should also create your own Pinterest account so that you can manage the content and track how it's being shared. That's it. Enjoy and happy blogging!
The Basics of Google Analytics for Beginners
If you're a business owner or a member of a marketing team, you probably know that businesses depend upon data. Tracking trends and patterns is what allows you to get ahead of the dips in the market, and make informed decisions on the direction of your company.
Those same rules that apply to business apply to owning a website. In order to deliver the best possible experience and ensure that customers from around the world are able to access your site, you need to understand from where traffic is coming from and how to leverage that information to your benefit.
The importance of this information provides you with information on how to conform your web-site to the target audience, especially in terms of design. If customers are visiting your website from an eCommerce directory, you may want to modify those links so that the customers arrive at a landing page instead of a home page. If more customers are using smartphones and tablets instead of laptop browsers, you may have to redesign the site so that it is responsive and can be easily read from a small screen.
In order to track each individual page on the website, you will need to add a tracking code before the </head> code of your template. If you are using a site like WordPress or Joomla! that depends on templates, you may just have to add the tracking code on the main HTML index file. Keep in mind that it can take upwards of 24-hours for Google to begin collecting information and importing that data to your dashboard, so don't expect to see measurable results right away.
Tutorial: How to Add Google Analytics to Blogger
The two features of Google Analytics that are often most useful to new users is the ability to track where customers are coming from, and the ability to see keywords that have been effective in drawing in audiences.
Next to the referral path will show a few links with a number of how many people visited your site from that link. From here you can click on the link and find out the reason for the traffic. Maybe someone has written a review on the service, you can check to see if the advertisement campaign you are operating is producing results.
Getting used to the program might seem overwhelming at first, but once you jump right in and start playing around all the features, you'll get the hang of it in no time. Google Analytics really is an important tool that every website owner should have.
Those same rules that apply to business apply to owning a website. In order to deliver the best possible experience and ensure that customers from around the world are able to access your site, you need to understand from where traffic is coming from and how to leverage that information to your benefit.
Setting Your Site Up With A Tracking ID
Google analytics won't start collecting data from your website until you've implemented a tracking code into your website's files. The tracking code is basically a block of JavaScript code that will collect data about the html that visitor used to get to your site, any cookies that the visitors has collected during their browsing history, and information about what type of browser the person is using.The importance of this information provides you with information on how to conform your web-site to the target audience, especially in terms of design. If customers are visiting your website from an eCommerce directory, you may want to modify those links so that the customers arrive at a landing page instead of a home page. If more customers are using smartphones and tablets instead of laptop browsers, you may have to redesign the site so that it is responsive and can be easily read from a small screen.
In order to track each individual page on the website, you will need to add a tracking code before the </head> code of your template. If you are using a site like WordPress or Joomla! that depends on templates, you may just have to add the tracking code on the main HTML index file. Keep in mind that it can take upwards of 24-hours for Google to begin collecting information and importing that data to your dashboard, so don't expect to see measurable results right away.
Tutorial: How to Add Google Analytics to Blogger
Researching the Data
Once you insert the code into your site, it will begin tracking data from anyone who visits your site. This data is then sent back to the Google servers and stored in your Google Analytics profile. From there, you can determine what type of information that you want to look at.The two features of Google Analytics that are often most useful to new users is the ability to track where customers are coming from, and the ability to see keywords that have been effective in drawing in audiences.
Traffic Origins
Open up your Google Analytics dashboard and click on 'Acquisition'. You should see a few options, but you want to pull 'All Referrals' so that you can the entire list of visitors.Next to the referral path will show a few links with a number of how many people visited your site from that link. From here you can click on the link and find out the reason for the traffic. Maybe someone has written a review on the service, you can check to see if the advertisement campaign you are operating is producing results.
Keywords
Within the same 'Acquisition' directory is another option called 'Search Engine Optimization'. Click on this link and then click on 'Queries' to look up a list of keywords being used to describe your site. The dashboard will display an overview of up to 1,000 words or phrases used on Google that brought new visitors to your site. You can use this information to modify your posts and producing content to increase the results of certain key phrases that you feel would benefit your customer outreach.Demographics
Underneath the audience tab, you can also track demographics. This little option will allow you to view the age, gender, and interests of individual users and segments of your visiting population. Say for example you run a senior care facility for the retired and want to put together a A/B split test to determine which advertising campaign works best. After adding the campaign to a landing page or section of your site, you can look back and find out if retired citizens are the ones responding to your ads, or if you are just bringing in traffic from younger generations who may not be interested in your services.Custom Campaign Tagging
Custom campaign tagging is more of an advanced feature, but once you get used to the Google Analytics interface, you can use this to separate your campaigns and easily filter through data. Maybe you just want to find out who is coming to your site from your email newsletters, and not from the general site. Google Analytics will allow you to post special links to your content on those channels of communication and then view these results under the acquisition tab and then campaigns.Determining What Works, and What Doesn't
Using the tools that Google Analytics provides at your disposal allows you to really determine what type of experience you want to provide your customers. Within the first month of use, if start to see trends or patterns in data that you feel you feel you can improve upon, you can use this information as a guide to edit your sites design and layout.Getting used to the program might seem overwhelming at first, but once you jump right in and start playing around all the features, you'll get the hang of it in no time. Google Analytics really is an important tool that every website owner should have.
Subscribe to:
Posts (Atom)