Tuesday, April 11, 2017

Tutorial 13: How to Create a Custom Blog Title Banner

Blogger Tips and Tricks Banner by Gabriel Jani

     As you probably know, this blog has a new title banner which is appearing on all the new posts and is actually the title of the blog. I was the one that made this banner, and I will show you how to do it and how to add it  to your post.

     To make this banner, I used Canva, which is a free graphics software. There are a few things that are really nice about using Canva, and I will get to that later. For now, make an account (if you don't already have one) and log in. It should pull up your dashboard. Canva is really nice, and provides templates for all sorts of useful things like flyers, cards, infographics, and banners. Click on the "More designs" button and scroll down through them until you find a banner you like. I used the Soundcloud banner. Once you select the banner, what you have to do is select a background (one of the predetermined Canva layouts or your own theme from your computer). Edit the text so that it says what you want, and add little drawings or other (elements) if you want.

     Once you are done creating your banner, go to the top and select "Make public." Sorry, you have to. It won't let you do this if you don't. Then, go to "Share" and select the "embed" menu. It should pull up a page of HTML. Copy it, and then go to blogger.

    Once you make your post, go to HTML mode. Insert the code you have copied there. Then, go back to compose, and it should show up! If it shows up as a blank screen but still with the attribution, that is normal. Go to preview to see how your banner looks if that happens. This is how you can create and insert your very own banner into your blog! If you want to make the banner your blog title, look at Chaika's Tutorial 11. Hopefully this was informative and helpful and you can make a great banner!

A note from Chaika: I had to screenshot Aquarius' banner. Or in my case, scissor-tool it, and then go into PowerPoint and crop it so there wasn't a weird white background. I'm not very good at this.

Monday, April 10, 2017

Tutorial no. 12: Gadget Editing, Part 2

Welp.
Chaika here; I'm back.

So today (April 10 17) I changed our title from a boring, normal thing to a screenshot of Gabe's awesome Canva banner.
At the time, I was writing a post about how to edit the pages gadget, but then I realized I should do some stuff on the title gadget, and then I started talking about favicons... long story short, that post got way too long, so I cut it in halves.

Actually not in halves, this part is going to be way shorter than the other one. Oops.

**copied and pasted from Part One of this tutorial. If you've already read it, don't bother**

So you know the "layout" tab. I'm sure by now you've gone in, added a poll or some fish or maybe a globe, messed around, and dragged and dropped gadgets until that blog just clicked. 

This page. And I'm sure you know you can click "edit" in the bottom corners of these gadgets to prolong a poll or change the name of a profile gadget, et cetra, et cetra. I'm sure this isn't really news to you. If it is, then go in and play around, but don't necessarily close this page. You don't have to be a pro at gadget editing to use this tutorial.

But the shocking thing... EVERY GADGET (in the old templates, I don't really get the new ones' format) can be edited! Like the favicon... nope. I'm going to say something new this time.

**Okay, it gets more interesting now. You can come back.**

Right. So if we want to edit our title or give a description, we'd go to Settings, not Layout. You can also change your URL from this... but I don't recommend it because all the links you've ever entered from it are immediately void. I figured this out the hard way when I changed Wandering Meatloaf's url and tried to reach my posts through the class blog. But Aquarius had it worse...

Um. Nevermind. That's not applicable right now.

But if you want to put a picture in place of your title, or a .GIF like on my friend the Book Bunny's blog (would provide link but her blog is private), you go to Layout. Click the little blue edit on the "Page HEader" gadget. Sound familiar?
Upload an image using the "Upload image" bit, same as in the favicon or your blog background. Select if you want it to be behind, in front, instead of, etc. the title and description. You can edit the title here too.

See, what you could do is change your blog title to " " or something equally nonexistant, but then it wouldn't show up on your tabs or when it's in a link list or anything like that. The much simpler way is to just put "instead of" title or anything, and if you click on the image it takes you to the main page.
Love ya, Blogger! You make my life easier and my Internet presence cooler. You can also edit the title or description from here.

That was much easier and simpler than I thought it would be. Turns out Blogger is pretty intuitive.
Huh. Almost like they're trying to be easy to access.
I wonder why.

Okay, leaving now, going to a seder at Aquarius' house! I don't think he's seen my new title yet...

Tutorial no. 11: Editing Gadgets, Part 1


Blogger tips and tricks by Gabe Jani

Gabe (one of my friends who is okay with putting his name here; I asked him) is good at Canva and made this for us. Sorry, pal, but I might decide to change the name of the blog. But for now... wait...

...

Aha!
I just went from this boring thing:

To this paradigm of wonder and smooth awesomity:
And if you're confused, what I mean is that I put a picture as the title. And yeah, you can do that. Let me show you.

So you know the "layout" tab. I'm sure by now you've gone in, added a poll or some fish or maybe a globe, messed around, and dragged and dropped gadgets until that blog just clicked. 

This page. And I'm sure you know you can click "edit" in the bottom corners of these gadgets to prolong a poll or change the name of a profile gadget, et cetra, et cetra. I'm sure this isn't really news to you. If it is, then go in and play around, but don't necessarily close this page. You don't have to be a pro at gadget editing to use this tutorial.

But the shocking thing... EVERY GADGET (in the old templates, I don't really get the new ones' format) can be edited! Like the thing at the very top, the

If you go in and click "edit," you get this:
And if the image you choose fits those requirements, then when you save it,  you'll have that image showing up as the symbol in the tab! Like if you open one of my Rommel's Asparagus blogs  or Aquarius' Random Whirlpool, you'll notice that the symbol at the very left of your tab (for Chrome, Safari, and Edge at least) is your new favicon! It's pretty nice. The default favicon is the Blogger logo, which so far we've kept because it fits. I'm thinking about adopting a slightly altered Blogger logo as our favicon. Ooh, maybe it'll be purple and black instead of orange and white. Who knows?

So that's favicons. Kind of simple. Navbar, Attribution, etc. are pretty straightforward, but there's one more thing I'd like to talk about: Blog Posts gadget.

It's the big square that says "blog posts," at the risk of stating the obvious. If you edit it, then you're brought into a whole world of wonderful options. Let's look at some of them:
For this, I recommend opening the image or your own blog editor in another tab/window, so you can switch back and forth.
Holy mackerel... that's a lot of options. Many of them are pretty straightforward.A lot of these are checking which ones you want to show up, and you can edit the "reactions" thing too. Just a note in Reactions: the different entries are separated by commas. I wish they were separated by semicolons or something so I could put "What the Helsinki, Finland" as one instead of "What the Helsinki Finland."
(For those of you who are deeply confused or non-English speakers, my little brother Liam is very adverse to swearing, so I "pseudoswear" instead. Helsinki sounds kind of like the English word hell, even though Helsinki is actually a very nice place, and I can also sound hopelessly nerdy while cursing.)

Mess around here. It's pretty straightforward. The "quick editing" pencil will only show up for an author/administrator. Now, that's part 1. Pretty simple. Onto part 2!

Okay, as you can see, there's really not that much more to it, a lot of the things are repeated. 
I scrolled down. There aren't actually 2 pages. But I'd like to talk about the "Arrange Items" part at the bottom. This is really just a miniature Layout page, for only the post. You drag and drop the parts just like in the main Layout page, you save it, then you go to the big Layout page and save it again. Again, pretty straightforward.

This may seem pointless, and in many regards it is, but there's a lot of helpful things on there. For instance, one of my friends (not a contributor here) posts music to her blog, and I love listening to her favorite songs. But sometimes a post with a song that I like will be more than 7 (the default) away from another one, so I have to go in and find the links back and forth. Kind of annoying after a while.

But also, editing these things can make your blog just plain cooler. Like adding the title (and yes I'll formally tell you about that soon, in the next post, it's just that this was getting way too long) picture or reactions, pretending that you're in some Russian island right now, or praising your writers.
Well, that's all for now! I'm going to post part 2 of this tutorial... hopefully in like half an hour.
UPDATE: It was more like 20 minutes... haha.Here's the much shorter part 2 of this series.  Regards! 
Chaika

Sunday, April 9, 2017

Web vs. PE: Post no. 10

So at the bottom of the screen is this little thing that says something like "click for web version." It'll be there if you're on a mobile device, but if you're on your computer it's "click for mobile version." When posting a blog on a phone, iPad, etc... make sure to post it on web version, otherwise your blog will look weird and all gadgets will be unavailable.
So there's my debut as a writer on this blog.....

Saturday, April 8, 2017

Tutorial 9: HTML!!!!!!!!!!! AGAIN!!!!!!!!

First off, lets start with the obvious.  YOU CAN'T USE SPAN OR LITERALLY ANYTHING IN COMMENTS!  NO!

I HATE THIS SO MUCH.


NO PERSONALIZATION.

Ummm... So lets start learning what you can do...
Literally #$%#ing Nothing
Nothing.... Sure, you can link up and do stuff like that and make hover over text which is already flipping accessible to everyone but nothing else......

So yeah you can do bold and italics and stuff....

Although you can add an image to normal posts by using <img src="url" />

And you can do extremely cool stuff with scaling....

and you can do your entire post in <h1> So that's a plus I guess... But comment HTMLS are weird.

Tuesday, April 4, 2017

Tutorial 8: Using HTML mode

Hey, guys, this is Aquarius. So begins my quest to make a post only using HTML. We will see how this goes.
Yes, I did not use the compose function at all. I swear. And as for the images, Blogger's HTML mode provides you with an class sorry, option, to do that. I apologize in advance if this post is a little messy. This is the first time that I have tried to write a post in HTML mode.
We will see how this goes.

So this tutorial is basically a tutorial on using HTML mode in blogger, and things to watch out for. I apologize in advance there is no paragraph indents, I have not yet figured out how to do that in HTML. Also, I will denunciate tags by using "" instead of <> because while I am in HTML mode, blogger will take every tag I type literally. For instance, if I try to type "use 'i'text'/i', it will come out as text.
So the first thing you will want to know about HTML mode is that pressing "enter" adds a space. It does not do the same thing that it does in "compose" mode. There are two tags you can use to enter - the 'br' tag and the 'div' tag. The 'br' tag works better and I usually use it. It is what I have been using this whole post to make spaces between lines. For some reason, the 'div' tag sometimes works and sometimes doesn't. I have no idea why.

The next thing you will want to know is that you can straight up type in text, but if you include any tags, it will automatically translate it into Compose as what the tag means.

The final thing you will want to keep in mind is that Blogger uses HTML 4.1 which allows the 'u' and 'strike' tag. If for some reason you are using HTML 5, be aware that these tags do not work.

Wow, I think I actually completed a post only using HTML mode. It is pretty short, but I will see how it looks. Give me a second to look at "compose" mode.
Wow, it actually looks OK! This is Aquarius, signing off.

Monday, April 3, 2017

Tutorial 7: Some more really basic HTML

Aquarius again here. In this post I will go into more basic HTML, getting a bit more advanced than than what we did in Tutorial 6.

So, now that we know the basic form of HTML codes (<i>text</i> and <div>) We can get into a bit more advanced stuff, such as knowing individual codes and tags and how to use them. As I mentioned in the last tutorial, looking at Chaika's page of HTML tags and classes can help you a lot. We will start with learning about the most useful tags and classes individually, and also how to use them.

A note: In the last tutorial I gave the code to make a link with a hover over caption. You actually can't. I was just making sure you were paying attention :).

The <a> tag: This tag is very useful in comments, as it is one of the five tags you are allowed to use. The most common use for it is the link code: <a href="url">text</a>. If you are new to HTML, I would actually suggest that you memorize this particular code, as it is extremely useful in many situations. The second use for this code is scrollover (or hover over) text in comments. I recommend in posts you use the <span> class because it is a lot cleaner, but because comments does not allow this class, you can use the <a> tag like this: <a title="scrollover">text</a>. Basically, text is what you want the actual text to be and scrollover is what you want the hover over caption to be. This is a harder way to get hover over captions but it works, and is especially useful in comments.

The <i> and <em> tags: These two tags both do the exact same thing: make the text italicize. There are some other ways to do this, like the <cite> tag, but these are the main ways. You set it up like this: <i>text</i> or <em>text</em>.

The <b> and <strong> tags: These two tags make the text bold. Set it up like <b>text</b> and <strong>text</strong>

The <u> tag: This tag makes text underlined. It works in HTML 4.1 but does not work in HTML 5. Blogger uses 4.1, thankfully, because in HTML 5 you have to use CSS functions to make text underlined. Set it up like this: <u>text</u>.

The <strike> tag: This tag basically strikes though the text, like this. There are several more ways to do it, including the <del> tag. The <strike> tag was taken out in HTML 5, replaced by the <s> tag, but in Blogger you can still use the <strike> tag.

The <span> class: You can do a lot of advanced stuff with this class, but probably the easiest thing to do with it is to make hover over text. This only works in posts, not in comments. You can use the code <span title="hover over">text</span> to make hover over text. Now, you know how blogger provides options to make text italicized, or bold, or a link, or even strike through? Well, it doesn't do that for hover over text, only for images! So if you want to make text hover over you have to go into HTML mode and code it yourself using the code above! Just put the code around the text you want to be hover over and replace "hover over" with what you want the hover over caption to be.

How to use tags and classes:
In Blogger posts, it will recognize these automatically in HTML mode, but not in "compose". In comments, it will also recognize them automatically, but you can combine them with text. For instance, you can say Hel<i>lo</i>. It will come out as Hello. You can put these tags anywhere in a comment and it will work. And, if you use a tag blogger does not recognize, blogger will tell you when you try to publish it. HTML mode basically is a free template for you to work HTML wonders, but any text you type in Compose mode will carry over to HTML mode.

This is Aquarius, signing off for now.