How to Create Social Media Icons!

13 February 2015

DIY Blog Elements

How to Create Social Media Icons!

Well, it has been a while since I've written a blog tutorial. So, I decided that because I'm currently in the remakes of my blog layout (spoiler alter!), I thought I would share my ways of saving a few dollars and creating some of our your social media icons!

This tutorial is very simple! I will be using picmonkey for this tutorial, but you are free to use any editing software!  Let's begin!

STEP 1: GET YOUR ICONS!

Okay, so you can't have social media icons without the the actual icons. In many of the editing softwares, they won't have a lot of the social media icons. So, you need to go out and get them. I got my icons from ICONFINDER. What you simply have to do is type in the icon you want. I will be doing the example of instagram! 

You might have to scroll down past the premium icon to find the free ones! Once you find the icon you want to use, you can simply save the image by pressing PNG. It should automatically save to your computer and into your downloads folder.  Create a new design and change the dimensions to 40 x 40. I personally like to use 40 x 40, but if you want it to be smaller, you can definitely play around with the sizes, 30 x 30 for example. 

STEP 2: GO TO YOUR FAVOURITE EDITING SOFTWARE

 Create a new design and change the dimensions to 40 x 40. I personally like to use 40 x 40, but if you want it to be smaller, you can definitely play around with the sizes, 30 x 30 for example. 

STEP 3: DESIGN YOUR ICON

This is where the fun part comes in!

On picmonkey, You want to select the butterfly icon on the left hand side, and select geometric shapes. In this example, I will be creating circular social media icons! So, select a colour you want to use, and create that shape you want!Well, it has been a while since I've written a blog tutorial. So, I decided that because I'm currently in the remakes of my blog layout (spoiler alter!), I thought I would share my ways of saving a few dollars and creating some of our your social media icons!

From you obviously select the shape you want, and the colour. Simple so far eh? 

STEP 4: UPLOAD YOUR ICON

From the same butterfly section, see the dropdown arrow that is beside the "YOUR OWN" option. Click that, and select from computer. From there find the option of the social media icon you downloaded and uploaded it.  Resize your icon to fit in the your circle (or whatever shape you want!) And change the colour of what you want your icon to be. Resize your icon to fit in the your circle (or whatever shape you want!) And change the colour of what you want your icon to be. 

STEP 5: CUSTOMIZE YOUR ICON

Resize your icon to fit in the your circle (or whatever shape you want!) And change the colour of what you want your icon to be. 

STEP 6: SAVE YOUR IMAGE

Save your image - make sure you save in PNG format, because it is better for archiving and will look better on your blog! And ta-da, you have your social media icon! That's it! Hopefully this tutorial will help you create your social media icons! And save you a little bit of money!

MY EXAMPLE:

PLAY AROUND WITH IT: 

That's it! Hopefully this tutorial will help you create your social media icons! And save you a little bit of money! 

Read article

How to Centre Post Footer in Blogger

21 June 2014

DIY Blog Elements

How to Centre Post Footer in Blogger

Hey bloggers, welcome back to another edition of my blog tutorials, click HERE if you're interested in reading my previous posts! Today's post is about centring your post footer in Blogger. This is a very easy tutorial that will literally take seconds! From this:

To this:

Let's get started! STEP 1: Go to TEMPLATE then EDIT HTML. In the text box, on your key board hold CTRL + F and search for ".post-footer {". You should see something like this:
.post-footer { margin: 20px -2px 0; padding: 5px 10px; color: $(post.footer.text.color); background-color: $(post.footer.background.color); border-bottom: 1px solid $(post.footer.border.color); line-height: 1.6; font-size: 90%; } STEP 2: Add the following code ABOVE the code you just search. .post-footer {

text-align: center;

}

And that's it! Save it and you should see your post footer centred! If you want to have your post footer aligned to the right, simply change the word "center" from step 2, to step "right". 

Read article

Remove Space Between Date and Title

07 June 2014

DIY Blog Elements

Remove Space Between Date and Title

Hello, hello bloggers! Welcome back to another blog tutorial from yours truly! If you're like me where you design your own blog, I know the HUGE space between the date and blogger post title can actually be so annoying and kinda ugly.  Well, you're in luck! Today's tutorial is going to show you how to reduce that space to your liking. This tutorial doesn't require any knowledge of HTML coding, it is as simple as copying and pasting a code I provide you! You will immediately see a reduction in space between blogger date and blogger title. If you want to change the space, by either adding more space, or reducing more, simply change the number in the code to your preference!

Ready? Let's begin!
Right now, your blog post pretty much look like this:

STEP 1:

On your blogger home page, go to TEMPLATE and select CUSTOMIZE.

 From here you want to select ADVANCED and scroll down to find ADD CSS.

STEP 2:

Copy and paste the following code into your CSS:

h3.post-title { 

margin-top: -20px !important; 

}

Then press enter.

You will immediately see a reduction in space between blogger date and blogger title. If you want to change the space, by either adding more space, or reducing more, simply change the number in the code to your preference!
If this tutorial helped you, please leave your comments below! If you have anything you would like me to create a tutorial for, let me know as well!
For more of my blog tutorials, click HERE!

Read article

How to Remove the Dashed and Dotted Lines on Blogger

17 May 2014

DIY Blog Elements

How to Remove the Dashed and Dotted Lines on Blogger

NOTE: This tutorial works best with the Simple Template.
I use the Simple Template on blogger, and customize literally everything from there. It is, in my opinion, the easiest and cleanest template on blogger to change and alter HTML codes to give it the exact look you've always wanted. And, sometimes the dotted and dashed lines found at the bottom of your blog can easily give it away that you're using a Simple Template.
This tutorial doesn't require you to understand how to use HTML. Just follow the steps I provide you!  I provided pictures in case you are need to see what I am talking about; if you are unable to see the picture clearly, simply click not the picture for a larger view! Let's get started!
 Currently, this is pretty much how the bottom of your blog looks like:

STEP 1:
Go to your blogger dashboard. From here, DOWNLOAD YOUR TEMPLATE by clicking on "Backup/Restore" at the top right corner, and then selecting "Download Full Template". 
STEP 2:
Select "Edit HTML" and click anywhere in HTML box to make the next step easier.
Hit CTRL and F together on your keyboard, and type in "dashed" and then press enter. there should only be one result. Delete the word dashed. Removing dashed removes the dashed line at the bottom of your blog.

STEP 3: Next, we are going to remove the dotted line.  Hit CTRL and F together again, and type $(paging. Delete the code: $(paging.background).

STEP 4:

Save your template and voila! You now have a Simple Template 

I hope this tutorial helped you! If it did, leave me a comment and a link to your blog. Thanks for reading!

Read article

How to Centre Your Post Title and Date Header

08 March 2014

DIY Blog Elements

How to Centre Your Post Title and Date Header

Hi everyone! Welcome back to another edition of my blog tutorials! This is a weekly series I do to help you all with any codings here and there to make your blogs look professionally done, without paying a dime! 
Today's tutorial is an easy one, where it is literally just copying codes and pasting.  So if you don't know anything about HTML codings, or CCS... you're in luck!Lets begin! How to Centre Your Post Title and Date Header!
Step 1: 
Go to your template designer.  Select "Advanced" and scroll down and select the option "Add CSS".

Step 2:
Copy and paste the following codes into the open section after selecting "Add CSS". PRESS ENTER after you pasted the code. 
.post-title { text-align: center; } .date-header { test-align: center; }

Step 3:
Click "Apply to Blog" and then you're done!
Simple wasn't it? If you have any suggestions of what my next tutorial should cover, leave a comment below, and I will start working on it! Otherwise if this helped you, let me know and leave the link to your blog in the comments below! 

Read article

Creating Label-Based Pages

01 March 2014

DIY Blog Elements

Creating Label-Based Pages

Hello everyone! Welcome back to another edition of my blogging tutorials series! I've beginning to receive requests which makes me really happy. That means that I'm actually helping a few of you out there get you blogs together! Today's tutorial was a request from Samantha.  So just follow the steps below to learn how to create label-based pages like my "Faith" page tab you'll find on the main page of my blog. So let's begin!
Step 1:
You have to make sure you have labelled your posts according to the topic you want your page to be devoted to.  For example, on my Faith page, you'll notice at the end of each blogpost, I've labelled them as "faith". 

Step 2:
Now go back to your blog. From there, look for the post with he desired label, and click on it. This will direct you to ALL your posts with your desired label. 
Example: See below how I have the label Faith and God? Since I want to create a page with all my posts devoted to Faith, I will click on faith.  

Step 3:
When you are directed to a new page, copy the URL found in your browser address bar. 
Step 4:

Now in your dashboard, go to the "Layout" and edit the PAGES gadget you have on your blog. Scroll down and select "Add Link Page".  From here you will add the title you want this page to appear on your blog.  Then paste the link into the address link.  Click Save Link, then save your arrangement.

Now all posts that have your desired label will appear on that page! Let me know if this helped you! And if you have any suggestions tutorials, let me know! 

Read article

How to Add "You Might Also Like" on Blogger

22 February 2014

DIY Blog Elements

How to Add "You Might Also Like" on Blogger

Hey bloggers! Welcome back to another edition of my blog tutorials. I am trying my best to keep this series updated weekly, so if you have any suggestions of what tutorial I should do next, please don't hesitate to leave a comment and I'll work on it right away! 
A few days ago, I was asked how I got the "You might also like" at the bottom of your blog post. Since I also had a hard time figuring out what to do at first, I decided to create a tutorial for everyone who was also wondering the same thing.  I'll include pictures just in case things start to get confusing!
Step 1:

Go to LinkWithin.  The page should look something like this:

Step 2:
Fill in your information and select how many posts you want to be displayed under each post (i.e., 3, 4, or 5).  Then select "Get Widget!"
NOTE: for "Platform" select other rather than blogger or wordpress; in order to obtain the HTML code. 

Step 3:
After selecting "Get Widget!" You will be directed to a new page. Copy the code given to you in the box.

Step 4:
Now go to "Layout" on your blogger homepage, and select "Add Gadget".
From there, scroll down and add "HTML/JavaScript".  A new window will open, and this is where you will paste the code you coded from step 3.

Step 5:
Drag the HTML/JavaScript gadget UNDER your blog posts!

Step 6:
Save your arrangement and view your blog! You should have "You Might Also Like" right under your posts! (Just like this one!)
Did it help? Let me know! Happy Blogging!

Read article

How to Center Page Tabs

15 February 2014

DIY Blog Elements

How to Center Page Tabs

Hello everyone! Welcome back to the tutorial series that I am currently attempting to do every Saturday! Today's blog tutorial is about centring your page tabs on Blogger.
Let's get straight to it! 
So right now your blog has your page tabs like this:

Step 1: 
Backup your template first before making any changes!
Step 2: 
Go to your Dashboard and Click on "Template".
Step 3:
Click on "Customize".

Step 4:
Go to the "Advanced" Tab in the Template Designer.
Step 5: 
Scroll Down until you see the "Add CSS" Tab and click on it.
Step 6:
Copy and Paste this code in the "Add CSS" Window:
.PageList {text-align:center !important;} .PageList li {display:inline !important; float:none !important;}

Step 7:
Press Enter and then click "Apply to Blog". And that's it!

Let me know in the comments if this helped you out! And leave your blog links below so I can check it out! If you have idea of what tutorials you would like me to do, also leave a comment! 
Happy Blogging!

Read article

How to Add a Signature to Your Blog Posts

01 February 2014

DIY Blog Elements

How to Add a Signature to Your Blog Posts

Happy Saturday everyone! As you've all noticed, I've been pretty much posting up blog tutorials every Saturday. I'm going to continue to attempt doing so, unless I have no further ideas of what tutorials to provide for you.
Anyways, lets get to the good stuff. Today's tutorial is about:

Step 1:

Create a signature using your favourite Photo Editor.  I use PicMonkey using the size 200x70.  This size is neither to big or too small. 

Step 2:
Upload your signature picture to your favourite image host site. Most people use photo bucket or picasa! As long as your able to get the image URL, it will be fine wherever you post it.  I post mine onto my private separate blog that I use only for designing my blog. 

Step 3:

Copy the direct link or image address of the image, and paste it within this code: *replace "YOUR IMAGE URL", but do not remove the quotation marks!*

<img class="left" alt="post signature" src="YOUR IMAGE URL">

Step 4:

On your blogger account, go to "Settings".  Under "Settings" click on "Post and Comments".  You will see this:

Beside Post Template, you will see "Add".  Click "Add" and a box will open. 

Step 5:

Paste the code from step 3 with your image URL in the box.

If your want your signature to be centred, add the centre tags:

<center> <img class="left" alt="post signature" src="YOUR IMAGE URL"></center>

Step 6:

Click on "Save Settings" at the top right hand corner. 

That's it! 

NOTE: The signature image will not show up on previous posts, but it will on future post that you draft!

Did it help? Let me know! And if you have any ideas of what tutorials to provide, just let me know!

Read article