Code Help

Help with html/css/javascript/photoshop/etc. If the code doesn't work, retype the "quotation marks."

[codehelp]

Tumblr Follower Counter

Click here to generate a follower counter.

Follower Counters will display the according number of followers that you have on your blog. With this, you can use the button to your liking such as display it on your blog.

[codehelp]

What should I do a tutorial on next?

[codehelp]

Adding Overlays

Ever wonder how those people on Instagram add those interesting overlays to their photos like the one below? This tutorial will show you how users are able to do that. Keep on reading to find out!

Remember to like and reblog if you found this useful! Help others by sharing this post.

First off all, you're going to need to download PicsArt on your mobile device. It is downloadable on Apple devices as well as Android. As of early 2014, this is what the app icon looks like.

As you're waiting for the app to download on your device, you can download overlays online. A list of tumblelogs that upload overlays, and other transparent images will be provided at the end of this post. You can save this to your photo album by holding onto the image, where a popup will come up. From that, simply select save and woolah! The image you just selected has been saved onto your device.

When the app is done downloading, you can open it up and begin editing. Click on the button labeled "edit" and then select your desired photo from either your gallery on your device, dropbox, facebook, and more! You can even capture a photo if you would prefer that option.

For this tutorial, I choose this photo that I took and edited prior to this tutorial. On my iPhone 4s with iOs7 I used VSCOcam's T1 filter for the filter, and the medium left side frame on ClipCrop. This photo was taken by me in the streets of Santa Monica, summer of 2013. (Please do not steal or repost this image.)

After you have selected your image, there should be a bar underneath your image. Scroll to the right and select the "Add Photo" button.

A popup box identical to the one when selecting your base image will appear. There you'll be able to select the photo(s) you want to add on top of your image. Like before, you can select images from your gallery, dropbox, etc. or capture it. I chose to select my photos from my dropbox account. You can upload a maximum of ten photos onto the canvas at once. (Since my photos are in my dropbox account, I decided to select my pictures from there.)

  After that, what you choose to do it all up to you! You are the creator of this image and you can do as you please. Here are some bonus techniques and tips for to help your editing process! After you're done just make sure you hit the check mark on the bottom bar. After that you can do whatever else you want to do on the app. Of course, when you've done everything you've wanted to do, hit save which is the chip icon located in the center of the top bar.

You can see my finish results at the very end of this posts

Resizing:

At each corner of the photo, there is a white circle. Hold onto one end and move outward to enlarge the image, or inward to make it smaller.

Rotation:

To rotate the image, first select the image. Once you've done so, a gray circle with two arrows are in the upper right corner of the image above one of the white circles. Hold onto the grey circle and move in a clockwise or counter-clockwise motion to your desired angle and release when you are pleased with such.

Flipping:

First, select the image you want to flip. Hold onto one of the white circles and do the following:

to flip vertically: drag one of the white circles to the left or the right side

to flip horizontally: drag one of the white circle in an upwards or downwards motion

Blending Mode:

To change the blending mode, select the image and click on the box next to the opacity range. The blending mode is set to Normal by default. You can then change it to what you want. Changing the blending mode can help with images that contain solid black or white backgrounds and images like so. This technique is very useful with overlays such as the one shii-overlays makes.

To remove black: select screen

To remove white: select multiply

Opacity:

To change the opacity, first select the image you want. A bar at the bottom will come up. Simply drag the circle to the left or right depending on how high or low you want the opacity to be.

Cropping:

To crop a photo, select the image, then select the crop button on the top bar. There, you can crop the image to size and section. Once you're done hit the check mark on the upper right hand corner

Adding more photos:

On the right side of the bottom bar, there is a check mark. Next to it is a plus sign surrounded by a circle. Hit the button to reveal a selection list. Click on "Add Photo" and you will be able to add more photos to your picture.

Deleting photos:

To delete an unwanted image, select the trashcan icon located next to the large X icon on the left side on the bottom bar.

Places to download overlays: Here is a list of blogs and other sites where you can download overlays and transparent images for your own personal use. If you would like to have your blog added onto this list or happen to know other places where you can download overylays, transparent images, and such please feel free to tell me and I will add it to this list for all to enjoy!

transparalyze

transparentlol

tra-nsparent

totallytransparent

shii-overlays

woahoverlays

overlaysss

mroverlays

overlayswag

tsp-overlays

dazzingoverlays

Tip: I recommend creating a dropbox account if you don't have one already. There, you can upload all of your saved overlays so that you can easily access them, organize them to your desire, and your photo gallery on your device won't be a mess! PicsArt allows you to select your images from there if you choose to do so. Personally, I have found this to make editing very easier for me.

Here are my finished results: (Please do not steal this)

[zombiecaptain]

Okay so this is seriously the best. This is an application for Tumblr that blends in with the regular layout. Thanks to this app, I can create lists of blogs: as you can see, I’ve made three. One where I put blogs that only post black and white pictures, one where I have collected all the talented photographers I follow, and one with the ~20 blogs I reblog from most often.

If I click on one of my lists, I get to a dashboard that looks just like the regular one - but with posts from the blogs I’ve added in the list only! This makes blogging so. Much. Easier. You have no idea. It has no ads and it is free, of course.

Do you want this?

If so, here is how you get it too!

Go to http://www.listr.io/

Click "Get Started"

Sign up for the beta version!

To be able to use the app, copy and paste this invitation code: 528d4ab44ad7b924090000e1

Ta-daa! Now you can start creating lists of your own!

I don’t mean to spam or annoy you, I just really find Listr SO useful. And the more people I invite, the more lists I am able to make (this is because it is still a beta version). So, yeah! Win-win! :D 

If you feel like it, reblog so that more people will find out about this. I think MANY people have been waiting for an app like this, I sure was, haha. x

[codehelp]

Falling Items For Your Blog

Disclaimer: These codes are not created by me nor do they belong to me. The creators of the codes are listed next to the item. These are just listed here for reference for those who want it on their blog. Enjoy.

Falling Snowflakes (by naeive)

Falling Snow (by emmysthemes)

Falling Stars (by naeive)

[codehelp]

Announcement

I will be turning off my ask box on Monday afternoon so please get in your questions before then. When I will turn it back on is unknown, but it won't be too long. Lately I've been receiving several messages asking for help, and as much as I would like to I have not been able to answer them due to time issues. With that said, I am trying to limit down my message count and try to answer as much as I can over the time I close down my ask box. Thank you.

[codehelp]

QUICK NOTE (PLEASE READ)

Hey guys! I just wanted to let you know that I don’t help with personal alterations for your theme. Small and simple ones I will try to help you with and explain it, but I won’t tell you if you tell me that you want so and so and so done to your theme. This isn’t what this blog is for, or really what the messages are for. This blog is for you to learn and get experience with coding! Not for me to do the work! Haha. Anyways, you can always request single topics such as how to make a reblog button, or how to change borders, etc and I’ll try to make a post about it but other than that I don’t really personally help you change your theme. The reason behind this is because I don’t have time to singly help you out on multiple issues and each theme varies. This means each theme has different coding, and different names that the creator uses. If you’re really in need, please try experimenting with the code or googling. I hope you understand and I appreciate you taking the time to read this. Okay. Have a lovely day.

[codehelp]

Before you leave me a message please:

check the selection list before asking. Be sure to check with google too! It might be on there, and I'm sure you probably want your "problem" to be solved asap!

be sure to SPECIFICALLY state your problem. Please don't just say something like "help me with my problem" or "fix this please" I can't help you off of that. I need more details in order to help you.

do not tell me to answer privately. I answer ALL my questions left on this blog privately unless I feel the need to publish it.

Thank you.

[codehelp]

Questions About Fonts Will No Longer Be Answered

I am only taking font suggestions as of right now. All questions about how to install your font, download them, etc have already been answered in the tablets on the page. Please check the tabs before asking any questions. All questions about fonts will be ignored and linked to the page unless the information has not been listed on the page.

[codehelp]

Hi so for the monochrome code, it seems to only work for single pictures and not gif sets or more than one picture, is there a way around this?

yes im actually working on finding a code on that but ive been really busy lately. once i do the find the code i will be sure to edit it into the monochrome post as well as make an update post about it. xx

[whoreablethemez]

"Wobble" Text Effect

[whoreablethemez]

Put this code between <head> and </head>

Put this before the text you want to “wobble” (Remember to retype the quotation marks)

<div id=”wobble”>

And this after it

</div>

[whoreablethemez]

"Layered" Text Effect

End results:

I will be teaching you guys how to make this. First off, get the photo you want to use. I’ll be using this photo. I think it’s best you use a picture with lot of layers, like beaches, landscapes, and things like that. Then just open up the photo in Photoshop. Once you have your photo open, use the text tool to create your text. It’s best to use a cursive font and make the text fill the entire width of the photo. (x) When you’re done with that feel free to position it where you want it to be. After you’re done with that, you need to make it so that the text is no longer in “text form.” Just go to Filter > Liquify (Shift+Ctrl+x). A box should show up, and just press OK. If you want, you can duplicate the text layer and make it invisible just in case you want to change anything. After doing so, another pop up should appear. Make sure your brush is small. You can do that by pressing the [/{ button that should be near the right side of your keyboard. Then just press anywhere away from the text so it doesn’t effect it, and press OK. (x) Now, if you want, zoom in closer. It’ll help you make the photo cleaner and more accurate with your erasing. You can use the Ctrl/Command plus the +/= sign to zoom in, and Ctrl/Command and -/_ to zoom outward. You also might want to lower the opacity so you can see better. I recommend changing the opacity to 45-70%. Then start erasing once you’re done with that. It’s best to erase like the text is behind something like this. You can see how in the photo I erased the text that appeared on the water, and kept everything else. If you have people in your photo, or anything else, I highly recommend you erase that part where they are too. When you completed it, make any changed you want. You can keep the opacity down, or move it back to 100%. It’s your choice what you do with it. Just remember to save it afterwards!\

[codehelp]

We’ve added even more fonts that you could use for your blog! Check ‘em out! We’ll be adding more in the future.

[codehelp]

I’ve added a couple more fonts to the font page! Be sure to check them out as you please. I’m currently trying to work on adding even more in so be sure to keep on checking!

[codehelp]

Image Mapping (using Photoshop)

You can view an example here.

STEP ONE: Create your graphic.

STEP TWO: Select the slice tool.

STEP THREE: Using the tool, select the area you want to link.

NOTE: You can also slice more than one area. Oh, and don't worry about the lines. They won't show up on the finished product.

STEP FOUR: Select the first area you want to link and right click on it. Then select "Edit Slice Options"

STEP FIVE: After that, a popup box should appear. Now you can insert in the url for that section, and edit the other options. Just make sure that the Slice Type is set on Image. When you're done just press OK.

STEP SIX: Repeat steps 4-5 if needed.

STEP SEVEN: When you're completely finished, go to File and select Save for Web & Devices (or press Alt+Shift+Ctrl+S). After that, a popup box will appear. When it does, just select Save.

STEP EIGHT: Another popup box will appear so you can save it. When you save it, make sure the format is HTML and Images. After that just save it!

STEP NINE: Now go to the location you saved your file, and open it. Make sure you open with NotePad.

STEP TEN: A popup box will appear, and now you have your code! You can now copy and paste it and do w/e with it! You're done!

NOTE: When you paste in your code, you might have to adjust some coding. For sure, you need to edit the images. Where it says images/WHATYOUNAMEDIT.gif you'll need to replace it with an img url link. You can go here and upload the images so it's now a link. Then paste it where it should be. (BTW, you should have a folder of images of the graphic you made for image mapping). This can kinda be complicated, so if you need help feel free to ask me.

[jollythemes]

If you have your faq + ask on one page..

We are messed up now since Tumblr changed the ask box width & height and everything so..

Read More

[whoreablethemez]

Gif Transition Tutorial:

STEP 1: Download & Install Photoscape if you haven’t already. It’s 100% free and virus free.

STEP 2: Open up Photoscape. {x}

STEP 3: Select “Animated Gif” {x}

STEP 4: Drag and select the images you want in the gif to the area at the top {x}

STEP 5: Go to “Change effect” and select what you want, change the time for each slide if needed, etc {x}

STEP 6: Save (ctrl+s) your slide! {x}

End results: {x} {x} {x} {x} {x} {x}

IMPORTANT NOTES WHEN MAKING YOUR GIF: When adjusting the time, there’s enough time to look at each image.

If you’re using the gif for a post, make sure that it’s around 500kb or less, otherwise the gif won’t move. If it’s for a sidebar in a theme or such, it doesn’t matter how big the file is. It will tell you how big your file is after you save it. {x}

[codehelp]

Cursors

Pizza: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-2/foo165.cur), progress !important;}

Chicken Breast: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-1/foo86.cur), progress !important;}

Sprite: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-7/foo634.cur), progress !important;}

Sushi: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-7/foo621.cur), progress !important;}

Gingerbread: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol340.cur), progress !important;}

Doughnut: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-4/foo364.cur), progress !important;}

MORE FOOD CURSORS HERE

Justin Bieber: 

body, a:hover {cursor: url(http://ani.cursors-4u.net/people/peo-9/peo1028.cur), progress !important;}

Justin Bieber 2: 

body, a:hover {cursor: url(http://ani.cursors-4u.net/people/peo-9/peo1027.cur), progress !important;}

2NE1: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-8/peo941.ani), url(http://cur.cursors-4u.net/people/peo-8/peo941.png), progress !important;}

Niall Horan: 

body, a:hover {cursor: url(http://ani.cursors-4u.net/people/peo-9/peo1026.cur), progress !important;}

Zac Efron: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-5/peo396.cur), progress !important;}

Ashley Tisdale: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-5/peo392.cur), progress !important;}

Vanessa Hudgens: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/people/peo-5/peo388.cur), progress !important;}

MORE CELEBRITY CURSORS HERE

Spongebob Squarepants - Patrick: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1106.cur), progress !important;}

Spongebob Squarepants - Squidward: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1105.cur), progress !important;}

Rugrats - Tommy: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-12/too1103.cur), progress !important;}

Finding Nemo - Nemo: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-11/too1008.ani), url(http://cur.cursors-4u.net/toons/too-11/too1008.png), progress !important;}

Hello Kitty - Batmaru: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani188.cur), progress !important;}

Digimon - Patamon: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1019.cur), progress !important;}

Hamtaro - Hamtaro: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat21.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat21.png), progress !important;}

Hamtaro - Cappy: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat27.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat27.png), progress !important;}

Hamtaro - Bijou: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat22.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat22.png), progress !important;}

Hamtaro - Boss: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat24.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat24.png), progress !important;}

Hamtaro - Oxnard: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat25.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat25.png), progress !important;}

Hamtaro - Pashmina: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-1/nat26.ani), url(http://cur.cursors-4u.net/nature/nat-1/nat26.png), progress !important;}

ATLA - Aang: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too934.cur), progress !important;}

ATLA - Appa: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too932.cur), progress !important;}

ATLA - Momo: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too931.cur), progress !important;}

ATLA - Zuko: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too930.cur), progress !important;}

ATLA - Sokka: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too929.cur), progress !important;}

ATLA - Katara: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too928.cur), progress !important;}

ATLA - Iroh: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too927.cur), progress !important;}

ATLA - Toph: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too926.cur), progress !important;}

ATLA - Azula: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too925.cur), progress !important;}

Powerpuff Girls - Blossom: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-8/too731.cur), progress !important;}

Family Guy - Stewie: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-7/too629.cur), progress !important;}

Family Guy - Brian: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-7/too628.cur), progress !important;}

South Park - Kenny: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-6/too511.cur), progress !important;}

South Park - Kyle: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-5/too498.cur), progress !important;}

South Park - Eric: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-5/too484.cur), progress !important;}

The Lion King - Timon: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-5/too454.cur), progress !important;}

Futurama - Bender: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-5/too431.cur), progress !important;}

CLICK HERE FOR MORE CARTOON CURSORS

Sesame Street - Cookie Monster: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/movie/mov-2/mov122.cur), progress !important;}

Sesame Street - Ernie: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/movie/mov-2/mov118.cur), progress !important;}

FOR MORE TV SHOW & MOVIE CURSORS CLICK HERE

Pokemon - Masterball 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1284.cur), progress !important;}

Pokemon - Pichu Pokeball: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1272.cur), progress !important;}

Pokemon - Typhloshion Pokeball: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1280.cur), progress !important;}

Pokemon - Squirtle: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1243.cur), progress !important;}

Pokemon - Bulbasaur: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1235.cur), progress !important;}

Pokemon - Charmander: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1237.cur), progress !important;}

Pokemon - Pikachu: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-12/gam1191.cur), progress !important;}

Pokemon - Teddiursa: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-8/gam747.cur), progress !important;}

Pokemon - Corsola: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-8/gam765.cur), progress !important;}

Pokemon - Snorlax: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-7/gam655.cur), progress !important;}

Pokemon - Snorlax: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-7/gam655.cur), progress !important;}

Pokemon - Psyduck: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-6/gam558.cur), progress !important;}

Pokemon - Clefairy: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-6/gam552.cur), progress !important;}

Pokemon - Clefairy 2: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani15.cur), progress !important;}

Pokemon - Togepi: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani38.cur), progress !important;}

Pokemon - Pichu: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani33.cur), progress !important;}

Pokemon - Eveee: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani17.cur), progress !important;}

Pokemon - Seadra: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-7/gam616.cur), progress !important;}

Pokemon - Lanturn: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-7/gam696.cur), progress !important;}

Pokemon - Wooper: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-8/gam703.cur), progress !important;}

Pokemon - Quagsire: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-8/gam702.cur), progress !important;}

Kirby: 

body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-9/gam858.ani), url(http://cur.cursors-4u.net/games/gam-9/gam858.png), progress !important;}

CLICK HERE FOR MORE GAME CURSORS