Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*DAENSO'S DROPBOX NUMBER 1*/
- -----------------------PASTE THIS CODE BEFORE </STYLE>
- #drop {
- position:fixed;
- margin-left:75px;
- height:118px;
- z-index:99;
- width:1px;
- border-left:1px dashed #eee; /*customizable color*/
- }
- .soolist {
- margin:0px;
- padding:2px;
- height:120px;
- width:150px;
- top:0px;
- left:100px; /*customizable*/
- text-transform:lowercase; /*customizable*/
- position:relative;
- text-align:center;
- font-family:helvetica;
- font-size:10px;
- }
- .soohead {
- position:relative;
- margin-top:110px;
- background:#a7f8ca; /*customizable*/
- width:9px;
- height:9px;
- z-index:999;
- margin-left:71px;
- border-radius:0px 26px 14px 26px;
- -webkit-transition: opacity 8s ease-in-out;
- -moz-transition: opacity 8s ease-in-out;
- -o-transition: opacity 8s ease-in-out;
- -ms-transition: opacity 8s ease-in-out;
- transition: opacity 8s ease-in-out;
- transform:rotate(45deg);
- -ms-transform:rotate(45deg);
- -webkit-transform:rotate(45deg);
- animation:mymove 10s infinite;
- -webkit-animation:mymove 10s infinite;
- }
- @keyframes mymove
- {
- 0% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
- 25% {background-color: #a7f8ca;} /*customizable color 2 of the drop*/
- 50% {background-color: #ffc2cf;} /*customizable color 3 of the drop*/
- 75% {background-color: #d0eaf5;} /*customizable color 4 of the drop*/
- 100% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
- }
- @-webkit-keyframes mymove
- {
- 0% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
- 25% {background-color: #a7f8ca;} /*customizable color 2 of the drop*/
- 50% {background-color: #ffc2cf;} /*customizable color 3 of the drop*/
- 75% {background-color: #d0eaf5;} /*customizable color 4 of the drop*/
- 100% {background-color: #ffe8b8;} /*customizable color 1 of the drop*/
- }
- .soohead:hover {
- margin-top:112px;
- -webkit-transition: opacity 8s ease-in-out;
- -moz-transition: opacity 8s ease-in-out;
- -o-transition: opacity 8s ease-in-out;
- -ms-transition: opacity 8s ease-in-out;
- transition: opacity 8s ease-in-out;
- }
- .soobody {
- border:3px double #eee; /*customizable color*/
- background:#fff; /*customizable*/
- color:#ddd; /*customizable*/
- display:none;
- z-index:999;
- position:relative;
- width:auto;
- height:80px;
- overflow-y:auto;
- top:-132px;
- text-align:center;
- }
- -------------------THEN PAST THIS AFTER <BODY> AND INSERT WHAT YOU WANNA WRITE WHERE THERE'S "YOUR TEXT HERE"
- <div class="soolist">
- <div id="drop"></div>
- <p class="soohead"></p>
- <div class="soobody">
- your text here.
- </div></div>
- ------------------AND PAST THIS CODE AFTER <HEAD> (THIS SHOULD BE ON TOP OF ALL THE CSS OF YOUR THEME)
- <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".soobody").hide();
- $(".soohead").click(function(){
- $(this).next(".soobody").slideToggle('medium');
- }); }); </script>
- ________________________________________________________________
- /*DAENSO'S DROPBOX NUMBER 2*/
- -----------------------PASTE THIS CODE BEFORE </STYLE>
- #k{
- height:19px;
- background:#fff; /*customizable*/
- position:fixed;
- color:#ddd; /*customizable*/
- border-radius:0px 0px 20px 20px;
- margin-left:400px; /*customizable*/
- border:1px solid #eee; /*customizable color*/
- top:-2px;
- width:20px;
- overflow:hidden;
- z-index:99;
- -webkit-transition:opacity 0.7s ease-in; opacity:1;
- -webkit-transition:all 0.7s ease-in;
- -moz-transition:all 0.7s ease-in;
- transition:all 0.7s ease-in;
- }
- #k .olap{
- padding:3px;
- height:80px;
- background:#fff; /*customizable*/
- position:fixed;
- font-family:helvetica; /*customizable*/
- text-transform:lowercase; /*customizable*/
- font-size:9px; /*customizable*/
- color:#ddd; /*customizable*/
- text-align:center; /*customizable*/
- line-height:9px; /*customizable*/
- border:3px double #eee; /*customizable color*/
- margin:2px;
- margin-top:-111px;
- margin-left:-58px;
- width:120px;
- overflow-y:auto;
- -webkit-transition:opacity 0.7s ease-in; opacity:1.0;
- -webkit-transition:all 0.7s ease-in;
- -moz-transition:all 0.7s ease-in;
- transition:all 0.7s ease-in;
- }
- div#k:hover {
- top:100px;
- -webkit-transition:opacity 0.7s ease-in; opacity:1;
- -webkit-transition:all 0.7s ease-in;
- -moz-transition:all 0.7s ease-in;
- transition:all 0.7s ease-in;
- }
- -----------------------THEN PASTE THIS CODE BEFORE AFTER <BODY> AND INSERT WHAT YOU WANNA WRITE WHERE THERE'S "YOUR TEXT HERE"
- <div id="k">
- <div style="padding:2px; opacity:0.6;"><img src="http://i.imgur.com/3z67pSE.gif" /></div>
- <div class="olap">
- your text here.
- </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement