Posts Tagged prepare HTML code for sidebar Widget
Microsoft Windows Live Writer is the unsurpassed blogging editor. For WordPress blogs it handles pages as easily as normal posts. Live Writer can also be used to generate the HTML code needed for use in setting up sidebar features.
This article explains the technique and procedure for doing so. Here is an image of a sidebar with multiple features, a map, some images and text with hyperlinks. Things that are easily inserted with Live Writer into posts. It works just as easily for use with the WordPress sidebar Text Widget. There are a few peculiarities that have to be carefully observed.
WordPress Text Widgets are used for arbitrary text or HTML. It is the HTML handling that makes them so powerful as most anything can be shown.
Live Writer can be used in its normal graphical interface, wysiwyg (what-you-see-is-what-you-get) to set up the HTML code.
Most sidebars are on the order of 250 pixels wide, it will help if you know the exact size of your sidebar. In Live Writer ignore the margins as they will be for your main area and not the sidebar. Since material in the sidebar will look best when centered, that is what you should use in preparation.
The main caution concerns images. They must be sourced from the web. Since you will not publish this post, Live Writer will not upload the images. So you need to upload all images manually before you set up the sidebar HTML.
Prepare your images
Prepare your images in the exact size that you want them to appear and upload them to the WordPress Media Library. This is a drag-and-drop procedure so it is quite fast and straightforward.
Obtain the file URL for each image. Be sure to get the file URL and not the permalink. See the illustrations below. It might help to just copy the ULRs and paste them into Notepad so they are handy when you are ready to use them.
Create the sidebar HTML
Open Live Writer to a blank post – you can name the post anything, but something like “sidebar 1” might be descriptive enough. You will not upload this post, only save it on the local PC.
Continue and build your sidebar.
Note in the illustration above that the social media icons are not centered. If you want images beside each other set the Alignment to Left. Space them with the right or left margin setting so that the sum of the margins and image horizontal dimensions adds up to the width of the sidebar.
Inserting a map
Things get a little tricky when you insert a map. Live Writer lets you size the map image so you can fit it to the sidebar. However, that image is locally generated and stored. It is not uploaded to WordPress, since you will not publish this working post. So you must do a screen capture, clip out the map image, upload it to the WordPress Media Library just like any other image. But, and this is important, you can’t change the generated code to reference that image. Live Writer will overwrite it on every operation. You will need to make the change later.
When you are finished with the setup, click the Source tab (lower left). Select all the source text and copy it. You can store it on Notepad – a good place to make the correction for any map image.
In the illustration here the code is selected in the Source view of Live Writer on the right and inserted into the Text Widget in the WordPress dashboard on the left. If you have no corrections to make to the code this is the quick and easy way. If you need to make a correction for a map image here are some additional notes.
Making the image reference correction for a map
Find the reference in the code. Look for the section that contains the words “map picture”. Find the text <img src=. Replace everything in the quotes that follow with the file URL. In the illustration the reference generated by Live Writer is partially highlighted. It begins with a dollar sign, $.
Once the correction is made just save the Widget text and take a look at your blog.
Hope all goes well for you!
© 2012 Ludwig Keck
In this sidebar you can find:
Below find RSS and email subscription links.
SEARCH, CATEGORIES and TAG cloud, TOP POSTS list, and ARCHIVE
RELATED BLOGS - recent posts
SOCIAL MEDIA and other LINKS to other blogs
- add map arrangement Bing Maps blog design Blogger blogging Blogging tool blog page blog post blog service blog site blog theme captions display errors effective titles Flickr fonts font selection font size getting noticed getting started headers HTML code image placement images image URL insert album insert boilerplate insert from web insert image insert map insert photo insert photo from computer insert picture insert SkyDrive album insert text link to SkyDrive sub-folder Live Writer make collage mamaging pictures modify image myPicturetown Nikon myPicturetown Open Live Writer photo caption photo placement photos photo sharing plug-in plugin post title set up blog SkyDrive SkyDrive album SkyDrive image URL SkyDrive in HTLM5 SkyDrive photo albums SkyDrive photos source images sourcing images sourcing images from Flickr sourcing images from SkyDrive sourse image static blog page Technorati topics update theme web address Windows Live Windows Live Live Writer Windows Live SkyDrive Windows Live Writer WordPress writing WYSIWYG
- Kaleidobricks silvercanvas.wordpress.com/2018/03/24/kal… https://t.co/TNeGQ2GwCx 10 hours ago
- Views from recent PTC workshop - vidi.academy/2018/03/worksh… @PtreeCorners #PeachtreeCorners 5 days ago
- Heron silvercanvas.wordpress.com/2018/03/12/her… https://t.co/zYAl38JNkw 1 week ago
- Kaleidoscope 180221 silvercanvas.wordpress.com/2018/02/21/kal… https://t.co/IZk6KMZZ5n 1 month ago
- Nightmare silvercanvas.wordpress.com/2018/02/19/nig… https://t.co/Pi9LCzWC0e 1 month ago
Gateway to my online places: