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!*
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*
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! *