Wednesday, April 22

Helpful Code for Customising Your Blog

Hey Guys,

As you may know I created the design of the blog completely on my own and I know it can be tricky at first if you don't understand quite what your doing, or how to achieve what you want to achieve. HTML can be a scary thought if you are trying to change your blogs appearance and design so I would like to help you. I have complied a list of some of the most common blog design questions and added how to do it.

Hope this helps you and happy beautiful blogging!

How to Add Custom Social Media Icons

1. First create your social media icons. There are loads out there if you a don't fancy making your own like Designscrazed or Vandelaydesign which have some really nice ones. If you do fancy making your own ones I suggest t keep them small. Everyone's blog is different but mine are 50px square and I recommend keeping them around that size.

2. Then upload your images to a image hosting website like Photobucket, or if you don't want to sign up to one of these then you can create a new post on your blogger and add them in to the post like you would normally then you can take the source from there.

3. Go to "Layout" and then click "Add a Gadget".

4. Then copy and paste the link below into the Gadget.

<a href="link URL here"target="_blank"><img src="image URL here.png" width="50px" height="50px"/></a>

5. Change the "link URL here" to the social media profile you want it to take users to. And change the "image URL here.png" to the image source, the direct URL of the image. 

6. Repeat this again for each social media icon you want changing the link URL and image URL each time. 

7. (Optional) You can centre it if you want by adding <center> in front of the whole code and </center> at the end of the entire code.

How to Customize Attribution 

1. Go in to "Template" then "Edit HTML", and then expand the widgets (click the little black arrow)

2. Search (Ctrl + F)  for the code below.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

3. Then, change the locked value from 'true' to 'false'. 

4. Then find the code below.

<b:section class='foot' id='footer-3' showaddelement='no'>

5. Then, change the shadow element value from 'no' to 'yes'. 

6. Then save (obvs) and go to your "Layout" tab.

7.  Find the attribution element, click edit, then click remove.

8. Now you can add in your own custom attribution through clicking the Add Gadget at the bottom.

How to Add Official Pin It Hover Buttons to Your Pictures

1. First go and get your customised Pin it Button code from Pintrest.
       Tip: Make sure the "Button Type" is set to "Image Hover"

2. Copy the code that the Pintrest Builder gives you.

3. Then go to your blogger Template and click "Edit HTML".

4. Find the code (using Crtl + F again) </body> 

5. Immediately above this code enter the code from Pintrest. The save the template.

How to Remove Pin It From Specific Pictures (Like the social media icons you just put in.)

1. Get into the HTML for whatever you are trying to unpin.

2. Add the code nopin="nopin" right before the closing slash and bracket of your image element (this /> ) in your code.

3. Done! Wasn't that simple?

Need any help just comment below or whack me an email :)
Thanks for reading!





© The Brooke Of Fashion. All rights reserved.