Blogger Tricks 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:

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="mailto:YOUR-EMAIL-ADDRESS-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<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>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>


<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/arrow33.js"></script>

<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>



<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/arrow54.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>



<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/arrow37.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>



<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/arrow53.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>


(For a demo, check out AJGC's back to top button!)


3D Twirl Social Media Icons

To get some snazzy, 3D twirling social media icons for your blog, go to Layout > Add a Gadget > HTML/Javascript and paste the following code into the box:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Make sure to replace the codes in red with your social media profile URL's. 

(For a demo, check out the live demo below!)


Icon Icon Icon Icon Follow Me on Pinterest



I hope you enjoyed today's Blogger World Tour post! Make sure to stop by the Animal Jam Claw Blog tomorrow for the post! :D

Ciao!

-Panda

4 comments:

  1. sorry but did you get the back to the top buttons from my blog? if so could you give me credit?

    ReplyDelete
    Replies
    1. No, I found them all collected on a different site.

      Delete
  2. Awesome tutorial! I loved them, and used them for my blog!

    ReplyDelete
  3. Are you going to continue the Blogger World Tour for 2017?

    ReplyDelete

Hi guys! I am so happy you've decided to share your opinions on AJGC! Make sure to read/follow the following bullets:
- You guys probably know- no swearing, not even ***, no mocking or making fun of others and no judging.
- Free commenting (no moderation) is a privilege, if I see 1 inappropriate comment, comment moderation is turned on for all of you, sorry, I just don't want this to be an unsafe environment.
- If you are caught being mean to another viewer, you will have all of your comments deleted. You only have 2 chances before you are banned from ever having your comment appear again on the blog.
- I have absolutely no problem with you advertising your own blog/site in the comment section, I just request that you write an actual comment about the post or page before advertising your own site. Flat out advertising comments will not be deleted, but they make the comment area more of a spammy place- get what I mean?
- Please do not request diamond or membership codes. If you are looking for gem codes, then make sure to check out our Codes page. But if I catch you threatening another jammer, demanding a membership or diamond code, I will turn on comment moderation.
- When commenting anonymously, you must sign your username.
Sorry if these rules sounded harsh, I'm sure most of you already know the commenting rules, they are virtually the same for every blog.
Happy commenting!