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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7gE0g3CXfKu3R-xcYutQNFqhvR_v8_RBwcvxHtiHC6cZbR1XtwcM2Y8LjRuMBrxHZpgjQDFl8J1oQrGCuiOHovKBsb2S36TclIOQ-6LV1cu3qLnKji-QIcZY_EbRD5QScIBsMjla_Ruu/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia7kxiw5vbFXo6QJ6W6S_Tsnd9KCtxfw6aczt4jiQBwLaqw6gdNGvtzd4ZnYnraT1ucJ4-3nE2gc4gicbtsEsj_MMeuyYZkMCCn58It0AuhomioboRKMZ33ZKkraR5Y_urZqk-zsHitTg4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5QByM81TXnKmt3YBZkxPZk47ijRykz5lr9AwcbyUOlHRz8jUlBRVz4Udd7NS0LfDVqDlKQM5SwXpGCUtbkWT7HiFoEknUkC0JVl4mIyN22fw5CCajJoX4uFDWZS4vNZezKoCYdCT4fmu/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickaR_7cLVKbIN8dhw9bje1LsWXLJ315Fv01RfeZkJ5nt2ew4tAM_dqhO5_Yqg-8wqAPXVsyfTBMsBiX7k0mQHTuLV_PeiFgTBcWdixgkyIZndbLXhA14xUXaWz20ce35kKSL1WK9Aotaw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebThyphenhyphennt0z4buxHvanzHD_D_qGAuPP9Ry-9c8SS_onSklp5t_KBOMTSONdwpfNKtqArPlSO4P6wNSyBfrEQNcud9haje8dGOAK5MR3ZYNP5Otj5P9Nvp7z224VYuPp_FVGXm9vQYOBAVl1/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjJFm51Rf54p7aj3FiaYAmgGrPO-XxqKvAeGv5JofDUaz5UDMjarYo5tpZ3kOBijDXg0Z1RZfhWJ3FBE6lrCQuJJWUOl1cFBRzlcZajlSjHdIpxTsWhzPukoavX3uPeSu1AZiHRWXBFrj/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!)
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
