Sliding Drop Down Menu
- Copy the code below and paste between <head> </head> tags
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".links_body").hide();
$(".links_head").click(function(){
$(this).next(".links_body").slideToggle('fast');
}); }); </script>
<style type="text/css">
.links_list { margin:0px; padding:0px; width:180px;}
.links_head { padding-top:5px; padding-bottom:5px; cursor:pointer; position:relative; margin:1px; text-align:center;}
.links_body { padding:10px; text-align:left; color: #fff; display:none;}
</style>
- Put this code into your Description
<div class="links_list">
<p class="links_head">More Link</p>
<div class="links_body">
<center>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
<a href="LINK URL">LINK TITLE</a>
</center>
</div></div>
- Change The “More Link” with Title you want. “LINK URL” with Url link example http://www.tumblr.com/. “LINK TITLE” with title of your url.
Navigation Bars 2
1. Copy and paste this code between <style type=”text/css”> and <style>
div.navigate a{ background: #000000; color: #ffffff; display:block; width: 88px; height: 15px; text-align: center; padding-top:2px; margin-left:2px; margin-top:2px; position:relative; text-align: center; z-index:1; font-weight: bold; -moz-border-radius:7px; -webkit-border-radius:7px; display: inline-block; } div.navigate a:hover{ background: #464646; letter-spacing:1px; }
2. Then use this code in your description. You can add more link but always between <div class=navigate”> and </div> tags
<center><div class=”navigate”>
<a href=”http://URL1”>NAME1</a><a href=”http://URL2”>NAME2</a></div></center>
Navigation Bars
1. Copy the code and paste it in your HTML theme between <style type=”text/css”> and </style> tags. If you don’t have these tags, try find <style> and </style>.
div.navigate a{
background: #000000; color: #ffffff; letter-spacing: 0px; display:block; padding:0px 0;
border: 0px solid #000000;
width: 180px; margin-top:1px; position:relative; -webkit-transition-duration: .0s; z-index:1;
}
div.navigate a:hover{
font-weight: bold; letter-spacing: 1px; background: #707070}; display:block; padding:0px 0;
border: 0px solid #000000; z-index:2;
}
** You can change the color if you want
2. Now use the code below in your DESCRIPTION.
You can add more links, but always between <div class=”navigate”> and </div> tags.
<center><div class=”navigate”>
<a href=”http://link1”>navigation 1</a><a href=”http://link2”>navigation 2</a></div><div class=”navigate”>
<a href=”http://link1”>navigation 3</a></center>
** Remove the <center> and </center> tags if you want the links on the left.
