Tuesday, 21 May 2013

Disable Certain Dynamic Views in Blogger | Southern Speakers v3.0

Disable Certain Dynamic Views in Blogger | Southern Speakers v3.0

So you can set your homepage to show one of the 7 Dynamic Views by default. The problem is, your blog might look good in some other views, and let's just say you don't want your readers to see your blog in some of the other dynamic views. And the black bar at the top of your blog offering your readers to choose their own dynamic view isn't exactly helping your blog to maintain its consistency. In this tutorial, I'm gonna show you how you can shave off some of these other view options from the black bar - so that your readers will be stuck with what you want them to see - unless of course if your readers know the URL trick, or if they use Internet Explorer.


Step 1: 

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}

Step 2: 

Now, time to shave things off. Remove any line from the code given in Step 1, if you want the corresponding Dynamic View to show.

For example, if I want my readers to see only 'Flipcard' and 'Mosaic' dynamic views, I'd remove the lines that say 'Flipcard' and 'Mosaic' from my Template Designer. So the code will look like this:
#Classic.ss, #views ul li:first-child , 

#Magazine.ss, #views ul li:nth-child(3),

#Sidebar.ss, #views ul li:nth-child(5),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
There's only one rule to the trick above. Pay Attention. Whatever you remove, make sure the very last option doesn't end with a comma.

If you see the example I've given above, all the views has a comma (,) at the end of the line, except for the last one - 'Timeslide'. If you decide to remove the 'Timeslide' line, make sure you remove the comma from the line above, like this:
#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),
#Mosaic.ss, #views ul li:nth-child(4),
#Sidebar.ss, #views ul li:nth-child(5)
{
display: none !important;
}
See how the last line above does not end with a comma? I've highlighted this line to make it easier for you to see. Again, just one rule. Make sure the last dynamic view in the list above does not end with a comma. Just remove the comma, if there is any. All other preceding views must end with a comma.

Extra:

To get rid of the whole menu/link of choices, add the following to your CSS:
#views{
display: none !important;
}

#header #pages, #header #pages:before{
border-left: 0px !important;
}

That's all folks. Don't be asking me why it won't work in Internet Explorer - I can't answer that question without being sarcastic.
You might also like:

move the date of a blog post underneath the post title (Blogger template)

Improvements to the Blogger template HTML editor | Blogger Developers Network

Posted by: +Samantha Schaffer and +Renee Kwang, Software Engineer Interns.

Whether you’re a web developer who builds blog templates for a living, or a web-savvy blog owner who prefers to make changes to your template using HTML, CSS or JavaScript, you may be interested in some enhancements that we made to Blogger’s Template HTML Editor.

Your blog’s HTML template is the source code that controls the appearance of your blog. This template can be customized to appear however you’d like. The improved HTML template editor now supports line numbering, syntax highlighting, auto-indentation and code folding to make editing your template much easier.

Suppose we wanted to move the date of a blog post underneath the post title, similar to the Blogger Buzz blog. To do this, follow these steps:
Click the “Template” tab on the Blogger dashboard, then the “Edit HTML” button, to see the new template HTML editor:
Locate the “Blog1” widget quickly using the new “Jump to widget” drop down:
This widget controls how your blog posts are displayed. The code inside the widget is folded by default. Clicking the new fold markers ‘►’ next to the line numbers expands the widget and reveals a set of “includable” tags:
Inside the “main” includable is the block of code that renders the post date:
Cut the post date code section and move it to where we want it, in this case, under the post title in the “post” includable:
To check our changes, click the new “Preview template” button to see the updates:
The post date is exactly where we want it, so tab back to “Edit template”, hit “Save template” and we’re done!

Finally, we’ve added a “Format template” button that automatically cleans up the indentation of the template, and made it possible to search for text by pressing “Ctrl+F” once you’ve clicked into the editor. To find and replace text occurrences one by one, use “Ctrl+Shift+F” or to find and replace all occurrences at once, use “Ctrl+Shift+R”.
 
We worked on this project as part of Google Australia’s BOLD Diversity Internship Program. We hope you enjoy the changes we’ve made!

Change Blogger's Dynamic View Content Background | Southern Speakers v3.0

Change Blogger's Dynamic View Background | Southern Speakers v3.0

Technically, the title should read 'Change Blogger's Dynamic View Content Background'. Unless you've been living under a rock, you would have known about Blogger's 7 new ways to display your blog. Yes, I wrote 'display', not 'view'. That means you can set your homepage to show in a dynamic view by default. But I'm not gonna write a review on how awesome the dynamic view is - as hundreds, if not thousands, of bloggers are already on that course. In this tutorial, I'm gonna show you how you can change the pale white background to a background image of your choice. You might be wondering why not just use the Template Designer to change Dynamic View's background instead. Yes you can, but you will only be able to change your main background - your contents will still show the white background. Hence, this much needed tutorial.

Update: I've included the code necessary to extend the tweak to static pages as well.


Step 1: 


Prepare an image to be used as a background. I'll be using the default background from one of the 'Awesome Inc' templates. Once you've got the image, upload it to an online hosting site and get its direct link. Click here if you're not sure how to do this.

Step 2

Note: This code will work on all 7 Dynamic Views. At first I was thinking of providing code for each view in this tutorial, but I don't think it is necessary anymore, as your reader can easily switch from one view to another. And when that happens, it'll be nice to see the same customised background on that other Dynamic View that your reader switches to.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
1
2
3
4
5
6
7
#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background: url('http://img641.imageshack.us/img641/7830/imageuft.jpg') fixed !important;
}
 
.items.hfeed{
background: transparent !important;
}
Don't forget to change the address in Line 2 above to that of your background image (the one that you've gotten from Step 1)

Extras:

1) If you want to use a color as your background instead of an image, use the code below. Replace '#FF8809' in Line 2 with another hex that you like. You can generate hex code based on your preferred color by clicking here.
1
2
3
4
5
6
7
#items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background: #FF8809 !important;
}
 
.items.hfeed{
background: transparent !important;
}
2) Note that you can use the Template Designer's 'Background' tab to upload a main background to your blog's body. As I've mentioned before, this tutorial adds background to the content page only, as you can easily use the Template Designer to add a background to your blog's body. Personally I think it is best to add background to both content and the body. It gives the 'customised' look that your blog deserves - thus distinguishing your blog from other blogs that use Dynamic View. If you think the background uploaded using Template Designer does not cover the entirety of your blog's body, add this to your CSS code instead (same instruction as in Step 2):
1
2
3
#header .header-bar, body, .viewitem-inner{
background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;
}
3) In Magazine view, when you hover over a particular post, the post will seem to be highlighted by a white box. To change the background color of this post, add the following CSS to your Template Designer. Feel free to change the color pink to another color or image.
1
2
3
#lead .item:hover, #feature .item:hover, #fold .item:hover{
background: pink !important;
}
4) I've only provided one background layer for each view. It is possible to customize the background even further. For example, in Magazine view, you can apply one set of background on the front view, and another set when you click on each post. They are highly customizable that I couldn't cover everything in this tutorial. I figured it'll be best if I take requests instead of trying to cover every single outcome. So, if there is a background-layout design that you desire, feel free to leave a comment and I'll provide you with the code that you need.

Happy Blogging folks, and be Dynamic! I'm gonna remain Old-School for now.
You might also like:

Customise Blogger Mosaic Theme - Knowledge Base:

Knowledge Base: Theme: Mosaic


Theme: Mosaic

The Mosaic pre-made theme is available with all Pro plans. In addition to uploading a custom banner image, you can also use Custom CSS with the Pro Unlimited and higher plans to customize the theme.

Add Banner

To upload a banner image, go to Design > Banner. Click the Browse button to locate the image on your computer. Then click Save Changes to update your blog.
The banner image should be 950px wide by 248px high or smaller to fit.
Why is the banner tiled?
If your banner image is not exactly 950px wide by 248px high, the image will tile within the banner area. Additionally, the banner may tile if the blog's title and description is more than one line.

Set Color

The Mosaic Theme has two color options which can be selected at Design > Colors. The Dark color uses a black background. The Light color uses a grey background.

Custom CSS Tips for the Mosaic Theme

Custom CSS is a feature available with the Pro Unlimited, Premium, and Business Class plans. You can use CSS to make big or small changes to your design. Each pre-made theme requires different CSS code to make changes. Below are some CSS tips specific to the Mosaic Theme.
All CSS can be entered at Design > Custom CSS to apply the design changes to your blog.
Hide Blog Title and Description
The Blog Title and Description will display in a bar running across the Banner with the Mosaic Theme. If you have included the title of your blog within the Banner image, you may want to hide bar covering your banner using the CSS:
#banner-inner { background: none; }
#banner-header, #banner-description { display: none; }
Change Border Color
In the Mosaic Theme, there is 2px of padding around the container in a contrasting color. To change the color and width of the band around the container, use the below CSS:
#container { background-color: #000000 !important; padding: 2px !important; }
The color code and padding width can be adjusted. Set the padding width to 0px to remove the band entirely.
Adjust Column Widths
The CSS required to change the column widths will vary depending on the layout chosen at Design > Layouts.
The container width will always been the total of your columns - alpha, beta, gamma - plus some extra pixels depending on the selected layout. The extra pixels are to accommodate for the borders and padding for the columns.
The Mosaic Theme features a static background image which will not adjust to match changes to the column widths. The #pagebody-inner { background: none; } code can be included to hide the background image.
Grab the CSS for the selected layout below and adjust the column widths as necessary. Make sure to adjust the container width the equivalent of the changes to the other columns. For example, if you increase the beta column width 100px, the container will also need to be increased 100px.
Two Column Right Layout
#container { width: 1000px; }
.layout-two-column-right #alpha { width: 800px; }
.layout-two-column-right #beta { width: 200px; }
.layout-two-column-right #pagebody-inner { background: none; }
Two Column Left Layout
#container { width: 1032px; }
.layout-two-column-left #alpha { width: 200px; }
.layout-two-column-left #beta { width: 800px; }
.layout-two-column-left #pagebody-inner { background: none; }
Three Column Right Layout
#container { width: 1360px; }
.layout-three-column-right #alpha { width: 800px; }
.layout-three-column-right #beta { width: 200px; }
.layout-three-column-right #gamma { width: 300px; }
.layout-three-column-right #pagebody-inner { background: none; }
Three Column Layout
#container { width: 1280px; }
.layout-three-column #alpha { width: 200px; }
.layout-three-column #beta { width: 800px; }
.layout-three-column #gamma { width: 200px; }
.layout-three-column #pagebody-inner { background: none; }
One Column Layout
.layout-one-column #container { width: 800px; }
.layout-one-column #alpha { width: 800px; }
.layout-one-column #pagebody-inner { background: none; }
Add Banner of a Different Height
The default height for a banner uploaded to the Mosaic Theme is 250px. If you prefer to use a banner image of a different height, however, you can by using Custom CSS to add a banner image of any height.
The width of the banner should be kept at 948px.
First, go to Library > File Manager to upload the banner image. Click Browse or Choose File to locate the image on your computer and click Upload. After the image has uploaded, click on the Filename to open the image in a new browser window. Copy the URL for the image from the browser address bar.
At Design > Custom CSS, enter the below the code in the text field. The highlighted sections will need to be replaced with the specifics for your banner image.
#banner { 
height: 250px !important;
padding: 0 !important;
background: url(http://example.typepad.com/image.jpg) no-repeat center !important;
}

#banner-inner {
position: relative !important;
top: 175px !important;
}
Replace http://example.typepad.com/image.jpg with the URL of the image uploaded to the File Manager. The height should be set to the actual banner height.
The position of the blog title and description which overlays the banner can be adjusted by changing top: 175px !important;.
After completing the edits to the Custom CSS, click Save Changes to update your blog.

Increase Pop-up Image Size in Mosaic (& delete thumb-pinlines) Blogger Dynamic Views | Southern Speakers v3.0

Increase Pop-up Image Size in Mosaic Blogger Dynamic Views | Southern Speakers v3.0

Click here for a Live Demo!

I don't imagine Mosaic Dynamic View being very famous among Blogger users, as I rarely see any questions on the said template. But here's one for all you Mosaic users out there. When you hover over a mosaic post in Mosaic view, the post's thumbnail would pop-up and get slightly increased. With a little bit of magic code, you could make the pop-up thumbnails much larger, and appealing. And here's how.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

1
2
3
4
5
6
.mosaic.notouch:not(.animating) .item:hover:not(.open), .ss{
-moz-transform: scale(1.5) !important;
-webkit-transform: scale(1.5) !important;
-ms-transform: scale(1.5) !important;
-o-transform: scale(1.5) !important;
}

Monday, 20 May 2013

A Tour Of Dropbox’s Amazing New Albums [Feature] | Cult of Mac

A Tour Of Dropbox’s Amazing New Albums [Feature] | Cult of Mac

A Tour Of Dropbox’s Amazing New Albums [Feature]

A Tour Of Dropbox’s Amazing New Albums [Feature]
All of these photos could be in different folders. Dropbox just doesn’t care.
Dropbox is about to add a great new feature to make photo-sharing a lot easier. It’s called Albums, and it lets you group together photos from anywhere in your Dropbox folder structure and share them as a single album. The service is currently in beta testing, but if you have an Android device the most recent update also contains a version.
Let’s take a look at how it works on your Mac.

The Old Way

First, let’s take a look at the current way to share photos using Dropbox. First, you can choose to share either a single photo or a folder. You then right-click on it, or use the various sharing tools built-in to the web or Dropbox apps, and share that folder. And if you move one of those pictures out of the original folder, it will disappear from your share.

Forget Folders

Dropbox Albums does away with folders altogether
The new way does away with folders altogether. To start using Albums, you head over to the Dropbox website (you can’t currently do this from the desktop or the iOS app) and click the new “Photos” tab on the left side.
Now, you’ll see your pictures. All of them. No matter where you have your pictures stored in your Dropbox, they all show up in this view. It’s like doing a Spotlight search on your home folder for images and saving is as a Smart Folder.
A Tour Of Dropbox’s Amazing New Albums [Feature]
Albums is as slick as a desktop app.
This has some advantages. First, you can combine pictures into an album no matter where they are on your computer. Second, if you move one of those pictures, Dropbox knows, and it has absolutely no effect on the shared Album (well, one: when you right-click the image and choose to reveal it in its actual folder, you’ll be taken to its new home).
This is fantastic. I use Dropbox’s Camera Upload feature to suck in all pictures from my iPad and iPhone. Right now they’re just sat there as a backup, but now I can make albums of special events, or of screenshots I want to share with the rest of the Cult of Mac folks, or anything, and the originals will remains where they are.
Think of it as being like Apple’s Photo Stream, only cross-platform and not terrible. I use the hell out of Photo Stream, and love it, especially as it pushes pictures to friends and family so easily. But it also breaks fairly often, and requires that people not only have an iDevice, but that it runs iOS6. So I can’t send pictures to my mother’s first-gen iPad, for example.

Making Albums

A Tour Of Dropbox’s Amazing New Albums [Feature]
Making albums is so easy you’ll cringe when you go back to iOS’s Photos app.
Dropbox really shows its web chops with the Albums interface. It really does feel like a native app. One note – it won’t fully work in an iOS browser, even if you cheat and use something like iCab to pretend it’s a desktop machine. You can browse picture and albums in Mobile Safari, but you can’t create or edit them.
To create an Album, just click the New Album button and type in a name. Then get to adding pictures. You images are arranged in a patchwork of big thumbnails by date. Clicking one will put checkmark and blue border on it, and clicking again will deselect it. Mac users will be a happy to see that holding down the shift key will let you select a block of images at once. Very cool.
Once selected, click the button at the top of the screen to add them to the album. The new album shows up in the list on the left, and you can also click “View all albums” to see a grid view of all your albums.
Now, try this: When in an album, right click a picture and choose to “Show in Folder.” Make a note of it, and then head over to the Finder. Find the picture and move it somewhere else in your Dropbox. Now, go back to the Album (refresh it if you like, or just navigate away and back again). It’s still there! And choosing “Show in folder” again will now reveal it to be in the new location.
A Tour Of Dropbox’s Amazing New Albums [Feature]
Shift-clicking works just like in the Finder!
Now try this: right click an image and choose to “Set as cover.” This allows you to pick the thumbnail image that’ll show up as the album’s “cover.” Another nice touch, especially in v1.0 of the service.

Sharing

Sharing an album can be done in a few ways. The first is to just click the button at the top of the screen when viewing that album. The other is to right-click (control click for those one-button mousers still out there) the album thumbnail wherever you see it. The result is the same: you’ll see a new sharing dialog.
A Tour Of Dropbox’s Amazing New Albums [Feature]
Sharing is as easy as creating.
The dialog looks just like a little email, which is what it will turn out to be. On first run you will be prompted to import your contacts from Gmail, Yahoo mail or Facebook, and you can add any of these at a later time. Fill out the recipient, add a message and send. You can also share via Twitter or Facebook.
People can view your pictures even if they don’t have a Dropbox account
The lucky recipient will receive a link. And here’s the neat part: They can view your pictures even if they don’t have a Dropbox account (more on viewing in a sec). This is not only fantastic news for sharers, as you can just fire off those links without worrying whether the receiver will be able to see your pictures. It’s also good marketing for Dropbox, as the linked page lets you do one of two things (apart from just looking at the picture that it).
On the Album’s page there are two buttons, letting you either copy the pictures to your Dropbox or to sign up for a new account. I’ll bet that this will be a great way for Dropbox to get more users.

Viewing

A Tour Of Dropbox’s Amazing New Albums [Feature]
Slideshow view. It’s fast, but you need Flash to view videos. Ugh.
Viewing is a breeze. You click on an image and the view switches to a slideshow. You can click the little arrows at the bottom, or you can just click the image itself to advance to the next one. You can even view videos (Albums also pulls all your videos into its world), although you’ll need Flash installed to do it. In 2013!
There’s one little bit of UI polish that’s worth a mention. When you exit slideshow view and go back to the thumbnail view, the picture you last viewed does a little bobbing, pulsing animation to show you where it went.

Apps

When third-party apps get access, Albums will be huge.
As I mentioned, only the Android app has Albums built in so far, although looking at the support pages it seems very similar (in implementation at least) to the web app. An iOS version is promised, which might just make me ditch the native Photos app (for sharing and making albums anyway – there’s no way I could chop it out altogether).
But if third-party apps get access to this then Albums will be huge. Imagine an app like the amazing Unbound (which presents photos on Dropbox just like the native Photos app) only with Albums support. Or a word processor app which could pop open a file browser and access your Dropbox photo Albums.

Conclusion

Dropbox is way ahead of Apple when it comes to accessing and sharing your files from anywhere, and features like Albums and Camera Upload turn it from a “dumb pipe” service into something essential. No, it can never be as fully integrated into your iDevice as Apple’s own solutions, but as it becomes the backbone of more and more apps, and as you can run it pretty much anywhere, who cares?
Dropbox Albums

Sunday, 19 May 2013

Blogger Image Gallery Tutorial

Lauras Crafty Life: Blogger Image Gallery Tutorial

Blogger Image Gallery Tutorial

I recently have been making some small changes to my blog to make it easier to use. Blogger can be a little tricky, but if you know some basic (and sometimes not so basic) html you can create some amazing things!

If you click on the page link at the top of this blog titled 'Crafts' you will pull up an image gallery of all my past craft projects. (Update: This is now the 'tutorials' page') This page makes it so easy to find anything you may have seen on my blog because each image is linked up to the original post. I did a similar image gallery for my 'party ideas' page.

Do you want to create your own image gallery? You are in luck because today I am going to show you the tutorial on how to do this yourself. (Please note I am using the newer blogger interface. You can do the steps pretty much the same on the old interface, it will just look a little different.)
** To see more detail on the images below, just click on them and you will be taken to another screen where the images are displayed much larger. **
First, open your Blogger.com account. Then, click on your blog to take you to the 'Overview' page.
Click on the 'Pages' link. 
From here you will either click on a page link you have already created or you can now create a new page. If you are adding the image gallery to a page you have already created, click on the Edit button under the category you want to edit. (In my example, I am editing the 'Crafts' page.)
From here you will click on the tab at the top that says 'HTML'. You are going to be adding html code to this page. (Don't worry. It isn't too scary, I promise!)
You will enter the following code, changing the colored parts with the information from your blog you want to add to your particular image gallery.
<table cellpadding="3">
<tbody>
<tr>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
<td align="center" width="25%"><a href="http://yourprojectposturl.com" target="_blank"> <img src="http://yourimageurl.jpg" /><br>Name you want to have displayed below your image</a></td>
</tr>
</table>

The first link you will change is the web address of the post you want to link to.
The second link will be the image url you want to have displayed.
The third area to change will be the words you want to have displayed below the image.
If you copy the above example exactly, it will give you one row with four images. To add more rows, you will want to copy the entire section from the <tr> to the </tr> to add more links and images. You will add this after the </tr> and before the </table>.
Some tips:
  • You are creating a table. Everything within the <table> and </table> tags will be shown in that table. The <tr> tag is for the row and the <td> is for each cell in the table.
    • In all html you will have a start (or opening) tag and an end (or closing) tag. For example, to create a table you must have the tag <table> at the beginning and </table> at the end. If you are getting error messages, usually it is because you are missing an /,<, or >. You must check this carefully or your codes will not work!
  • Since I chose to do four images, I created the width of the cell to be 25%. I did not predefine the width to a particular number so that it will always only take up 1/4 of the row width, regardless of how many images are there and how big the browser window is. This way, when I do not have all the cells filled out, it still only takes up the same amount of space. You can see this in the very first picture in this post. I only have three images in the first row.
    • If you were to do three images you would make the width 33% instead.
    • Likewise, if you choose to do five images, you would set the width at 20%. 
  • Blogger automatically uses Picasa Web Albums to save your photos. If you open Picasa Web Albums and log in with the same log in you use for blogger, you will see your blogger account with all of your pictures. I found the main page that opens up when you click on your blogger account has the perfect size thumbnails to use for these image galleries. 
    • To get the image url, find the image you want, right click on the image and select 'copy image url'. This will be what you will paste into the green link area in the above example. You do not have to resize the images or do anything further to make it work!
  • If you are still stuck, I have found w3schools.com to be incredibly helpful for learning hmtl code. They have a section on creating tables that can help you if you are stuck.
Please let me know if you try this and how it works for you. It is time consuming, especially if you have a blog that has a lot of projects already posted. But once you get it all entered it really isn't too bad to maintain it. I just add new links each time I post to my blog if it is a craft project. That way it is always up to date. 
If you are having trouble, email me and I will try to walk you through it and see where you are having problems.
** Update**

I use Google Chrome as my web browser. When I opened up my 'Crafts' page in Internet Explorer, the table was stretching over into my sidebar. I finally found a fix to keep the table the same size in any web broswer! Set your table width to about 50 - 100 pixels less than your main column width of your blog.

For example, my main section of my blog (where my post content shows up) is 800 pixels wide. So I set my table width to 700 pixels.

To do this, in the above code you would add width="700" into your table setting. Here is what it will look like:
<table cellpadding="3" width="700">

I hope that helps some of you out there that may be having trouble like I did. Also, be sure to check your blog in several web browsers - you may be surprised how different it can look!

Linked up here:
Tatertots and Jello: Weekend Wrap Up Party