This will be a step-by-step tutorial. Do you mean how to add a link in a text post? Click add a new text post. Highlight the word that will be a link.
Then you know what’s next. Hope this helps! :)
//Queenie
put this code under <style>
.borderleft{
position: fixed;
width: 30px;
background: #dbdbdb;
height: 100%;
top: 0px;
left: 0px;
}.bordertop{
position: fixed;
background: #dbdbdb;
width: 100%;
height: 30px;
top: 0px;
left: 0px;
}.borderbottom{
position: fixed;
background: #dbdbdb;
width: 100%;
height: 30px;
bottom: 0px;
left: 0px;
}.borderright{
position:fixed;
top:0;
right:0;
width:30px;
height:100%;
background:#dbdbdb;
}
things that could be modified is the width and the height and the background in color codes (:
and this code under <body>
<div class="borderleft"></div>
<div class="bordertop"></div>
<div class="borderbottom"></div>
<div class="borderright"></div>
// claire
okay guys tooltips are the little bubbles that pop up following your cursor when you hover on something. the live preview is on my blog (x) first you will need to put this under <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script><style>
#s-m-t-tooltip{max-width:300px;
padding:4px 4px 4px 4px;
margin:20px 0px 0px 20px;
background: #fff;
border:1px solid #eee;
font-family: Calibri;
font-size:10px;
letter-spacing:1px;
text-transform: uppercase;
color:#555;
z-index:999999999999999999999999999999999999;
}
</style>
okay so that is all!
you can modify it too~
background ~ background color (html color codes x)
border ~ the width, color and style of the border (put 0 if you don’t want borders)
font-family ~ the font family in the tooltip
font-size ~ the size of the font
text-transform ~ can be uppercase, lowercase or none
color ~ the color of the text
letter-spacing ~ the spacing between the letters in the tooltip
// claire
okay so i made a base code for a moved/saved url.
so here it is!
// claire
requested by: (x)
so thejadedfoolsennui asked if we could add floating pagination into an existing theme. yes you could but you will need an image for your pagination (optional) and where you wanna put it.
image pagination (if you don’t want this skip to the text pagination)
step 1, you will need the pagination code, stick this before </body>
{block:Pagination}
<div style="position: fixed; margin-bottom: 10px; margin-right: 10px; background: transparent;">
{block:PreviousPage}
<a href="{PreviousPage}"><img src="previouspageimageurl.jpg"></a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}"><img src="nextpageimageurl.jpg"></a>
{/block:NextPage}
</div>
{/block:Pagination}step 2, here are some images to replace ‘previouspageimageurl.jpg’
they all have a white background so it looks kinda fab. feel free if you wanna request any (: but please give us the html color codes for the arrow and the background
here are some images to replace 'nextpageimageurl.jpg’
Want a fixed full length sidebar? here’s how!
step 1, look for the sidebar’s div/css, like #sidebar.
and once you find it look for the height in the sidebar. for ex:
#sidebar{
height: 300px;
width: 300px;
padding: 5px;
position: fixed;
top: 30px;
left: 20px;
}
step 2, change the height into 100%, so it’ll look like this:
#sidebar{
height: 100%;
width: 300px;
padding: 5px;
position: fixed;
top: 30px;
left: 20px;
}
// claire
made a music hover box bc bored. and you can now add your playlist. but keep it short and simple. if the title is too long you can always change the width. feel free to modify it! but please give credit! if you really read the whole thing you can click the face, thanks for reading ^_^
// claire
twitter: @fetuspenguin
ig: claihre | lau.gh
Tutorial 05 - Hide Stuff Tutorial
In this tutorial there are FIVE ways I will show you how to hide stuff. This is mostly just for like Terms of Usage pages or whatever you wish. Most of the examples are simply copying and pasting different bits. But this will require you to know where the HEAD, CSS, and HTML sections are. The last ways to hide stuff are really the only “advanced” part of the tutorial as they require some coding understanding. Hope it’s useful!
Note: All of the ways I show you are found on different sites aka not made by me (but I have used a couple of them) and I have just compiled them (with sources) in one place.
So this is a cool lamp thingy where you stick on your blog and it tells you to turn on the lights! It’s pretty cool!
Just stick this code before </body>:
<!--koddostu.com lamp effect start-->
<!DOCTYPE HTML><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="tht-position tht-s-e"><a id="lambakapali" onclick="document.getElementById('lambaacik').style.display='block';document.getElementById('lambakapali').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;" title="Lambayı Aç"><img style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;" src="http://1.bp.blogspot.com/-Ont9cH8VCJg/TvBiv-Ng47I/AAAAAAAADR8/bw36Ge18Wt0/s1600/LampOff.png" border="0"></a><Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%65%6E%2E%6B%6F%64%64%6F%73%74%75%2E%63%6F%6D%2F%32%30%31%32%2F%31%31%2F%6C%61%6D%70%2D%69%6E%74%72%6F%2D%65%66%66%65%63%74%2D%66%6F%72%2D%74%75%6D%62%6C%72%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%69%64%3D%22%6C%61%6D%62%61%61%63%69%6B%22%20%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%3E%0A%3C%69%6D%67%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%31%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%4E%51%62%4E%32%63%36%46%71%69%38%2F%54%76%42%69%77%6B%38%73%43%70%49%2F%41%41%41%41%41%41%41%41%44%53%45%2F%68%45%56%66%46%58%47%58%64%46%55%2F%73%31%36%30%30%2F%4C%61%6D%70%4F%6E%2E%70%6E%67%22%20%62%6F%72%64%65%72%3D%22%30%22%2F%3E%3C%2F%61%3E'));
//-->
</Script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;
filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;
filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">Can you turn on the light, <br/> please?</a>
</div>
<!--koddostu.com lamp effect stop-->
// Claire
Hey guys! You guys have been asking about how’d you get the floating images just bouncing in your blog randomly with the images you want, so here it is!
We haven’t been active yet so stick this code under <head>
<script type="text/javascript">
/************************************************ Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)* Modified by Dynamic Drive for various improvements* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code* Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!***********************************************/ //
Step 1: Define unique variable names depending on number of flying images (ie:3):var flyimage1, flyimage2, flyimage3, flyimage4, flyimage5, flyimage6, flyimage7, flyimage8, flyimage9, flyimage10 function pagestart(){//Step 2: Using the same variable names as 1), add or delete more of the below lines (47=width, height=68 of image): flyimage1=new Chip("flyimage1",40,62); flyimage2=new Chip("flyimage2",40,62); flyimage3=new Chip("flyimage3",40,62); flyimage4=new Chip("flyimage4",40,62); flyimage5=new Chip("flyimage5",40,62); flyimage6=new Chip("flyimage6",40,62); flyimage7=new Chip("flyimage7",40,62); flyimage8=new Chip("flyimage8",40,62); flyimage9=new Chip("flyimage9",40,62); flyimage10=new Chip("flyimage10",40,62); //Step 3: Using the same variable names as 1), add or delete more of the below lines:movechip("flyimage1");movechip("flyimage2");movechip("flyimage3");movechip("flyimage4");movechip("flyimage5");movechip("flyimage6");movechip("flyimage7");movechip("flyimage8");movechip("flyimage9");movechip("flyimage10"); } if (window.addEventListener)window.addEventListener("load", pagestart, false)else if (window.attachEvent)window.attachEvent("onload", pagestart)else if (document.getElementById)window.onload=pagestart </script>
<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
<div id="flyimage1" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
<img src="IMAGE 1"></div>
<div id="flyimage2" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;">
<img src="IMAGE 2"></div>
<div id="flyimage3" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 3"></div>
<div id="flyimage4" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 4"></div>
<div id="flyimage5" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 5"></div>
<div id="flyimage6" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 6"></div>
<div id="flyimage7" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 7"></div>
<div id="flyimage8" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 8"></div>
<div id="flyimage9" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 9"></div>
<div id="flyimage10" style="position:absolute; left: -500px; width:40; height:62; font-size:10px;"><img src="IMAGE 10"></div>
</div>
Just change the image 1,2,3,4,5,6,7,8,9,10 into your image url, it could be the same or different.
Credit baracknobama for the inspiration on making the tutorial, message us requests on how we should make more tutorials!
Preview here
Code 1 stick it up in your css:
#stats1{
height:13px;
text-align:center;
overflow:hidden;
margin-top:-1px;
border-bottom:1px solid #efefef;
text-transform:uppercase;
letter-spacing:1px;
font-size:5px;
line-height:10px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats1:hover{
height:95px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats2{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats2:hover{
height:75px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats3{
height:12px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats3:hover{
height:40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats4{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:0px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats4:hover{
height:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats{
text-align:left;
font-size:8px;
text-transform:uppercase;
opacity: .8;
border:1px solid #eee;
position:fixed;
font-family:calibri;
left:14px;
background-color:#fff;
letter-spacing:1px;
width:100px;
z-index:9999;
padding:4px;
top:14px;
}
If it’s too short you could always adjust the height when it hovers ^^
Code 2, stick it under <body>
Code credit: ocehans
// Claire
Hey guys! So I made a menu, it’s pretty simple, you can preview it here.
See? pretty simple right? Just hovering on the box and the opacity increases, so let’s start!
Step 1, Paste this in under <style type=“text/css”> or before </style>:
.simplemenu{
width: 110px;
align: center;
height: 25px;
display: inline-block;
background: #bababa;
font-family: 'Ubuntu Mono', sans-serif;
color: #474747;
text-transform: uppercase;
text-align: center;
padding: 3px;
text-shadow: 1px 1px #eee;
opacity: 0.5;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}.simplemenu a{
text-decoration: none;
color: #474747;
}.simplemenu:hover{
opacity: 1;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}You can change the colors too! I bolded them out to make it easier for you :)
The other stuff you can modify in the code is in italic okay?
Step 2, Now paste this under <body> or anywhere you want the menu to be:
<div class="simplemenu"><a href="/">title</a></div>
<div class="simplemenu"><a href="/">title</a></div>
<div class="simplemenu"><a href="/">title</a></div>
<div class="simplemenu"><a href="/">title</a></div>
Step 3, Paste this under <head>, it’s for the font source, but if you don’t want this font, you can find other fonts in here!
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
This was originally made by me, so please credit me if you are reblogging or reposting, or liking this post. Please message me if there is anything wrong. Ok bye.
// Claire @purformance | ig
okay so we know like none of you guys read these things, but were just assuring you keep the credit and don't steal anything from the theme. i mean like just preview the code and rip things off there. the themes here are
theme: claire
cute transitions: justin aguilar animations
creative link effects: tympanus
sidebar icon: @notesmokeciggys