Top Tip - Header

Hello readers! 

I thought it was about time for another Top Tip, and this week it is about Blog headers. 

*************************

When you first start out with a Blog it may seem difficult trying to perfect the header of your Blog and will more than likely end up frustrating you! I know from experience that it took ages trying to figure out how I wanted mine to look, whether I wanted images, fancy writing, borders and so much more. So I am here with a few handy links and advice which should hopefully help you out. 

Blogger does offer an wide and varied range of fonts for your chosen header name however if you still don't find any that you like then this is what to do...

Creating a header is simple...as long as you have either Photoshop, Paint or even Powerpoint! I used Paint and opened up a blank rectangular sheet like the one below. 

I used my favourite site dafont.com  and downloading a font style (they have so so many to choose from, its great!). To download a font style and then use it is pretty easy and all info can be found on the site so don't fret. I typed in my header choice which was "hushedsecrets", chose the colour and format; and I then saved it as a Jpeg. Go onto the 'Design' tab on your Blogger dashboard and click on the header 'Edit', this will bring up a new pop-up window where it will give you varies options - in my case, and what I suggest to do in order for yours to look like mine, tick the "instead of title and description' which will then remove any text you had in place as part of your header. Upload your Jpeg file of your newly designed header and hey presto it is up and ready to be admired at! To adjust the widths either simply adjust the width of your Blog using the 'Template Designer' or make the rectangular sheet on Paint larger. 

*************************

The new craze of writing text filled with an image is floating heavily around the Blogesphere lately and so I thought I would share with you my own method. 

Step 1: Open Powerpoint

Step 2: Insert Word Art text

Step 3: Type in your header name

Step 4: Highlight your text 

Step 5: Click 'Text Fill' 

Step 6: Slick 'Picture'

Step 7: Choose picture then upload

Step 8: Copy text into Paint then save

*************************

If you don't feel like you can design a header to suit your needs then I highly recommend you check these Blogs out as they will do it for you for a small price. 

http://abbzzwdesign.blogspot.com/ has designed various Blogs including http://www.dizzybrunette3.com/

http://rachinald.blogspot.com/ has designed various Blogs including http://www.beautycfw.com/

*************************

Has this helped you?

What do you think of this week's Top Tip?

Top Tip - Borders

Hello Bloggers!
As promised here is some useful information for those who need that little bit of extra help with HTML and Blog design. If you wish to post images with or without a border then this Top Tip is for you!

*************************

Sometimes once uploaded the image can have a white border around it or a grey shadow and this might not please everyone and therefore this code is the one you need to apply to your Blog. 

Step 1: Go to Blogger dashboard 
Step 2: Click on "Design"

Step 3: Click on "Edit HTML"

Step 4: Tick the "Expand widget templates" box
Step 5: Press CTRL and F at the same time (a little box shall appear)
Step 6: Type ".post-body .tr-caption" into the box (it will then highlight the text within the large HTML box
Step 7: The highlighted text will be apart of this paragraph - delete the 3 bold lines
Step 8: Repeat this twice as there should be another section within the large HTML box containing this paragraph again

.post-body .tr-caption-container img {

padding: 0;

background: transparent;

border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);

-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);

box-shadow: 0 0 0 rgba(0, 0, 0, .1);}

}
*************************

Or perhaps you would like to add a border to your image so it stands out, therefore you need to use a few HTML codes in order to achieve this effect. I will now explain the terms so you shall understand what they are when I refer to them: 

Border - there are a lot of border styles and we can change its colour.

Padding/ Background - the background between the image and the border and we can make it a picture or just a plain colour. 

*************************

Simple border: The HTML for an image with a solid border, 1px in width, colour pink - Add your image as usual and in the "Edit HTML" tab add all the coloured code after the image location and before the />. To change the colour simply replace the code, however always remember to use # at the start. To enlarge the width increase the number and visa-versa.

<img src="http://PLACE LINK HERE" 

style="border:1px solid #CC0099;"/>

*************************

Border with padding: Apply the same technique as above however insert this HTML code into the "Edit HTML" tab. The padding for this code will be blank. Again, the same rules in order to change apply from above.

<img src="http://PLACE LINK HERE" 

style="border:1px solid  #CC0099; padding:6px;"/>

*************************

Border & coloured padding: Using the instructions from before apply this code to the "Edit HTML" tab. To change colours, width etc please see above. Please note the coloured padding is described as the 'background colour', do not fear!

<img src="http://PLACE LINK HERE" 

style="border:1px solid #CC0099 padding:6px;

background-colour:#000000;"/>

For a wide range of HTML colours please click here

*************************

So what do you think of this tutorial style post on borders? 

Let me know if it helped anyone at all!

Also suggestions on next Top Tip would be much appreciated!