Private corner

Before we start, please, hover your mouse over the image below - but don't click it.

BAM, bet you did not see that coming did you!? :D Yes, I am acting overly exited, but I still think it's a pretty cool thing to do. The reason why I don't think you should click on it, is because it will just take you to my Goodreads page, if you'd like to verify it works then go ahead. If not just skip it.

That's right guys, today I am showing you how to have one image, make it change when the mouse hovers over it, and have it be linked.

Step 1

First you will need two images. For the example above both images are the same, but with different colors. It doesn't really matter what your images are, they can be completely different and unrelated. I do strongly suggest that they are not too different in size, it can make it look messy.

Step 2

Find an image hosting service - for example Photobucket or ImageSahck. Then upload both your images and get the direct link. You can also get the direct link uploading your image to a blog post and taking it from the HTML part.

Link to the blue image:

http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png

Link to the grey image:

http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/gret_zps8bbe9b1c.png

and also the link to wherever it is you want for it to go when you click on it. In my case I am using my
Goodreads user page:
https://www.goodreads.com/user/show/4418048-jude

The Code

Once you have your elements ready, it's time to start with the code. This is how it works

Once you replace with your own elements it should look similar to this one:

<a href="https://www.goodreads.com/user/show/4418048-jude"><img onmouseout="this.src='http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png'" onmouseover="this.src='http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/gret_zps8bbe9b1c.png'" src="http://i1231.photobucket.com/albums/ee509/JudeHnd/Social%20Icons/Goodreads_zps4fa48973.png" /></a>

and that's it! You can copy paste that code in your blogger posts, or on HTML boxes on the sidebars and it'll work. You can use it for menu bars, social icons, giveaway buttons- you name it! I hope this was helpful to you! As always let me know in the comments if you'd like to know/learn more about something else and I will try my best to answer it :)

Tuesday, February 19, 2013

How to Make a Blog Roll

Today we have How to make a blog roll.

Blog roll being that little thingy on the sidebar that has many blog buttons/book cover/upcoming reviews scrolling up/down/left/right.

There are different styles for blogrolls, but today I am giving you the code for a simple blog roll that stops when you hover your mouse over it, which will be very useful. It personally annoys me a lot when blogrolls don't stop at all because then I loose the blog I was going to follow or the review I was going to check out.

Let's get started, this is the code for a basic blog roll that goes up:

<marquee align="center" direction="up" height="250" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="95%">

</marquee>

Editing the code

To change the direction of your blog roll change the word up for:

left, right or down.

to adjust the height of your blog roll just change the number in blue.

Do Not forget to close your blog roll with </marquee>

to make sure everything is centered in your blog roll, right after you close the first part add <center> and then before you close your marquee add </center>. Like it is show in the geen part.

<marquee align="center" direction="up" height="250" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="95%">

<center>THIS IS WERE THE BLOG BUTTON CODES GO, OR THE LINKED IMAGES TO YOUR REVIEWS</center>

</marquee>

If you guys have any questions or topics that you'd like to see on Little Blogger Things, please let me know in the comments and I will try my best to answer it and feature it here :)

Saturday, September 29, 2012

(Color) Code Boxes

Hello everyone, this is a color code box. You can use them in your review to write the summary, to mark something important, highlight, whatever. They can have any color and margin you want. They're pretty easy to handle - trust me. Now, let's start.

This is the code for a color box:

<div style="background: none repeat scroll 0% 0% rgb(229, 235, 239); border: 3px doublergb(47, 79, 79); padding: 5px;"> YOU WRITE WHATEVER YOU WANT IN THIS SPACE. THEN YOU MAKE SURE YOU CLOSE IT WITH A </div>

Now let me break it down for you:

RED - It's the color of the Inside of the box. To get color codes I recommend This Page. You scroll down, pick a color you like and it gives you the RGB code. It's the 3 little boxes on the left that say RGB. You simply replace the three numbers. Don't delete the parenthesis or comas.

PURPLE - It's the size of the margin. You can change it to a 2px, 1px, whatever. Depending on how thick you want it to look. If you do not want a margin you just write 0px. You must always add px.

GREEN - The margin style. Mine is double. It can be dashed or solid.

BLUE - Color of the margin. The same as choosing the color of the inside of the box. Select any color you like and replace it.

For Example:

Dashed Black and White Box

<div style="background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 3px double rgb(0, 0, 0); padding: 5px; text-align: center;">... </div>

Solid Black Box

<div style="background: none repeat scroll 0% 0% rgb(89, 50, 112); border: 3px solid rgb(0, 0, 0); padding: 5px; text-align: center;">... </div>

Purple box with a solid 5px black border

If you want your boxes to be smaller, like the black and purple box, just add this before the code:

<blockquote class="tr_bq"> and don't forget to close with </blockquote>

if you want it to be even more small, just add the code to times:

<blockquote class="tr_bq"><blockquote class="tr_bq"> and close two times. </blockquote> </blockquote>

You can keep adding the blockquote codes to make it smaller. You can align it to the left, right or center, just add the code to align text. To get this code go here.

Friday, September 28, 2012

Basic HTML for Posts.

Go to any of your post and click on edit. Now go to the HTML tab. Take a look at all the gibberish, scary isn't it? And somewhere in there it's your post, between a bunch of weird code. Worse, when you can't do something in the Compose mode and you just know the only way to fix it is visiting the HTML part. For example, when you can't center an image, for whatever reason, you just can't (happens a lot to me). No need to be afraid of code. At all.

First - Your new best friend.

Hello Bloggers, allow me to introduce you to your new BFF:

Ctrl + F

When you need to look for something, going through the code will be a pain and it will give you a headache. Use Ctrl+F ALWAYS. Easiest and fastest way. Believe me.

Second - The Basic Code.

Whenever you want to make a text Bold, for the HTML part, you must add <b> at the beginning of your text and always, I repeat always close it with a </b>. You have to make sure that when you're on the HTML part, you always close the code. Otherwise the rest of the text will be affected.

The Basics:

BOLD - <b>...</b>

Italic - <i>...</i>

Underline - <u>...</u>

~~Crossed - <s>....</s>~~

Center - Left - Right - Justify

To align text, this is the code you need

<div style="text-align: center;">........</div>

The part in Red is the part you can change. If you want it Justified, you change it to justify. If you want it left, you change it to left. Right, you type in right. Easy as that.

Spaces.

To add space

You must

Use

This

Code:

<br />

Otherwise it'll just look like this: ToaddspaceYoumustUseThisCode:
This piece of code comes in handy a lot with the HTML boxes for the layout.

Center.

If you want to center a simple image or phrase in an HTML codebox, you can always use this simple code:
<center> .... </center>

Tomorrow - How to make color boxes .

Tuesday, September 11, 2012

How To Make a Blog Button

Step 1 - Your Image.
Select an image that represents your blog. If you will be using Photoshop I recommend you do it 200px height and width. If you don't hate Photoshop you can just make it in Microsoft Word. Make a little box and place your image in it. Then do a screenshot. That simple.

Step 2 - Image Web Address
To get the a web address for your image I recommend Photobucket. It's free and really simple to use. Upload your image and the copy the code that says Direct Link. That will be the Web Address for your image.

Step 3 - Making the Buton
Once you have your image and link we're ready to make the button :)

This is the code:

<a href="URL OF YOUR BLOG" target="_blank" title="NAME OF YOUR BLOG"><img alt="NAME OF YOUR BLOG" src="IMAGE WEB ADDRESS" /></a><center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="URL OF YOUR BLOG"><img border="0" src="IMAGE WEB ADDRESS"/></a></center></textarea>

Copy it exactly as it is and Only change the parts in color. It is very important that you are careful with this in order for it to work.

This is the example of my blog code:

Once you have this, you just go to your layout and add an html box on your sidebar. Place the code and Done :)

Next: Basic HTML for posts and review color boxes

Thursday, September 6, 2012

Little Blogger Things

And by we I mean just mean...me. To all bloggers out there: What did you thought blogging would be like before you started? I'm sure we all saw really pretty blogs and thought I want to do that! the layouts, the reviews, the followers, the memes, the books and the fun! Once you started: Was it really as simple as it seemed? No. It was absolutely everything we just mentioned, I love it and I want to keep doing it for a long time! But it was so so so much work. Apart from time and commitment, I had absolutely no idea how to handle the html or make a blog button. Lucky me I had a great mentor/friend to help me out a bit.

Honestly though, it's like a huge secret nobody wants to share. How do I make the blog buttons, the blog rolls, the review boxes? D:! I really suffered trying to find this things on my own; especially considering I'm really shy and don't like going around asking.

Introducing:

Little Blogger Things.

Where I'll be giving really easy tutorial and tips on html and such. No need to be afraid of the ugly code, it's pretty simple to use, really :)

I am in no way an expert, I'm still breaking my head trying to figure out how to make a self-hosted wordpress blogs and figuring out how to get your own domain. But as far as howBlogger and basic html works, I think I got it covered.

In the next weeks I'll be covering:

*How to make a blog button

*HTML for posts and review color boxes

*Blog Rolls

*Free Layouts/Backgrounds/Headers

*Custom design and prices - is it worth it?

*Make your own simple design.

If you guys have any questions or topics that you'd like to see on Little Blogger Things, please let me know in the comments and I will try my best to answer it and feature it here!

Here's hoping this