HomeAboutGlossaryTales

Tutorial: Rotating Images

Hey! :)

Long time no see!! Wow, summer has been crazy. How has your guys' summers been going? Anyway, I'd love to make a long post about a lot of exciting things (like... SEEING HOW TO TRAIN YOUR DRAGON 2!!!! :)) but I was asked how to make things move on a blog, and I've interrupted that as rotating images, so, here we go - another tutorial. ;)

Rotating Images

The codes
CSS

.rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}


HTML in Gadget

<div class="rotate">
<img src="image_url"/>
</div>


The instructions
1. Let's go and make an image! :) Go onto a program like PicMonkey (online) or GIMP or something, and make a personalized image that you want to twirl around when you hover over it. :)
2. Go to your blog, make a new post, upload your image, right click, click image in new window, and grab the URL. (for example, my blog's URL is http://areyouadragonmaster.blogspot.com/)
3. Save that there picture in a same place until later. ;)
4. Go to your layout in your blog, get an HTML gadget, and post the HTML that I've put up earlier in this post.
5. Where it says "image_url", please the image URL that you've personalized.
6. Save! :)
7. Go to Template, click customize, go to advanced, and down to CSS.
8. Paste the CSS.
9. Save.
10. Viola! :)

Now you should have a rotating image, once you hover over it with your mouse! :) If you have any questions/problems, just let me know, and I'll try and help to the best of my abilities! :)

Have a great day, guys!! And a great rest of the summer!! :) God bless!! :)

~Anna

OH.MY.WORD.

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"], ["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">
</div>


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!! :)

~Anna

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;
padding:5px;
background: #ccc;
    } 
  
.accordionButton {    
    width: 290px; 
    float: none; 
    cursor: pointer; 
    color:#000000; 
    text-align:center; 
    padding:0px; 
    margin-bottom:2px;
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;
}

</style>

<!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>


</div></!doctype></center>


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!! :)

~Anna

GUESS WHAT

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! :)
~Anna

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! :)

~Anna

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! :)

~Anna

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