Welcome back to my shoddy attempt at teaching people how to blog! Today, after a long hiatus from writing due to life in general, we're going to tackle the basic settings of your blog. Previously we gave a basic once-over on Blogger and how to use it and what buttons will make things blow up (teehee); we also talked about planning! Overall things have been pretty simple up until now, but today is the day we actually start to touch the buttons.
Woohoo!
In blog notes, I've done some cleaning up and I've also experimented with several noteworthy things at this point during my hiatus!
- Firstly, I got my own domain, so I can now talk with ease about buying a domain and how to use it if that's up your alley, but that won't come until later!
- Secondly, I, in all my insanity, picked up another story, and thus another blog that I'm SUPER proud of getting to try out some different techniques with! Thus, Where the Willow Walks is born and ready for action!
- Thirdly, I updated the background of this blog too.
And that's pretty much it; so pretty good for me being on hiatus as I: graduated, got married, had my birthday, dealt with a hospitalization in the family as well as shakeups at my job, and got my name changed. Yes, I am low-key bragging, mostly about the fact that I'm still alive which I'm convinced should not be possible at this point.
Anyways, let's get this party started!
Jumping right in with Thumbs Up, Buttercup, there's two places we'll be focusing this tutorial on, the first is the Layout:
The second, is on Theme:
Layout and Theme go hand-in-hand together, let me go over what is similar and what is different about each section!
Layout is the portion of Blogger that shows you the bones of your blog. There are no colors or fonts or frilly things here. This is your bare-bones structure that will be the guide for what we'll pretty up later. This is the place where you decide if you want sidebars or no sidebars; widgets; time and date setup and a few other important things.
Theme is the part of Blogger that shows you the beautifications of your structure you built in the Layouts setting. This is where you work with colors, fonts, and there's a tab for your starter layout suggestions.
Layout = Bones
Theme = Skin
So, with that out of the way, let's pop into Theme very quickly. We're going to go here and decide the basic structure of your layout before really digging into either portion too deeply. There are two ways you can get into Theme:
The second, is on Theme:
Layout and Theme go hand-in-hand together, let me go over what is similar and what is different about each section!
Layout is the portion of Blogger that shows you the bones of your blog. There are no colors or fonts or frilly things here. This is your bare-bones structure that will be the guide for what we'll pretty up later. This is the place where you decide if you want sidebars or no sidebars; widgets; time and date setup and a few other important things.
Theme is the part of Blogger that shows you the beautifications of your structure you built in the Layouts setting. This is where you work with colors, fonts, and there's a tab for your starter layout suggestions.
Layout = Bones
Theme = Skin
So, with that out of the way, let's pop into Theme very quickly. We're going to go here and decide the basic structure of your layout before really digging into either portion too deeply. There are two ways you can get into Theme:
- The first way is by using the button shown in the picture above and then clicking "Customize" below the thumbnail picture of what your blog currently looks like.
- The second way is by viewing your blog how every other person would while logged into your account. Up by your email there will be an option that says "Design," clicking that will take you to the same place.
The fourth tab down on the top left of your screen will be the layouts we're going to bed looking at. There it will list you eight options of layouts with and without sidebars, then three options for your footers.
Sidebars are entirely personal preference - as an example, I personally loathe them for my own creations as I have nothing I feel that would flow there without seeming way out of place and it takes away space from the meat of my blog - which is almost always chapter updates (or in this case, tutorials)!
You'll note on this blog, I have not one sidebar, but two. Yes, I was living rather dangerously when I put that in, but I actually felt that advertising my stories on the side is fitting for a home-base like mine.
Do you want a sidebar? Do you want two sidebars? Maybe four? That's a personal choice and entirely up to you. I, personally, do not like having clutter on my own blogs (it certainly doesn't bother me when other people have it, it's just a personal preference), but maybe what you envision for your blog calls for it?
I went ahead and took some pictures of what having one side bar would look like, and you can use my blog for reference with the two sidebars.
I'll stick with a sidebar on the right for this tutorial as I believe that's the default, if not a very common layout. I'm also going to use one solid footer; this is what my paget setup looks like:
Now, following with what it recommends I do just below the Body/Footer layout, I'm going to head back to my dashboard and hit the left side tab that says Layouts to carry on from here!
Back in the Layouts tab, you should see a much larger version of the little thumbnail that we found under the Design layout tab.
You ready for a picture with numbers that correspond to a description below? Golly gee, sure hope so! Please pardon the repeating 5.
You ready for a picture with numbers that correspond to a description below? Golly gee, sure hope so! Please pardon the repeating 5.
- The Favicon. This is a whole lot of itty bitty flavor. You can upload a different "B" / picture that'll go in the top left corner of your blog. I rarely touch this, but it's a nice little feature if you feel the orange "B" clashes with your theme.
- The Navbar. Contrary to what you may initially think, this is not the navigation bar for your blogger, but for the entirety of Blogger as a whole. This will let viewers search for other blogs/Bloggers and it gives you a few options for how you can decorate it so your navbar can sort of match your theme.
- The Header. This is the area where the title and description of your blog can be displayed. There are several ways you can do this. You can use any combination of picture and text here. Hit the "Edit" button and that will open up a smaller window where you can adjust your header to your liking!
- Here's a picture of a static picture used in place of a title - I just made this up in GIMP with some text and some fancy-schmancy background brushwork.
- Here's a picture of just text and a blog description.
- The first Cross-Column. The first Cross-Column you see is the important one, this is where I place a widget called "Pages." This is how I get navigation around my blog, and it looks like this. I highly recommend using a "Pages" Widget (found by clicking + Add a Gadget and finding it like so).This isn't a requirement, of course, but it's something I always do as I like people to have easy access to certain parts of my blog - like a Chapter's list, the Home page, my Disclaimer, etc.
- The second Cross-Column. The second Cross-Column is basically the same as the first, you can place a widget or a gadget there, but I oftentimes will leave it blank. There is one exception of this: my Wiki for the stories I do I placed a search bar gadget there so people could search my articles and find what they're interested in quickly. This is personal preference.
- The Main Section. This is where your blog posts will go! If you want to do some interesting and smaller tweaks, you can hit the "Edit" button in this section and it will let you change whether or not you display the date, time, person publishing and how you want the dates to be laid out. Some neat features of this "Edit" area:
- Firstly you can decide how many posts you want displayed on the initial home page, if you plan on using a static home page, then this part won't even matter and you can ignore it.
- It lets you detail what shows at the very bottom of each post. For a while I kept my dates off my posts because I didn't want the chapters to seem cluttered. I ended up putting them back on because I found it interesting to see when I posted things and it also would let my readers know what chapter maybe "new" versus not.
- There is a feature called "Quick Edit" that you can show or leave, I wanted to clarify that this only shows for you, the blog owner. This is just a quick way to jump and edit that page and I've used it numerous times. I've posted a chapter, started skimming it after posting, found an egregious error and quickly skirted to the bottom of the page, hit "quick edit" and fixed it easily before anyone else really noticed it was there!
- FINALLY at the very bottom of this area you can take a look and move around how and where you want things displayed. You can move the date around to closer to the bottom or on the top... Fiddle around and see what you might like!
- The Sidebar. Your sidebar you are given (assuming you kept it) will have your "Blog Archive" and your "About You" gadgets already in it. You don't have to keep either of these. I usually highly recommend removing your "Blog Archive" function because it's cluttered and difficult to use when trying to navigate someone's blog page. I absolutely hate cumbersome archives. Chapters are seldom in order and the drop downs just feel cluttered. If it's your cup of tea - feel free to keep it. If you're not fond of it like I am - fear not! I have and will be discussing other ways you can help your readers navigate your blog in future Let's Talk Blogs updates.
- The first Footer. This is where you can store more gadgets. What usually ends up happening on almost all my blogs is I use this area for my "about me" section and I won't use sidebars. That's up to you. There are a lot of widgets/gadgets out there - feel free to browse around and decide what works best for you!
- The second Footer. Same as #8. There's also an attribution gadget that I have not discovered a way to remove. Honestly there's no reason to, it's important that people who make the things you're using get the appropriate credit! Don't go stealing from them that way without proper credit!
Finally something to note with Widgets/Gadgets: You can move Widgets/Gadgets by grabbing the "..." side and dropping them where you want while in Layout mode. There are some differences in how the gadgets will look in what are (for example, the "Pages" gadget will look like a list when on the sidebar, but will look like tabs on the cross-columns).
Now that you've gotten here, adjust your blog to be as you desire. Here are some of the Gadgets I've used and know a decent amount about (note, this list is very small compared to the number of Gadgets on the market):
- Pages. I use this in my Cross-Columns to create easy-to-navigate-tabs! You can add outside links as well as mess around with the order that they go in. You can edit the font of these tabs and the color of the background in the Theme section. If you're using Pages as a cross-column gadget, then you won't need to worry about what the gadget is titled, if you're using it on the sidebar you may want to give it a more useful name depending on what you're listing. This gadget also doesn't have to be used for links within your blog, you can also use it if you want to create a list of other blogs you recommend or external links to wherever - you know, whatever floats your boat!
- Featured Post. Is a gadget by Blogger where you can draw attention to an important post. In my case I may use that to highlight an author's note or a new chapter. Whether or not that's something up your alley is entirely up to you, but it's a really neat feature.
- Profile. This is your "about me" gadget. You can't adjust much, but I like having it on there so people start to recognize you, especially if you're on multiple forums. You see, I have a presence (big and minor) on several forums as well as on my blogs. Keeping my "About Mes" will help anyone who finds one story of mine maybe recognize me. "Oh I know her from _____" or even better when they say "Oh I read X story by _____ and really liked it! I didn't know they made _____ story too!" Etc. It's a personal preference and there's pros and cons to keeping it.
- Image. The Images gadget is what you see on either side of Pancakes and Madmen - it's the images with a link to each of my stories. They were a little more complicated to figure out and involved some advanced CSS maneuvering to make them look neat and tidy, but they can be a very useful tool. I'll go into this a bit more when I cover the "Advanced CSS" settings. Ultimately this gadget is very easy to use, but the font is not centered and neither are the images so they look very left-aligned in your sidebars without any CSS coding to correct it.
- Blog Search. I use this one for easy access to finding things on my home-made "Wiki" page. Because all my stories take place in the same world (that isn't a spin off of our world) I like to have a place that readers can go if they really just want to dig into the lore of the world. I didn't just make things up as I went (well, I did at first, but that's another story for another blog and another day) but I fleshed out all the corners of this world and magic etc, etc, etc. I'm not certain why you may want a search bar otherwise... but it's good, it works, and if you want proof you can pop over to Book of Atalan and search for "vampire" to see what comes up. There are some settings that may need to be enabled for this to work, Blogger will let you know, and if it give you any trouble you can always comment here or email me at livvielove@pancakesandmadmen.com.
- Followers. This shows a list of followers - I don't use it, but I likely should to add a quick "Follow" button for readers to find and always have a way of tracking your things!
I... think that's it. I could... potentially add on to this list as I discover/use more gadgets.
With that taken care of, let's look at the basics found in "Design" before we wrap up this Let's Talk today!
This is going to be fairly brief (or so I say now as I'm just typing this... heh), as the big bulk of the Theme option is hidden in the "Advanced" tab and there's no way in hell that I'm going to cover that today in this Let's Talk. That deserves its own special page where I can agonize over all the details... and then I may need to do an entirely separate update just for the CSS. Basically, there's a lot, but don't panic! We'll do this together and it's honestly fairly easy to understand.
(So says the lady who's made 8+ blogs to date!)
Yes, I know, but trust me, it gets a lot easier once you're familiar with what button does what.
Truthfully, I feel the places most will struggle with are the little nuances (like knowing that the "Pages" gadget can become Tabs at the top of a blog, or fussing over the font settings and getting irregular fonts, or being unable to read captions under pictures).
Anywho, arrive back in the Theme tab and move into the "Customize" part of your blog like I showed you how to get there earlier. Let's pop into these unfamiliar tabs, shall we?
Firstly we're greeted with our Themes which lets us change whatever we initially set or leave it as is. I recommend leaving it where it was and trying to build from there, as changing this can mess up your layout if you're not careful! Currently Thumbs Up, Buttercup has the Simple theme - the gorgeous orange one, yes that was sarcasm. Heh.
Our next stop one tab down on the side is Background. This will let you add a solid color background, pick one of Blogger's optional backgrounds, or even upload your own image! Clicking on one won't permanently change anything, but it will let you preview it below on your actual blog page as you go so you can see what you may like versus what you may not. If you pick a Blogger theme, keep in mind that you cannot change the tiling or the alignment of it - you're stuck with it as it is.
Now, if you choose to upload an image, you're given a few more options with what to do with it.
Here I randomly grabbed and added a picture. You can pick the alignment of where you want your image to be, and this is where you can get creative. Tiling the image will repeat the image over and over - this is great if you have a seamless pattern like I do for the Reapers; however I used a single image aligned differently with no tiling to achieve my SotN background (this background is done by lower left alignment and no tiling).
Finally there's an option "Scroll with Page." This is counterintuitive. Checking this box will make the image static in one spot, so as you scroll either new images are produced with tiling or you're met with blank background. Unchecking this box will have it so the image will follow the reader as they scroll down. So if you want the image to follow your viewers as they scroll down, leave this unchecked.
This is kind of important because if you have a busy background (like with my Reapers) it can get very disorienting having that moving in the background. Test the options out and remember you can always change it later!
Finally, our last stop for today is the "Adjust Widths" tab on the Design (as we've already talked about the "Layouts" portion). this will allow you to adjust how wide your general blog is. I have a very, very large screen (if you cannot tell from my pictures) but I also have a chromebook I use occasionally (which is much, much smaller). I often will double check my blogs on both to see how they look.
Generally I would say between 800-1200 px for the entire blog is a comfortable spot, then from there you can decide how much space your sidebar takes up out of that.
I know we're only dipping into the beginning of designing a blog, the real meat of this tutorial will be in covering the details and the CSS (in fact I imagine that's why about 90% of the people reading this are here, for the CSS coding and what not). CSS is a word I've dropped several times in this post alone, and we'll be covering it in more detail in ~2 more tutorial posts. Basically it's some codes that we can use to tweak very specific stuff on your blog. Before you get nervous about what you've seen today, here are some of the things CSS will answer for you:
(So says the lady who's made 8+ blogs to date!)
Yes, I know, but trust me, it gets a lot easier once you're familiar with what button does what.
Truthfully, I feel the places most will struggle with are the little nuances (like knowing that the "Pages" gadget can become Tabs at the top of a blog, or fussing over the font settings and getting irregular fonts, or being unable to read captions under pictures).
Anywho, arrive back in the Theme tab and move into the "Customize" part of your blog like I showed you how to get there earlier. Let's pop into these unfamiliar tabs, shall we?
Firstly we're greeted with our Themes which lets us change whatever we initially set or leave it as is. I recommend leaving it where it was and trying to build from there, as changing this can mess up your layout if you're not careful! Currently Thumbs Up, Buttercup has the Simple theme - the gorgeous orange one, yes that was sarcasm. Heh.
Our next stop one tab down on the side is Background. This will let you add a solid color background, pick one of Blogger's optional backgrounds, or even upload your own image! Clicking on one won't permanently change anything, but it will let you preview it below on your actual blog page as you go so you can see what you may like versus what you may not. If you pick a Blogger theme, keep in mind that you cannot change the tiling or the alignment of it - you're stuck with it as it is.
Now, if you choose to upload an image, you're given a few more options with what to do with it.
Here I randomly grabbed and added a picture. You can pick the alignment of where you want your image to be, and this is where you can get creative. Tiling the image will repeat the image over and over - this is great if you have a seamless pattern like I do for the Reapers; however I used a single image aligned differently with no tiling to achieve my SotN background (this background is done by lower left alignment and no tiling).
Finally there's an option "Scroll with Page." This is counterintuitive. Checking this box will make the image static in one spot, so as you scroll either new images are produced with tiling or you're met with blank background. Unchecking this box will have it so the image will follow the reader as they scroll down. So if you want the image to follow your viewers as they scroll down, leave this unchecked.
This is kind of important because if you have a busy background (like with my Reapers) it can get very disorienting having that moving in the background. Test the options out and remember you can always change it later!
Finally, our last stop for today is the "Adjust Widths" tab on the Design (as we've already talked about the "Layouts" portion). this will allow you to adjust how wide your general blog is. I have a very, very large screen (if you cannot tell from my pictures) but I also have a chromebook I use occasionally (which is much, much smaller). I often will double check my blogs on both to see how they look.
Generally I would say between 800-1200 px for the entire blog is a comfortable spot, then from there you can decide how much space your sidebar takes up out of that.
I know we're only dipping into the beginning of designing a blog, the real meat of this tutorial will be in covering the details and the CSS (in fact I imagine that's why about 90% of the people reading this are here, for the CSS coding and what not). CSS is a word I've dropped several times in this post alone, and we'll be covering it in more detail in ~2 more tutorial posts. Basically it's some codes that we can use to tweak very specific stuff on your blog. Before you get nervous about what you've seen today, here are some of the things CSS will answer for you:
- I want my title to be centered on my Blog.
- I want my "Pages" gadget to be centered on my blog, the tabs are all left-aligned!
- I want to hide the border around my pictures!
- I want a full-screen picture background!
- I want to center the titles of my posts!
- I want the date to be invisible/centered/right aligned!
- Etc.
All of those will be answered in the CSS portion of design. Next time we're going to look deeply at the "Advanced" category of Theme minus anything dealing with CSS, as that will have it's own post directly after we dig through the Advanced menu.
Good luck, happy blogging, and to those Americans reading - happy Fourth of July!
No comments:
Post a Comment