Blogger World Tour: 2015 Tour

Calendar:

Sunday, February 15th - Animal Jam Graphic Central

Monday, February 16th - Flying Over Jamaa

Tuesday, February 17th - Animal Jam Cookies

Wednesday, February 18th - Flying Over Jamaa

Thursday, February 19th - Animal Jam Graphic Central

Friday, February 20th - Animal Jam Claw Blog

Saturday, February 21st - Animal Jam Go

Posts:

Blogger World Tour Stop #1 : AJGC : Handy-Dandy Codes Part 1

Have you ever been looking for some ways to 'enhance your blog', but found way too many codes and ideas? For the days that AJGC will be posting, I will share a few codes in each post that are sure to spice your blog up. :P

Center Page Tabs

To center your page tabs, go to Template > Customize > Advanced > Add CSS and paste the following code into the box:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}

(For a demo, check out the AJGC's page tabs!)

Center Header

To center your header, go to Template > Customize > Advanced > Add CSS and paste the following code into the box:

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

(For a demo, check out the AJGC's header)

Animal Jam Cursor

To get the official Animal Jam cursor on your blog, go to Template > Edit HTML and then click anywhere inside the HTML box. Use the command: Control-F (or Command-F for Mac computers) and search for the tag: </head> in your HTML. Once you have found the </head> tag, paste the following code above the </head> tag:

<style type="text/css">

body {cursor:url(http://1.bp.blogspot.com/-z0zCWXQ25g0/Uu6lJZtT5oI/AAAAAAAABaA/0FVq5Mo9Bdc/s1600/Animal+Jam+cursor.png),auto;}

</style>

In red is the URL for the graphic of the Animal Jam cursor (graphic credit to numnum13) which will make the cursor for your blog the same one as in Animal Jam, but you can change the URL in red to any image you like.

(For a demo, check out the AJGC's cursor!)

Title-Less Gadget

One of the annoying things about Blogger, is that it forces you to create a title for your image gadgets. To get rid of this problem, and have title-less images, simply insert <!– –> as the title of your image gadget. It makes your image have no title, and takes up no extra room!

(For a demo, check out a few of AJGC's sidebar images!)

Rainbow Links

To get rainbow animated links on your blog, go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<script src='http://yourjavascript.com/512719721/rainbow-links.js'>

Rainbow Links Script- TAKANASHI Mizuki

For full source code, 100's more DHTML scripts, and TOS,

Visit http://www.dynamicdrive.com

Blogger Version - http://www.spiceupyourblog.com

</script>

(For a demo, hover over any of the links on the AJGC!)

Scrolling Text

To get scrolling text on your blog, go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

Make sure to replace the Your scrolling text goes here with the text you want to be scrolling.

(For a demo, look below our header!)

Automatic Signature

To add an automatic signature to the end of all of your posts, go to Template > Customize > Advanced > Add CSS and paste the following code into the box:

.entry-content:after {

content: url("YOUR SIGNATURE URL HERE");

margin-left: 150px;

}

Make sure to replace the YOUR SIGNATURE URL HERE with the URL of your signature.

Blogger World Tour Stop #2 : Flying Over Jamaa

Hello Jammers! This is the second stop of 2015 Blogger World Tour. Today we will be discussing some ways to get visitors.

1. Get on lists. Many blogs have a page for a list of other blogs. Asking to be put on a list will usually result in the blog owner following your blog, and your blog being publicized.
2. Make an ad. Make a banner for people to put on their sidebars and link to your blog.
3. Add a follow button. With one of these, it'll be easy for people to keep coming back!

Blogger World Tour Stop #3 : Animal Jam Cookies : How to Change Your Template

So I'm new at blogging and some tips I've picked up from Panda are a lot!!! One that I thought was really useful was changing your template background. I'll try to post some pictures but I'm posting this from my iPad so if it's bad I'm sorry. My mom is on the computer. Also why my color changed on here I can't change it back. Anyways so how to change your background is.......
You go to..

Click on Template. Then it will take you to a BUNCH of options like these.
|
V

Theres a bunch like I said. You choose the one that you want and it should bring you to a screen like this.
|
V

Of course it won't have Animal Jam Cookies on it. It will have your blogs name.
Then you can choose what template or background you want your blog to be!

Blogger World Tour Stop #4 : Flying Over Jamaa

Post not posted.

Blogger World Tour Stop #5 : AJGC : Handy-Dandy Codes Part 2

Hi jammers! Welcome to the 5th stop for the Blogger World Tour! :D Here is the second segment of our Handy-Dandy Codes series! :P

Custom Search Bar

To get an amazing, customizable search bar on your blog, go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<style>

#search-box {

position: relative;

width: 100%;

margin: 0;

}

#search-form

{

height: 40px;

border: 1px solid #999;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: #fff;

overflow: hidden;

}

#search-text

{

font-size: 14px;

color: #ddd;

border-width: 0;

background: transparent;

}

#search-box input[type="text"]

{

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

#search-button {

position: absolute;

top: 0;

right: 0;

height: 42px;

width: 80px;

font-size: 14px;

color: #fff;

text-align: center;

line-height: 42px;

border-width: 0;

background-color: #8FB200;

-webkit-border-radius: 0px 5px 5px 0px;

-moz-border-radius: 0px 5px 5px 0px;

border-radius: 0px 5px 5px 0px;

cursor: pointer;

}

</style>

<div id='search-box'>

<form action='/search' id='search-form' method='get' target='_top'>

<input id='search-text' name='q' placeholder='Search this Animal Jam blog!' type='text'/>

<button id='search-button' type='submit'><span>Search</span></button>

</form>

</div>

Where the code was red, you will have to make adjustments. For example, the #8FB200 will have to be changed to the hex color code that you want your search bar to be. (To find a good hex color code, go to this link.) When the code said Search this Animal Jam blog! you can substitute it for 'Search Your blog name here!" The code that said Search can be changed to something like "Go!" or "Submit" or anything else you want, but I suggest keeping it as "Search".

(For a demo, check out the AJGC's search bar!)

Snow Effect

For a special seasonal touch, you can add falling snow to your blog! Just go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<script src="http://yourjavascript.com/25223141921/snowstorm-min.js"></script><a href="http://www.spiceupyourblog.com/" target="_blank">Spice Up Your Blog Snow Effect</a>

Candy Pop-Out Social Media Icons

To get some neat candy pop-out social media icons, go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>

<a class="spice-popout" rel="nofollow" href="mailto:YOUR-EMAIL-ADDRESS-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>

<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>

<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>

<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>

<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>

<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>

<a class="spice-popout" rel="nofollow" href="SKYPE-URL-HERE" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>

<style>

.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}

.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}

.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}

</style>

Where the code was red, replace only the red text with the URL's of your social media profiles. If you don't have, say, a Twitter account, you can just delete the Twitter part of the code.

Back to Top Button

Back to top buttons are helpful little images on your blog that bring your viewers back to the top of your blog with a single click. To get one on your blog, go to Layout > Add a Gadget > HTML/Javascript and look for a back to top button that you like and copy the code (below each button) for that button into the HTML box:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow1.js"></script>