Luckrequired blog header photo
Luckrequired's c-blog
Fronts 2Posts 140Blogs 63Following 0Followers 46



The Hitchhiker's Guide to Blogging


I've being reading a number of blogs lately peppered with complaints about formatting problems, a problem pestering many of us. Therefore, I decided to do something about it. 

In the following blog editor guide you will find information that will help you weed out format errors, reduce irritation and help your finished blog look clean and tidy.

While researching this I spent a lot of time figuring stuff out only to find work had already been done on the subject. Well, I felt silly. So I've adjusted my guide to cover things not mentioned in the other articles I ran into. Specifically, terrific Tony Ponce's fantastic format guide. This has saved me some time and work, but there are things not mentioned that this guide will try to cover. Do yourself a huge favour and read Tony's guide. 


Reservoir Blogs

Before I begin torturing you let's play some music. It's a long blog so don't bother scrolling down to check its length, you'll just be scrolling back up again. So, let's add some soothing ambience to our journey together.

Play this to accompany you throughout the guide. Go on, click it. Ahhh, that's better. Now let's begin. (I'm pretending you clicked it anyway so nyer.) 8) 


The Italian Blog

"Now, it's a very difficult job and the only way to get through it is, we all work together as a team. And that means you do everything I say."

 -- Charlie Croker

Luckily for you I'm not Mr Croker so I won't be ordering you about. I will, however, make suggestions to help new members get over some of those fresh starchy rigid hurdles less painfully. 

As a new bloggateer myself I too have wrestled with the editor not living up to its oh-so-promising function. So I made this guide for the good of the community.

The veterans among us who have been doing this for a while will shrug the point of this - this is for the newbies like me with little blogging experience. You're are welcome to nip into the kitchen and make chicken kievs. Please do come back and stay for the end as I will be needing your help with "The Blog Squad" section. Better still, if you veterans don't mind, please offer any experience and advice you have now that you wish someone gave you when you first started.

Right, let's get stuck into the meat 'n' potatoes. Gather 'round, restart the music, and listen - or read - up as I detail the plan.


On the Blog

Most of the basic bbCode tags of the blog editor are already common knowledge to many but not all of us, so I've listed them below. Some don't work, any I have missed or if you have any more to add please do so in the comments below and I will tack them on.

The following list of bbCode tags work, those marked do not:

Click for clearer version

Quick notes about tags:
- whenever you use a tag check for extra spaces between the tags
- also make sure not to press the Return key while in the middle of a tag 
- try not to add more tags within tags until you've checked the first lot is working

When combining tags use one at a time before adding another. See if it does what you want, then add another modifier and check the results in your pop-up preview.
It's like making a sandwich, make each slice mirrors its partner in order. Anything that changes the text visually can be used in any order as long as you open and close tags logically. Anything that MOVES text like align goes on the very outside or very first and very last around all the other tags.

There is a an order for the tags to go in so that they are read and displayed correctly, which is as follows:

1. Alignment tags on the very outside.
2. Then URL tags.
3. Everything else.

Color, Bold, Italic, Underline, Strike can go in any order as long as the left tag mirrors the right tag. In the example below I've use brace (curly) brackets so it doesn't get confused as a command.

Example: {center}{url}{b}{i}{s}{u}Your text here{/u}{/s}{/i}{/b}{[/url}{/center}

Things are much easier with the new editor now and less likely to cause formatting issues. However we seem to have lost the capability to colourise text. Crap.


The picture below shows button functions on the editor that work. Any crossed off with a pepper is stuffed and does not work (as far as I know and have tested that is). I tested the editor in Opera and Internet Explorer - IE is a pain and adds on its own problems, avoid using IE if possible. If any stuffed peppers work for you in other browsers you use then let me know.



Trying to dancing with the editor, which is an erratic little funker, can turn your happy-stepping feet into frustrated stomps; foxtrotting you from a delightful waltz to a deadly tango. *dip*

My tip is to open a new tab. Open one tab for the editor.

And another tab for the pop-up preview.

It's a simple little thing that lets you work on AND view changes as you go. Once you've made a start to your blog and entered some text, save your work. Wait for the page to reload and you'll see a "pop-up preview" link to the right of a save button sitting on a green background (see picture below).


It's just the syntax taking effect. After watching the tab with the editor settle down jump over to the pop-up preview tab and hit F5 to refresh and see the new amendments. Here you'll see things out of place or superfluous code trying not to be noticed as well as those extra spacing that may jump in and need adjusting: scan your blog for what must be fixed and head back over to the editor to make changes. Repeat this process until your blog looks neat and sweet.

Use the Maximize and View Source buttons to route out gremlins in the editor. The Maximize button will stretch the editor to full screen mode making it easier to view your blog's raw layout. The View Source button allows you to see the syntax. These two buttons will be your best defence against errors so try to get into the habit of using them as much as possible.


View Source:

Before you get stuck into your blog switch on View Source mode and you will see everything appear the way you typed it.

The Blog Editor has a bad habit of lying to you about how your finished blog will look.

When you start adding bbCode it will disappear as it takes effect but the effect you see may not appear that way in the preview (check your pop-up preview), this is where View Source is a blog saver.

The Destructoid website uses newer HTML5 which your browser also uses to convert older bbCode to appear correctly; however, the blog editor does not use HTML, it is stuck using old bbCode to regulate your blog's appearance and will only follow those limited rules. It's like running any old LucasArts game, for example Grim Fandango, on a modern 4K gaming machine: it's going have compatibility issues.


The Great Train Bloggery

How's that elevator music working out for you? Play it again, you know you want to.

Now I'll cover a few tips and tricks regarding pictures and fonts. Images throughout this guide were made by my own hand or are screen grabs from the Opera web browser and have been edited in the free art app GIMP 2.8.0. The hurdle and Postman are images from google. Many images you see here are click-able and expanding them will give you a better view of things so please try them out.

Want to add a quote or quote someone like I did with the Charlie Croker quote? Then listen up. A quote should be 64 characters in length, that's including spaces, for it to appear correctly as my Italian Job quote has. Anything shorter will have the quotation mark image cut off, like so:

This is not a Spiderman thread!

By adding a few more characters to your quote the images will appear correct.

It may not be a Spiderman thread right now but there is no-one stopping us from making it into one!

Bored of using the same crappy font? Editor being a jerk? If you can't get the font you want from the editor then create your own and insert a picture with text - in the font style of your choice - added onto it.

Go crazy with your creative self

Or keep it straight forward

Traditional picture dimensions is 620 width pixels by 350 height pixels. Anything bigger will resize down to fit the 620 pixel width - which could distort your image - so check pop-up preview.

Any image smaller than 620 x 350 will automatically align to the left of your blog.

Use the align buttons shown below to move a highlighted image.

Simply click on a picture to highlight it - it'll turn blue-ish.

Then use the right align button to move it to the right side.

Or the centre button to move it to the middle of your blog.

Aligning to the right can make for a nice newspaper style look, but it is fiddly as fiddlesticks in the fiddling hands of a fiddler fiddling about. Practise for yourself, but be warned as lots of time consuming re-spacing and soft-returns is needed.

If you do want to try this then use SHIFT+RETURN to use soft breaks to shift text onto the following line. Try it. Arrange your text so that it does not interfere with your pictures. Make sure not to use + inside any bbCode as it will break the code's effects. Anything that interrupts bbCode or moves it on to the next line will stop it from working correctly, be mindful of that.
For this to work you need align text to one side and pictures to the other. For example, text left-aligned and pictures right-aligned or vice versa. Just keep at it until you get it working. Sorry, it's best I got. Or rather the editor has to offer.

This is how the code (in the picture below) should look for newspaper style.

Moving on, if you insert an odd sized picture and are tired of trying to make it fit with space bar filler then try creating and using a blank image as a base. We'll call this technique framing.

The picture below will work fine on the regular DEEPAK theme but having a white background can be an issue on DAFOE - the alternative site theme.

Place your image however you wish (I centralised it just for the heck of it) onto a transparent layer in any art app of your choice and then save it with a GIF or PNG extension.

By framing your image onto a transparent background your blog will now work beautifully on either DEEPAK or DAFOE.

And you won't have to worry about code fluctuation. In the picture above I have no spacing, returns or soft-returns around the code. The transparent frame will break up and stop the text getting clingy with the sides of your images.

Notice in the above picture the highlighted open bold tag after the picture and at the start of the second paragraph? Where'd that come from? Naughty editor.

Whenever you add a picture to your blog use View Source mode, maximize the editor and scan the code to route out any sneaky critters like I have in the picture above. You can also re-adjust any spaces that creep in too. Try to do this every time you make changes.

Once you've checked your code for errors hit either the "save" button at the top of the editor or the "save + send to preview" button at the bottom of the editor to see how everything will look for us the readers.

Not the Publish button yet! Leave that until you are 100% happy with your blog.


If you are wondering how to use DAFOE go to your blog manager settings and choose the feeds button. Then select the light side or the dark side.

While you're there you can add a header image above your blog (when you click on someone's blog it's the first large picture you see) to give it a personal touch that represents you.

Also in the above picture you can see "Your Uploads" to left of "Your Cover Photo", this is a gallery for your uploaded images. It collects images from your previous blogs ready for future use.

If you want upload images to the Destructoid server you can follow these steps.

Click on the "Choose..." button to select a picture from your hard drive and then hit the "Upload" button. Wait a few seconds for the image to fully load before you try to copy and paste it into your blog. Between your uploaded image and the trash bin below it lies a text box with a yellow and white icon button right next to, this holds the URL for your uploaded image. Click on the little icon button to copy the URL to your clipboard. To add the URL to your blog, paste it into your blog using the "Insert an image" button on the editor's menu.
You can add humongous hi-res pictures this way and not worry about looking for a image hosting website. Don't worry there are instructions on page itself to follow which you can see by clicking on the above picture.


You have the freedom to adjust the height of your image, as long as you stick with width of 620 pixels, to anything under 1000 pixels: make your image as tall as you think is necessary (within reason), but keep it 620 pixels across. I tried to test the height allowance of images but couldn't find a image hosting site that didn't shrink my images down while uploading them. The largest images I have used in this guide are 800 pixels high and 620 pixels across. If things look wonky or too large consider shrinking the whole thing and "framing" it as outlined above. Also, please be considerate of page loading for crappy internet speed suffers.

Ok, now this is the cool part, you can combine all of the above and overhaul your blog entirely by using a montage of text and images to give your blog a unique style. Like this:

Click the above picture for the full effect

You'll first need to plan out exactly how you want your blog's full and final presentation to be and then break your work down and create the individual parts. Height becomes an issue doing things this way. I created a simple example scroll of what I'm talking about and split it into two pieces each measuring 620 pixel across and 620 pixels high. If you can't find a web-host to keep your images full sized then you'll have to cut your finished scroll into smaller pieces like I did and remove the spaces. Insert them into the editor remove all the faff in between.

A thin gap will be visible (as you can see in the picture above) when all the extra spaces have been removed. When you press save the gap between your images will not widen. When they stay put it has worked. Success! Check your pop-up preview for the magical results.


Married to the Blog

Time to begin wrapping things up.

Try not to be in a rush to finish your blog and get everything perfect first time, take your time. Take the time to understand the idiosyncrasies of your publishing partner. Before you divorce yourself from your blog, have a final good preview of what you're letting go of. Thoroughly proof read your soon-to-be ex-blog before you annul your relationship to begin romancing your new blog. You should carefully assess everything before you even think about clikcing [<-haha, what a douche] that publish button. Or you may miss something like I did purposefully back there. The last thing you want is people nagging you about your spelling and grammar and not focusing on your blog's subject.

For more advice and guidance on how to get the most out of your blogged affairs check out the following links:

Andy Kauz's front page guide

Andy Dixon's front page guide

Tony Ponce's format guide


The Blog Squad

Have trouble holding a crayon? Are you cack-handed at picture horseplay? Then please do not hesitate to send me a private message asking me to feck off and stop laughing at you. While you're at it, you are more than welcome to also ask for a helping hand. I'll happily help out in whatever capacity I can. I enjoy dribbling *wipes face with sleeve* and scribbling stuff that can kinda end up looking like something the cat dragged in. Oh, but don't worry, I'll raise my standards for you.

On that note, I want to extend my cause to the you, dear reader, to help me start a rag-tag group of artists and musicians who use their super-heroic abilities to help increase productivity within our community. This talent pool would be ready and waiting to grant the wish of anybody who threw their dream imbued coin into it. Want a custom header, banner, sig, avatar or gif? Need some original music to accompany that epic Youtube video? Or an OST for that breakout game you're working on? Just ask! Once we're set up and rolling, that is.
You'd be surprised how many people there are here with talents just waiting for a reason to get invigorated and be harnessed.

Artists Assemble!

Whatever your talents are and if you wish to exercise them then please think about joining our soon-to-be-newly-minted club of artists and musicians. A thread will be opening shortly in the forums where anyone may request help with a blog or project they are working on.
This is going to an all mighty task and I understand it will take time for people to come out of their shells and expose their skills (as well as themselves) to others and, heck, it may never happen, but by Odin's musky beard I will damn well try to make so. Hope you do, too.

[insert forum link here] (soon)

Where it comes to the written part of your blog, however, that should come from your hand alone: your words should be an expression of you and your individuality - your thoughts and opinions.

If you have anything to add or want more information in certain parts expanded or simplified let me know in the comments and I will adjust, add and amend all abominations.

Thank you very much for taking the time to read my guide.

Login to vote this up!


Dookysharpgun   1
touchofkiel   1
The Scholarly Gamer   1
rowdy rhod   1
Oscarno   1
BetterCallSaul   1
Luna Sy   1
Gajknight   1
Hyper Lemon Buster Cannon   1
CousinDupree   1
Jinx 01   1
smurfee mcgee   1
Marcel Hoang   1
Alphoyson   1
DarkJack   1
Ben Davis   1
GoofierBrute   1
Makster   1
Nic Rowen   1
Retrofraction   1
Dreamweaver   1
M Randy   1
Morty   1
Occams   1



Please login (or) make a quick account (free)
to view and post comments.

 Login with Twitter

 Login with Dtoid

Three day old threads are only visible to verified humans - this helps our small community management team stay on top of spam

Sorry for the extra step!


About Luckrequiredone of us since 12:26 PM on 02.08.2014


Life doing its thing. You feelin' it, too?


Vanessa could take Samus.


Roughly Ten Things About Me:

I'm an European-Asian male living under the rule of a monarchy.


I am not a writer; I am a crayonologist. I enjoy shredding paper with pencils. It's extremely cathartic.


I'm very passionate about reading, it helps me pretend I'm English (wot wot). My favourite book is Alexandre Dumas' "The Count of Monte Cristo".


I love listening to music on trains, in parks, sprawled out on my bed and during gaming. I like any genre; favourite artists include: Underworld, James Brown, The Police, David Gray, The Kinks, Johnny Cash, Foo Fighters and Jimi Hendrix.


I adore film and popcorn. Popcorn slightly more. I couldn't pick a favourite film but I do tend to shy away from horror. Oh, fuggit I'll name-drop Leon and Gladiator.


Like fellow Dtoiders I also game.

| My Top Ten | My GOAT Game | My Sega Saturn |

Other things include: drinking too much tea, unashamedly singing poorly, making shallow attempts at keeping fit, and thinking too much.


Finally, I'm an enthusiastic cook. Currently obsessed with making Tacos. Was obsessed with quiche and focaccia.


My Ninja Gaiden Home





Resident Eggy

The Ninth Thingy

Olivia Rescue Simulator

Caption Contest # 14

13 | 12 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 4 | 3 | 2 | 1

Officially retired from active Dtoiduty.