Posts

Showing posts with the label HTML

How to center gadgets in Blogger

Image
This article is about centering gadgets from 3rd parties that you install onto your blog. Previously, I've described how to put HTML code from a 3rd party into your blog . When code like this is put into a gadget , one common question is "how do I center it?" 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. Option 1: Centre all the gadgets in your blog To center-align every single gadget in your blog, just, add a CSS rule to your blog .  The rule to add is: .widget {   text-align: center; }  This will centre the contents and title of every gadget on your blog. Option 2: Only center-align the specific gadget 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: <div style="text-align: center;"> PUT THE...

Getting the HTML code to put a picture into your blog's sidebar, header or footer

Image
This article explains how to use Blogger's Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go). The Picture gadget is the normal tool for adding a picture to your blog's sidebar . But sometimes you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size. To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself. Using the Post Editor to generate the HTML for a picture 1  Start a new Post   (you're not ever going to publish this:  it's just a work-area) 2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture .   Blogger will prompt you to upload the picture, or to choose it from ...

Putting pictures side-by-side in a blog post or gadget

Image
This article shows how to put pictures side-by-side in Blogger (or any other website) using HTML, in a way that works for visitors using mobiles (smartphones and tables) as well as larger screens. Previously I've explained how to use a table to force photos (and other things) to all show into a line, even if the user's screen is too small to display them all at once.   And I've looked at putting text and pictures side-by-side - assuming you're only working with one picture. Tables are great if you are showing data and need rigid alignment, or if you don't mind your mobile device visitors having to either scroll, or to pinch their screen so much that they cannot read the text. But there is a way to lay out pictures so that they display side by side if there's room on the screen, or start on a new line if there's not. I've done this recently on a blog where really wanted to make a display for last / next week and last / next year on two different dimensi...

Find things in your blog-posts' HTML by using temporary "marker text"

Image
This article shows how to use "marker text" to help find things when you need to edit the HTML code behind one of your blog posts. When you edit a post in Blogger, to start with you generally use the Compose mode, which shows you the formatted view of how your work will look. But behind that formatted view, every post is actually written in HTM L, ie Hyper-text Markup Language - a type of computer language that uses tags like <h2> or <a href="www.foo.com">  to say how to display the contents. A number of articles, here and in other blogger-helper blogs  tell you how to do thing by changing the HTML for the post. But if you are not used to working with HTML, it can be confusing tryign to fix the part that you need to change. Marker-text is a technique that you can use to "mark" problem areas while you are still in Compose mode, so that you can easily find them again when you are in Edit HTML mode. How to use marker-text to fix a problem in your ...