What are you looking for?
23 Apr 2015

Designing your blog | Websites & Codes

Hey everyone. Today I thought I would write hopefully one of my more helpful blog post that might be beneficial for anyone who wants to update their blog design or just tweak a few bits and bobs.

Over the past two years of blogging I have taught myself how to edit HTML and CSS with the help of google and lots and lots of trial and error. I think I've become fairly nifty at it! I thought I would share with you some of the quickest and easiest codes I have found which can help to make your blog look more professional. I have also included a list of some very useful websites.

Useful Websites
  • PicMonkey - perfect for creating images including blog headers, signatures and buttons. Use the 'design' option. Set correct dimensions. Make sure to save as a png image for highest quality. 
  • Photobucket - upload images here to get their html and direct codes which are needed when putting them in to widgets or different CSS codes. 
  • Da Font - huge selection of fonts available for free download. Simply click download, open the file and click install. Restart computer and your newly downloaded fonts will appear in PicMonkey in the 'yours' section of fonts. They can now be used in creating headers etc
  • Free social media buttons in every colour here
  • Generate blog button and social media button codes here 
  • How to create a social media icon for e.g. twitter: Upload the selected twitter icon image (dowloaded from link above) to photobucket. Open the button generator. Complete as follows - Your website/blog title = "twitter", Your website blog URL = "twitter.com/username" Your image URL = "direct link found next to image uploaded in photobucket". Then click preview. Copy the code presented in the field. Go to blogger > layout > add gagdget > HTML/JAVA SCRIPT and paste the code here. TADA! Enter codes for all other icons in the same HTML/JAVA SCRIPT gadget.
CSS Codes

To enter CSS codes go blogger > template > customise > advanced > add CSS

code to center your post titles:
.post-title {text-align:center;}
code to center your post dates:
.date-header {text-align:center;}
code to center your gadget titles:
.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1  {text-align: center;}

code to center your sidebars:

.main-inner .column-left-inner, .main-inner .column-right-inner {text-align: center;}
code to center your tabs (menu):
.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

automatic post signature:

.entry-content:after {

content: url(YOUR-IMAGE-URL-HERE);

margin-left: 250px;


note: to get image url upload image of signature (created on picmonkey) to photobucket and you will see a direct link at the side. Copy this link to the space above.

add colour behind gadget title: 

.widget h2.title,.widget h2


)color: #000000; height:15px; }

(change to colour code no. - can be found in picmonkey
Set post image to a fixed size: set image size .post-body img {width:500 px; height:auto; }(enter desired width)

I hope you found this blog post helpful and easy to follow, since I copied and pasted the codes from other sources the formatting has got a bit messed up so this is definitely not the tidiest post, but I hope you understand. Please, please don't hesitate to ask me any questions or to let me know if you need help with using any of this. Also, if there is something else you want to do that I might not have covered here, don't be afraid to ask, there is a chance I might know!
My email is dreamingagainblog@gmail.com.

Add your comment

Sinead Dreaming said...

I love me some cheat sheets. (; Thank you for these! I love Pic Monkey. Another one you might like is Canva. It's how I generate graphics on photos. (:

Sinead Dreaming said...

This will defiantly be helpful! Love the new header btw, its very pretty! :)

Nixie xx

Nixie--Pixie | Fashion | Beauty | Lifestyle |

Sinead Dreaming said...

I love all of these! (and use most of them!) Question, though: How did you get your sidebar gadgets to have a color behind them, and not the date header, too? It won't let me just highlight the gadget title. /:

I'll be messing around with it, too! But thanks so much, I haven't see that CSS code before! ^.^

Sinead Dreaming said...

I think that's down to the original template your blog has. Mine is the black 'Awesome Inc' one and that one treats the date and gadget headings separately :) x

Sinead Dreaming said...

I hope you do find something useful. Let me know if you have any questions Nixie :) x

Sinead Dreaming said...

Thanks Kiki, I will have to check out Canva x

Sinead Dreaming said...

Great point, I hadn't thought of it! If you'd like, you can update your post to include the Simple template's version of it. You just have to find the name of the gadget and plug it into the beginning. For example:

#BlogArchive1 {
)color: #000000; height:20px; }

That's mine, anyway. (: Thanks so much again!

Sinead Dreaming said...

Thanks for the post! So helpful x

Love Jen / enter my Mac giveaway x

Sinead Dreaming said...

Thank you so much! So useful!


Sinead Dreaming said...

This may help me :)thank you! I've always wanted to have a go myself but too scared I'll mess it up or something will go wrong!

Kirsty x


Subscribe for updates