Animal Jam Graphic Central!: Blogger World Tour Stop #5 : AJGC : Handy-Dandy Codes Part 2

Thursday, February 19, 2015

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>