banner

Sliding Dropdown Menu

 

1. Copy the code below before <style type=”text/css”>

<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>
<script type="text/javascript"> 
$(document).ready(function () {
$('li.drawer div:nth-child(2)').hide();
$('li.drawer h4').click(function () {
if ($(this).hasClass('open')) {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');}
else {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');
$(this).next().slideDown();
$(this).addClass('open');}
});
});
</script>

2. Copy and paste the code below before </style>

ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}

ul#drawers a {text-decoration: none; color: #000;}

ul#drawers li h4 {margin: 0; padding: 0px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;}

h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}

li.drawer h4.open {background-color: ; border-top: 0px;}

li.drawer div {padding: 0px; margin: 0px; line-height: 10px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}

li.drawer div li {list-style-type: disc;}

li.drawer div ul {-webkit-padding-start: 12px;}

3. Then add this code in your description. Replace “Title / Image URL” with title or image you want to click on for the menu to slide. Replace “LINK HERE” with the link you want, “TEXT HERE” with the title of the link.

<ul >
<li class="drawer" > 
<h4>Title / Image URL</h4>
<div align="center">
<p>
<a href="LINK HERE">TEXT HERE</a>
<p>
<a href="LINK HERE">TEXT HERE</a>
<p>
<a href="LINK HERE">TEXT HERE</a>
</p>
</div>
</li>
</ul>

**add this if you want use an image:

<img src="IMAGE URL"></a>

example:

<h4><img src="http://bloggingmage.fileave.com/cerealguy.PNG"></a></h4>

Done! Good Luck :)

    • #admin
    • #dropdown menu
    • #sliding dropdown menu
    • #basic
    • #sliding drop down menu with image
    • #sliding dropdown menu with image
  • 1 year ago
  • 743
  • Permalink
  • Share

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>

    • #admin
    • #navigation bars
    • #basic
  • 2 years ago
  • 5
  • Permalink
  • Share

Follow Yourself

Go to this site

http://www.tumblr.com/follow/USERNAME

** Enjoy your new follower :P

    • #admin
    • #follow yourself
    • #basic
  • 2 years ago
  • 12
  • Permalink
  • Share

Make A Link

  • To display a text link:

<a href="URL_OF_SITE_HERE">Displayed Text </a>


  • To display a text link which opens into a new browser window:

<a href="URL_OF_SITE_HERE" target="_blank">Displayed Text </a>


  • To make a picture a link:

<a href="URL_OF_SITE_HERE"><img src="URL_OF_IMAGE_HERE"></a>

    • #admin
    • #make a link
    • #basic
  • 2 years ago
  • 115
  • Permalink
  • Share

How to disable the follow button on your blog!

Add this code to your theme’s CSS:

iframe {display:none !important;}

Done! Your follow button will be gone!

** haha i think no one can use this tutorial :P

    • #admin
    • #disable follow button
    • #basic
  • 2 years ago
  • 41
  • Permalink
  • Share

Put a Header on Your Theme.

1. Copy this code below 

<center><img src="BANNER URL HERE" width="700"> </center>

2. Put the code after <head>

4. You can change the banner width. 

    • #admin
    • #header
    • #basic
  • 2 years ago
  • 334
  • Permalink
  • Share

Marquee Text Effect

Scrolling Text/Images (Marquee)

Normal scroll:

<marquee>CONTENT HERE</marquee>

“Bouncy” (Going Back & Forth):

<marquee behavior="alternate">CONTENT HERE</marquee>

Marquee directions:

<marquee direction="LEFT, RIGHT, UP OR DOWN">CONTENT HERE</marquee>

Sliding Marquee (Will Stop at the End):

<marquee behavior="slide">CONTENT HERE</marquee>

Marquee That Will Stop On Hover:

<marquee onmouseover="this.stop();" onmouseout="this.start();">CONTENT HERE</marquee>

Marquee Speed:

<marquee scrollamount="SPEED #">CONTENT HERE</marquee>

Note:

  • Just edit all BOLD parts.
  • Content can either be text or images.
  • Retype all quotation marks (“”) to be sure that codes will work.
  • For Marquee Directions, Left is the default direction.
  • For Marquee Speed, The higher the Number, the faster the scroll. The Lower the number, the Slower the Scroll.

    • #admin
    • #basic html code
    • #Marquee
    • #basic
  • 2 years ago
  • 29
  • Permalink
  • Share

Putting a Background

1. Go Customize » Appearance » Background Image and Upload image from you computer.

2. If your theme do not have this, you must upload your image to get the url address/direct link, then find the code background-image:url();

3. Paste the direct link between the parentheses.

    • #admin
    • #putting a background
    • #basic
  • 2 years ago
  • 22
  • Permalink
  • Share

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.


    • #admin
    • #navigation bars
    • #basic
  • 2 years ago
  • 33
  • Permalink
  • Share

Disable Right Mouse Click

Copy this code

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

** If it’s not working, try paste the code between <head> and </head>

    • #admin
    • #disable right mouse
    • #basic
  • 2 years ago
  • 18
  • Permalink
  • Share
← Newer • Older →
Page 1 of 2

Portrait/Logo

Tumblr Academy is a Tutorial Blog. You can find a various tutorials for your tumblr including html code, theme, useful link, tips etc.

7 confused students




For Theme Docs
● Energy Saving Mode
● Welcome Message
● Putting A Background
● Putting A Header
● Endless Scroll
● Disable Right Click
● Fading Image
● Reblog Button On Your Post
● Cursor
● Scroll To Top Button
● Recommend Button
● Stylish Scrollbar / Scrollbar With Image
● Sparkle Link Hover
● Rainbow Link Hover
● Shaking Image
● Pop Up Ask Box/Link

For Descriptions
● Background Music
✓ Youtube Player
✓ SCM Player
✓ MixPod
✓ Streampad
● Ask Box In Description/Sidebar
● Twitter Badge
● Chat Box
●Make A Link
● Hit Counter And User Online
● Scroll Box
● Scrolling Image / Image Marquee
● Navigation Bars
● Sliding Drop Down Menu
● Sliding Drop Down Menu With Image

For Dashboard
●Missing e 1.5.7 [update]
[ ✓ Unfollower List. ✓ Follow Checker. ✓ Bookmark. ✓ Magnify. ✓ Reblog Yourself. ✓ Safe Dash. ✓ Time Stamp. ✓ Post Tumblr Crush. ✓Jump To Dash. ✓ Ask Box In Dashboard. ✓ Enlarge Tumblr Avatar. ✓ Slim Sidebar. ✓ One Click Reblog. ✓ Mass Editor Tweaks etc ]
● Dashboard / Log-in Background
● Others

Basic / For Posting
● Basic HTML Code
● Marquee
● Change URL
● Hide Following People
● Follow Yourself
● Answer Questions With Image/Gifs
● Let People Answer Your Post
● Link Tag Post
● Make A Page
Music Posting ● Number of post to show on your blog
● Enable Ask Box (for new dashboard)

Others
● Image For Saving Energy / Standby Mode
● Track Anonymous Ask
● Redirect To a New URL
●Delete Secondary Blog ● Tumblr Status
● Disable Follow Button
● Mapping Image / Image Map
● Background Layout
● Facebook Things
● Theme Recover

● Pop Up Ask Box/Link
● Sliding Drop Down Menu With Image
● Sliding Drop Down Menu
● Energy Saving Mode
● Shaking Image
● Rainbow Link Hover
● Image For Saving Energy / Standby Mode
●Make A Link
● Redirect To a New URL

I do not own all the code on this blog, i'm modify and edit some code a bit to suit for the Tumblr Theme All images for an explanation of the tutorial is copyrighted by TUMBLR ACADEMY. If you see something has been poorly credited, please TA me. Thank You.

  • FAQs
  • Useful Link
  • Saving Energy Image
  • Icons
  • RSS
  • Random
  • Archive
  • Ask Professor
  • Submit
  • Mobile

Tumblr Academy. Effector Theme by Carlo Franco.

Powered by Tumblr

Counting Since 30 MAY 2011 free counters



ASK BOX IS NOW OPEN

CLICK HERE

click the link and wait for 5second and click skip ad. Thank You ;)