Index Tutorials
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
- Pop Up Ask Box
- Sparkle Link Hover
- Rainbow Link Hover
- Typing Moving Title Bar
- Fix & Move “Follow / Dashboard” Button
- How To Add Hyphen On The Tumblr URL
- Show Stat Code
- Blogroll / Tumblr Roll Page
- Shaking Image
- Scroll To Top / Bottom / Home Button
- How To Stretch Background Image
For Description
- 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
- Navigation Bars
- Sliding Drop Down Menu
- Sliding Drop Down Menu With Image
- Scrolling Image / Image Marquee
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
Backing up your Tumblr blog to WordPress
In this tutorial we’ll teach you how to make a copy of your Tumblr blog onto WordPress.com to act as a backup.
The first two steps don’t need to be followed if you already use WordPress.com.
1. Sign up for a WordPress.com account
You need a WordPress.com blog, simply follow the steps to select your username and confirm your account via email.
2. Skip through the welcome steps
3. Visit the dashboard
- Click on your username
- Select the blog name you wish to import into
- Select ‘dashboard’
4. Visit the import tools page
In the sidebar menu select ‘tools’ and then ‘import’.
5. Select import from Tumblr
6. Allow Tumblr access
Click the ‘Connect to Tumblr to begin’ button. You may need to log into Tumblr if you haven’t already. Be sure to allow access to WordPress.com
7. Start the import!
Once authenticated you can select your Tumblr blog from the list of your blogs and click on ‘Import this blog’.
And you’re done, WordPress.com takes care of the rest and will create a copy of your posts onto your WordPress.com blog.
Tired of haters? Seeing too much of the “wrong” ships, characters or fandoms on your dash? Don’t want to be rude and unfollow or block someone straight away?
Using chrome?
If yes, here are two useful extensions for you:
tumblr hate - Lets you hide posts and never see them appearing again.
tumblr purrification - Hide posts from an unlimited amount of users without unfollowing them.
Tutorials: Fancying Up Your Title Bar
You may have seen scrolling/marquee title bars and flashing title bars lately. This is the title on the tab of your page, at the very top, next to your icon/favicon. It’s pretty boring, so to make it a little more interesting, you can go and make a scrolling title.
A Tumblr Tutorial for Tagged Pages! (FIXED!)
I FIXED IT!
I know some people could just could go to the Tumblr Help Center for this, but I think my tutorial is more funner, so pthphth.
So, you wanna make a tagged page for your sidebar, huh?
LEARN TO DO IT YOURSELF THE HARD WAY, LIKE I HAD TO!!
Just kidding. I’ll help you.
It is important to note that not all themes support this method of adding pages. If you got your theme in the Tumblr Theme Garden, you probably will not have a problem when doing this tutorial. If you found your theme outside of Tumblr (like me), you might not be able to complete this. But let’s just assume you have a theme garden theme, ok?
Step 1: Don’t Panic.
Step 2: Go to the blog you want to add the tag page to, and click “customize theme”
Step 3: Kewl. So now you should see this little fudger:
Everyone’s will look different, depending on your theme. Scroll down until you see the section called “Pages.” Yours might be tucked away under the little arrow; click the arrow to open the group.
Step 4: Now to actually make the page. Hooray! /sarcasm /notreally. Click the little tiny thing that says “Add Page.”
It gets a little tricky at this point, so I’ll try my best to break it up/down/whatever you kids say these days. This little window will pop up to make a new page:
WAIT. DON’T. CLICK. ANYTHING. Until I tell you to, at least. See where it says “Standard Layout”? We don’t want that (in Pumkin voice). Click the little dropdown menu, and select “Redirect.” The window will change.
Step 5 (because step 4 was getting too long): For this step, I am just using an example for my blog. I want a page for my “audio” tag. I filled in the first box with the page URL of my choosing. You can use anything, because in the end it doesn’t really matter (for redirect pages, anyway)
Next is to add the actual tag page! In the next box, type your full URL (http://exampleurl.tumblr.com), followed by a forward slash (/), and then the word “tagged” with another forward slash after it (http://exampleurl.tumblr.com/tagged/). Now this step is EXTREMELY important. After this forward slash, type the TAG NAME. Examples- “me”, “art”, “mine”, “gpoy”, etc. If your tag has multiple words separated by spaces, you have to use dashes between the words. Examples- “the-hunger-games”, “all-time-low”, etc.
Now, the next box is important because it makes the tag page actually show up. Click the little check box, then type a title for the page. Whatever you type there is what will show up on your blog.
If, however, this comes up when you click the box, this comes up:
Repeat Step 1: Don’t panic. Scroll through towards the bottom, there are special instructions (4) for you!! You go Glen Coco!
SO now that we have this little box set up, please click “Create Page,” that little green button at the bottom.
CONGRATULATIONS! YOU HAVE JUST CREATED A TAGGED BUTTON FOR YOUR BLOG!
Refresh your blog and it should look a little something like this (using the Tumblr Staff blog as an example ok):
Go ahead and test that page out. If it doesn’t work immediately- Step 1: DON’T PANIC! If you followed the instructions closely, you didn’t do anything wrong. It’s just taking Tumblr a while longer to adjust your page or whatever it is they do.
So that’s it for supported themes! You can read on to see how to make the pages for unsupported themes, but you don’t need that, do you? Since you’ll probably skip the rest of this post, I will say goodbye now, and thank you for reading! If you think I missed anything or have any other questions, feel free to ask, my box is open! Bye!!
Your theme is unsupported huh? THAT’S OK! There’s a simple solution.
Back on the “Customize” bar, there should be a section that looks like this (except without all the writing in it, because that’s my own info silly goose):
You should still have the “Add a Page” box open. Uncheck the box that says “Show a link to this page,” then click “Create Page.”
Scroll back up to the bank of things that I showed up there. In the “Link1” box, put ONLY THE STUFF AFTER THE FORWARD SLASH! For example- /tagged/me, /about, /the-best
Then in the “Link1 Title” box directly underneath, type the title you want to show up on your blog. Click “Save” at the top, and voila!
Thank you so much if you made it through this whole post. If you have any questions, comments, critiques, whatever, feel free to drop an ask, and I will be happy to answer your question.
You’ve seen my blog, you seen my crib, now it’s time for you to get out. *slams door*
Tumblr Tutorial: Personalize Your Theme with Sidebar Links
A few of my tumblr friends have already asked me about this, but I never had a formal tutorial about it. But when Mr. or Ms. Anon TA-ed me this question, I decided to do a tutorial not just for him/her, but also for everyone who wants a personalized look to their tumblr. And now, finally, here it is!
So, these are the parts of my sidebars where I used a photo as a hyperlink(click, then it will lead you to another site or related tagged posts.) Check them out here.
First, you have to choose your base theme. Make sure you could do some personal touches to it. I think almost every tumblr theme has a sidebar, but I want two sidebars so I used the theme Springfield(click to install). You can use other themes on tumblr’s theme garden.
Before doing anything else, you have to create your desired image you would use. In my case, I used Adobe Photoshop CS4 in creating my image. TA me if you need help in doing this part.
As you can see(below), the image I used is pixelated when zoomed. Why? Well, It’s because the sidbar’s width is just 212px(This is for Springfield. Other sidebars depend on their themes). In order to fit our image in that box, we need to make it a little smaller, so I changed the width to 200px, and the length to 56px for us to avoid that “fat image” or “too tall image” look.
When you’re satisfied with your image, upload it on uploading sites(haha. not sure how they’re called.) that can give you their codes or links. The only site I could suggest is Photobucket, since it’s the site I’ve been using for a long time to upload and use images.
It’s time to customize your theme! On your tumblr, you would see the “customize” button on the upper right side. Click!
Then you’ll see this on the upper portion. Click the “Theme” button.
Again, In Springfield’s case, look for the “Right Sidebar” or if you want, the “Left Sidebar”, whatever part you would want to customize.(Forgive me for always using Springfield as an example. If you’re planning on using another theme, feel free to TA me and I’ll search for the part where you will put the codes.) Under these, are the codes of the parts of the ready-made sidebars. Look for the part where you would want to place your new details/links.
Copy and paste this:
<!— (place desired title here) —>
<p class=”sideheader”><strong>(place desired title here)</strong></p>
(place hyperlinks here)
On the “place hyperlinks here”, Copy and paste this:
<a href=”(place link here)”><img src=”(place your image’s direct link here)“></a>
For the link, you can place your tagged posts’ links(ex. scarletpotion.tumblr.com/tagged/photography) And for the image’s direct link, go back to photobucket and copy the direct link part.
Repeat the procedures to make more image hyperlinks, and you’re done!
Here’s how my tumblr looks like with these sidebar links:
So there you have it! Thank you, anon for the request. For your other requests, please TA me. :)
TOOLTIP TUTORIAL
1. paste this before </style>:
#s-m-t-tooltip {
max-width:300px;
padding:3px 4px 5px 4px;
margin:20px 0px 0px 20px;
background-color:#fff; /* change the background color */
border:1px solid #ddd; /* change the border color */
font-family:calibri; /* change the font */
font-size:9px; /* change the font size */
letter-spacing:2px; /* change the letter spacing */
text-transform:uppercase; /* can be uppercase, lowercase, none*/
color:#999; /* change the text color */
z-index:999999999999999999999999999999999999;
}
2. paste this after </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>
3. to put a tooltip on a link, you need to put title=”tooltip text” in the link coding, like this:
regular link:
<a href="http://www.url.com">link text</a>
link with tooltip:
<a title=”tooltip text”href=”http://www.url.com”>link text</a>credit to louminary
This is how you read more cut (a) photo(s) on tumblr...
1. Select Photo from your posting options
2. Upload photo(s)
3. Hit preview post
4. DO NOT POST
5. Open a new window or tab
6. Select Text from your posting options
7. Now make the textual part of your post
8. Hit “read more” on rich text format or put in less than(no space)!-(no space)- more -(no space)-(no space)greater than only without the (no space) in the code
9. Go to your preview of your photo(s)
10. Right click on the image and follow your browser options to obtain the images URL (it should end in .gif or .jpg, etc…
11. Go back to your text post
12. Select image tag in rich text editor or put less than (no space) img src=URLgoeshere.jpg (no space) greater than less than (no space) /img (no space) greater than for each image you want to put in your post
13. Hit preview
14. Double check that your text post’s read more tag is working
15. Create post
16. Discard the Photo post you uploaded your photo(s) in. Don’t worry, the photo(s) will not be lost in doing so
Now your post should look like mine :D Don’t worry it’s the penguins from some Pixar flick, so no spoilers.
Tumblr Tutorial: Changing Favicon
A favicon is the small image that appears next to the website title on the title bar . tab. For example, this is Tumblr’s Favicon:
- A favicon needs to be 16px by 16px. You can make your own in a graphics programme, or find one online - just remember to give credit!
- Upload is to an image host, for example ImageShack.
- Click Customise Appearance, then Theme.
- Make sure you are using custom HTML. If not, click on ‘Use Cutom HTML’.
- Search for this code:
<link rel=”shortcut icon” href=”{Favicon}”>
- Replace {Favicon} with the url of your favicon.
- Press save and you’re done!
Tumblr Tutorials.
I was kind of surprised when I found out a lot of people on tumblr don’t know about some of these things, so I decided to make some tutorials for them:
Missing E, the download link for it & why I think you should have it [x]
How to reply to a reply [x]
How to link things [x]
Tags page! [x]
Tumblr crushes! where to find & how to post. [x]
How to check who unfollowed you [x]
Tumblelogs [x]
Reaction Gifs [x]
Blogroll! [x]
How to check how many people are on your blog [x]
http://karnipants.tumblr.com/private/28956825955/tumblr_m8f303yn7V1qhjv96
shrink/enlarge images on hover
put the following code after <style type=”text/css”> in your custom html
img:hover{-webkit-transform: scale(1.1); -webkit-transition: all .2s ease-in-out;}
change the (1.1) to whatever size you want and .2s is how long it takes to shrink/grow so adjust that to your liking
