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
Links Table w/ Background on hover

YOU MUST HAVE A POPUP ALREADY INSTALLED ON YOUR BLOG IN ORDER TO USE THIS TUTORIAL. IF YOU DO NOT HAVE ONE, YOU CAN’T USE THIS TUTORIAL. 

Simple Preview:

image

  1. Paste this code under <style> or <style type=”text/css”>
  2. Paste this code where you want the link set to go (this looks best inside a popup)
  3. Replace all of the links and their titles, and change the colors to your liking!
  4. Here and Here are popup tutorials.

Please like this if you are using it/found it helpful!

Thursday, September 5, 2013
How to make a dropdown menu

image

Paste this code wherever you want it in the HTML. 

ex: description: paste the code in your description box.

replace the <option value=”URL”>custom link one</option> with URLS and titles!

Please like if this was helpful!

Tuesday, September 3, 2013
ADDING MULTIPLE POPUPS

1. If you already have one pop up, ignore this step. If you do not ha a pop up yet, follow steps 1 and 2 from this tutorial.

2. Paste this code under </body> but BEFORE the code for the other pop up. If you place the code after it will cause problems. 

3. Wherever you would like your link to be, meaning the link that you click to make the box pop up, paste this code. This link can go anywhere on your blog, even inside another pop up. 

4. To add even more popups, repeat steps 1 and 2, but replace the 03 with 04. (In BOTH of the codes) Then you would use 05, then 06, and so on. 

PLEASE LOOK HERE BEFORE ASKING QUESTIONS ABOUT THIS TUTORIAL! IT MAY HAVE BEEN ANSWERED!

Monday, September 2, 2013
4 Small Hover Tabs (from top)

PREVIEW:

1. Paste this code under <style> or before </style>

2. Paste this code directly under <body>

3. Replace all of your information in the tabs! 

Sunday, September 1, 2013
  Anonymous asked:
  Dazieh - how did you get your links like that with the boxes? Thank you :D

put this where you want your outline to be:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Sunday, September 1, 2013
Custom falling code!

this code is completely blank. Add anything you would like in for the urls 

use this code

add in your custom pictures and viola! :)

Monday, August 19, 2013
Best places to find pixels!
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