Hello there! As a Tumblr-user-for-years, I thought I had just sufficient information about blogging and "coding" so I could start running my own thingy now. Soon enough I realized that I was very wrong. The main reason why I wanted to switch to Blogger was because I thought it's a more independent platform and I could do just whatever I want. So I think you can guess how disappointed I was when I was stuck with the basic blogger template and couldn't make any cool changes.
In this entry I will tell you about my attempts in order to stimulate my passion to blog by explaining how I customized my blog step by step. As a reminder, I want to tell you that I have no claim to be the best one out there to show you the way, or even a good one. It was just very frustrating for me when I first decided to join Blogger and saw how it was more complex than I thought, with unsufficiency of guidance thoughout the internet. So all I want to do is to help people who felt like me and show them they can do it, too.
STEP I: EXPLORE
That's true! First thing you might consider doing as soon as you create your new blog is to explore the Blogger system and get familiar with all the terms and the process. Go to your Blogger dashboard, you'll see a vertical section on the left hand. Here, you'll be able to preview your own blog and statistics, write new entries etc. But more importantly - at least for now - you'll see layout and template at the bottom of the section. First off all, whatever your template is going to be, you will need general infromation about the usage of the layout. On my blog I have a navigation-wrapper part, a top-social part, header, main part, and the sidebar. As time goes by, you can add more parts or remove the ones you have, it's all customizable! The main three parts, however, are the header, the main part, and the sidebar. To get the best use of your layout, you should know what gadgets are and what you can use them for. That's why you should click on one of the 'add gadget's and find out what they are meant to be, and see the widespread usage of gadgets.
STEP II: HEADER
There are three reasons why I think header is just the most important visual part of a blog: first of all, whether you have a simple/basic or a paid template, you are going to have to attract the visitors, and header is just the right place to do it. Second, headers actually tell a lot about the blogger. For example I love the dusty colors as well as the joyful yellow, I love plants, and I'm an autumn person. Third, you can harmonize all the colors you are going to use on your blog according to the colors you have indicated in your header! Now, the question is, how are you going to make your header?
1. Get inspired! My suggestion is, visit your favorite bloggers and check out their headers. Is it minimalistic? Chaotic? Cute? Find out what changes you would do if you were in their shoes. Then go to Pinterest. Search for pictures, drawings or symbols you would like to indicate in your header. Don't forget to save them! You could also paint your own header and use it, but I'm not quite good at painting so I used a beautiful flower painting I found on Pinterest.
2. Well you have a draft in your mind, but how are you actually going to indite it? As far as I can tell, there are 2 ways you can do it. You could either try to do something on your own or get help from someone! I did it myself, but there are artists out there on the internet painting personal headers for people, too. Check out Hannah for example, she's a very talented artist who also owns a shop called 'The Lazy Pencil Co.'. As for what I did, though, I used PicMonkey. This is an online website (free) where you can edit your pictures, edit others' pictures, or draw pictures. First of all, click 'collage' and choose the pictures you saved. But the important thing here is you have you change the size of your canvas. I wasn't sure about mine, but I knew it's supposed to be horizontal, so I made it 1100x300. After you save the basic canvas in your computer, go back to the home page of PicMonkey and pick 'design'. Again, I wasn't sure what the size of my canvas should be, but I knew it should be horizontal, so I picked 'Facebook cover' and it worked just well! (Later I found out that you can learn the size of your header by going to 'template' on your blogger dahsboard and then 'customize') Once you pick your canvas size on PicMonkey, click 'open' at the top of the page and find the collage you have just made. On the left, you will find the basic editing tools. You can change the colors, apply effects, and add text. It's all up to you!
3. Well you saved the canvas in your computer, but how are you going to use it on your blog? First, go to your blogger dahsboard, and find 'layout' on the left. Once you click it, you'll see the layout outline of your blog. Go to header, and pick 'configure header'. Here, you can add the canvas you've been working on. And you can choose to replace the title of your blog with it, as I did, or you can prefer to keep both. Well, voila! That's all for the header.
STEP III: TEMPLATE
I've first had this blog in late 2015, when I was just back from a 50-day-summer-holiday spent in the United Kingdom, and I was very tempted to write about my journey. But no matter how many hours I spent customizing my blog, I couldn't find any proper (free) templates and the ones I made by myself by developing the basic blogger template didn't satisfy me at all. One thing I can tell is that there are a lot of great & customizable templates if you are willing to pay for them, but it's the other way around for free ones. But because I've just started this blog, I wanted to keep it free as much as possible. So assuming you already know how to use the templates provided by blogger, I will tell you about downloading and using free templates you will find on the internet.
1. Where to find free templates for blogger? Unfortunately there are not many websites, and the ones you find will actually indicate the same templates! I found mine on cssauthor. You can check live demos of each template here, and download the ones you like. Once you click 'download', it will download an entire zip file on your computer. That's why you will have to click right on the file, and 'extract files..".
2. How to use the template on your blog? After you have extracted the zip file, go to your blogger dashboard, choose 'template' on the left, click on 'back up/restore' on the top right. First of all, in case you might have a problem with your brand new template, you might want to download full template before uploading the new one. I don't know if it really works because I haven't really done that, but they recommend you to do so. Second, you have to pick a file. So click on 'pick a file' (from the computer), find your zip file, open it, and select only the XML file. The type of this file should be 'XML Document'. Next step, upload it. Ta daa!
3. Once you have uploaded your template and you go back to template on the left hand of your blogger dashboard & try to customize it, you will realize you are not going to be able to customize it at all. In fact, you can't even change the color in most of the templates. That's why, if you are not an expert or something (like me), you should be very careful about the colors while picking the template, too. But always keep in mind that you can take help from the website you have downloaded your template, and in fact in the zip file you will find a Chrome HTML Document called 'documentation'. In case you want to learn more about customizing your free template or in case something goes wrong, feel free to check this doc!
STEP IV: SOCIAL ICONS
The template is ready, the header is just fine, and you know how to use gadgets. What is next? You want to direct your visitors to your other social media accounts, such as Instagram or Pinterest. The thing is, I knew I wanted to have personalized social icons before I even asked myself if I really had a lot of online accounts. I have a personal Tumblr account that I like to keep to myself, a Youtube account that I don't even use, a Linkedin account just for school.. So what's the usage of sharing all these unrelated accounts with my visitors? Now the only icons I have are Gmail, Instagram, and Pinterest. Here is how I added them on my blog.
1. First thing you should know about adding social icons on your blog is all is just an HTML process. Well, not all, you have to find the icons you want to use, too. You might use Pinterest or even Google images, it will just be okay. But here is what I did: after some research, I found this bucket of social media icons that contains very cute colors of each button. After I picked the ones I like, I opened a new tab on Chrome and went to my blogger dashboard. I went to layout section, and clicked 'add a gadget' on the sidebar. Now because it is all about HTML as I said, you should add the 'HTML/JavaScript' gadget. After you have done that, go back to the bucket tab, pick one of the icons you are willing to use. On the right side, you will see a section called 'share this photo'. Click on the HTML code, and it will copy itself. Go back to the other tab, paste the code on your HTML/JavaScript box. Now, the code should look just like this:
<a href="http://s1166.photobucket.com/user/printsmitten/media/FREEBIES/Social%20Icons%20Freebies/peach-insta.png.html"target="_blank"><img src="http://i1166.photobucket.com/albums/q602/printsmitten/FREEBIES/Social%20Icons%20Freebies/peach-insta.png" border="0" alt=" photo peach-insta.png"/></a>
The first thing you should do is to remove the highlighted part. Once you do that, write down your actual social media link there. For instance, because this is an instagram icon, I should write my instagram URL which is https://www.instagram.com/avseslk . After that it will look like this:
STEP I: EXPLORE
That's true! First thing you might consider doing as soon as you create your new blog is to explore the Blogger system and get familiar with all the terms and the process. Go to your Blogger dashboard, you'll see a vertical section on the left hand. Here, you'll be able to preview your own blog and statistics, write new entries etc. But more importantly - at least for now - you'll see layout and template at the bottom of the section. First off all, whatever your template is going to be, you will need general infromation about the usage of the layout. On my blog I have a navigation-wrapper part, a top-social part, header, main part, and the sidebar. As time goes by, you can add more parts or remove the ones you have, it's all customizable! The main three parts, however, are the header, the main part, and the sidebar. To get the best use of your layout, you should know what gadgets are and what you can use them for. That's why you should click on one of the 'add gadget's and find out what they are meant to be, and see the widespread usage of gadgets.
STEP II: HEADER
There are three reasons why I think header is just the most important visual part of a blog: first of all, whether you have a simple/basic or a paid template, you are going to have to attract the visitors, and header is just the right place to do it. Second, headers actually tell a lot about the blogger. For example I love the dusty colors as well as the joyful yellow, I love plants, and I'm an autumn person. Third, you can harmonize all the colors you are going to use on your blog according to the colors you have indicated in your header! Now, the question is, how are you going to make your header?
1. Get inspired! My suggestion is, visit your favorite bloggers and check out their headers. Is it minimalistic? Chaotic? Cute? Find out what changes you would do if you were in their shoes. Then go to Pinterest. Search for pictures, drawings or symbols you would like to indicate in your header. Don't forget to save them! You could also paint your own header and use it, but I'm not quite good at painting so I used a beautiful flower painting I found on Pinterest.
2. Well you have a draft in your mind, but how are you actually going to indite it? As far as I can tell, there are 2 ways you can do it. You could either try to do something on your own or get help from someone! I did it myself, but there are artists out there on the internet painting personal headers for people, too. Check out Hannah for example, she's a very talented artist who also owns a shop called 'The Lazy Pencil Co.'. As for what I did, though, I used PicMonkey. This is an online website (free) where you can edit your pictures, edit others' pictures, or draw pictures. First of all, click 'collage' and choose the pictures you saved. But the important thing here is you have you change the size of your canvas. I wasn't sure about mine, but I knew it's supposed to be horizontal, so I made it 1100x300. After you save the basic canvas in your computer, go back to the home page of PicMonkey and pick 'design'. Again, I wasn't sure what the size of my canvas should be, but I knew it should be horizontal, so I picked 'Facebook cover' and it worked just well! (Later I found out that you can learn the size of your header by going to 'template' on your blogger dahsboard and then 'customize') Once you pick your canvas size on PicMonkey, click 'open' at the top of the page and find the collage you have just made. On the left, you will find the basic editing tools. You can change the colors, apply effects, and add text. It's all up to you!
3. Well you saved the canvas in your computer, but how are you going to use it on your blog? First, go to your blogger dahsboard, and find 'layout' on the left. Once you click it, you'll see the layout outline of your blog. Go to header, and pick 'configure header'. Here, you can add the canvas you've been working on. And you can choose to replace the title of your blog with it, as I did, or you can prefer to keep both. Well, voila! That's all for the header.
STEP III: TEMPLATE
I've first had this blog in late 2015, when I was just back from a 50-day-summer-holiday spent in the United Kingdom, and I was very tempted to write about my journey. But no matter how many hours I spent customizing my blog, I couldn't find any proper (free) templates and the ones I made by myself by developing the basic blogger template didn't satisfy me at all. One thing I can tell is that there are a lot of great & customizable templates if you are willing to pay for them, but it's the other way around for free ones. But because I've just started this blog, I wanted to keep it free as much as possible. So assuming you already know how to use the templates provided by blogger, I will tell you about downloading and using free templates you will find on the internet.
1. Where to find free templates for blogger? Unfortunately there are not many websites, and the ones you find will actually indicate the same templates! I found mine on cssauthor. You can check live demos of each template here, and download the ones you like. Once you click 'download', it will download an entire zip file on your computer. That's why you will have to click right on the file, and 'extract files..".
2. How to use the template on your blog? After you have extracted the zip file, go to your blogger dashboard, choose 'template' on the left, click on 'back up/restore' on the top right. First of all, in case you might have a problem with your brand new template, you might want to download full template before uploading the new one. I don't know if it really works because I haven't really done that, but they recommend you to do so. Second, you have to pick a file. So click on 'pick a file' (from the computer), find your zip file, open it, and select only the XML file. The type of this file should be 'XML Document'. Next step, upload it. Ta daa!
3. Once you have uploaded your template and you go back to template on the left hand of your blogger dashboard & try to customize it, you will realize you are not going to be able to customize it at all. In fact, you can't even change the color in most of the templates. That's why, if you are not an expert or something (like me), you should be very careful about the colors while picking the template, too. But always keep in mind that you can take help from the website you have downloaded your template, and in fact in the zip file you will find a Chrome HTML Document called 'documentation'. In case you want to learn more about customizing your free template or in case something goes wrong, feel free to check this doc!
STEP IV: SOCIAL ICONS
The template is ready, the header is just fine, and you know how to use gadgets. What is next? You want to direct your visitors to your other social media accounts, such as Instagram or Pinterest. The thing is, I knew I wanted to have personalized social icons before I even asked myself if I really had a lot of online accounts. I have a personal Tumblr account that I like to keep to myself, a Youtube account that I don't even use, a Linkedin account just for school.. So what's the usage of sharing all these unrelated accounts with my visitors? Now the only icons I have are Gmail, Instagram, and Pinterest. Here is how I added them on my blog.
1. First thing you should know about adding social icons on your blog is all is just an HTML process. Well, not all, you have to find the icons you want to use, too. You might use Pinterest or even Google images, it will just be okay. But here is what I did: after some research, I found this bucket of social media icons that contains very cute colors of each button. After I picked the ones I like, I opened a new tab on Chrome and went to my blogger dashboard. I went to layout section, and clicked 'add a gadget' on the sidebar. Now because it is all about HTML as I said, you should add the 'HTML/JavaScript' gadget. After you have done that, go back to the bucket tab, pick one of the icons you are willing to use. On the right side, you will see a section called 'share this photo'. Click on the HTML code, and it will copy itself. Go back to the other tab, paste the code on your HTML/JavaScript box. Now, the code should look just like this:
<a href="http://s1166.photobucket.com/user/printsmitten/media/FREEBIES/Social%20Icons%20Freebies/peach-insta.png.html"target="_blank"><img src="http://i1166.photobucket.com/albums/q602/printsmitten/FREEBIES/Social%20Icons%20Freebies/peach-insta.png" border="0" alt=" photo peach-insta.png"/></a>
The first thing you should do is to remove the highlighted part. Once you do that, write down your actual social media link there. For instance, because this is an instagram icon, I should write my instagram URL which is https://www.instagram.com/avseslk . After that it will look like this:
<a
href="https://www.instagram.com/avseslk"target="_blank"><img src="http://i1166.photobucket.com/albums/q602/printsmitten/FREEBIES/Social%20Icons%20Freebies/peach-insta.png" border="0" alt=" photo peach-insta.png"/></a>
That's totally all you have to do! You can copy and paste the HTML codes of all icons you like in your HTML/JavaScript box, then do the same thing for each. Then save it, and visit your blog to check if they work.
2. What I tried to explain above is the way I added social icons on my blog, but keep in mind that there are also free/paid uncostumazible/customizable ways to add these icons on your own blog. Just surf on the internet!
STEP V: INSTAGRAM WIDGET
It's almost the same as social icons, again you need an HTML code. Thus, go to your layout > sidebar > add a gadget > HTML/JavaScript. Next, you should find a website that will provide you the widget. You'll see there are a lot of them if you search for 'Instagram widgets for Blogger' on Google. I preferred to use Instansive. You should put your Instagram username (or any #hashtag), do the settings, and click 'preview'. You can check the preview and make changes if you wish. After that, once you get the code, copy it and paste it in your HTML/JavaScript box. Save changes, and it's done!
I would like to remind that I am not professional, and even though I've spent hours trying to customize my own blog, I still don't know a lot of things! I just wish I could be helpful, and I am willing to help if there's anything I can do. Also, I would appreciate it a lot if you could share your thoughts on the comments below. Have a lovely day!
