How to change the look of your blog page

When you sign up with LibSyn, you get a choice of a couple very nice templates for the way your blogpage looks. But you might want to give your page a little bit more of an individual look.

Here are a few tips as to how to do this.

First of all, log in to your LibSyn account. Then click on the “blog settings” tab. Then choose a template from the several choices offered by LibSyn.

From here it is very easy to customize your page, but the code can be forbidding. Breathe deeply; there's a lot of the code you won't need to touch.

Go to “Advanced Settings.”

# To give yourself an image header: Upload an image (.jpg or .gif) file to your /images/ folder. Then select it from the pop up menu labeled “select image file.” # To adjust the browser title bar for your blogpage: Scroll down to the HTML box, where the code for your page resides. You will make almost all of your adjustments here. To change the title bar for a browser, find the <title> tag at the very top of your code. (Should be about the third line.) Type in whatever you want to show up in the title bar of a browser window. #To put links and things into your right-hand navigation bar: Scroll down to the <body> tag of your code. Put any code, links, image tags, and so on, into the section of code that begins with the line <div class=“rightnav”>. These items will appear in your right-hand navigation column. #To add things like the calendar, archive lists, libsyn player, your blog entries, and other pre-built template modules, you only need to type [[module_name]] - which will be rendered as the corresponding module. For example, [[calendar]] will display a calendar where the days are linked to posts you created on that day.

This is just a basic introduction into using HTML in your page. You may feel quite intimidated by all the stylesheet tags in the first half of your code. These are used to establish that “LibSyn” look. I decided not to mess around with these at all, since i would be in way over my head, HTML-wise.

But I have found it quite easy to use basic HTML code, particularly in my navigation column. (Since blog entries are automatically generated, I don't ever mess around with the <div class=“content”> section.)

PS. Here's my ultimate cheat on making my web pages look right: I find a page that looks the way I want mine to work, then I select “View Source” in my browser, copy the code from that page, and study it. I can sometimes just copy things right out and stick them into my own page, substituting my own text.

Another option is to copy all of the code from the text box and paste it into an HTML editor like Dreamweaver. You can then edit your page manually. When you have everything as you'd like it, copy the code from your HTML editor, paste it back into the text box, and save your changes.

Add your own custom podcast icon to your blog page

This is the default Libsyn Podicon-

You can add a custom pod icon to your libsyn blog by logging into libsyn.com and going to settings > advanced

Scroll down to the bottom of the page where your blog HTML is. In the blog html, look for the [[blog_pane]] module. To add your own icon, you can do:

<pre>pod_icon=http://somewebsite.com/my_icon.gif</pre>

Images Are Too Big

A flaw in the Templates is that you have to keep your Photo´s under a certain width. To maintain this size you need to change the css, look for the postimage line and replace it with this one.

.postImage { float: right; padding-left: 5px; max-width: 250px; vertical-align: middle; }

Add your own Leader Bar

Delete from your css the .podcastTitle and ad this.

#podcastTitle {

     text-align: center;
     padding: 3px;
     background-image: URL('http://<username>.Libsyn.com/<file URL>');
     background-repeat: none; }

Change your HTML for your artwork to

<image src=“http://<username>.Libsyn.com/<file URL>” id=“podcastTitle”>

Of course you will *Add the file URL *Place the HTML in between the podcastTitle div tags The id will call the CSS of podcastTitle.