Tutorials by OohCamila.com ///

14 new tutorials! (22-apr-2013) 01. Putting a visitors/Flag counter 02. Putting a search box03....

Mon, 22 Apr 2013 16:49:00 -0400

14 new tutorials! (22-apr-2013)

01. Putting a visitors/Flag counter
02. Putting a search box
03. Putting a calendar
04. Making and putting a Instagram widget
05. Making and putting a Facebook like button
06. Making and putting a Facebook follow button
07. Putting a Twitter follow button
08. Black & white image to color image on hover
09. Putting a scroll to top button
10. Customize your blog scrollbar
11. Creating a bubble music player
12. Creating a corner music player
13. Extension: Tumblr Savior
14. Extension: TumTaster

Some pages are updated! (18-apr-2013)

01. Themes suggestions: a list of more than 50 theme makers for you
02. Graphics: more than 80 new ones
03. Favicons: 5 new ones
04. Minigifs: more than 50 new gifs
05. Cursors: more than 20 new cursors

For your description: 01. Basic codes 02. Users online 03. Visitors counter/Flag...

Mon, 22 Apr 2013 16:16:00 -0400

For your description:

01. Basic codes
02. Users online
03. Visitors counter/Flag counter
04. Followers counter
05. “You’ve been here _ times”
06. Scroll box
07. Ask box
08. Search box
09. Drop down menu
10. Navigation bars #1
11. Navigation bars #2
13. Navigation bars #3 (coming soon)
14. Putting a cute clock
15. Putting a calendar
16. Putting a social media icon
17. Making and putting a Cbox
18. Making and putting a Twitter widget (coming soon)
19. Making and putting a Instagram widget
20. Making and putting a Facebook like button
21. Making and putting a Facebook follow button
22. Putting a Twitter follow button
23. Putting a WeHeartIt widget
24. Music player w/ many songs (Hypster player)
25. Flash MP3 Player (coming soon)
26. YouTube player
27. Text effects (coming soon)

Tutorial: visitors counter/flag counter

Mon, 22 Apr 2013 16:14:39 -0400

01. Go to one of the sites below and then choose the counter you want to use. Copy the generated code.
http://freehostedscripts.net/texthitcounter/
http://freehitcountercode.com/
http://www.hitwebcounter.com/
http://www.hit-counts.com/
http://www.flagcounter.com/ (flag counter)

02. Go to Customize > Description and then paste the code where you want the visitors counter to appear. Save and it’s done!

Tutorial: making a search box

Mon, 22 Apr 2013 16:14:35 -0400

EXAMPLE:

01. Go to THIS site and copy the code. Now go to Customize > Description and paste it where you want the search box to appear.

02. How to customize the search box:
- Change the width, height, background color, font color, font family and font size to your liking.
- Border: replace “1” with a large number if you want to create a thick border. Replace “solid” with “dashed” or “dotted” for these effects. You can also change the color. If you want to remove the border, replace “1px” with “0px”.
- Border radius: change the pixels number to make the box corners more or less rounded.
- Shadow: change the number pixels and the color to your liking. If you want to remove the shadow, find this on the code: -moz-box-shadow: 0 0 4px #b9b9b9; -webkit-box-shadow: 0 0 4px #b9b9b9; and delete it.
P.S.: To change the colors you have to use a HTML color code.

Tutorial: putting a follow button for Twitter

Mon, 22 Apr 2013 16:14:25 -0400

EXAMPLE:

01. Log in to your Twitter and then go to THIS page. Choose the Follow button.

02. Some customize options will appear. If you want, you can hide your usename or make it bigger, and you can also change the language. The preview and the code will be on the right side of the page, just like this:

03. Get the code, go to Tumblr and go to your Customize page. Paste it in your description where you want it to appear and click Save. Done!

Tutorial: customize your scrollbar

Mon, 22 Apr 2013 16:14:16 -0400

Look at ours scrollbar to see an example! ——»»

01. Copy THIS code, go to your Customize page (Customize > Edit HTML) and then paste it BEFORE the </style> tag.

02. This is the code that we’re using in this blog, so probably you will want to customize it to match your theme. The code has some instructions that will help you, but remember:
- If you want to change the color, you have to use a HTML color.
- You can also put a background image, just replace URL HERE with the image’s URL that you choose (it should end in .jpg, .png or .gif), example: http://25.media.tumblr.com/073756d53ecf7f8d4faa06f28020574f/tumblr_mljbpxwsZr1qgxe8oo1_250.jpg
- If you don’t want the rounded corners, just remove this code:
-moz-border-radius: 5px; /*these make bar rounded*/
border-radius: 5px;
- If you don’t want the border, remove this code:
border: 1px solid #cecece; /*border’s color*/
- You can also change the border color, replace #cecece with the color you want using HTML colors.

03. Save and it’s done.

Credits: http://cindie.tumblr.com/

Tutorial: black & white image to color image on hover

Mon, 22 Apr 2013 16:14:11 -0400

EXAMPLE:

Copy THIS code, go to your customize page (Customize > Edit HTML) and then paste it BEFORE the </style> tag. Click Update Preview to see if it’s working and then click Save. Done!

Tutorial: creating a corner music player

Mon, 22 Apr 2013 16:14:07 -0400

EXAMPLE:

01. First of all, you need a music player. This tutorial is based on Hypster Player, you can learn how to make one in THIS tutorial.

02. Go to Customize > Edit HTML. Copy THIS code and paste it BEFORE the</style> tag.

03. Now copy THIS code and paste it BEFORE the <body> tag. Search for MUSIC PLAYER CODE and replace it with the code of your player. Click Update Preview to see if it’s everything right and then click Save. Done!

P.S.: If you want to change the background color, find this code:
background-color: #fff;
And replace #fff with the color you want using a HTML color.
P.S.2: You can use other music players, but you will have to change some little things in the code. I suggest you not to use others players or change anything unless you know what you are doing. (credits)

Tutorial: creating a bubble music player

Mon, 22 Apr 2013 16:14:03 -0400

EXAMPLE:

01. First of all, you need a music player. This tutorial is based on Hypster Player, you can learn how to make one in THIS tutorial.

02. Go to Customize > Edit HTML. Copy THIS code and paste it BEFORE the </style> tag.

03. Now copy THIS code and paste it BEFORE the <body> tag. Search for MUSIC PLAYER CODE and replace it with the code of your player. Click Update Preview to see if it’s everything right and then click Save. Done!

P.S.: If you want to change the background color, find this code:
background-color: #fff;
And replace #fff with the color you want using a HTML color.
If you want to change the border color, find this:
border: #000 1px solid;
And replace #000 with the color you want using a HTML color.
P.S.2: To move the bubble more to the right, find left:50px and increase the number to your taste.
P.S.3: You can use other music players, but you will have to change some little things in the code. I suggest you not to use others players or change anything unless you know what you are doing.

Tutorial: making and putting a follow button for Facebook

Mon, 22 Apr 2013 16:14:00 -0400

EXAMPLE:

PS.: This is a tutorial for the FOLLOW button, which lets a user follow your public updates on Facebook. If you want a LIKE button click HERE. Remember: “Follow” button is for profiles, “Like” button is for pages. They are for different things!

01. First of all, you need to log in to your Facebook and then go to your Follower Settings. Make sure the option Turn On Follow is checked.

02. Now go to THIS page and use the configurator to get the code. Follow the instructions:
- Profile URL: put your profile URL here. Example: http://www.facebook.com/camilanfontoura
- Layout Style: choose the layout style.

- Show Faces: deselect this option if you DON’T want to show profile pictures below the button.
- Color Scheme: choose between the light and dark color.
- Font: the font of the plugin.
- Width: you only need to change this number if the Show Faces option is checked (in this case, you have to put a smaller number - probably between 100 and 200 -, so the button will fit in your sidebar).

03. Click Get code. The first code is a script and you have to copy and paste it AFTER the <body> tag on your customize page (Customize > Edit HTML). Now you have to copy the second code and paste it in your description, where you want the button to appear. All done! :)

Tutorial: making and putting a Facebook like button

Mon, 22 Apr 2013 16:14:00 -0400

EXAMPLE:

PS.: This is a tutorial for the LIKE button, if you are looking for the FOLLOW button tutorial, click HERE. Remember: ”Follow” button is for profiles, “Like” button is for pages. They are for different things!

01. Create your own Facebook page HERE.

02. Go to THIS site and use the configurator to get the code. Follow the instructions:
- URL to Like: put the URL of your page. Example: http://www.facebook.com/OohCamila
- Send Button: deselect this option.
- Layout Style: choose the layout style.

- Width: you only need to change this number if the Show Faces option is checked (in this case, you have to put a smaller number - probably between 100 and 200 -, so the button will fit in your sidebar).
- Show Faces: deselect this option if you DON’T want to show the profiles pictures below the button.
- Font: the font of the plugin.
- Color Scheme: choose between the light and dark color.
- Verb to Display: keep the “like” one.

03. Click Get code. The first code is a script and you have to copy and paste it AFTER the <body> tag on your customize page (Customize > Edit HTML). Now you have to copy the second code and paste it in your description, where you want the button to appear. All done! :)

Tutorial: getting a Instagram widget

Mon, 22 Apr 2013 16:13:59 -0400

EXAMPLE:

01. Go to THIS page and click Get Your Free Widget.

02. Time to create your widget!
- Username/Hashtag: if you want to show YOUR OWN Instagram pictures, put your username and leave the Hashtag box empty. If you want to show the recent pictures that have a certain tag (ex.: fashion), write the tag that you want and leave the Username box empty.
- Widget Type: the type of widget to display your photos in. Use the Grid one if you want your widget to look like the example.
- Thumbnail Size: the size of each photo in the widget. This number will depend on the number of photos across and down that you choose and on the width of your theme’s sidebar.
- Layout: The number of photos across and down. Max 60.
- Photo Border: choose if you want to display a border around each photo.
- Background Color: background of the widget. Leave empty for transparent.
- Photo Padding: amount of space between each photo
- Hover Effect: effect applied when a visitor hovers their mouse over a photo in the widget.

03. Click Preview to see how your widget will look like and if you like it, click Get Widget. Copy the code and paste it in your description (Customize > Description), wherever you want it to appear. Save and it’s done!

Tutorial: putting a calendar

Mon, 22 Apr 2013 16:13:55 -0400

EXAMPLE:

01. Choose the month and copy the code:
- April 2013
- May 2013
- June 2013
- July 2013
- August 2013
- September 2013
- October 2013
- November 2013
- December 2013

02. Go to your Customize page on Tumblr and paste it in your description, where you want it to appear. Check the preview and if you like it, click Save. All done!

CHANGING THE CALENDAR’S WIDTH: find this code: width=”200px;” (use CTRL+F if you can’t find it) and replace 200 with a smaller or larger number.

Extension: Tumblr Savior

Mon, 22 Apr 2013 16:13:46 -0400

“Tired of posts about the iPhone filling up your dashboard? Hate hearing about some athlete’s latest blunders? If you just want to hide posts about certain topics, Tumblr Savior is here to save you. Just add your most despised terms to the black list and Tumblr Savior will valiantly protect your delicate sensibilities. And if you wonder what got hidden, there’s a handy link to show you.”

Choose your browser and download it:
- Google Chrome
- Safari
- Opera
- Mozilla Firefox

Click HERE if you are having problems with the extension.

Extension: TumTaster

Mon, 22 Apr 2013 16:13:42 -0400

TumTaster is an extension that creates download links for the MP3s you see on Tumblr. It’s really easy to use!

Choose your browser and download it:
- Google Chrome
- Safari
- Mozilla Firefox
* This extension isn’t available for Explorer and Opera

If you are not sure about how to use it, here’s a video tutorial:

Tutorial: putting a scroll to top button

Mon, 22 Apr 2013 16:13:00 -0400

EXAMPLE:

Copy THIS code, go to your Customize page on Tumblr (Customize > Edit HTML) and then paste it BEFORE the </body> tag. Click Update Preview to see if it’s working and then click Save. Done!

CHANGING THE BUTTON IMAGE: find the code below and then replace it with the image’s link that you want.

You can find some buttons HERE, but if you want you can use MINIGIFS too. Remember: the link should end in .jpg, .png or .gif. I suggest you to only use small images/buttons.

Getting a free co.vu domain name

Sat, 02 Mar 2013 23:45:34 -0500

EXAMPLE: tutorialsandmore.co.vu

1. First of all, go to THIS site and create an account.

2. It’s time to choose your domain name! Type the name you want and, if it is available, this message will appear: “username is available for registration”. Now click Register Domain.

3. You will be redirected to a new page, now click Tumblr.

4. At the new page, click Configure to Tumblr and this message will appear: “Ohh Great. You Have Successfully Configured Your Domain username.co.vu to Tumblr.”

5. Now, go to your Tumblr Settings and select the blog you want to put the domain name. At the URL section, check the “Use a custom domain name” box and enter your domain. Click the Test your domain button. If the test finds any problems, read the instructions again and keep fixing problems until the test is successful:

6. Click Save and it’s all done. Important: if you don’t see your site or the Tumblr home page when you visit the domain in your browser, the DNS record might need more time to propagate. This process can take up to 72 hours, so don’t worry.

P.S.: If you don’t want to use the co.cc domain name anymore, just uncheck the Use a custom domain name box.

Tutorial: social media icon in your description

Mon, 15 Oct 2012 00:44:11 -0400

01. Choose the icons you want HERE and then get the direct link of each one: click on the image you want with the right mouse button and then select Copy Image URL or Copy Image Adress.

02. Copy the code below:

<a href="http://link.com"><img src="directlink" target="_blank"></a>

03. Replace http://link.com with the URL of your social media. For example, I’d enter: http://twitter.com/camilasuxx to send anyone who clicked on my Twitter icon, to my Twitter page. Replace directlink with the direct link of the icon you choose. Example: http://media.tumblr.com/tumblr_mbwo5z1Wmd1qfamg6.png

So the code will be something like this:

<a href="http://twitter.com/camilasuxx"><img src="http://media.tumblr.com/tumblr_mbwo5z1Wmd1qfamg6.png" target="_blank"></a>

04. Go to Customize > Description and paste the code where you want your icon to appear. Save and it’s done!

P.S.: You can use how many icons you want.

Tutorial: getting a free co.cc domain name

Sun, 14 Oct 2012 17:48:02 -0400

EXAMPLE: tutorialsandmore.co.cc

1. First of all, you need to go to THIS site and create an account.

2. Now it’s time to choose your domain name. Type the name you want and then click Check availability.

2. A new page will open saying if your chosen name is available or not. If it is, click Continue to registration.

3. To continue you have to login into your co.cc account. After that, a new page will open with this message: “Your new domain has been successfully registered.” Click Set Up.

4. In the new page, click Set Up again. Choose Zone Record and follow the instructions to add a record: at the Host space, put your co.cc domain with www; now select the CNAME type; and, at the Value space, put domains.tumblr.com. Click Set Up.

4. Now you have to add another record. At the Host space, put your co.cc domain WITHOUT www; now select the A type; and, at the Value space, put 66.6.44.4. Click Set Up.

5. Now, go to Tumblr, go to your SETTINGS and select the blog you want to put the domain name. At the URL section, check the “Use a custom domain name” box and enter your domain (with www). Click the Test your domain button. If the test finds any problems, read the instructions again and keep fixing problems until the test is successful:

6. Click Save and it’s all done. Important: if you don’t see your site or the Tumblr home page when you visit the domain in your browser, the DNS record might need more time to propagate. This process can take up to 72 hours, so don’t worry.

P.S.: If you don’t want to use the co.cc domain name anymore, just uncheck the Use a custom domain name box.

Tutorial: how to change your Tumblr URL

Sun, 14 Oct 2012 17:47:51 -0400

Go to your SETTINGS and then select the blog your want to change the URL in the sidebar. Find the URL option and change it. Click Save and it’s done!