So, I thought that How to Train Your Dragon 2 was coming out next year, but apparently... IT'S LIKE COMING OUT THIS MONTH!!!!!! (I'm pretty sure...)

*a moment while I sit here and shriek with happiness...*

Just kidding haha :D

I am SO EXCITED, though!!!!! I've seen several trailers for it, and it looks pretty good!! :) If I get to see it, I will, if I have enough time, definitely post a review about it!!!!!!!!!!!!!!!!!!!!

Have a great day!! :)

~Anna :)

P.S. It's like June... wow, this year is going to fast. :)

Tutorial: Smooth Slideshow

Hey, guys! :)

So, today I’m going to be explaining how to make a slideshow with a smooth transition into the next photo. I absolutely love this code, and I use it a lot! :) It’s so handy. ;)

Needed for this Tutorial
Picture images (it can be any amount, as far as I know, and you preferably want them the same size. This can be achieved by resizing them all on PicMonkey, if you need to. :))

OK, let’s go! :)

Part 1
1. Log into your blogger account.
2. Click on the blog you’re wanting to edit.
3. Make a new post.
4. Upload all of your photos to the post.
5. Right click on all of them and click “Open Link/Image in New Window” and grab all of their URLs.
6. Put the URLs in a safe spot where they can be used later.
7. Part 1 done. ;)

Part 2
1. Log into your blogger account.
2. Click on the blog you’re wanting to edit.
3. Go to Layout.
4. Click on Add a Gadget.
5. Scroll down and select the HTML/Javascript gadget.
6. Paste the following:

<script src="http://www.linkbuildingservices4sites.com/resources/slide-show.js" type="text/javascript"></script>    
<script type="text/javascript">  
var mygallery=new fadeSlideShow({   
 wrapperid: "imageslideshow1", //ID of blank DIV on page to house Slideshow   
 dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image (www.2createawebsites.com)
      imagearray:  [     
["URL OF PHOTO HERE"], ["URL OF PHOTO HERE"], ["URL OF PHOTO HERE"]// no trailing comma after very last image element!   
      displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},   
  persist: false, //remember last viewed slide and recall within same session?   
  fadeduration: 2000, //transition duration (milliseconds)  
  descreveal: "ondemand",
  togglerid: ""
 </script><br />
<div id="imageslideshow1">

7. Add your photos where it says, “URL OF PHOTO HERE”, (highlighted in red) one in each different pair of [ ].
8. Change the dimensions (highlighted in blue) to whatever the size of your pictures are. (you can see them when you open them up from your post to get the URL, or remember them if you change them all together on PicMonkey.)
9. Save.
10. Viola! :)

If you want to make more then one slideshow on your blog, you’ll need to change the “imageslideshow1” to “imageslideshow2” and “imageslideshow3” etc. (highlighted in green) If you have any questions, just let me know! :) Have a great day! :) God bless!! :)


P.S. I was asked how to make your sidebar go all the way down to the end of your blog, but I actually don’t know. I’ve tried to figure it out, but it hasn’t worked so well. I have found out how to do it when your sidebar’s fixed, however. Simply extend the padding so that it goes past the bottom of your screen. (making it something ridiculously large such as padding-bottom: 100000px helps, because it makes sure that you’ll truly never see the bottom). Hope this helps! ;)

Tutorial: Rollover Picture

Hey, guys! :)

So, I’ve got another tutorial for ya. ;) This one’s a rollover picture - like when you hover over a image, and suddenly it’s a different one. This one’s pretty easy, and it’s a great one to have! I personally love using it.

Needed for this tutorial
Two different pictures

OK, let’s go! :)

There’s two different procedures for this one, because we’re going to need our image URLs before so we can just simply insert them in the code! :)

1. Log into your blogger account.
2. Click on the blog you want to edit.
3. Make a new post.
4. Upload the two photos that you want to use.
5. Right click on each and click “Open Link in New Window” or “Open Image in New Window” or something of the sort.
6. Copy the URLs and paste them somewhere where you can access them, like sticky notes. (as long as you paste them somewhere, that’s great)

Now on to part 2! :)

1. Log into your blogger account.
2. Click on the blog you want to edit.
3. Go to Layout.
4. Click Add a Gadget.
5. Scroll down and click the HTML/Javascript gadget.
6. Paste this:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

7. Take the URLs that we set aside before. Put the one that you want to appear when you’re not hovering where it says “URL OF THE FIRST IMAGE GOES HERE” and paste the second image where it says “URL OF THE SECOND IMAGE GOES HERE”.
8. Write in the URL where you want the pictures to link to where it says “URL ADDRESS”.
9. Save.
10. You’re done! :)

Thanks for coming along for the ride! And if you have any questions, just let me know! :) Have a great day! God bless!! :)

~Anna :)

Tutorial: Accordion Button

Hey! :)

So, I got some requests for some tutorials, so I might be doing several in a row on here real quick. :)

I was asked about how when you click on an image or title or something a whole bunch of things would slide down. I interpreted this as being an accordion. This is a really fun code that I’ve really enjoyed using in my blog designs! :) I have this actively working on my blog Hero, so that’s the example I’ll be using.

Below is an example of an accordion, as used on Hero.
This is what it looks like before you’ve clicked on any of the buttons. ^ Just like a box with a whole bunch of titles on it.
 This is what happens when you click on my first link.
 This is what happens when you click on my second link.

Now, what’s the code for this and how do we install it? It’s actually pretty simple - it’s the customizing that’s a little more complicated. But don’t worry - if you stick with it, you can make an awesome accordion. :)

OK, are you ready? Let’s go. :)

1. Log into your blogger account.
2. Click on the blog you want to edit.
3. Go to Layout.
4. Click Add a Gadget.
5. Scroll down and pick the HTML/Javascript gadget.
6. Inside paste this code:

<center><style type="text/css">

#wrapper { 
    width: 290px; 
    margin-left: 50; 
    margin-right: 50;
border-top: 0;
border-bottom: 0;
background: #ccc;
.accordionButton {    
    width: 290px; 
    float: none; 
    cursor: pointer; 
padding: 5px;
font-family: 'times new roman', serif !important;
font-size: 12px;
.accordionContent {    
    width: 290px; 
    float: none; 
    display: none;
background: #fff;
color: #000;
font-family: 'times new roman', serif !important;
font-size: 12px;
letter-spacing: 1px;
padding-right: 1px;
padding-top: 5px;
padding-bottom: 5px;

.accordionContent a:hover {
color: #000;

.accordionContent a:link {
color: #eeeeee;

.accordionContent a:visited {
color: #eee;


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> 
<script type="text/javascript" src="http://hrpblogdesigns.webs.com/Accordion%20Menu/javascript.js"> </script>

    <div id="wrapper">
<a href=YOUR BLOG LINK HERE><div class="accordionButton">Home</div></a>

<div class="accordionButton">About</div> 
        <div class="accordionContent"><p align="center">Hey, this is kind of a test about part. So, hi! :)</p></div>

<div class="accordionButton">Elsewhere</div> 
        <div class="accordionContent"><p align="center"><a href="YOUR PINTEREST LINK HERE">Pinterest</a> | <a href="YOUR GOOGLE+ LINK HERE">Google+</a></p></div>


7. Save.
8. Viola! :)

This is a test one that I’ve simplified so there’s not much editing done to it. It’s fine to drag this one off to just to get the idea of it, and then to customize it later. Now, I’ve highlighted some of the words in this so I could explain them better.

Red = the link of your blog. This is a home link here. You can add more just plain links to pages, instead of having accordion buttons. To do so? Just copy this part of the code. (for example, just, “<ahref=YOUR BLOG LINK HERE><div class="accordionButton">Home</div></a>”) Then you can change the name and link to go to whatever other page (or blog, etc.) that you want it to. :)

Blue = name of the page. For example - up above here, I have “Home”, “About”, and “Elsewhere”. You can change them to whatever you want. This is will change what the name of the page is.

Purple = accordion content. This is what shows up when you open up the accordion. (for example - up above in the pictures I had a Bible verse and prayer requests. That was my content of those accordion buttons.)

This explains the content of the accordion button, but what about what it looks like overall? That’s where the rest of the colors come in. :)

Sky blue = overall accordion. This is kind of a general thing that controls all of the accordion.

Green = the title and kind of “outside” part of the accordion button. For example, this is where I would have controlled the name of my pages in my accordion that I used on Hero. It kind of controls the “outside” part.

Orange = the “inside” part of the accordion button. This controls what the content looks like. If you’re wanting the content to have a background (background: #ccc, for example, makes a gray background), this is where you would add it.

Pink = the hovers. This controls what the hovers of the accordion button looks like. “a:hover” means when you actually hover over it. “a:link” and “a:visited” are what it looks like when it’s not being hovered over.

This is all kind of confusing, but you’re doing a good job! :) I’ve tried to explain the basics and overall of everything, but if you need any help - for example, if you want to know codes for changing fonts and adding borders and such (font-family: 'FONT NAME HERE', cursive !important; and border(can be -top, -bottom, -left, or -right, and just “border” makes it all around): #ccc (this is gray) 1px (size) solid (dashed, dotted)) - just let me know, I would love to help! :)

Hope you have a great day! God bless!! :)



WE GOT FROZEN!!!!! I'M SO EXCITED!!!!!!!!!!! YEEK!!!!!!!!!!!

If you haven't watched it yet, I would SO recommend Frozen. It's just SO AWESOME!!!!! :)

Have a great day! :)

Tutorial: Backgrounds

Hey! :)

So I was asked how I made a background on my sidebar. Like this:

(from Rubberboot Girl)
This is a really simple code that revolves around all backgrounds. So I've decided to do all backgrounds, focusing on sidebar because that's what I was asked about. :)

So, I've briefly mentioned CSS selectors before here with a few examples. Most of the CSS selectors that you would want for background would be (CSS on left, real names on right):

.sidebar = sidebar
.post-body = the post's body
h3.post-title = post title
.sidebar .widget h2 = sidebar gadget name
.main-outer = the post body & sidebar (pretty sure... either that or .main)

So, let's dig in.

1. Log in to your account.
2. Click on the blog you want to edit.
3. Go to template.
4. Click customize.
5. Go to advanced.
6. Scroll down and click CSS.
7. OK, so this is where we're going to be using our selectors and then the background code. Since I was asked about the sidebar, I'll use the sidebar. This is what a code will look like:

.sidebar {
background: #cccccc;

Now the sidebar is a gray color. (You can find colors by going to Template > Customize > Advanced > Links and playing with the link colors and then copying them when you like it and transferring it to your CSS code, example above.)

This might not look that great, though, because no doubt it now looks something like this:

Which... doesn't look that great. So how do we change that? It's actually very simple! :) We simply employ padding.

.sidebar {
background: #cccccc;
padding: 20px;

Now your sidebar should look something like this:

And if you have a picture like mine that just went off-centered? No problem. We'll just use margin! :)

So now we would have something like this:

.sidebar {
background: #cccccc;
padding: 20px;
margin-right: -30px;

Which makes mine look this (you'll have to play with the margin on yours, because like every single sidebar is different almost):

Here we simply made the sidebar bigger to accommodate the picture! :)

Hope this works! If you have any questions, just let me know! :) Have a great day! :)


Let it go! =)

The amazing Britt just went and posted this, which reminded me that I had planned on doing it earlier because IT'S JUST SO AWESOME!!!!!!!!!!!!!!!!!! =)

So, here ya go - let the awesomeness begin!!!!!!! :D

Enjoy! :)


P.S. The Piano Guys officially have their own label on here now... lol ;)


"Veronica, I'm done. You can put that gauze on now."

Feeling dizzy with relief, I proceeded to wrap Mr. Catlong's arm. Then I looked out the window. We were about hundred feet off the ground, away from the road, traveling across the countryside of Iceland. The black car was no where in sight. And we were getting closer to the mountain.

I glanced over at Ian and he glanced over at me. Both of us gulped.

* * *

Hey, everybody. This is Veronica. I just realized that if you're turning into my story for the first time, this obviously doesn't make like... um... ANY sense. So, I thought I'd summarize what's happened so far.

So, first off, I go to like a magic spy school in Paris, France (called the Scarlet Academy - and we're called Scarlet Girls), and I have my own dragon. So, my uncle, Will, came to visit me, got himself shot, and then I found myself following his directions to his mansion in England with an annoying kid named Ian and a teacher named Mr. Catlong. From there, we found out that we were supposed to go and find the Northern Dragon Keeper who, crazily enough, lives in Iceland. So we're on our way to Iceland to speak to this dude because, yeah, hopefully he knows something about what's going on.

So. Hopefully that made some sense. ;) Now... ONWARD WITH THE STORY!!!!! =)

P.S. I think we were just picked up by some kind of dragon. (I should really tell Anna to put the labels back on...)

* * *

"We're going to die, aren't we?" Ian groaned.

I glanced out the window. "Um... yeah. Probably." I glanced at the talon prints on the top of the car that we could see from the inside. "We've got to find out what that is," I muttered, moving to unlock the door.

"Are you crazy?!" Ian yelled, holding on as the dragon... err, whatever it was, jerked suddenly. "You could fall! Or... or... or get eaten by that thing!"

"Great!" I shouted back, throwing the door open.

Immediately, I was hit by a strong wind that nearly knocked me over. I held onto the side of the car and got out, standing on the side bumper and staring up at what was holding us. Apparently we'd been a little off on our guess of a dragon.

To be precise... it was a griffin.

"Oh my word!" I shrieked.

Only because it was huge and, seriously, if you're ever faced with a huge lion/eagle thing, I'm pretty sure you would scream, too. If we were talking seriously.

The griffin's head swiveled at the sound of my voice and it screeched loudly, nearly making me fall off. I quickly jumped back into the car and slammed the door behind me, locking it quickly before holding onto the seatbelt until my knuckles turned white.

"I told you it wasn't a good idea!" Ian yelled over the sound of it screeching.

I didn't reply.

Because I was staring out the front windshield.

And realized that we were now flying through the mountains.

"Um... Ian...?" I started.

"And now we're probably going to die!" he cried. "You know that dragons without masters are really vicious and will kill anybody that they see!"

"Umm...." I tried again, starting to point at what I'd just seen ahead of us in the mountains.

"And now Mr. Catlong's really going to die!" Ian gestured towards our passed-out teacher.

"LOOK!" I yelled back, pointing ahead.

That's about when the griffin dropped us. We both screamed and, believe me, it did not feel good when we landed. Groaning, I sat up and found myself staring.

"Oh stink," I muttered.

Because, in front of us, standing in front of the huge castle that I'd seen earlier nestled in the mountains, was an old man wearing a gray robe with, seriously, the longest beard I've ever seen in my life. (It looked fake. It was that long.)

"Who's that?" whispered Ian, trying to hide on the floor in the back seats behind me and Mr. Catlong.

"I hope I'm right," I murmured.

"About what?" he hissed.

That's when I threw open the door and, feeling way more nervous then you should be when you meet people you've already met before, called out, "Hey, Uncle Herb, how's it going?"