Easy Html Tutorials

Stats

/

Notifs

Due to my lack of time for being online I can't answer questions anymore, but please use these tutorials to help you create a beautiful blog!

The results are in! Look here to see the survey responses.

NETWORKS

Support Me
Support easy-html-tutorials! If you enjoy my tutorials, consider adding one of the following to your blog!

Easy Html Tutorials
Social Media Buttons Box!

This tutorial shows you how to get a little box that is on the right side of your blog, which holds up to 4 social media buttons! 
Preview:

1. Paste this code into your html directly before </style> 
2. Paste this code directly under <body>. Click Update Preview then Save. 
3. Change the links in the second code so that they link to your social media sites. 
4. OPTIONAL: You can change any of the icons to another icon, use this site to find good ones. To add them, right click and select “copy image url” then paste that into the second code after img src on which ever link you want to change the icon for! 

All codes written by dazieh. Please *Like* this tutorial if you found it helpful!! 

Monday, November 4, 2013
Best places to find pixels!

Non-tumblr site: http://www.picgifs.com/

Monday, August 19, 2013
Online/Offline/Post Limit Status

Paste this following code after <head> (where the meta codes are, they all look very similar.

Then paste the following code in your hover tab, or wherever you want it to show up!

{block:ifOnline}☑ Online ☐Offline ☐Post Limit<br>{/block:ifOnline} {block:ifOffline}☐Online ☑ Offline ☐Post Limit<br>{/block:ifOffline} {block:ifPostlimit}☐Online  ☐Offline ☑Post Limit<br>{/block:ifpostlimit}

Save and close your customize page. To change the status, go into your main customize page and check the appropriate box!

image

Sunday, August 18, 2013
SCM Music Player (with custom skin)
  1. Go to the website playlist.me, and click the tab that says “Skins” at the top of the page. 
  2. Scroll through until you find the skin you want, and select it (by clicking the little bubble to the right) 
  3. Now click the “Player” tab at the top of the page, and click “next”
  4. On the “playlist” tab, fill in all the songs you want in your playlist. (use youtube) then click next again. 
  5. Make the settings the way you want it to look, there should be a preview of it on the page. Then click done. 
  6. Copy the entire code that is shown and paste it into your html under the <body> tag or before the </body> tag.

Now you are done! *note: the player won’t show up in your theme preview*

*PLEASE LIKE THIS TUTORIAL IF THIS WAS HELPFUL!*

Sunday, August 18, 2013
Adding network icons to your hover tab:

If the hover tab doesn’t already have it, add <marquee> NETWORK ICONS GO HERE </marquee> to the part of the hover tab where you want your icons to go.

For example, if I wanted to add this image:  to my hover tab, I would right click the image and choose “Copy img url” and add the url as an image in html, like this: <img src=”url of the image”> to my hover tab.  

To link it to a network page, you would use <a href=”url of the network”> <img src=”url of the image”> </a>

And that’s it! 

Friday, August 2, 2013
Adding a chat box!

Super easy guys, All you have to do is sign up and create your chat box at http://www.cbox.ws/

Then it’ll give you html for you to add to your blog, and the easiest place to put it is in your hover tab! Just change the width/height to the desired amounts :)

Tuesday, July 30, 2013
Creative & Unique codes for your blog!

Add any of the following codes to the very bottom of your theme code. After </html>

  • Bubbles that you can pop and are filled with hearts: code 
  • Cool Exploding Hearts: code
  • Cute falling bubbles that explode when popped: code
  • Falling bubbles that explode with hearts: code
Sunday, July 28, 2013
Adding Backgrounds to a Pop Up

*This tutorial is for use with this Pop Up tutorial

To have a background inside your pop up window (Live Preview), find .popup_block in your html code. Look for background:#fff; delete it and add: background-image:url(‘url of the image’);

image

To change the background behind a pop up box (Live Preview), find #fade in your html code, and then look for background:#000; delete that section of the code and replace it with: background-image:url(‘url of the image’);

image

Update the preview before you save to make sure it looks the way you want! 

Please *Like* this tutorial if you found it helpful!

Monday, July 22, 2013
Falling Hearts!

Paste this code after <head> or before </head>

Note: The hearts will not show up on the customize page, you must click update preview, then save and close.

(Live Preview)

*Like this tutorial if you found it helpful/are using this code!*

Also, If you would like a customized falling images code, message me!

Sunday, July 21, 2013
Double Bubble Tab, From top!

Preview: (Live Preview)

image

1. Start off by finding </style> and copy and paste this code directly before it. (You can also past it directly after <style type=”text/ccs”> if you cant find </style>)

2. Then find <body> in your theme, and paste this code right after it. You can also paste it right before </body>

3. Customize to your hearts desire! Everything is labeled in the html. You can change the color, add all your announcements and networks, you can change the width and height of the tabs. Almost anything is possible!!! If you have any questions feel free to ask! 

Code written by me (dazieh) 

Please look here before asking questions about this tutorial!

*Like this tutorial if you found this helpful or are using this code!*

Sunday, July 21, 2013
Falling Bubbles!

Paste this code after <head> or before </head>

Note: the bubbles won’t show up on the customize page, you have to click save and then close the customize page to see the bubbles! 

Live Preview

Sunday, July 21, 2013
Double Bubble Tab!

Preview: (Live Preview)

image

1. Start off by finding </style> and copy and paste this code directly before it. (You can also past it directly after <style type=”text/ccs”> if you cant find </style>)

2. Then find <body> in your theme, and paste this code right after it. You can also paste it right before </body>

3. Customize to your hearts desire! Everything is labeled in the html. You can change the color, add all your announcements and networks, you can change the width and height of the tabs. Almost anything is possible!!! If you have any questions feel free to ask! 

Code written by me (dazieh)

Please look here before asking questions about this tutorial!

*Like this tutorial if you found this helpful or are using this code!*

Sunday, July 21, 2013
Making Network Icons all the Same Size!

There are a lot of tutorials on this but some of them don’t work, this one actually works! Add the following code after the url of the image:

style='height: 75px; z-index: 1;'

It should end up looking something like this:

image

Just change the number 75 to any other number to make the image bigger or smaller! 

Please *LIKE* this tutorial if you found it helpful! 

Thursday, July 18, 2013
Glitter Borders for Bubble Tab

Paste this code under #tabs:hover{ in your bubble tab code. If you don’t have a bubble tab yet, check out this tutorial or this tutorial!

OPTIONAL: 

  • Change border:4px; to a bigger or smaller number to change the size of the borders. 
  • Change All of the URLS in the code (highlighted in the image below) to a different url from THIS website!

  • Make sure you change all of the URLS or it will not work!! 

Please *LIKE* this tutorial if you found it helpful! 

Wednesday, July 17, 2013
Post border on Narnia

Add this to your image code or image hover code

border: 2px dashed #ffffff;

Change the pixels to desired width, dashed to dotted/solid/ect, and #ffffff to your HTML color code

Tuesday, July 16, 2013