How to center gadgets in Blogger

<b>This article is about centering gadgets from 3rd parties that you install onto your blog.</b> <br /><br /><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIn6e8XuLWidDPiWjR2cOGEyhl38yLSnxl_fA2_CRgAEDLvpAdOZ586Scoe3vBzcL8BHyRWq8Mn-vopjh0wB7PUYQqNhvU5XssNB7pXaSoYfMqNra_BwqdBFuE8FjLe2EH6BI2rKTgQ4/s1600/center-align-put-gaget-in-the-middle-of-header-footer-or-sidebar.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIn6e8XuLWidDPiWjR2cOGEyhl38yLSnxl_fA2_CRgAEDLvpAdOZ586Scoe3vBzcL8BHyRWq8Mn-vopjh0wB7PUYQqNhvU5XssNB7pXaSoYfMqNra_BwqdBFuE8FjLe2EH6BI2rKTgQ4/s200/center-align-put-gaget-in-the-middle-of-header-footer-or-sidebar.png" width="200" /></a></div>Previously, I've described <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">how to put HTML code from a 3rd party into your blog</a>.<br /><br />When code like this is<a href="http://blogger-hints-and-tips.blogspot.com/2012/03/adding-gadget-to-your-blog-using.html"> put into a gadget</a>, one common question is "how do I center it?"<br /><br />There are (at least) three options for doing this, ie for putting a gadget into the middle (horizontally) of the area it is located in.   These are described below.<br /><br /><br /><h2>Option 1: Centre all the gadgets in your blog</h2>To center-align every single gadget in your blog, just, <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">add a CSS rule to your blog</a>.  The rule to add is:<br /><blockquote style="background-color: #ead1dc;">.widget {<br />  text-align: center;<br />} </blockquote><br />This will centre the <i><b>contents and title</b></i> of every gadget on your blog.<br /><br /><br /><h2>Option 2: Only center-align the specific gadget</h2>To only centre-align one gadget, which is made from HTML/Javascript code, you can just put the gadget-code from the 3rd party (eg PayPal, Amazon, etc) inside a centering statement, like this:<br /><br /><blockquote style="background-color: #ead1dc;"><div style="text-align: center;"><br /><br />PUT THE CODE FROM THE 3RD PARTY HERE<br /><br /></div></blockquote>Install the code into your blog the way you would usually <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html" target="_blank">install this 3rd party code</a>.<br /><br />This will centre-align the contents (not title) of the specific gadget that you add.<br /><br />Note the American spelling of the word "<b>center</b>" - and don't forget to put the closing </div> statement at the end.<br /><br />There may be some gadgets where it would be possible to add the centring statement to the gadget code itself, rather than putting it outside.    I don't recommend this (unless you're so comfortable with HTML and CSS that you don't need to be reading this article), because it introduces a risk that you will interfere with some other aspect, or that you will lose the centering if you ever need to refresh the code.<br /><br /><br /><h2>Option 3 - Make a new style rule just for the gadget</h2>If you only want to centre one (or several) gadgets - not all of them - then it's best to define a new style that is to be used on specific gadgets:  <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">put this new style into your template</a>, and then apply it to the gadgets like this.<br /><blockquote style="background-color: #ead1dc;"><div style="background-color: #ead1dc;"><div class="YourNewSytle"></div><div style="background-color: #ead1dc;"><br /></div><div style="background-color: #ead1dc;">PUT THE CODE FROM THE 3RD PARTY HERE</div><div style="background-color: #ead1dc;"><br /></div><span style="background-color: #ead1dc;"></div></span></blockquote><br />This approach will only centre the gadget contents - not any header that you give to it.<br /><br />There are lots of options that you could put into the new style rule, but at a minimum it needs to have<br /><blockquote style="background-color: #ead1dc;"><b>.</b>YourNewStyle<br />{<br />  text-align: center;<br />}</blockquote>Notice that there is a "." (ie a full-stop) before the name of your new style.<br /><br />Also, it's best not to use a number as the style-name (eg "2nd-gadgetStyle"), because this doesn't work with some browsers.<br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting HTML code from a 3rd party into your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS style into your template</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/centering-header-in-your-blog.html">Centering the header in your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/12/putting-gadget-above-your-blogs-header.html">Putting a gadget above your blog's header</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">Removing the attribution gadget from Designer-template blogs</a>  <br /><br />

How to center gadgets in Blogger

This article is about centering gadgets from 3rd parties that you install onto your blog. Previously, I've described how to put HTML c...

Read more »

Lining up the first post and the sidebar

<b>In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and the sidebar are not aligned.  This article explains how to adjust the gap, and so remove the problem</b><b>.</b><br /><b><br /></b> <b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidlUqYwxoWRJXAmuZUbjvPOujRDNc8sLZt0KetE1lAtlydwSb9bOu3i-OzmPi_4OvhlEgLAgHBeXbTeHpTMFWbgCckVOAITJqeYSsH8f9Ov7Wn9ss7CTd1TX6UndHwX2Vhddewwgvhq7w/s1600/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidlUqYwxoWRJXAmuZUbjvPOujRDNc8sLZt0KetE1lAtlydwSb9bOu3i-OzmPi_4OvhlEgLAgHBeXbTeHpTMFWbgCckVOAITJqeYSsH8f9Ov7Wn9ss7CTd1TX6UndHwX2Vhddewwgvhq7w/s320/gap-between-header-and-post-heading-layout-reduction-mind-the-gap.png" width="320" /></a></div>In the <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">themes that Blogger provides</a>, as well as all third-party themes, the amount of space between elements on the screen is not accidental:   designers put a <b><i>lot</i></b> of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports.<br /><br />But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">disadvantages of editing your theme</a>, and if  you can work out exactly which part of the template code to change.<br /><br /><br /><h2>The pre-Header gap</h2>A pet-hate of mine is the blank space above the first post in many Designer themes, which looks strange unless you put something else in to the space.  In the example below, there is an <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-adsense-on-your-blog.html">AdSense</a> link-unit in the area highlighted in red, just to fill in the empty space:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1g_kX2gYKYtli7d_9OFVWHsesVBuEGCcUDO8fCBe65TNEbauNme4vRh26YBg9XD8W7C8u_JPIeDKb_AQhKNF0wZwt0jm3_PCvWwN9_tYMEmL1MybZfgSfglCus5HSNyyoGtEQtAzv_eGu/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img al="picture of blog screen with a big empty gap above the first post header" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1g_kX2gYKYtli7d_9OFVWHsesVBuEGCcUDO8fCBe65TNEbauNme4vRh26YBg9XD8W7C8u_JPIeDKb_AQhKNF0wZwt0jm3_PCvWwN9_tYMEmL1MybZfgSfglCus5HSNyyoGtEQtAzv_eGu/" width="90%"></a></div><br /><div class="separator" style="clear: both; text-align: center;"></div><br /><br /><h2>How to change the gap above the post header in Designer themes</h2>1  <a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html"><b>Edit</b> your theme</a>  in the usual way.<br /><br />2  <b>Find</b> this code<br /><blockquote style="background-color: #ead1dc;"><span class="Apple-style-span">h3.post-title, .comments h4 {<br />  font: $(post.title.font);<br />  <b>margin: .75em 0 0</b>;<br />}</span></blockquote>The exact numbers used in your template may be different:  the key thing is to find the CSS command that is putting a margin above the post header.  In the template that I took this example from (Simple), it's the "0.75em" - which puts 75% of the space of a the post-header characters as a blank space above the header.<br /><br /><br />3   <b>Change the <i>first</i> margin value to get the result you want</b><br />How much to change it by depends on your template, but in some cases I've used 0 successfully.<br /><br /><b>What the numbers mean</b><br />In CSS, when a margin statement has three numbers beside it, they refer to the<br /><ul><li>top, </li><li>left-and-right, </li><li>bottom </li></ul>margins respectively.   So if you want to do something else to the post-header, eg indent it, this is the place to make changes<br /><br /><br />4   Click <b>Preview</b> to see what the blog will look like - keep doing this until you get the right setting.<br /><br /><br />5   When you are happy with the spacing, click <b>Save Theme</b> to apply the changes to your blog.   (Or Clear Edits if you cannot get it right and need to stop trying).<br /><br /><br />Note:  If you make a big change to your theme, it's a good idea to check out out in at least one version of the other browsers that your readers use - usually means current versions of Internet Explorer, Firefox and Chrome.   But it may depend on your niche - a tool like <a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Google Analytics</a> will give you some statistics about what browsers, and screen sizes, your visitors have.<br /><br />Also, it is possible to make this change by just <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">installing a new CSS rule</a> for h3.post-title into your blog - because the latest one found is always the one used, and because the template designer's Add CSS function puts the rules you add after the othr rules.   I don't recommend it here, though, because working with the original rule makes it easier to see the effect of making changes to any of the values in the area.<br /><br /><br /><h2>Other affected spacing</h2>If you have more than one post per page, then this change will also reduce the amount of space between the bottom of one post and the header of the next one.   Depending on your theme, you want want to add a little more space into the margin statement in the <b><i>bottom</i></b> of the post-footer, eg<br /><blockquote style="background-color: #ead1dc;"><span class="Apple-style-span">.post-footer {<br />  margin: 20px -2px <b><i>20</i></b>;<br />  padding: 5px 10px;<br />}</span></blockquote><br />If you display comments in your blog, you also need to check the impact on comments, because the original command applied to h4 items in comments as well.<br /><br />If you are making a lot of changes, you may want to <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">make a test blog</a>, and <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">plan your changes in private</a> before applying them to your main blog.<br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2011/02/setting-up-google-analytics-for-your.html">Setting up Google Analytics to get statistics about for your visitors</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your blog's theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Advantages and disadvantages of editing your theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/what-template-does-your-blog-use-quick.html">Who did your blogger theme come from - the quick way of finding out</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/05/making-test-blog-for-planning-template.html">Making a test-blog for template changes</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">Planning changes to your blog in private</a>

Lining up the first post and the sidebar

In some Blogger themes, there is a big gap between the bottom of the header and the start of the first post, which means that the posts and ...

Read more »

CSS Rollover Image Effect - Change Image on Hover

<b>Rollover image</b> is a design feature where an image changes when your mouse hovers over it. Think of a light bulb that turns on and off when you move your mouse cursor into that area of a page. When a page is loading, rollover images are preloaded into it to ensure that the rollover effect is displayed quickly.<br/><br/>This used to be implemented <a href="http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html">using JavaScript</a>, which is fairly easy with just a small amount of script involved. To make rollover images functional, onmouseover and onmouseout attributes are used to a link tag. The code is then added to a blog gadget or into a new post. It proved to have a number of disadvantages, however, which is why many web developers are using a CSS-only method.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="css rollover image" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcI2nrtQX_FMcRfPJUBe-dtp3JdH4CqUwnACzgkzJXpGPnkNTLd_ulfCDwOK0-MhqoedWtdXsv_M7IT5Gtcb0a9o3BE2maxpVfqwGwlbAUoTKmFmizSjzJ2_1JhCqu_vZEkkcKncBBNVaf/s200/css-rollover-image-change-on-hover.png" title="CSS Rollover Image Effect" width="200"/></div><br/><h2>How to create a rollover image using CSS</h2>Here is how to implement a <b>rollover image</b> using CSS. Before getting started, we need to have two images ready, one in its initial/static state as well as its rollover state.<br/><br/><h4>The Image</h4>Place both the static and <b>rollover image</b> in one file and make sure that the rollover image is placed on top of the static one. To achieve the rollover effect, we'll write a code to display the static image and crop the hover image, so that only one image state is displayed at a time.<br/><br/>For this tutorial, we'll use the following as a CSS rollover image.<br/><br/><div class="separator" style="clear: both; text-align: center;"><img alt="html rollover image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixyfM-mGG43h8daD9xJoAdr_pigF02Ucm-TVZc4ik6IP_eeGbBcaf9Fm-5SeUTtEzkXamgtpQ3I7cgbR6ykaNoWRyDssMHPLNHED4rDU3_z8QD5f6q44BIJ7_8D-HxamaohnTjv7skGCsB/s180/rollover-image-light-bulb-on-off.png" title="CSS Rollover Image "/></div><br/><h4>Creating an HTML Anchor Element for our Image</h4>Instead of adding the image file in a <img> tag, we'll display it as a background image of an </a> (anchor) tag. Here's the HTML that we need to add:<br/><blockquote class="tr_bq"><a class="rolloverimage" href="<span style="color: blue;">#URL</span>">Rollover Image</a></blockquote>Note: if you want to make the image clickable, replace <span style="color: blue;">#URL</span> with the url of the webpage where you want the link to point to.<br/><br/><h4>Using CSS to Set a Background Image</h4>To create the mouseover image effect, we'll use the :hover CSS pseudo-class. Then, we'll use the background-position property and set the values to 0 0 to move the background image to the upper left corner which will create the rollover effect. <br/><blockquote class="tr_bq"><style type="text/css"><br/>.rolloverimage{<br/>display: block;<br/>width: <span style="color: #cc0000;">56px</span>;<br/>height: <span style="color: #cc0000;">90px</span>;<br/>background: url('<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixyfM-mGG43h8daD9xJoAdr_pigF02Ucm-TVZc4ik6IP_eeGbBcaf9Fm-5SeUTtEzkXamgtpQ3I7cgbR6ykaNoWRyDssMHPLNHED4rDU3_z8QD5f6q44BIJ7_8D-HxamaohnTjv7skGCsB/s180/rollover-image-light-bulb-on-off.png</span>') bottom;<br/>text-indent: -99999px;<br/>}<br/>.rolloverimage:hover{<br/>background-position: 0 0;<br/>}<br/></style></blockquote>Note: Replace the text in blue with the url of your image file. Please pay attention on the width and height values marked in red, these should be different depending on your file, where the height value is for only one image and not the entire image file!<br/><br/><h4>The result</h4>Hover your mouse cursor over the light bulb to see the rollover image effect in action:<br/><br/><a class="rolloverimage" href="javascript:alert('What separates design from art is that design is meant to be... functional - Cameron Moll');">Rollover Image</a><style type="text/css">.rolloverimage{display: block;width: 56px;height: 90px;margin:1em auto;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixyfM-mGG43h8daD9xJoAdr_pigF02Ucm-TVZc4ik6IP_eeGbBcaf9Fm-5SeUTtEzkXamgtpQ3I7cgbR6ykaNoWRyDssMHPLNHED4rDU3_z8QD5f6q44BIJ7_8D-HxamaohnTjv7skGCsB/s180/rollover-image-light-bulb-on-off.png') bottom;text-indent: -99999px;transition:all 0s ease 0s !important;}.rolloverimage:hover{background-position: 0 0;}</style><br/><br/><h3>Adding Rollover Image to Blogger</h3>To add the rollover image as a gadget: copy both the HTML/CSS codes and go to 'Layout', click on the 'Add a Gadget' link > select HTML/JavaScript, then paste the codes in the 'Content' box.<br/><br/>Or, if you want to add it inside one of your posts, when you create a New Post, switch to the 'HTML' tab and paste the codes inside the empty box.<br/><br/>And this is how you make images swap on mouseover using CSS. Enjoy!

CSS Rollover Image Effect - Change Image on Hover

Rollover image is a design feature where an image changes when your mouse hovers over it. Think of a light bulb that turns on and off when ...

Read more »

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.<br /><br /><h3>Things To Think About</h3>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:<br /><br /><h4>Site Loading Speed</h4>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.<br /><br />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.<br /><br /><h4>File Storage Affects SEO</h4>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.<br /><br />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.<br /><br /><h4>Storage Locations Affect Editing Abilities</h4>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.<br /><br />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.<br /><br />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.<br /><br /><h2>Storing Javascript/CSS Files With Google Drive</h2>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.<br /><br />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.<br /><br />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.<br /><br />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.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="host blogger css javascript files" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEganGI312O9RMIYrAGSy_eEvXHqYyzcfKsKDuJDKEGGLaIvrq7RpENZqKBK9DVVNGXim7QBURNN8QQ-qRtGgj6zNnMH7GZ8WUFgFUgpbXAdOeW6QwHnP9dAYUokQBKycbYM6zqtVbXQEfvI/s1600/host-blogger-javascript-css-files-externally-using-google-drive.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive" width="320" /></div><br /><h3>Step 1. Prepare the CSS/JavaScript Files</h3><ul><li>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). </li></ul><ul><li>In the Notepad menu, select 'File' > 'Save as' and type the file name with the <span style="background-color: yellow;">.css</span> extension just like I did with mycssfile.css - see the screenshot below.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="create a css file" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSoELfFEeVobKUiJCc6Ff4cmeYGnK5vCh-hCzZdYvhtNWmfWzn9lSWgbXdsxOps9ynhRTXEKHEfp4bp3xH-vg0GyS801yo_w1_RWt3AFo_qJyFyI0zfKEEyLmW_iG30oCAAPF7mB-MFR3_/s640/create-a-css-style-sheet-file.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 1" width="640" /></div><ul><li>In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.</li></ul><ul><li>If you want to host a JavaScript file, add the <span style="background-color: yellow;">.js</span> 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.</li></ul><h3>Step 2. Upload Your File on Google Drive</h3><ul><li>Access <a href="https://drive.google.com/" rel="nofollow" target="_blank">https://drive.google.com</a> 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.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="create folder in Google drive" border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBwI1C8msNAKq36RyxlxBBqjg720pbtC-BNAnYepKKxpgVoJnS7q3H8D8DQW3lq4VpcJYxt0VkUIgZshyphenhyphen_mnInOooIXqDW44QKSuaLAQu8FNce5On52oeUTEGGRL7BlasAvUMVtWYThxaJ/s1600/google-drive-create-folder.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 2" width="640" /></div><ul><li>Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload. </li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="upload files using google drive" border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinK4z2ugyu92Szwmk-wSWmN5wZH7ocJCJCBRjCGBjA_OHldVHJDgeCzsbMKma3h40n_AkTA5Zt_L3Ts9JH7sZRXUrOFJB3ZuLsduppxgQ7MQ6cyGDze4i3CDgxcf7oU3-L9iFlTVSA6cch/s1600/upload-css-javascript-files-using-google-drive.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 3" width="640" /></div><ul><li>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.</li></ul><ul><li>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': </li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="share google drive files" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7cWFEB79hPZ4xeO313k70C24eEux_IXtK2MRduyV0FQDdVyUeImPEnxzKYvadg9Em-JVnL_iyBQEt-YYa-G2fFCoB028f9GuGLmVc1m58I_AVzQop4dQzLm7XhJqtHcl7v2XZY8mdPJE/s1600/share-google-drive-css-javascript-files.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 4" width="640" /></div><ul><li>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.</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="javascript css file sharing" border="0" height="422" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiocZTxGa1gL5IULhpYEfZ4jic4ROOaCZMN-yHZjUJ5BMU8q3vBe_bDNNBgTNr5nnaSWOhcSgtZO0MEnqdkOb7x-xXpLs2qF94lnmv7rLScPq3OnPxmLgwZ2WbUaD5gv4j-VRZPwjHF-yHk/s1600/google-drive-link-sharing-public-on-the-web.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 5" width="640" /></div><br /><h3>Step 3. How to Add an External CSS/JavaScript file to Blogger</h3>Before you can use the links, you must replace '<b>https://drive.google.com/file/d</b>' to '<b>https://googledrive.com/host</b>' and remove '<b>/edit?usp=sharing</b>' in the link.<br /><br />For example, the link to mycssfile.css that I copied looks like this:<br /><blockquote>https://drive.google.com/file/d/<span style="color: blue;">0B4n9GL3eVuV-TkphMkc3SFR2Slk</span>/edit?usp=sharing</blockquote>Notice 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:<br /><blockquote>https://googledrive.com/host/</blockquote>Add the file ID like this (remove the '<span style="color: blue;"></span>/edit?usp=sharing' part):<br /><blockquote>https://googledrive.com/host/<span style="color: blue;">0B4n9GL3eVuV-TkphMkc3SFR2Slk</span></blockquote>Now 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:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="open blogger search box" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl+f.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 6" width="640" /></div><br />If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq"><head></blockquote>Just BELOW the <head> tag, add this line:<br /><blockquote class="tr_bq"><link rel="stylesheet" type="text/css" href="<span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk</span>" /></blockquote>And replace <span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk</span> with the link of your CSS file:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add external css to blogger" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJtQq_nPCCWIGpORoRGSZ3w95UzIWSWAuR5PKv3tVypt2Qmbc4ucC58yhTz4KIUtl9V2H21vqMuF-QxnzUi8UXpKEKrL0V1QYa4mkM5vX5b5lTTjHYe0INJ-BQulGPaL-Ci7f84shXovi/s1600/add-external-css-style-sheet-file-to-blogger.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 7" width="640" /></div><br />If you want to add a Javascript file, search for the following tag:<br /><blockquote class="tr_bq"></body></blockquote>And add this line just ABOVE it:<br /><blockquote class="tr_bq"><script src='<span style="color: blue;">https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg</span>' type='text/javascript'></script></blockquote>Replace the line in blue with your URL:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add external javascript js to blogger" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi47fURX11xCUjPLfIgv9NXq6dWfkqMO2dWnj-MBk1CkvJXYrFd5kKBHCim1ANnpqJinktyCG3FdpJNfZysk6fDuyXHKnddPG_g3AtPWKEfcSxUnwGIcxIWZzciLnoMRjA-6J4Kdk8qvYKS/s1600/add-javascript-file-to-blogger-template.png" title="How To Host Blogger CSS and JavaScript Files in Google Drive 8" width="640" /></div><br />Finally, press the 'Save template' button to save the changes. And you're done!<br /><br /><h4>In Conclusion</h4>Once you have 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.<br /><br />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.<br /><br />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 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 s...

Read more »

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.<br /><br />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.<br /><br />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.<br /><br /><h2>Center Header Image with Blogger Template Designer</h2><br /><div class="separator" style="clear: both; text-align: center;"><img alt="center blogger header" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OI69v9GHf-YoFtgDdOe7VT1z0aj3vWxZDjR7nCr9VK0ai8oiCClCcYqNAIf0-RE-ktKrYYZQWBoUuTT6NemiuQP7mZyZz1FXtD6lwbbq27HQt2J7tMACrVQanPayuaU_MOdZKBjryJDa/s1600/center-blogger-header-image-title.png" title="How to Center the Blogger Header Image" width="600" /></div><br />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.<br /><br />Step 1. Log in your blogger account and select your blog, then go to "Template" and click the "Customize" button on the right side.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="center blogger header" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RuIf_WUIioDqlltTZpczVJwN2LhxZQB3I3sljQbZRcSlx6ducx-vWewdD3n0XR2jkkfhAvzgQsJGsMeQzDGdJuzmRY6W9SHeKYikwDEs8bclCE_yKXF19UrCTaneE_zr30iU8WjdHogv/s1600/add-css-blogger-template-customize.png" title="How to Center the Blogger Header Image 1" width="400" /></div><br />Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box:<br /><blockquote class="tr_bq">#header-inner {<br />background-position: center !important; <br />width: 100% !important;<br />text-align: center;<br />}<br />#header-inner img {<br />margin: auto;<br />}</blockquote>If you have a small image and you want it to become <a href="http://helplogger.blogspot.com/2014/08/blogger-header-footer-full-width.html">full width</a>, add this CSS instead:<br /><blockquote class="tr_bq">#header-inner {<br /> background-size: cover;<br /> width: 100% !important;<br /> text-align: center;<br /> }<br /> #header-inner img {<br /> width: 100%;<br /> height: 100%;<br /> }</blockquote><br />Step 3. Hit the ENTER key after you paste the code snippet, then click the "Apply to Blog" button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger header centered" border="0" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqIfwMIv6tROcuDdxRz8EKVSQQjgK4mf4QGP1n-aCVvHiqkrTFAgdVK5dlF6jQAmHjpD7JXQvkoozM9cvmUoJIb_QngLAJQNT9pyZQvxH_lFMSiyPGWNehosqimffYx4g6WP0toM4DQR8H/s1600/advanced-add-css-header-inner-center-blogger.png" title="How to Center the Blogger Header Image 2" width="600" /></div><br />Here are some other aligning options for your headers:<br /><br /><h3>Align Blogger Header Banner and Text Side by Side</h3><h4>Image on the right and title on the left</h4><blockquote class="tr_bq">#header-inner {<br />background-position: right !important; <br />width: 100% !important;<br />} <br />.titlewrapper, .descriptionwrapper {<br />float: left;<br />clear: both;<br />margin-left: 20px;<br />}</blockquote><h4>Image on the left and title on the right</h4><blockquote class="tr_bq">#header-inner {<br />background-position: left !important; <br />width: 100% !important;<br />} <br />.titlewrapper, .descriptionwrapper {<br />float: right;<br />clear: both;<br />margin-right: 20px;<br />}</blockquote>Note: for larger images, you may need to resize them in order to make them appear side by side with the text.<br /><br /><h5>That's it!</h5>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.<br /><br />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.<br /><br />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 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 blo...

Read more »

Make Blogger Header, Navigation and Footer Full Width

Blogger is a user-friendly service that provides a lot of really attractive looking default templates for those just starting out. Default templates come in handy, but the nice things about owning your own blog is that you have the chance to add your own personal touch. As a matter of fact, templates aren't made to restrict your freedom of design, but instead they're there to provide you a foundation to build from. With every default template available on Blogger, you can make changes to fit your style.<br /><br />One of the most common requests out of the Blogger community when making alterations is <a href="http://helplogger.blogspot.com/2014/08/how-to-center-blogger-header-image.html">how to change the look of some of the key sections like header</a>, navigation, and footer. Initially, these items are designed to fit within just 1/3 of the page, surrounded by padding and margins on either side. These margins are used to give the page a slim fitting appearance, but could also cause your content to look compressed.<br /><br /><h4>Important: Backup your Template</h4>Making the changes to a full screen Blogger navigation, footer, or header can be done and won't take you much time. Before you can make any changes, you should save extra copies of the template .xml file in case anything goes wrong. That way, if you don't like it or it doesn't come out looking like it should, you can reuse the contents of the original file to restore your blog to working condition.<br /><div class="ssmainhide"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJjGGWvCOOnUhRsbwkWuIFF9qakkJE39AhMolv2HvFfJGzNupyqWoY5Y7qGVQJAYjLeMe9AtLQjuExr7YnCPDOs0SDuvz_sioGxMe7-bvP64ZH1ToiH4YPtTLvbyzdHLu1vH-FiObl_ohH/s320/make-blogger-header-full-width-2.png" /></div><br /><h4>Demo</h4>Hover your mouse over the image to see a before and after example:<br /><br /><div style="text-align: center;"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_fSE3kaGFyr9XQAk03OBHrO092ecIMfE0EuRVDM0e7DrKVYjgT5V9rA776q0llLY5tbFd96pNgsI9RC5B3wdWWf3TK78sYKd1NEgaatVJon62RwAMEDmT2wewi8ywxnkJd_Ts8Kug5Ps/s1600/make-blogger-header-full-width.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjlsh5ddp_JPCBXg8Fc2JY7rYxoZ21BVkdynaYXBQaFMhyphenhyphent0_4WS41irbtmRmL4gX9K1RL3WuWrNPIZONSsSjPN89T9fiheB4S7eLfoOD9cIfmm4Z83ZO6komKW01cATbq6dFqUPPgKa7/s1600/make-blogger-header-full-width-2.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_fSE3kaGFyr9XQAk03OBHrO092ecIMfE0EuRVDM0e7DrKVYjgT5V9rA776q0llLY5tbFd96pNgsI9RC5B3wdWWf3TK78sYKd1NEgaatVJon62RwAMEDmT2wewi8ywxnkJd_Ts8Kug5Ps/s1600/make-blogger-header-full-width.png" /></div><br /><h2>How to Make Header, Navigation and Footer Full Width in Blogger</h2><h3>Step #1: Access Your CSS File</h3>If you've never opened up your CSS file before, log in to your Blogger account, select your blog and navigate to Template > Edit HTML. This will bring up the code of your template containing all your blog's internal files in one place.<br /><br /><h3>Step #2: Modify the Background</h3>Click anywhere inside the code area > press CTRL + F keys and type the following line > hit Enter to find it (stop at the first occurrence of it):<br /><blockquote class="tr_bq">body {</blockquote>Just below <span style="background-color: yellow;">body {</span> you should see some lines that will look like this:<br /><blockquote class="tr_bq">body {<br />font: $(body.font);<br />color: $(body.text.color);<br />background: $(body.background);<br /><span style="color: #cc0000;">padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);</span><br />$(body.background.override)<br />}</blockquote>Where you see the highlighted line above in the code, remove the line and replace it with:<br /><blockquote class="tr_bq">padding: 0px;</blockquote>Different templates will have minor variations, but you should still be able to find these lines within every template.<br /><br /><h3>Step #3: Change the Content Section</h3>Next, search using the CTRL+F keys for this part:<br /><blockquote class="tr_bq">.content-inner {</blockquote>Just below it, you will see this line: <br /><blockquote class="tr_bq">.content-inner {<br /><span style="color: #cc0000;">padding: $(content.padding) $(content.padding.horizontal); </span><br />}</blockquote>Remove the line in red and replace it with:<br /><blockquote class="tr_bq">padding: 0px;</blockquote>This will remove any of the padding around the inner content, so it won't leave any room on both sides.<br /><br />Now find this part:<br /><blockquote>$(content.background.color.selector){</blockquote>Just below it you will see this line:<br /><blockquote class="tr_bq">$(content.background.color.selector){<br /><span style="color: #cc0000;">background-color: $(content.background.color);</span><br />}</blockquote>Replace the line in red with:<br /><blockquote>background-color: $(body.background);</blockquote>Finally, search for this tag:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>And just above it, add this CSS:<br /><blockquote class="tr_bq">.main-outer {<br />background: $(content.background.color);<br />}</blockquote><br /><h3>Step #4: Make the Content Outer Full Width</h3>Content is displayed differently between browsers, so you'll next want to fix this so that it alters the width across the board. This code can be found searching for:<br /><blockquote class="tr_bq">.content-outer, .content-fauxcolumn-outer, .region-inner {</blockquote>And just below it you will see the following lines: <br /><blockquote class="tr_bq">.content-outer, .content-fauxcolumn-outer, .region-inner {<br />min-width: $(content.width);<br /><span style="color: #cc0000;">max-width: $(content.width);</span><br />_width: $(content.width);<br />}</blockquote>Delete the line in red and replace that line with:<br /><blockquote class="tr_bq">max-width: 100%;</blockquote><br /><h3>Step #5: Finish It Up</h3>Now you have just two more lines you need to change. Look for:<br /><blockquote class="tr_bq"></b:template-skin></blockquote>And click on the right arrow to expand the styles. Note: you will need to search for </b:template-skin> tag again, and just before it you'll see these symbols highlighted in yellow:<br /><blockquote class="tr_bq"><span style="background-color: yellow;">]]></span><br /></b:template-skin></blockquote>Above this <span style="background-color: yellow;">]]></b:template-skin></span> section of code, add the following:<br /><blockquote class="tr_bq">.main-outer {<br />max-width: $(content.width);<br />margin: 0 auto;<br />}</blockquote>Then run a search for:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Add these lines of code just before/above it:<br /><blockquote class="tr_bq">.tabs-inner {<br />padding: 0px;<br />}<br />.section {<br />margin: 0px;<br />}<br />.header-inner .widget {<br />margin: 0px;<br />}</blockquote>Save the template and exit out of the editor.<br /><br /><h4>Finished!</h4>Following along with this tutorial won't affect or alter the pictures you are using on the blog, just the design of the content area. If you have a logo that stretches across the screen and fits perfectly for 1/3 page header, you will need to resize and re-upload this content so that it is able to work with the new adjustments.

Make Blogger Header, Navigation and Footer Full Width

Blogger is a user-friendly service that provides a lot of really attractive looking default templates for those just starting out. Default t...

Read more »

Automatically Resize Blogger Images to Fit Blog Post Area

<div class="separator" style="clear: both; text-align: center;margin-bottom: 10px;"><img alt="resize blogger images automatically" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhSSN7iAb6AXxvMfd9HcGfT9zXXspTROIopUFXivfD0oy6RYgXEY2Hq8RtG1auGUPyJCemNa24szeOSwhC8MGobMhtt1vQOhnCvMor9s076Wu_kHV8tBSzcT2EJw-dvb0wO8l6Z9TLxvK/s1600/blogger-image-size-resize.png" style="border-radius: 10px;" title="Automatically Resize Blogger Images to Fit Blog Post Area" /></div>Blogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are attempting to produce.<br /><br />In order to do this, create a post and click on the small photo icon on the top toolbar next to the font style settings. A pop-up will show up on your screen asking you where you'd like to upload the image source. You have a choice between adding pictures from:<br /><ul><li>Your local computer</li><li>Previously uploaded images on the blog</li><li>Picasa Web Albums</li><li>An image URL</li></ul><div class="separator" style="clear: both; text-align: center;"><img alt="upload blogger image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrWJfzdHJZfeLItbucx8s3jE2MBUliASiAnY8lZYEFTlfz9Qz4Ch_QIdOYQ_p_QFBas8rcRO-tpPt7BAm0Q9dld4o_2_lURovbtXNpllAsCXNrwFqAR5Pa7vab2amRV0Zz5nI5eAE3gOb/s1600/upload-blogger-images-and-resize-width.png" title="Automatically Resize Blogger Images to Fit Blog Post Area 1" /></div><br />Once you select the image that you want to use, you'll see four image sizes to choose from - small, medium, large, and x-large; it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome you desire, there are easy ways to resize Blogger images to custom dimensions in order to fit your blog post area.<br /><br /><h3>Step #1: Retain the Image Quality</h3>If you know that you are going to need to resize Blogger images once you post them to your blog, make sure that you start with a photo larger than the 640px dimensions of the x-large option. It's easy to bring an image down in size, but if you try to make a small image bigger, you'll lose some of the quality. Just make sure that you watch out for the <a href="http://helplogger.blogspot.com/2014/07/blogger-seo-image-optimization.html">file size containing the image</a>; the larger the file, the slower it will load on your website.<br /><br />Photoshop is a powerful image editor that can help you to resize Blogger images or modify your images before you post, but it is also an expensive investment. There are also many other freeware image editors that can perform the simple task of resizing the photo. Determine what size you'd like the photo to display on the page and manually resize Blogger images to those dimensions; other users have found that 700px is a pretty flexible width size that works well on posts.<br /><br />Once you've got your photo resized and added to your post, click on it and choose the 'Original size' option. If your photos are going to exceed the post editor, it probably means that they are larger than the body of your post, so let's fix that and make them fit exactly. <br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="set image to original size" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDh-LMf3t_ygPC4sJAz1LeelX_u0464jZoZa0i4PTuN92WCU_2xFQLFtmZojW4pU9VQMrA8bnTOaTFJ4QVyC1yJWkeXdl4oFgFnrxGUv3jCFC-GCJ3-5cy93us_N3sPwTabCg9thtKnhS/s1600/blogger-image-original-size-too-wide-big.png" title="Automatically Resize Blogger Images to Fit Blog Post Area 2" /></div><br /><h3>Step #2: Modify The Site's CSS</h3>Next, you'll want to modify the CSS of your Blogger template to accommodate the adjustments. Don't worry; you won't need much coding experience to complete this task.<br /><br />Open up the Blogger dashboard and go to 'Template' > 'Customize'. You'll see the option for 'Advanced', click on it and find your way to the 'Add CSS' tab... paste the following CSS code inside the empty box:<br /><blockquote class="tr_bq">.post-body img {<br />max-width: 100%;<br />max-height: auto;<br />display: block;<br />margin: auto; <br />}</blockquote>Adding the code to this section, automatically adds it between the <span style="background-color: yellow;"><b:skin>....<b:skin></span> tags of your Template (Template > Edit HTML, above the <span style="background-color: yellow;">]]></b:skin></span> tag). So, no matter whether you add it above ]]></b:skin> or within the Add CSS box, the effect should be the same.<br /><br />Remember that when you make changes to the CSS of the blog's Template, these changes will affect every post previously added, using the "Original size" dimension option.<br /><br />To spruce up the post even more, add the last three lines shown in green below:<br /><blockquote class="tr_bq">.post-body img {<br />max-width: 100%;<br />max-height: auto;<br />display: block;<br />margin: auto; <br /><span style="color: #38761d;"><b>box-shadow: none;</b></span><br /><span style="color: #38761d;"><b>border: none;</b></span><br /><span style="color: #38761d;"><b>padding: 0px; </b></span><br />}</blockquote><br /><div class="separator" style="clear: both; text-align: center;"><img alt="resize blogger pictures" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaApbj523l5Q8kpIbZ4_Red4yBprtEx3JSmZpel-qsw5KtORixEs_ua0JTnRztI90rxc3DpoAgKPGMZnK5qKQloC7JPMZ_MWHCibbs5UhnoaxA473J4I1kfRPMiYGVkmwZupEiaNPrbpYc/s1600/automatically-resize-blogger-photos-with-css.png" title="Automatically Resize Blogger Images to Fit Blog Post Area 3" /></div><br />This code will get rid of any borders and padding around the image and give it a much more natural look within the post. Hit the "Apply to Blog" button once you've finished adding it.<br /><br />Note: This will only change the images set to Original size. To resize images with different sizes and apply this change on ALL the pictures added to your posts, add this CSS instead:<br /><blockquote class="tr_bq"><span style="color: #674ea7;">.post-body img {</span><br /><span style="color: #674ea7;">width:100%;</span><br /><span style="color: #674ea7;">height:100%;</span><br /><span style="color: #674ea7;">display: block;</span><br /><span style="color: #674ea7;">}</span></blockquote>Please consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.<br /><br /><h3>Step #3: Create A Post</h3>After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 1 to add an image. When you return to the screen that asks for size, click on the "Original size" option and confirm your choice. Your newly added image will then be displayed with the adjustments that you created, so that it fits nicely the width of the post area.

Automatically Resize Blogger Images to Fit Blog Post Area

Blogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platf...

Read more »

Responsive CSS Timeline with 3D Effect for Blogger

Here's another amazing way to display the Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of our most recent posts with thumbnails, plus some cool CSS effects. When clicking on the associated radio input, the posts snippet/summary will expand by changing their style and size and will rotate in 3D. The main structure of this CSS timeline with 3D effect is an unordered list.<br /><br />To get an idea of how it looks like, you can visit this <a href="http://life-famous-quotes.blogspot.com/" rel="nofollow" target="_blank">demo blog</a>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="responsive CSS timeline, customize blogger posts" border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFg5uCcpAVyMRTJAjgR7Omv5DZvtZBPmxBhXLY00YpAubeWwteBdKpJ3l-5LhEi44WLPXAQtSDeTFL83Gfg8xV0vYrLy1QjXaScnjbao3jhHY8cwDFNwi80F60j1ZOrPkKPY_JLlH-8V8r/s1600/responsive-css-timeline-effect-for-blogger-posts.png" title="Responsive CSS Timeline with 3D Effect for Blogger Posts" width="640" /></div><br /><h2>How to Add Responsive CSS Timeline View to Blogger Posts </h2>Step 1. Go to <a href="http://www.blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a> > "Template" > click on the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template, edit html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="Responsive CSS Timeline with 3D Effect for Blogger Posts" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger search box" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8mV1AXRt-A5pMw2IqHtD9EyUsGWHNsVYhqt_PrEfR4EZMMmcuVzYRlAyVO87mRHPpnh9Bd23IXI8DzX0qZO2kwvwUUM6PluakhZy69vfqdrnHFJUs7QGrtpMs7Pt8oVSzTpeXgfZuRD3O/s1600/blogger-template-search-box.png" title="Responsive CSS Timeline with 3D Effect for Blogger Posts" width="320" /></div><br />Step 3. Type or paste the following tag inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq"></head></blockquote>Step 4. Just above the <span style="background-color: yellow;"></head></span> tag, copy and paste the following style:<br /><div class="code1"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><style type='text/css'><br />.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,<br />.BlogList .item-thumbnail img {padding: 0px; border: 0px;}<br />.post-footer {display: none;}<br />.post {margin-bottom: 50px; padding-bottom: 0px; background: none; border: none;}<br />.jump-link a {display: none;}<br />  h3.post-title a {display: none;}<br /> .date-header {display: none;}<br />*,<br />.timeline:after,<br />.timeline:before {box-sizing: border-box;padding: 0; margin: 0;}<br />.timeline {position: relative;padding: 30px 0 50px 0;font-family: Arial, sans-serif;}<br />.timeline:before {content: &#39;&#39;;position: absolute;width: 5px;height: 100%;margin:0px;top: 0;left: 200px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);}<br />.event {position: relative;margin-bottom: 80px;padding-right: 40px;}<br />.thumb {position: absolute; width: 90px; height: 90px;box-shadow:<br />        0 0 0 8px #87939E,<br />        0 1px 1px rgba(255,255,255,0.5);background-repeat: no-repeat;border-radius: 50%;-webkit-transform: scale(0.8) translateX(24px);-moz-transform: scale(0.8) translateX(24px);-o-transform: scale(0.8) translateX(24px);-ms-transform: scale(0.8) translateX(24px);transform: scale(0.8) translateX(24px);}<br />.thumb:before {content: &#39;&#39;;background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);position: absolute;height: 8px; z-index: -1; width: 50px;top: 42px; left: 100%;margin-left: 8px;<br />}<br />.thumb span {color: #87939E;width: 100%;text-align: center;font-weight: 700;font-size: 15px;text-transform: uppercase;position: absolute;bottom: -30px;}<br />.event label,.event input[type=&quot;radio&quot;] {width: 24px;height: 24px;left: 158px;top: 36px;position: absolute;display: block;}<br />.event input[type=&quot;radio&quot;] {opacity: 0;z-index: 10;cursor: pointer;}<br />.event label:after{content: &quot;\2713&quot;;background: #8995A1;border-radius: 50%;color: #fff;font-size: 20px;height: 100%;width: 100%;font-weight: bold;left: -2px;top: -3px;line-height: 24px;position: absolute;text-align: center;}<br />.content-perspective { margin-left: 230px;position: relative;perspective: 600px;-webkit-perspective: 600px;-moz-perspective: 600px;-o-perspective: 600px;-ms-perspective: 600px;}<br />.content-perspective:before { content: &#39;&#39;; width: 34px; left: -44px; top: 48px;position: absolute;height: 1px; z-index: -2;background: #fff;}<br />.post-content {transform: rotateY(10deg);transform-origin: 0 0;transform-style: preserve-3d;}<br />.blog-post-body {position: relative;padding: 20px;color: #333; border-left: 5px solid #8995A1;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #F9F9F9;}<br />.blog-post-body h3 {border: none;margin: 0px;}<br />.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #86919D;margin: 0px;text-decoration: none;border: none;}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 a{color: #F26328;}<br />.blog-post-body p,.thumb span,.event label {-webkit-backface-visibility: hidden;}<br />.blog-post-body p {font-size: 15px;max-height: 0px; overflow: hidden; color: rgba(0,0,0,0);text-align: left;}<br />.blog-post-body:before {content: &#39;\25c2&#39;;font-weight: normal; line-height: 86px; font-size: 86px;position: absolute;color: #8995A1; left: -41px;width: 100%;height: 100%; top: 3px;z-index: -1;}<br />.thumb,.thumb span,.blog-post-body h3 {transition: all 0.6s ease-in-out 0.2s;-webkit-transition: all 0.6s ease-in-out 0.2s;-moz-transition: all 0.6s ease-in-out 0.2s;-o-transition: all 0.6s ease-in-out 0.2s;-ms-transition: all 0.6s ease-in-out 0.2s;transition: all 0.6s ease-in-out 0.2s;}<br />.blog-post-body { transition: box-shadow 0.8s linear 0.2s;-webkit-transition: box-shadow 0.8s linear 0.2s;-moz-transition: box-shadow 0.8s linear 0.2s;-o-transition: box-shadow 0.8s linear  0.2s;-ms-transition: box-shadow 0.8s linear 0.2s;}<br />.post-content {transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;}<br />.blog-post-body p { transition: max-height 0.5s linear, color 0.3s linear;-webkit-transition: max-height 0.5s linear, color 0.3s linear;-moz-transition: max-height 0.5s linear, color 0.3s linear;-o-transition: max-height 0.5s linear, color 0.3s linear;-ms-transition: max-height 0.5s linear, color 0.3s linear;} <br />.event input[type=&quot;radio&quot;]:checked + label:after {content: &#39;\2714&#39;;color: #fff;background: #F26328;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective:before {background: #F26328;}<br /> .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 { color: #F26328;}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .post-content {transform: rotateY(-5deg);-webkit-transform: rotateY(-5deg);-moz-transform: rotateY(-5deg);-o-transform: rotateY(-5deg);-ms-transform: rotateY(-5deg);}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height: 460px; color: rgba(0,0,0,0.6); transition-delay: 0s, 0.6s;-webkit-transition-delay: 0s, 0.6s;-moz-transition-delay: 0s, 0.6s;-o-transition-delay: 0s, 0.6s;-ms-transition-delay: 0s, 0.6s;}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body:before {color: #F26328;}<br />.event input[type=&quot;radio&quot;]:checked ~ .thumb {transform: scale(1);box-shadow: 0 0 0 8px rgba(242,99,40,1), 0 1px 1px rgba(255,255,255,0.5); -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}<br />.event input[type=&quot;radio&quot;]:checked ~ .thumb span {color: #F26328;}<br />.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {<br />background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);}<br />@media screen and (max-width: 850px) {.blog-post-body h3 {font-size: 20px;}<br /> .blog-post-body p { font-size: 14px; text-align: justify; }<br /> .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p { max-height: 500px; }}<br />@media screen and (max-width: 540px) {.timeline:before { left: 50px;}<br />.event {padding-right: 0px; margin-bottom: 100px; }<br /> .thumb { transform: scale(0.8); -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);}<br /> .event input[type=&quot;radio&quot;] { width: 100px;height: 100px;left: 0px;top: 0px; }<br />.thumb:before,.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {background: none;width: 0;}<br /> .event label {display: none;}<br /> .content-perspective {margin-left: 0px;top: 80px;}<br /> .content-perspective:before {height: 0px; }<br /> .post-content { transform: rotateX(-10deg);-webkit-transform: rotateX(-10deg);-moz-transform: rotateX(-10deg);-o-transform: rotateX(-10deg);-ms-transform: rotateX(-10deg);}<br /> .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .post-content { transform: rotateX(10deg);-webkit-transform: rotateX(10deg);-moz-transform: rotateX(10deg);-o-transform: rotateX(10deg);-ms-transform: rotateX(10deg);}<br />.blog-post-body {border-left: none;border-top: 5px solid #8995A1;}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);}<br />.blog-post-body:before {content: &#39;\25b4&#39;;left: 33px; top: -32px;}<br />.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height:300px; }}<br />ul.timeline {list-style-type: none;}<br /></style> <br /></b:if><br /></b:if></div><br />Step 5. Search for the SECOND instance of this code below (hit Enter two times):<br /><blockquote class="tr_bq"><data:post.body/></blockquote>Note: depending on the template you are using, you could find more lines like this one above. Thus, if you don't see any changes after saving the template, try to replace the last one, as well.<br /><br />Also, please note that if you are using the Read more function, you will need to remove it in order to make it work.<br /><br />Step 6. After you found <span style="background-color: yellow;"><data:post.body/></span>, replace it this HTML code:<br /><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><ul class='timeline'><li class='event'><input checked='checked' name='tl-group' type='radio'/><label/><br /><b:if cond='data:post.thumbnailUrl'><img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></b:if><div class='thumb'><b:if cond='data:post.dateHeader'><span><data:post.dateHeader/></span></b:if></div><br /><div class='content-perspective'><div class='post-content'><div class='blog-post-body'><h3><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3><p><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><data:post.snippet/></b:if></b:if></p></div></div></div></li></ul></b:if></b:if><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></blockquote>Step 7. Finally, click on the "Save template" button to save the changes.<br /><br />Now, we will need to make some small adjustments in order to make the posts date appear correctly:<br />Go to "Layout" and click on the "Edit" link just below the Blog posts area. When the pop-up window appears, check the date option and choose to display the date in the following order (date/month/year):<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHPNTWITtVM3vVeCWOlwHLYZUt15Djbm08cjEPONgLgl_BSOp5wEeyi-ZBALSguUm1rMYBwz7CS4dtqQ9jOag2DSIsyInp64MDt7eTOn6he7jdjt3ygYGnugFvqcH0mc6jgWlnjGrzhz4/s1600/configure-blog-posts-on-blogger.png" width="320" /></div><br />Note that you can also hide the posts date by unchecking this option.<br /><br />Finally, click on the "Save" button and that's it! View your blog and enjoy this Responsive Timeline view with 3D Effect on Blogger posts.<br /><br />Credit: <a href="http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/" rel="nofollow" target="_blank">tympanus.net</a>

Responsive CSS Timeline with 3D Effect for Blogger

Here's another amazing way to display the Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogge...

Read more »

What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, in this post we will learn the differences between margin and padding CSS properties that are used to add space between the HTML elements, thus preventing the elements from getting 'stuck' together.<br /><br />Although both have similar functions, each work in a different way. <ol><li><b>Padding</b> determines the inner margins, being used for changing the distance between the content of a given element and its border.</li><li><b>Margin</b> is the space outside of an element affecting how far the element is away from other elements.</li></ol>For a better understanding of how the padding and margin work, take a look at the picture below:<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="padding and margin, css proprieties" border="0" height="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIFzTEwkKp7B_-ovvYo0Vydj1ve6KDf_jobTRgQkQUrIZC5M6W5y4-gWL4_kpGwPunYG9z0RCKKqJCyv0KDd5C6cu2YRamTdvsy6dD_YyjndDB2kGuD_FScpRL7OOWi65_ZDI6YoxfaSsL/s1600/difference-between-margin-padding-css-propriety-tutorial.png" title="What is the difference between padding and margin" width="500" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Difference between margin and padding</td></tr></tbody></table><br />Just as you have the option to define the borders for each side of your HTML elements (eg. borders for the sidebar), you can do the same with the <b>margin</b> and <b>padding properties</b>. All you need to to do is to change the top, right, bottom and left values​​.<br /><br />The values that you can use include: pixels (<b>px</b>), centimeters (<b>cm</b>), millimeters (<b>mm</b>). em units (<b>em</b>), x-height (<b>ex</b>), inches (<b>in</b>), picas (<b>pc</b>) and point sizes (<b>pt</b>).<br /><br />When using margin and padding, you need to add a value for each 4 corners of an element, as follows: top, right, bottom, left. Each value must refer to the each side of the HTML element. The first value is for the top, and they follow a clockwise direction, so the value would be close to the right, then bottom, and finally, left.<br /><br />Example 1:<br /><blockquote><b>padding</b>:<span style="color: #674ea7;"><b>5px</b></span> <span style="color: #b45f06;"><b>15px</b></span> <b><span style="color: #3d85c6;">5px</span></b> <span style="color: #cc0000;"><b>15px</b></span>;</blockquote><ul><li>top padding is of <span style="color: #674ea7;"><b>5px </b></span></li><li>right padding is of <span style="color: #b45f06;"><b>15px </b></span></li><li>bottom padding is of <span style="color: #3d85c6;"><b>5px </b></span></li><li>left padding is of <span style="color: #cc0000;"><b>15px</b></span></li></ul> <blockquote><b>margin</b>: <span style="color: #674ea7;"><b>10px</b></span> <span style="color: #b45f06;"><b>5px</b></span> <span style="color: #3d85c6;"><b>10px</b></span> <span style="color: #cc0000;"><b>5px</b></span>;</blockquote><ul><li>top margin is of <span style="color: #674ea7;"><b>10px </b></span></li><li>right margin is of <span style="color: #b45f06;"><b>5px </b></span></li><li>bottom margin is of <span style="color: #3d85c6;"><b>10px </b></span></li><li>left margin is of <span style="color: #cc0000;"><b>5px</b></span></li></ul>If you define a single value (instead of 4), the distance applies on the all sides, i.e. it will be applied on the 4 sides of the HTML element that you want to modify.<br /><br />Example 2:<br /><b>padding</b>: 5px (top and bottom) 15px (left and right);<br /><b>margin</b>: 10px (top and bottom) 5px (left and right);<br /><br />If it helps you visually, think of an A4 page of type inside a picture frame. The margin is the space between the edge of the sheet of paper and the other elements (the parts of the frame), while the padding would be the space between the edge of the sheet and where the type starts on the page. The border would be the edge of the sheet of paper.<br /><br />It's probably easier to understand if you have borders, then it also becomes obvious which one to use. Do you want "space" after the border (outside the element = margin) or before the border (inside the element = padding).

What is the difference between padding and margins?

For those who would like to know more about HTML and CSS, in this post we will learn the differences between margin and padding CSS properti...

Read more »

How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog.<br /><br />Some users have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the <span style="background-color: yellow;">]]></b:skin></span> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqEkksJ-pGifMArBNQo0a9TPXmvUllgW6Lkt4bOxWDx7cfo_IXMUPKO8Xvh-7e2PSFUJTMppYOn0pFfRBN-RQOdhfCrtzyje3XVuJQlu_2ZfCYKhHx-2YQf1ON9jLjOFoqyS0ut-Y3iK0/s1600/blogger-template-designer-add-custom-css.png" /></div><br /><h3>Adding CSS via the Blogger Template Designer</h3>Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a> and select the blog that you want to customize.<br /><br />Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="355" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbSC92rvk9vz0w74EbTQwtb-2cL-chYzN7_wHZCnBZSt3gxhisCIbr_X2UwtOTO8MdNyJIIFOGvvFydjK1jrliBV6RDd4ViEvMr-e8JRejldWjzmei3xcoVRKTLUH0KknhgPm8CBQJRja/s1600/how-to-add-css-using-blogger-dashboard.png" width="640" /></div><br />Step 3. Click on the "Advanced" tab.<br /><br />Step 4. Now just add your CSS code inside the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code each time you want to apply a new style to your template.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVSx1GPep4VQ_0UMdanBpebCwCPAcQakov_kC7UOVLEh1lkTAmWuSBPJOtgJWH_7ksYuHcuBdhDmreW8whzVFT4ZkvlWr6SuzcUXa8QrPCEIAPxmugZaV-N-j0Nxy9V3x_D-AlzdYVoJS/s1600/add-css-styles-using-blogger-template-designer-advanced.png" width="640" /></div><br />Step 5. Once added, click on the "Apply to blog" button to save the changes.<br /><br />Following this method, you can't edit the existing CSS styles already added in your template which will require to access the template's HTML and make the modifications there. Here, you can only add new styles and edit the existing styles added through the Blogger Template Designer panel.<br /><br />Please note that when adding the CSS styles, there's no need to put the <style type="text/css"> ... </style> style tags, which usually would go above the <b></head></b> tag in the template's HTML code. Adding these tags may result in an error.<br /><br />If you change the template, the CSS added here will be removed. The same goes for any other additions or CSS customizations made ​​through the template HTML editor. So this is how we can easily add CSS code to Blogger using Template Designer without having to search the ></b:skin> tag.

How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and ...

Read more »

How to add custom Variable definitions to Blogger

In this tutorial, we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the <a href="http://helplogger.blogspot.com/2014/03/how-to-add-css-to-blogger-via-template-designer.html">Blogger Template Designer</a> where are the settings for colors, backgrounds, fonts and font sizes.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="blogger variable definitions" border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7uzqgVsPxe9mVifTz65MxfKyb0rFQheWP3HWAHAdASF1dCblYo_16CiilyJJf5coMYcpuhfSzURIRh5xkGl4DcYR0NeMfKAmj_LhGCkniSkDvnKQpWkanh8p7M8bYj1ki8mdWoYBnAGm1/s1600/blogger-font-color-variable-definitions.png" title="how to create custom variable definitions for Blogger" width="600" /></div><br />Most default Blogger templates, such as the Minima Template, use these settings for the CSS, which makes it easier to modify the variables through the Blogger dashboard, using the <b>Template Designer</b> ("Template" > "Customize") editor and going to the "Advanced" section.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template designer, variable definitions" border="0" height="315" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvN-1fWZLHhQyChqwl-8TqOBVpDP9TBKfECSfzR8nQOwahEh4fhgy8KiZbEGs_r5qCKlKHmNPYNKjhpKbC2y5lZ_usczR18mCSoCF5KfPHGuU2SXwLq7iv45IAwsHBLR2BFpE9_Q6uVpnT/s1600/blogger-template-designer-customize.png" title="how to create custom variable definitions for Blogger" width="600" /></div><br />If the definitions are already added in the CSS, we'll be able to change the background colors, font colors, styles or sizes, directly from our Blogger dashboard without having to touch the HTML code of our template.<br /><br />If these values ​​are not set, we can define them by creating our own variables. The more variables are created, the greater will be the ease of changing colors and fonts of the <a href="http://helplogger.blogspot.com/2014/03/add-edit-and-arrange-page-elements-in-blogger-layout.html">Page Elements</a> by going to the "<b>Template Designer</b>" and click on the "Advanced" tab.<br /><br />In some cases, we can't change the color or font of a custom template if the designer has not implemented the variables and didn't defined & specified a particular value directly into a property. And if there is no definition for these values​​, we may not be able to customize it through the Blogger's Template Designer.<br /><br /><b>There are two types of variables:</b><br /><br /><b>1) Color Variable:</b><br /><blockquote class="tr_bq"><Variable name="<b><span style="color: #cc0000;">body.background.color</span></b>" description="<b><span style="color: #38761d;">Outer Background</span></b>" type="<b><span style="color: #3d85c6;">color</span></b>" default="<b><span style="color: #674ea7;">#66bbdd</span></b>" value="<span style="color: orange;"><b>#66bbdd</b></span>"/></blockquote><ul><li><span style="color: #cc0000;">In red</span> is the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word.</li><li><span style="color: #38761d;">In green</span> is the description that will appear in the Fonts and Colors panel (it can contain spaces).</li><li><span style="color: #3d85c6;">In blue</span> is variable type, which in this case is "color".</li><li><span style="color: #674ea7;">In purple</span> is the default value, which runs in the absence of any other value.</li><li><span style="color: orange;">In orange</span> is the value of the selected color.</li></ul><b>2) Font Variable:</b><br /><blockquote class="tr_bq"><Variable name="<span style="color: #cc0000;"><b>body.font</b></span>" description="<span style="color: #38761d;"><b>Font</b></span>" type="<b><span style="color: #3d85c6;">font</span></b>" default="<span style="color: #674ea7;"><b>normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif</b></span>" value="<b><span style="color: orange;">normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif</span></b>" /></blockquote><ul><li><span style="color: #cc0000;">In red</span> the variable name without spaces.</li><li><span style="color: #38761d;">In green</span> the description of the variable, may contain spaces.</li><li><span style="color: #3d85c6;">In blue</span> is the type of the variable, which in this case is font.</li><li><span style="color: #674ea7;">In purple</span> the default font.</li><li><span style="color: orange;">In orange</span> is the font that you choose.</li></ul><h3>Where Are Variable Definitions located</h3>We can find the variables definitions in the <head> section of our <b>Template</b> by accessing the HTML code (click on the "Edit HTML" button). There we should see a pair of <b:skin>..</b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="variable definitions" border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6k5yHkKS4TfpXhGjSxXe6Cm8t_A4ndpmjvFrcn-fk1gGb7LyLhFofRqZuw7CQAD22EnimDwLx1lrDbspyszRNmZvSoA0B3hh1ELdNGa422Rvd15i60VNibrTKKN7hp2OxbgXWO8HZtwgp/s1600/variable-definitions-blogger-template-html.png" title="how to create custom variable definitions for Blogger" width="640" /></div><br /><h3>How to Create Variables with type Color</h3>Now, let's see how we can create <b>type="<span style="color: #3d85c6;">color</span>"</b> variables in our template.<br /><br />Please copy the below snippet and replace the names and types as you like, then paste the code below this comment:<br /><blockquote class="tr_bq">/* Variable definitions<br />   ====================</blockquote>Code to copy:<br /><blockquote class="tr_bq"> <Variable name="<span style="color: #cc0000;"><b>NAME</b></span>" description="<span style="color: #38761d;"><b>DESCRIPTION</b></span>" type="<span style="color: #3d85c6;"><b>color</b></span>" default="<b><span style="color: #674ea7;">#xxxxxx</span></b>" value="<span style="color: orange;"><b>#xxxxxx</b></span>" /> </blockquote>For a better understanding, let's take a look at this example with variable of type "<b><span style="color: #3d85c6;">color</span></b>":<br /><blockquote class="tr_bq"><Variable name="<span style="color: #cc0000;"><b>variablecolor</b></span>" description="<span style="color: #38761d;"><b>Variable with light blue color</b></span>" type="<span style="color: #3d85c6;"><b>color</b></span>" default="<span style="color: #674ea7;"><b>#DDF2FF</b></span>" value="<span style="color: orange;"><b>#DDF2FF</b></span>" /> </blockquote><div class="separator" style="clear: both; text-align: center;"><img alt="color variable type" border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6nLlv8LB6jRSC8md1-x7-qIEjfZDp6SC_CrZnLycx4eThNSU_75pN0I7xvkvd9ugVykwT-TgXoilH7VsAN0IZY9vn8Se4nAL_jvPe-9Nvg0Jpsd1jM19nrLHC3-Ih9BgU0OREEgPebbLk/s1600/create-variables-in-blogger-template.png" title="how to create custom variable definitions for Blogger" width="640" /></div><br />Here, I have created a variable of <b>type</b> "<b><span style="color: #3d85c6;">color</span></b>", with the "<span style="color: #cc0000;"><b>variablecolor</b></span>" <b>name</b>. The color values (<b>#DDF2FF</b>) can be applied to all the borders of my blog and whenever I want to apply color styles to a specific border, I will type it like this:<br /><blockquote class="tr_bq">border: 1px solid <b>$</b><span style="color: #cc0000;"><b>(variablecolor)</b></span>;</blockquote>Note that I have added the <b>"$</b>" symbol before the variable's name and included the name inside the parentheses. These should be added every time you want to implement a new variable definition.<br /><br />Once we have created the variable, we can apply it on any property (not only borders) of any selector (page element) where it is possible applying the chosen color.<br /><br />For example, if I want to add this color in the <b>main-inner</b> background (sidebar and posts area), I will add it just after the "main-inner" class selector, like this:<br /><blockquote class="tr_bq">.main-inner {<br /><b>background-color: $<span style="color: #cc0000;">(variablecolor)</span>;</b><br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><img alt="variable type color, variable definitions" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqjDD8WKyg6vJ2DWt12q3hhzu3ywC85Pj7UShoHuJtfmZVCASQOzdOEyA7Hm2xwxgAKpKQi3yEuX0g9kpHyMMmdZp1IPUghSAAXHsVYd5wPIOYNmGTXgUM1wXxGn8bs0tvjD0K-xM51rz/s1600/add-variable-value-background-color-to-blogger-main-inner.png" title="how to create custom variable definitions for Blogger" width="600" /></div><br />Now that a new variable has been added, save and return back to the blogger dashboard by clicking on the "Customize" button, then the "Advanced" tab. You will notice that there is a new variable called "<b>Variable with light blue color</b>". In order to change the color, just use the color picker tool.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template designer" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK4he2dfWuODa9kuluvi0QKLvw5SbfmMNBRcJ_D0D0b8_WQNhpbnN-nukNnczfZeZO6hXm-31Wq39XSjkcd0kQHt-FTdcb-wSxCgLIAlgrC0Om7zZ0OQLkYC6zNR647jmAYB-7Mbf4Wf43/s1600/blogger-template-designer-new-variable-definition.png" title="how to create custom variable definitions for Blogger" width="640" /></div><br /><h3>How to Create Variables of type Font</h3>Now let's say that I want to create a new variable of <b>type="font"</b> which I want to apply on the title of the sidebar gadgets. I will add it this way:<br /><blockquote class="tr_bq"><Variable name="<span style="color: #cc0000;"><b>gadgetstitlefont</b></span>" description="<span style="color: #38761d;"><b>Gadgets Title Font</b></span>" type="<span style="color: #3d85c6;"><b>font</b></span>" default="<span style="color: #674ea7;"><b>normal normal 16px Arial,Verdana,'Trebuchet MS',Trebuchet,Sans-serif</b></span>"  value="<span style="color: orange;"><b>normal normal 20px Cambria</b></span>"/></blockquote>In this variable that I just created, the <b>default</b> font to be searched by the web browser should be <b>Arial</b>, and in its absence, <b>Verdana</b> and so on. Otherwise, apply the <b>Cambria</b> font which is actually the font that we want and which can be easily changed by accessing the Blogger Template Designer.<br /><br />Once the font variable has been implemented, we can add it to any property of any selector where we want to define this font style.<br /><br />To define where this variable should be applied (which, in my example, is the title of the sidebar gadgets), I will need to include the values ​​directly in the "<b>h2</b>" property of the "sidebar" selector (<b>sidebar-right-1</b>), by creating the following CSS rule:<br /><blockquote class="tr_bq">#<b>sidebar-right-1</b> h2 {<br />font: <b>$<span style="color: #cc0000;">(gadgetstitlefont)</span></b>;<br />} </blockquote>And I will add this above the <span style="background-color: yellow;">]]></b:skin></span> tag of the Template (don't forget to add the "$" symbol before the variable's name, also put the name between the parentheses, otherwise it won't work).<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="variable font type" border="0" height="375" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGn1DNUtI-Aqae2EpU-nUYr8-S3ci92UxmHQcowi78tJwWvmIVd1qU9ltDOJwNshfOdMKDXgrTs6gnVI3WxopgqeBuX46e-g-6b7JVWnC8DVlcN7qHIKf1jGksWTk2Z_nr-nXoJCdgwYsb/s1600/add-new-font-variable-for-blogger-gadgets-title.png" title="how to create custom variable definitions for Blogger" width="600" /></div><br />Now, that we have included a new variable, Save the template and return to the Blogger dashboard by clicking on the "Template" > "Customize" button and access the "Advanced" tab. Scroll down and we will see a new variable named "<span style="color: #38761d;">Gadgets Title Font</span>" - if you want to change the font type or size, you can do it directly via this panel.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="variable font type advanced" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7sncEVTGivhP1y9r2wOfXhwboT16TMo3CmuEFfmtwqnLgsqAnihtL2Sr8n9ALGAvzT2wLWX8Apsw6V_PLGC6Ts_hneTEUPtdkMluE5fqVkt7UBJ0Tp2sZdK-YK3xWyzQvttXdKSE2ofk/s1600/blogger-template-designer-add-new-font-type-variable.png" title="how to create custom variable definitions for Blogger" width="640" /></div><br />After you've decided what font style should be applied, click on the <b>Apply to blog</b> button on the right side.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="apply to blog button" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZkde1IrHcWTRQr2gYP9rkHVu6HLpieAxu2eH9CAM9Ly7wnkJ-ciQkk0tHEoaILyKozoYPOa5xy5kUWCPhQCyitooXotUeUwpGZceSmkskqZcJBh-bdpQRU1HSPfdWLQcaTF2QaFgJuUs/s1600/blogger-template-designer-apply-to-blog.png" title="How to add custom Variable definitions to Blogger" width="600" /></div><br />As you work on your template design, you can add lots of color and font variable types, however, for other types of CSS attributes, it is not necessary to create variables. The other types, such as <a href="http://helplogger.blogspot.com/2014/03/the-difference-between-padding-and-margin.html">margin, padding</a>, need to be included in the HTML of the template above the <span style="background-color: yellow;">]]></b:skin></span> tag. So that's how you can add custom variable definitions to Blogger. Enjoy!

How to add custom Variable definitions to Blogger

In this tutorial, we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style she...

Read more »

CSS3 Transition Property Basics

While browsing some sites, we can see an interesting effect on some links. Most of the time, when you hover over a link, something changes in its style: it will either change its color or background, or will become underlined.<br /><br />What about this cool effect that consists in gradual transition from one style to another that you can see in the example below:<br /><center><div id="example7">Hover Over Me!</div><style>#example7 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property: background-color,width,height,padding,font-size,color,border-radius; -moz-transition-duration: 1s; -webkit-transition-property: background-color,width,height,padding,font-size,color,border-radius; -webkit-transition-duration: 1s; -o-transition-property: background-color,width,height,padding,font-size,color,border-radius; -o-transition-duration: 1s; } #example7:hover { background-color:#9c3; width: 30%; height: 140px; padding: 80px 30px 0px; font-size: 20px; color: #FFFF00; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -moz-transition-property: background-color,width,height,padding,font-size,color, border-radius; -moz-transition-duration: 2s; -webkit-transition-property: background-color,width,height,padding,font-size,color,border-radius; -webkit-transition-duration: 2s; -o-transition-property: background-color,width,height,padding,font-size,color,border-radius; -o-transition-duration: 2s; } </style></center><br />This transition is achieved by using the CSS3 transition property - property which is supported in all major browsers such as Chrome, Firefox, Opera, Safari (for Safari we will need the -webkit- prefix to get this effect).<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0nIi7vLUflQmn7W8elz51csNq6MskRVAhkGtAw_oayIe-C9k_0jq6pvszNmG60OZ8gRYav0MZPlIe6I95V6mv9cfArQvaOWkNSziaJGDChdU7fH-RmX2W0Fdl0KqJ8tgJfQRM9CHzqm7q/s1600/css-3-transitions.png" /></div><br /><h3>The CSS3 Transition Syntax</h3>The syntax of the transition supports four values: <ul><li>the property affected by the transition, such as color, border, background, width, etc.</li><li>the duration of this transition in seconds, i.e. how long will it take to change your style completely</li><li>the delay time for the transition to be executed, also in seconds, i.e. how long it takes for the transition to start when the mouse hovers over that element;</li></ul>Check out the code below:<br /><blockquote class="tr_bq">.example {<br /> transition-property: width; <span style="color: #6aa84f;">/* property that undergoes a transition */</span><br /> transition-duration: 2s; <span style="color: #6aa84f;">/* duration of the transition */</span><br /> transition-timing-function: linear;<span style="color: #6aa84f;"> /* timing-function */</span><br /> transition-delay: 0; <span style="color: #6aa84f;">/* length of time to delay the start of a transition */ </span><br /><span style="color: #6aa84f;">/* now we will repeat the entire declaration with the -webkit- prefix for the effect to work in Chrome and Safari */</span><br /> -webkit-transition-property: width;<br /> -webkit-transition-duration: 2s;<br /> -webkit-transition-timing-function: linear;<br /> -webkit-transition-delay: 0;<br />}</blockquote>In the example above, the elements with the .<b>example</b> class will become wide within two seconds as the mouse passes over them. <br /><br />When we define the style of a link, usually we need to use the <b>a:link</b> selector, and when defining the style when the mouse is over the link, we need to use the <b>:hover</b> selector. However, the transition can be used in any HTML element, not just links.<br /><br />To make the transition effect to work properly, we should define two blocks of style for that element, i.e. the normal style for a tag/id/class and the style on mouse <b>:hover</b> for a specific tag/id/class. <br /><br />For example:<br /><blockquote class="tr_bq">tag, #id, .class {<br /><span style="color: #6aa84f;">/* insert here the styles that you want for the selector */<br />/* insert below the transition effects */</span><br />}<br />tag<b>:hover</b>, #id<b>:hover</b>, class<b>:hover</b> {<br /><span style="color: #6aa84f;">/* Insert here the styles for when the mouse is over the element */<br />/* here it is not necessary to repeat the declaration of the transition */</span><br />}</blockquote>You can add the same style on multiple selectors separated by commas as you can see above, although it is not necessary.<br /><br />Below are some transition examples with their respective CSS codes. I will not use the <b>transition-timing-function</b> in these examples because it makes no difference, as the first value is the duration in seconds and the second is the delay.<br /><br />Example 1:<br /><br /><div id="example1">Transition example</div><style>#example1 { background: #FFFF00; -moz-transition-property: background-color; -moz-transition-duration: 2s; -webkit-transition-property: background-color; -webkit-transition-duration: 2s; -o-transition-property: background-color; -o-transition-duration: 2s; } #example1:hover { background: #B5E2FF; } </style> <br /><blockquote class="tr_bq"><span style="color: #6aa84f;">/* with a single property */</span><br />#example1 {<br /><span style="color: #cc0000;"> background-color: #FFFF00;</span><br />-moz-transition-property: <span style="color: #cc0000;">background-color</span>;<br />-moz-transition-duration: 2s;<br />-webkit-transition-property: <span style="color: #cc0000;">background-color</span>;<br />-webkit-transition-duration: 2s;<br />-o-transition-property: <span style="color: #cc0000;">background-color</span>;<br />-o-transition-duration: 2s;<br />}<br />#example1:hover {<br /><span style="color: #cc0000;">background-color: #B5E2FF;</span><br />}</blockquote><br />Example 2:<br /><br /><div id="example2">Transition example</div><style>#example2 { background: #9c3; border: 8px solid #690; padding: 20px; color: #fff; -moz-transition-property: background-color,border; -moz-transition-duration: 1s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 1s; -o-transition-property: background-color,border; -o-transition-duration: 1s; } #example2:hover { background: #690; border: 8px dashed #fff; color: #FFFF00; -moz-transition-property: background-color,border; -moz-transition-duration: 2s; -webkit-transition-property: background-color,border; -webkit-transition-duration: 2s; -o-transition-property: background-color,border; -o-transition-duration: 2s; } </style> <br /><blockquote class="tr_bq"><span style="color: #6aa84f;">/* with four properties and delay */</span><br />#example2 {<br /><span style="color: #cc0000;">background-color: #9c3;</span><br /><span style="color: #a64d79;">border: 8px solid #690;</span><br /><span style="color: orange;">padding: 20px;</span><br /><span style="color: #674ea7;">color: #fff;</span><br />-moz-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">border</span>;<br />-moz-transition-duration: 1s;<br />-webkit-transition-property: background-color,<span style="color: #a64d79;">border</span>;<br />-webkit-transition-duration: 1s;<br />-o-transition-property: background-color,<span style="color: #a64d79;">border</span>;<br />-o-transition-duration: 1s;<br />}<br />#example2:hover {<br /><span style="color: #cc0000;">background-color: #690;</span><br /><span style="color: #a64d79;">border: 8px dashed #fff;</span><br /><span style="color: #674ea7;">color: #FFFF00;</span><br />-moz-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">border</span>;<br />-moz-transition-duration: 2s;<br />-webkit-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">border</span>;<br />-webkit-transition-duration: 2s;<br />-o-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">border</span>;<br />-o-transition-duration: 2s;<br />}</blockquote>Example 3:<br /><br /><div id="example3">Transition example</div><style>#example3 { padding: 15px; background-color: #FF7CA6; font-size: 16px; width: 30%; font-weight: bold; color: #fff; height: 20px; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 1s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 1s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 1s; } #example3:hover { background-color:#9c3; width: 60%; height: 60px; padding: 50px; font-size: 30px; color: #FFFF00; -moz-transition-property: background-color,width,height,padding,font-size,color; -moz-transition-duration: 2s; -webkit-transition-property: background-color,width,height,padding,font-size,color; -webkit-transition-duration: 2s; -o-transition-property: background-color,width,height,padding,font-size,color; -o-transition-duration: 2s; } </style> <br /><blockquote class="tr_bq"><span style="color: #6aa84f;">/* with seven properties and delay */</span><br />#example3 {<br /><span style="color: orange;">padding: 15px;</span><br /><span style="color: #cc0000;">background-color: #FF7CA6;</span><br /><span style="color: lime;">font-size: 16px;</span><br /><span style="color: #a64d79;">width: 30%;</span><br /><span style="color: #45818e;">font-weight: bold;</span><br /><span style="color: #3d85c6;">color: #fff;</span><br /><span style="color: #674ea7;">height: 20px;</span><br />-moz-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-moz-transition-duration: 1s;<br />-webkit-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-webkit-transition-duration: 1s;<br />-o-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-o-transition-duration: 1s;<br />}<br />#example3:hover {<br /><span style="color: #cc0000;">background-color:#9c3;</span><br /><span style="color: #a64d79;">width: 60%;</span><br /><span style="color: #674ea7;">height: 60px;</span><br /><span style="color: orange;">padding: 50px;</span><br /><span style="color: lime;">font-size: 30px;</span><br /><span style="color: #3d85c6;">color: #FFFF00;</span><br />-moz-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-moz-transition-duration: 2s;<br />-webkit-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-webkit-transition-duration: 2s;<br />-o-transition-property: <span style="color: #cc0000;">background-color</span>,<span style="color: #a64d79;">width</span>,<span style="color: #674ea7;">height</span>,<span style="color: orange;">padding</span>,<span style="color: lime;">font-size</span>,<span style="color: #3d85c6;">color</span>;<br />-o-transition-duration: 2s;<br />}</blockquote>Example 4: <br /><br /><div id="example4">Transition example</div><style>#example4 { padding: 15px; background: #9c3; color: #fff; font-size: 16px; width: 30%; font-weight: bold; transition: all 2s; -webkit-transition: all 2s; } #example4:hover { background:#FF7CA6; color: #242424; width: 60%; } </style> <br /><blockquote class="tr_bq"><span style="color: #6aa84f;">/* with all the properties simultaneously */</span><br />#example4 {<br />padding: 15px;<br />background-color: #9c3;<br />color: #fff;<br />font-size: 16px;<br />width: 30%;<br />font-weight: bold;<br />transition: all 2s;<br />-webkit-transition: all 2s;<br />}<br />#example4:hover {<br />background-color: #FF7CA6;<br />color: #242424;<br />width: 60%;<br />}</blockquote><h4>Final words:</h4><ul><li>the transition declarations need to appear in the CSS. In Blogger, the CSS is located before <span style="background-color: yellow;">]]</b:skin></span></li><li>as you can see in the examples above, you can assign different rules for the transitions of different elements in a single rule - just separate them with commas.</li><li>it is not mandatory to use the four properties in the transition declaration, but their order must always look like this: property/duration/timing-function/delay.</li><li>the duration and delay values ​​must be expressed in seconds, but sometimes a second is a long time for a transition. In this case, you can use values with milliseconds, for example, .5s means half a second.</li><li>In small time intervals, the timing of the transition-function property does not give a remarkable effect being most useful only in more advanced animations. The possible values are either <b>ease</b> (the default, which makes the transition with a slow beginning, then gets faster and ends slowly),<b> linear</b> (the same transition speed from beginning to end), <b>ease-in</b> (transition begins slowly and then the speed increases), <b>ease-out </b>(transition starts fast and slows down at the end) and <b>ease-in-out</b></li></ul>

CSS3 Transition Property Basics

While browsing some sites, we can see an interesting effect on some links. Most of the time, when you hover over a link, something changes i...

Read more »