![tomkirk:
[ updates tab #1 ]
livepreview :: code
details and instructions on how to add more tabs under the cut!
Read More](https://38.media.tumblr.com/f9440f61034bc467c6dc35a96aa30230/tumblr_n27nkzX8r41s7wczpo1_250.png)
[ updates tab #1 ]
livepreview :: code
details and instructions on how to add more tabs under the cut!
Slide from bottom tab!
This tab has an icon which lies in the top left corner of your blog, and when hovered over the tab slides up from the top! Preview:
1. Find </style> and add this code directly before it (or add it under <style type=”text/css”>)
2. Find <body> and add this code directly under it!
3. Click update preview to ensure the tab works correctly, then add all your info into the tab (code in step 2)
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!!
Sectioned Hover Tab!
All codes written by me (dazieh)!
Preview:
To Install:
1. Paste this code under <style> or before </style>
2. Paste this code under <body>
3. Click update preview, if everything looks good save it. Then you can fill in all your links for your networks and faves!
HOW TO ADD MORE SECTIONS! (Note: this question will not be answered anymore because there is now a short tutorial on how to add another section to this tab)
*PLEASE LIKE THIS TUTORIAL IF YOU FOUND IT HELPFUL! *
Cute hover tab!
Double Bubble Tab, From top!
Preview: (Live Preview)
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!*
Double Bubble Tab!
Preview: (Live Preview)
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!*
rosybeaut asked: hey! i was just wondering how to change the text colour in an updates tab? i've been searching for ages in my html and can't find it anywhere!xx
Put the following code under #oneout_inner:
text-color:#000000
Then change #000000 whatever color you would like!
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!
Bottom Corner Bubble Tab!
If you would like your bubble tab to be in the bottom RIGHT corner of your blog:
- Paste this code before </style> or after <style type=”text/ccs”>
- Then post this code under <body> or before </body>
If you would like your bubble tab to be in the bottom LEFT corner of your blog:
- Paste this code before </style> or after <style type=”text/ccs”>
- Then post this code under <body> or before </body>
Refer to this tutorial for customization options!
Please look here before asking questions about this tutorial!
Please *LIKE* this tutorial if you found it helpful!
Under <style> or above </style> or after <style type=”text css”> add
-moz-border-image: url(http://www.rayesdesign.com/glitters/pink/pink003.gif) 27 27 27 27 repeat;
-webkit-border-image: url(http://www.rayesdesign.com/glitters/pink/pink003.gif) 27 27 27 27 repeat;
-o-border-image: url(http://www.rayesdesign.com/glitters/pink/pink003.gif) 27 27 27 27 repeat;
border-image: url(http://www.rayesdesign.com/glitters/pink/pink003.gif) 27 27 27 27 repeat;
after #oneout{
That’s if you use the one by spicee like I think you do
You can get other images as well
Slide From Left Updates/Networks Tab
Here is how the tab will look on your blog:
Here is how to install the hover tab on your blog:
- First, find </style> in your theme. An easy way to do this is by pressing Ctrl+F and typing </style>.
- Once you find that, paste this code directly above it. If you cant find <style>, just paste it after <style> or <style type=”text/css”>.
- Next, you need to find <body> or </body>
- Once you have found that, paste this code either after <body> or before </body>
Now to customize your hover tab!
- Replace “SLIDE TITLE” with what you would like your tab to say. (ex: HOVER) You can also use some cute text symbols from here!
- Then replace “SLIDE TEXT GOES IN HERE (NETWORKS/UPDATES/WHATEVER YOU WANT)” with what you would want to say in your tab! Use the tag <br> to create a new line within the text!
* Like this post if you found it helpful! *
(Source: easy-html-tutorials)
Bubble tab with dotted borders
PREVIEW: 
Paste this code under
<style type="text/css">
or before
</style>
- If you do not want dotted borders, find “border:dotted;” and change it to solid, or, if you don’t want a border, remove the line of the code.
- To change your box color, find the code under
.ttitle {and change it to any color that you would like - To change height of box that the icon is in, find
#tabs{and change the width/height - To change height of hover box, find
#tabs.hover{and change height/width
Now paste this code under <body>
- To make the icon a different one, remove the plus and use
<img src="URL">
(retype quotation marks) - To make the dividers another color find background and change the HTML color.
- Marquee is already installed for networks
Please look here before asking questions about this tutorial!
Credit goes to html-tutorials
Advanced Customization For the Slide from left Updates/Networks Tab!
To add a border around the inner part:
- Go to the section of your code: #oneout_inner
- At the bottom of that section of html, add this code. (before the } mark)
- Change the word “dashed” to “solid” or “dotted” to change the style of the border.
- Change the 1px to any number of px to increase the thickness of the border.
- Change “#000000” to any color code from here to change the color of the border.
To change font of the Title of the Hover tab (ex: HOVER)
- Find .onetitle in your html.
- Find where it says: font-family:arial;
- Replace the name of the font “arial” with either the font on your blog or a custom font.
To change the font inside the hover tab:
- Find #oneout_inner
- Add font-family: and the name of the font you want to that section of coding.
*LIKE THIS POST IF YOU FOUND IT HELPFUL*
Slide From Left Updates/Networks Tab
Here is how the tab will look on your blog:
For a live preview, go to my (Megan) main blog here and look on the left!
Here is how to install the hover tab on your blog:
- First, find </style> in your theme. An easy way to do this is by pressing Ctrl+F and typing </style>.
- Once you find that, paste this code directly above it. If you cant find <style>, just paste it after <style> or <style type=”text/css”>.
- Next, you need to find <body> or </body>
- Once you have found that, paste this code either after <body> or before </body>
Now to customize your hover tab!
- Replace “SLIDE TITLE” with what you would like your tab to say. (ex: HOVER) You can also use some cute text symbols from here!
- Then replace “SLIDE TEXT GOES IN HERE (NETWORKS/UPDATES/WHATEVER YOU WANT)” with what you would want to say in your tab! Use the tag <br> to create a new line within the text!
* Like this post if you found it helpful! *
