Fantasy Gypsy © 2011-2017. Powered by Blogger.

Those tricky codes... (tutorials and stuff)

Since I revealed my new blog design awhile back, I have been getting quite a lot of questions on how to do a lot of elements in my design.

And, in case you didn't know, it's rather tricky to put HTML and other such codes in a little comment box. Well, the truth is, you can't. You can't put any coding in comment boxes, because it will try to... you know... do something with the code... I don't know. It is a shame really.

But anyway, a looonnnggg time ago I did a post with several different coding tutorials, tricks to do cool little things with your blog design. And after getting all of these comments from people wanting to know how I did certain things, I figured it was about time to do another one of those! :)

Enough of this lame introduction, let's get on with the codes!!!

How to make a blockquote

I don't know if you have noticed, but when I add a quote to a post, it has this nifty little box around the text. That, my dear readers, is a blockquote. (yes, that's it's name. Fitting, isn't it?)

It's super simple to add one to your blog, and super easy to use in the posts. All in all it's a super simple and cool thing to do.

First go to your blogger dashboard, then go to Layout>> Template Designer. Now you are going to want to go to advanced in the template designer, scroll all the way to the bottom until you get to Add CSS.

Now add this bit of CSS in the little box, and save.

blockquote{
background:url('blockquote.png') no-repeat;
padding: 5px 5px 5px 20px;
border:3px solid #ddd;

Now, there are a couple ways to customize your blockquote, the code above is the one I have on my blog, but let's say you want to change the color you would just put the color number/code right here:

blockquote{
background:url('blockquote.png') no-repeat;
padding: 5px 5px 5px 20px;
border:3px solid #ddd;
}

Or if you want two boxes around your quote instead of just one, you would change solid to double here:

blockquote{
background:url('blockquote.png') no-repeat;
padding: 5px 5px 5px 20px;
border:3px solid #ddd;
}

Just have fun with it! :)

Now if you want to use the blockquote in a post, just click this box in the blogger post thingy:

Type your quote, and once your post is published, your blockquote should appear.

Pretend that there is some deep, inspirational quote in here, this is how your blockquote will look~Hannah in Neverland
And there you have it! :)

... On to the next thing!

How to "fix" your sidebar

It took me for-ever for me to find this code, but once I did I was so, so, so excited! If you scroll down on my blog, you'll notice that my left sidebar doesn't scroll down along with the rest of my blog. I don't know what you think about it, but I think it's pretty cool.

I had seen this on several blogs and wanted to know how to do it, and after googling more than once, I found it, and Imma going to share it with you.

You're going to want to go to the Add CSS thing that you had to go to to add the blockquote ^ (follow the instructions above) and add this code:

.main-inner .column-left-outer {
margin-left: -1000px !important;

position: fixed !important;
left: 73% !important;
}

When I first used this code, several readers complained about a white thing hiding the left side of my posts. My original coding went something like this:

.main-inner .column-left-outer {
margin-left: 25px !important;

position: fixed !important;
left: 0% !important;
}

What I didn't realize was that I was positioning my side header the wrong way.

It may sound confusing, but I had used this:

.main-inner .column-left-outer {
margin-left: 25px !important;

position: fixed !important;
left: 0% !important;
}

Which, I didn't realize was how big the sidebar was! So i had made my sidebar huge, thinking I was just positioning my header, when I should've been using this:

.main-inner .column-left-outer {
margin-left: 25px !important;

position: fixed !important;
left: 0% !important;
}

To position the header.

I figured it out and this is the right code:

.main-inner .column-left-outer {
margin-left: -1000px !important;

position: fixed !important;
left: 73% !important;
}

Just mess around with the numbers until your sidebar is in the right place, and save.

I hope I didn't just confuse your poor brains...
***

Anyway, thank you guys for being interested in this, and I hope I have been some help to you.

I should do this again sometime. :)

3 comments

  1. Thank you SO much for posting about this, Hannah! I am pinning for future use :)

    ReplyDelete
  2. Or bookmarking. . .that works too :)

    ReplyDelete