API tools faq
paste
Advertisement
vongolacloud18

Blogroll-- Hearts

vongolacloud18
Nov 4th, 2013
1,427
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5.     <title>My Blogroll</title>
  6.     <link rel="shortcut icon" href="{Favicon}">
  7.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9. <style type="text/css">
  10.  
  11. ::selection, ::-webkit-selection{
  12. background-color: transparent;
  13. /*Selection Color*/
  14. color: #444;
  15. }
  16.  
  17. body {
  18.     /*Background Image*/
  19.     background-image:url('http://static.tumblr.com/hxaftoq/HHWmvg315/16.gif');
  20.     background-attachment:fixed;
  21. }
  22.  
  23. #all {
  24.     margin-left:285px;
  25.     height:100%;
  26. }
  27.  
  28. /*ALL COLORS*/
  29. /*Find hexcodes at http://colorpicker.com/"*/
  30.  
  31. #mem span {
  32.     border-color:#777; /*Link Border/Arrow Colors*/
  33. }
  34.  
  35. #pic, #pic img {
  36.     background-color:#fff0ef; /*Image Thick Border Color*/
  37.     border:1px solid #f2b1ab; /*Image Border Color*/
  38.     border-radius:100%; /*Makes Images Into Circles*/
  39. }
  40.  
  41. #memo {
  42.     border:1px dashed #8c4a44; /*Sidebar Border Color*/
  43.     color:#8c4a44; /*Sidebar Text Color*/
  44.     background-color: rgba(250,250,250, 0.7); /*Sidebar Background Color
  45. To Change Background Color Just Replace rgba(250,250,250,0.7) With A HexCode*/
  46. }
  47.  
  48. #dhtmltooltip {
  49.     border:1px solid #aaa; /*Link Hover Border Color*/
  50.     color:#aaa; /*Link Hover Text Color*/
  51. }
  52.  
  53. span a {
  54.     color:#ed776d; /*Link/Username Color*/
  55. }
  56.  
  57. #border1 {
  58.     border-color:#8c4a44; /*Side Borders Color*/
  59. }
  60.  
  61. /*END COLORS*/
  62.  
  63. /*User*/
  64. #mem {
  65.     display:inline-block;
  66.     width:150px;
  67.     height:80px;
  68. }
  69.  
  70. /*Links*/
  71.  
  72. span a {
  73.     display:block;
  74.     font-size:10px;
  75.     width:50px;
  76.     padding:2px 10px;
  77.     text-decoration:none;
  78.     word-break:break-all;
  79. }
  80.  
  81. #mem span {
  82.     text-align:center;
  83.     display:block;
  84.     width:0px;
  85.     border-width:0px 0px 1px 1px;
  86.     border-style:dashed;
  87.     -webkit-transition: all 0.6s ease-in-out;
  88.     -moz-transition: all 0.6s ease-in-out;
  89.     -ms-transition: all 0.6s ease-in-out;
  90.     -o-transition: all 0.6s ease-in-out;
  91.     transition: all 0.6s ease-in-out;
  92. }
  93.  
  94. #mem span:hover {
  95.     width:70px;
  96.     border-left:1px dotted transparent;
  97. }
  98.  
  99. #pic {
  100.     display:inline-block;
  101.     width:42px;
  102.     height:42px;
  103.     padding:10px;
  104. }
  105.  
  106. #pic img {
  107.     -webkit-transition: all 0.4s ease-in-out;
  108.     -moz-transition: all 0.4s ease-in-out;
  109.     -ms-transition: all 0.4s ease-in-out;
  110.     -o-transition: all 0.4s ease-in-out;
  111.     transition: all 0.4s ease-in-out;
  112. }
  113.  
  114. #pic img:hover {
  115.     opacity:.5;
  116.     /*Icon Rotation*/
  117.     transform:rotate(360deg);
  118.     -o-transform:rotate(360deg);
  119.     -ms-transform:rotate(360deg);
  120.     -moz-transform:rotate(360deg);
  121.     -webkit-transform:rotate(360deg);
  122. }
  123.  
  124. #arrow {
  125.     height:0px;
  126.     margin-top:-9px;
  127.     margin-bottom:10px;
  128.     text-align:right;
  129.     margin-left:-15px;
  130.     -webkit-transition: all 0.4s ease-in-out;
  131.     -moz-transition: all 0.4s ease-in-out;
  132.     -ms-transition: all 0.4s ease-in-out;
  133.     -o-transition: all 0.4s ease-in-out;
  134.     transition: all 0.4s ease-in-out;
  135. }
  136.  
  137. #arrow:hover {
  138.     margin-left:2px;
  139. }
  140.  
  141. /*Sidebar*/
  142. #memo {
  143.     top:100px;
  144.     left:30px;
  145.     width:200px;
  146.     text-align:justify;
  147.     position:fixed;
  148.     padding:10px;
  149.     font-size:10px;
  150.     font-family:courier;
  151. }
  152.  
  153. #memo img {
  154.     max-width:100%;
  155. }
  156.  
  157.  
  158. /*Hover Links*/
  159. #dhtmltooltip {
  160.     position: absolute;
  161.     padding: 3px;
  162.     padding-top:5px;
  163.     text-align:center;
  164.     font-family:consolas;
  165.     font-size: 10px;
  166.     line-height:10px;
  167.     letter-spacing:1px;
  168.     text-transform: uppercase;
  169.     visibility: hidden;
  170.     z-index: 10000;
  171. }
  172.  
  173. /*Links Dimensions*/
  174. #humming {
  175.     overflow:hidden;
  176.     width:81px;
  177.     margin-left:-1px;
  178.     padding:12px 0px;
  179. }
  180.  
  181.  
  182. </style>
  183. </head>
  184. <body>
  185.  
  186. <div id="dhtmltooltip"></div>
  187. <script type="text/javascript">
  188.  
  189. /***********************************************
  190. * Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  191. * This notice MUST stay intact for legal use
  192. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  193. ***********************************************/
  194.  
  195. var offsetxpoint=20 //Customize x offset of tooltip
  196. var offsetypoint=-20 //Customize y offset of tooltip
  197. var ie=document.all
  198. var ns6=document.getElementById && !document.all
  199. var enabletip=false
  200. if (ie||ns6)
  201. var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
  202.  
  203. function ietruebody(){
  204. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  205. }
  206.  
  207. function ddrivetip(thetext, thecolor, thewidth){
  208. if (ns6||ie){
  209. if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
  210. if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
  211. tipobj.innerHTML=thetext
  212. enabletip=true
  213. return false
  214. }
  215. }
  216.  
  217. function positiontip(e){
  218. if (enabletip){
  219. var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
  220. var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
  221. //Find out how close the mouse is to the corner of the window
  222. var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
  223. var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
  224.  
  225. var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
  226.  
  227. //if the horizontal distance isn't enough to accomodate the width of the context menu
  228. if (rightedge<tipobj.offsetWidth)
  229. //move the horizontal position of the menu to the left by it's width
  230. tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
  231. else if (curX<leftedge)
  232. tipobj.style.left="5px"
  233. else
  234. //position the horizontal position of the menu where the mouse is positioned
  235. tipobj.style.left=curX+offsetxpoint+"px"
  236.  
  237. //same concept with the vertical position
  238. if (bottomedge<tipobj.offsetHeight)
  239. tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
  240. else
  241. tipobj.style.top=curY+offsetypoint+"px"
  242. tipobj.style.visibility="visible"
  243. }
  244. }
  245.  
  246. function hideddrivetip(){
  247. if (ns6||ie){
  248. enabletip=false
  249. tipobj.style.visibility="hidden"
  250. tipobj.style.left="-1000px"
  251. tipobj.style.width=''
  252. }
  253. }
  254.  
  255. document.onmousemove=positiontip
  256.  
  257. </script>
  258.  
  259. <!-- Corner Image -->
  260. <img src="http://static.tumblr.com/hxaftoq/ZfFmvd660/corner1.png" style="position:fixed; z-index:-1; bottom:0px; right:0px; max-width:350px;">
  261.  
  262. <div id="memo">
  263. <!-- Description/Sidebar Text -->
  264.     <b style="color:#e09b96;"><big>Tomodachis</big></b> (<i>友達; ともだち; or トモダチ</i>), someone whom your share an eternal bond with; someone whom without their existence, your life would not be the same; someone who lives freely, advises justly, assists readily, adventures boldly, takes all patiently, defends courageously, and loves unconditionally.
  265. </div>
  266.  
  267. <table id="all" cellspacing="0" cellpadding="0" style="width:650px; background-color: rgba(250,250,250, 0.6); padding:30px 0px;">
  268. <tr><td>
  269.  
  270. <!-- Side Borders -->
  271.  
  272. <div id="border1" style="position:fixed; height:100%; top:0px; border-width:0px 0px 0px 1px; border-style:dashed; margin-left:-10px;"></div>
  273.     <div id="border1" style="position:fixed; height:100%; top:0px; border-width:0px 0px 0px 1px; border-style:dashed; margin-left:660px;"></div>
  274.    
  275. <center>
  276.        
  277. <div id="pic" style="margin-bottom:40px;">
  278.     <a href="/" onMouseover="ddrivetip('Home','#fff', 50)"; onMouseout="hideddrivetip()">
  279.     <!-- Icon One-->
  280.         <img src="http://static.tumblr.com/hxaftoq/Agmmvd5eo/icon1.png" width="40px;">
  281.     </a>
  282. </div>
  283.        
  284. &nbsp;&nbsp;
  285. <div id="pic" style="margin-bottom:40px;">
  286.         <a href="/ask" onMouseover="ddrivetip('Ask','#fff', 50)"; onMouseout="hideddrivetip()">
  287.     <!-- Icon Two-->
  288.             <img src="{PortraitURL-64}" width="40px">
  289.         </a>
  290. </div>
  291.        
  292. &nbsp;&nbsp;
  293.     <div id="pic" style="margin-bottom:40px;">
  294.         <a href="http://bakao.co.vu/" onMouseover="ddrivetip('Theme','#fff', 50)"; onMouseout="hideddrivetip()">
  295.     <!-- Icon Three-->
  296.             <img src="http://static.tumblr.com/hxaftoq/bvZmvd5f1/icon2.png" width="40px;">
  297.         </a>
  298.     </div>
  299.  
  300. </center>
  301.    
  302. </td></tr>
  303. <tr><td style="padding-left:20px;">
  304.  
  305.     {block:Following}
  306.     {block:Followed}
  307.     <table id="mem" cellspacing="0" cellpadding="0">
  308.     <tr><td style="width:100px;">
  309.    
  310.     <div style="width:60px;">
  311.     <center>
  312.         <div id="pic">
  313.             <a href="{FollowedURL}">
  314.                 <img src="{FollowedPortraitURL-128}" width="40px">
  315.             </a>
  316.         </div>
  317.     </center>
  318.     </div>
  319.  
  320.     </td><td>
  321.  
  322.     <div id="humming">
  323.     <span>
  324.         <a href="{FollowedURL}">
  325.             {FollowedName}
  326.         </a>
  327.  
  328.     <!-- BEGIN ARROW
  329.     Remove Until "End Arrow" to Remove Arrow-->
  330.         <div id="arrow">
  331.             »
  332.         </div>
  333.     <!--END ARROW-->
  334.     </span>
  335.     </div>
  336.     </td></tr>
  337.     </table>
  338. {/block:Followed}
  339. {/block:Following}
  340.    
  341. </td></tr>
  342. </center>
  343. </table>
  344. </body>
  345. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!