{Blogging DIY Series} How to insert widgets into a post ~ Facebook and Pinterest

Hi there and welcome to the last DIY post for January, I have enjoyed doing these DIY posts and even more so enjoyed the feedback from you my readers. I will continue the DIY posts when I have the need to change something on my blogs but for the mean time I think I have covered what I wanted to achieve in January of 2015. Which brings me to the shock of this week being the last week of January 2015, I have no idea where time is rushing off to but I can not complain as so far into 2015 the lord has blessed me tremendously.

As I mentioned 2 weeks ago when I shared how to insert widgets into a post for Twitter and Instagram I would share with you how to insert Facebook and Pinterest widgets into a post and that day has come. Ever since I started inserting widgets into my posts I have noticed an increased interaction on my social media as well as an odd (1 or 2) new followers via insert these widgets. This has firmed my belief that adding widgets into posts does help with social engagement and allows your readers to follow you much more easily than having to click your social media icon.

Adding Facebook and Pinterest widgets into your blog is as simple as drinking water and I will show you how.

Facebook

Post by Myrabev.

1. Log into your facebook account and choose what post/picture on your personal page or fan page that you want to include into your post.

2. Once chosen, hover your mouse over the right hand corner of that post/picture and a down arrow will appear.

3. Click the down arrow and options which be shown, choose & click the last option 'Embed Post'

4. This will open up the widget and how it will look, what I love about Facebook embed is that you have the option to adjust the widget of that widget. You can make it larger or small to fit your post area.

5. Copy the html once you have edited your width (optional) and insert that into the post. For blogger in the post click the HTML tab and for Wordpress click the text tab. And that's it done, now lets move to the next widget.

Pinterest

Follow Myrabev Lifestyle's board Christmas on Pinterest.

1. Log into your Pinterest account, choose the board you want to share.
2. In the right corner you have three options, click on the dots (...) and three options will appear. Choose make a widget and widget html code will appear with preview of what your widget will look like.

3. Copy the html into your blog post area (see #5 for Facebook above).

That's you done for Pinterest, easy peasy.

Would love to hear your thoughts on how you found this tutorial. 

Ciao

{Blogging DIY Series} How to add clickable links and pictures to side bar

Having clickable images on your side bar has become one of the must do things for bloggers, this is more so now if you have a series (DIY, Personal Confessions, Book Reviews & Goals Link Party) going on your blog and you want your reads to able able to find all the posts under that heading in one place. Searching the blog does help but it's just that extra hussle that most readers don't want and some readers are usually not sure of what they want to search for.

At the end of last year I had an opportunity to work with a company that wanted to place clickable links on my blogs and since I was not against the sites the links led to I was happy to work with them. But! I had no clue how to add clickable links to my blog luckily the company did and sent me the instructions and ever since I feel like a pro when adding clickable links to my blog. The idea is so simple that even a new blogger can do it because honestly I didn't even break a sweat.

Links

1. log into your blogger dashboard and go to layout, dependant on the layout of your blog and widget areas click add widget to the area you want to add the clickable link.

2. Once the widget opens, scroll down to find 'Link List'. Click on the name or the plus (+) sign and it opens up the widget.

3. You can add as many links as you want, choose how many to show, sort out the order of display and click save.

**This is usually used when you want to share with your readers links to other websites, links to your favourite bloggers**

Pictures

1. log into your blogger dashboard and go to layout, dependant on the layout of your blog and widget areas click add widget to the area you want to add the clickable picture.

2. Once the widget opens, scroll down to find 'image'. Click on the name or the plus (+) sign and it opens up the widget.
3. Add the title of the image, choose from your files the image you want to add, click on shrink (unless image is small already) and click save.

The links you add could be anything you want but if you want to have certain posts appear under a certain image like I have for my book reviews you could go into the post and click on the label for that post then use that link or if you have a labels widget already on the blog you could also click on the required link and this gives you a link you can use.

As you can see adding clickable links and pictures to your sidebar is as easy as pie.

Ciao

{Blogging DIY Series} How to adjust your blog width.

Have you noticed how some blogs use the entire screen whilst others have open edges? Well I learnt a while back how to adjust my template but most of the time never felt the need. But since I had a make over on this blogger my designer left huge gaps on either side of the blog and I wanted to re-adjust that plus increase the size of my widget area. As I have mentioned I know how to do this without code but I recently learnt howto do it with code and I will show you both today.

**Note this is for blogger, if you need for Wordpress please let me know**

Adjust widths without code.

Step 1: open blogger dashboard, choose template and click on customise.

Step 2: on top left click on adjust widths and you can play around with the widths and watch the changes at the bottom before you apply to your template.

Step 3: Once happy with size then save and you're done.

Adjust widths with code. 

**I recommend always saving template before your begin anything code related**

Step 1. Open blogger dashboard, choose template and click on HTML 

Step 2: search width (ctrl f) and locate *header-wrapper, outer-wrapper, main-wrapper, sidebar-wrapper and footer* The main-wrapper is your post section and the rest I think is explanatory. Adjust each of these sections to your wishes and save template. That's its done.

This is how I adjust my templates, let me know if you need help I am happy to assist.

{Blogging DIY Series} How to add Google fonts ~ Wordpress

A couple of weeks ago I shared how to add Google fonts to blogger, most of us know how unflattering the default fonts that blogger has and for the entire time I had been blogging I always wondered how some bloggers managed to get really cute fonts. I always thought I had to pay to have anything on my blogs changed and to begin with I did but this year I thought I take the plunge and learn how to do it myself. It's been a really fun process learning all these cool tips and tricks and I have been enjoying sharing them with you and I am sure most of you know already but I hope one or two will find these useful or maybe a new blogger might stumble upon this post in the future and find it useful.

As I mentioned in the blogger version of how to add fonts I am happy to help if you can't understand or something is not working as shown, tweet me and I will help.

The process is easy and for someone like me who is not HTML code savvy if I can do it trust me it's a doodle (you can do it). 

Step 1: Go to Google fonts page and choose the font you want, since with blogger I showed you how to add one font and briefly mentioned how to add multiple fonts I will share how to add multiple fonts to wordpress.

step 2: Once you have chosen the fonts by clicking add to collection, click on review at the bottom of the page (in collection) and it will move you to the next page where all the codes are.

Note: The fonts you have chosen will be embedded in one code line which is what you need for the next step.

Step 3: Copy the code and navigate to your Wordpress template (dashboard - appearance- editor) on the right hand side click on header. Once header code is up find the fonts code to replace with your new code. **Remember to save once you add new code**

Step 4: To add the different font styles you picked out, head to CSS styles (bottom right). In the css styles search for "font-family" and this will display the different areas e.g 'body post, sidebar, header font' etc. All you need to do is head back to Google fonts and choose which font you want for each section and replace what's there with the new font style. **only replace what you adding i.e. Font-family; sanif;curve. Nothing more **

REMEMBER TO CLICK SAVE AND REFRESH YOUR BLOG FOR CHANGES TO APPEAR

If you want to change the size of the font for your posts either add a line below the font style (if not there like mine) or just increase/decrease the font size number.  

I hope you found this DIY post useful, please let me know in comments section also if you need help let me know.

{Blogging DIY Series} How to insert widgets into a post ~ Instagram and Twitter

I am sure by now you are more than aware or have picked up from other bloggers how to insert different widgets into your posts. It did take me over a year to actually find out how to add widgets like instagram, pinterest, facebook and twitter into a post. I was very curious but never knew exactly how to search for it because believe you me I didn't even know they were called 'widgets', since I have started blogging I have learnt so many terms it's funny when I say them to none bloggers they look at me like I just walked back from Mars or some mental institution near by. For those new to blogging or those who have just never ventured out into finding out but have been curious I will show you how to add these widgets into your posts and next time when you feel like sharing a picture which you don't have a copy of on your desktop and its only either on instagram, facebook, twitter or pinterest see how to share them easily plus encourage engagement and drive traffic to your blog from social media sites

1. Instagram - Go to your instagram page and click on picture you want to include in post. In the bottle right hand corner there those weird dots, hover over it and it will display embed. Click on this, copy the code and paste in HTML part of the blog post. In both blogger and wordpress change view by clicking HTML for blogger and TEXT for wordpress and paste the code. ** Leave space before you start typing anything as if you accidentally type into the code when you continue with your post, the picture won't display it will appear blank when post is published.**

Come link up your goals, resolutions etc here http://www.ajulydreamer.com/2015/01/2015-monthly-goals/ #bloggersgetsocial #bloggers #bloggoals #goals #2015goals

A photo posted by A July Dreamer (@myrabev) on Jan 1, 2015 at 6:39am PST

2. Twitter - Go to your twitter page, create your tweet and post it. Then go to your twitter profile, find the tweet you want to include in post. Click on the tweet and in bottom right click (or if there is picture its usually on top right of picture) on the dots and choose embed code, do same thing as Instagram and you're set.

Come link-up your monthly #GoalsFor2015 http://t.co/vfDFlGfDdh and get some exposure for your site.@FemaleBloggerRT pic.twitter.com/qyvzsLNe9k
— Myrabev (@MyraBev) January 6, 2015

What I love about using widgets is that gives people a chance to quickly retweet your tweet if embedded a twitter and for Instagram they could easily like and even follow you Instagram. As bloggers we know its all about making it easy for the readers to follow us on as many social networks also it gives them a chance to notice that you're active on your social accounts its not just for the follow numbers.

I will be sharing the Facebook and Pinterest tips next week, I hope you found this useful and relevant. If you struggle or need help, I am always on twitter so get in touch or drop me an e-mail.

{Blogging DIY Series} How to remove Wrench ICON

Ever since I started blogging I have wondered how people Created, Modified and/or Edited Html code and it has had really bugged me. I have used a few bloggers to design a blogging template to my liking e.g. this blog The Myrabev Life or bought a pre-made template e.g. A July Dreamer template and though I am grateful I wondered if once I have bought and paid for the template is I could modify it and maintain it myself instead of hiring someone to do it for me and so the research began last month on HOW TO change certain things on my blog that I was not happy with. I shared with you when I started this series How to create and add a personalised favicon to your site for: Blogger then Wordpress since my blogs The Myrabev Life is on blogger and A July Dreamer is on Wordpress that I wanted to be able to modify my blogs myself. When I did these two posts I have been very happy with the feedback not only here on the blog but on facebook, g+ and pinterest. I then shared with you How to install google fonts, I have wanted to learn this for the longest time as there certain fonts I want for my blog and some of you may have noticed have used 3 different types of fonts on this blog (but leaving the blog post font simple and readable). At the moment I have only done for blogger but I can share how to add fonts to wordpress if people are interested or if I ever get a chance.

Today's post I want to share with you something I only recently learned and that's how to remove the wrench Icons, I have known for a while how to remove the quick edit for the pencil that appears at bottle of blogger post when admin views the post but I could never work out how to remove the wrench Icon (screw driver and spanner) seen at nearly all the widgets in blogger. I started my usual 2-hour research but this one was more like 10 minutes max to just make sure I understood what modifications I needed to do to the html code. This might sound intimidating when talking about html codes but its really not, if I can do it trust me then you can do it because I am useless at all these html code stuff but for my blogger I am slowly learning what I need.

Step 1: Go to blogger dashboard, open templates then click on edit template.

Step 2: Search for  tag or tag in your template: , if they are connected by dots don't be shy click on them to open it up

Step 3: Insert this code [.quickedit{display:none;}] immediately after  tag or before closing tag, then click save.

Step 4: Refresh your blog and you're done

Before (see right side bar - wrench visible)

After (see right side bar wrench gone :) )

I am learning so much about coding and though I am not an expert there are things that I know I can change myself I am confident enough every day that I try something new. 2015 is another year full of opportunities, growth/development and so much joy and people I am embracing it all. Let me know what you think of this series, I know some of you are already pros and know all these so please let me know in the comments what other ways or improvements could be made to "Removing Wrench Icons".

{Blogging DIY Series} How to Add google fonts

I have been blogging for nearly 2 years now and for the life of me I could never figure out how people changed their blog fonts. I thought I had to change the template to have a good font because let's be honest the default fonts blogger has are not the most admired. I spent nearly two hours last night searching and searching how to change blog fonts and I found it. I spent the next hour laughing at myself for not really learning this sooner, I am no expert nor am I code savvy but this is so easy you will kick yourselves if you didn't know or hadn't kicked yourself already. As I try to continue to learn things about blogging that I did not really put much thought into I am releasing a few pounds (££) later that these are things that I could have done myself and didn't have to pay anyone to do it for me. I wish I had learned some of these Blogging DIY tips sooner but nevermind I am learning now and passing on the little knowledge I have acquired.

Today's Blogging DIY is how to add Google fonts to blogger (I can do wordpress if people request this) template in a few steps and you don't even need a tech genius you just need to backup your template. Thank you for the wonderful feedback on How to create a favicon (Tab Icon) for Blogger and for Wordpress posts.

Step 1: Visit Google fonts page and browse, then choose the font (s) you want to add to your blog. Now for the purpose of this post I will show you how to add one font and if you request I can show you how to add multiple fonts.

Step 2: The font you have chosen, click on 'quick-use' - thats the middle box with the small arrow inside pointing towards the right. This will open up a new page with the chosen font and the styles available for the font i.e. curve, italic, bold etc.

Step 3: Scroll down and copy the code, example "" for some sites you need to add a forward slash (/) AFTER the final apostrophe and BEFORE the final bracket.

Step 4: Go to blogger dashboard, open up your blog template and click on edit HTML. Find your fonts code (will look like above only difference is type of font e.g. above is open+Sans), you can also search for this by doing ctrl F in the template and searching for fonts. My fonts code was in line 5 of the code in the template so start there.

Step 5: Replace your current font code with the new code from google fonts page, remember to save. Then ctrl F and search for font-family, once found copy the final code on google fonts page and paste the whole font-family line e.g replace the current font-family line code with "font-family: 'Open Sans', sans-serif;" Remember to save after this and you're done, refresh your blog and they should be functional.

If you want all the font-family to be using the new font then change all by scrolling down (usually kept in same section of template) but if you want didnt fonts then in Step 2 instead of 'quick use' click add to collection as many fonts as you want reflected in the blog as default. Blogger will then create one code like in Step 3 but will list the fonts included. In the CSS part of google fonts page it will list the font-family individually and you need to choose which font for which area. I had noticed for me my blog title doesn't change no-matter what and since am not code savvy I am leaving it as it dont want to mess anything up. IF you want your blog body (so the post) to be certain font then choose from the font family in your collection and same applies for the side bar, back/forward pages etc.

I hope this was helpful and on too confusing, if you try it let me know and if you need help let me know as well I am happy to help.

{Blogging DIY Series} Create your site tab icon ~ Wordpress

So you have survived the first few days of the new year, how do you feel? How is 2015 shaping up for you? 

As I mentioned last week I want to be doing some Blogging DIY posts, I do not know how long this will last but I hope to share what I have learnt in my almost 2 years of blogging. I am in no way claiming to be an expert, I am sharing what has worked for me and things I feel some new bloggers (even older) would appreciate.

Last week I shared with you how to Create Your Site Tab Icon for Blogger and received nice feedback, as I promised last week I am sharing today how to install the personalized tab icon for wordpress. My way is a simple way but only if you have installed Jetpack with your wordpress theme, I will share other alternatives that I found whilst doing my research to help those who do not yet have Jetpack plugin installed.

STEP 1a: Create the Icon you want to be associated with your blog, this is part of your branding and identity.

STEP 1b: Save this file on desktop as jpeg, png or .ICO format. The size of the file should be 16x16 pixels or 32x32 pixels and no more.

STEP 2: Jetpack (if installed), add the widget called Site Icons which can be located on the Jetpack dashboard.

STEP 3: Go to settings then click General, scroll to the bottom and upload the favicon file you saved on your desktop. Click save at the bottom of General settings and that's you done.

For those who do not have Jetpack installed I found these two nice articles which I think are really good and simple enough to help you add the favicon or tab icon to your wordpress site or website.

• How To Add Favicon to WordPress?
• How to Add a Favicon to a WordPress Blog or Website

I hope this was helpful, let me know your thoughts and add any comments on how this could be improved or even done better.

{Blogging DIY Series} Create your site tab icon

Happy New Year, I hope you had an amazing time with family and stuffed your faces in delicious foods I sure did since my mother cooked our New Year's Day meal and I have not had her cooking in a while since I do not live with my parents. This new year has given me a chance to start out a new series I have been wanting to do for a  while not just never had the guts nor the time to implement it so let me know what you think.

Have you ever wondered how some websites or even blogs have a personalised Favicon (otherwise called logo) installed? I certainly have, this year will be 2 years blogging in 7 months time and it only took me also a year and half to learn that I can actually do and make my own personalised logos for my main website A July Dreamer and this blog The Myrabev Life. I was very happy to find I can actually do this myself and do not have to pay anyone to do it which in the blogging world is always a bonus if you can do it yourself. 

You will notice that both my blogs have the same logo and this is by choice and not because I couldn't be bother to do another one.

Today I will be sharing how I made my Favicon for The Myrabev Life blog and next week I will share how I made for A July Dreamer in 4 easy steps.

STEP 1: Using Photo editors like PicMonkey, create a logo that you want associated with your blog or site. I chose a red kiss since I am obsessed with red lipstick if my lipstick collection is anything to go by.

STEP 2: On Blogger, go to layout and in the top left corner click on edit Favicon.

STEP 3: Using the logo you created and saved on your desktop in step 1, upload the file. **Ensure for Blogger logos that its 100KB.**

STEP 4: Save the logo and save the layout then view your blog. 
For some it may take a few minutes to configure and show up so wait a few minutes before checking the Favicon widget if it worked or not.

There you have it, four easy steps and you have a logo of your own doing. I know as a blogger I open up a lot of tabs when commenting on blog posts so it makes it easy for me to locate what's what and if my PC was ever to crush and I can not restore instead of going back and re-checking all I usually work with the logos.

Let me know if you found this useful, and if you try it and have difficulties let me know I am happy to help.