Don't like ads? PRO users don't see any ads ;-)
Public Pastes

Blogroll [01]

By: mogimochi on Aug 17th, 2012  |  syntax: None  |  size: 8.05 KB  |  hits: 3,160  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Blogroll 01
  8. by yukoki/k--amikorosu
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not claim theme as your own.
  13.  
  14. -->
  15.  
  16. <title>Blogroll</title>
  17. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  18. <link rel="shortcut icon" href="{Favicon}" />
  19.  
  20. <style type="text/css">
  21.  
  22. iframe#tumblr_controls {
  23.     right:3px !important;
  24.     position:fixed !important;
  25. }
  26.  
  27. /*The Background*/
  28.  
  29. body {
  30.     background-color: #ffffff; /**background colour here**/
  31.     background-image: url(/**BACKGROUND URL HERE**/);
  32.     background-attachment: fixed;
  33.     margin: 0;
  34.     word-wrap: break-word;
  35.     text-decoration: none;
  36. }
  37.  
  38. #sidebar {
  39.     background-color: #000000; /**'following bar background colour*/
  40.     width: 260px;      
  41.         position: fixed;
  42.         top: 60px;
  43.     height: 78px;
  44.     left: 882px;
  45.    
  46. -moz-border-radius-topright: 35px;
  47. border-top-right-radius: 35px;
  48. -moz-border-radius-bottomright: 35px;
  49. border-bottom-right-radius: 35px;
  50. }
  51.  
  52. #sidebar .title {
  53.     line-height: 78px;
  54.         font-family: Georgia;
  55.         font-size: 27px;
  56.         text-align: left;
  57.     font-style: italic;
  58.     padding-left: 40px;
  59.     color: #ffffff; /**'following' text colour**/
  60. }
  61.  
  62. #sidebar .usericon {
  63.     width: 64px;
  64.     height: 64px;
  65.     border: 0;
  66.     margin: -72px 0 0 188px;
  67.     position: fixed;
  68.    
  69. -moz-border-radius: 40px;
  70. border-radius: 40px;
  71. }
  72.  
  73. #sidebar .linksback {
  74.     color: #000000; /**navigation text colour**/
  75.     width: 400px;
  76.     letter-spacing: 2px;
  77.     margin-left: 20px;
  78.     margin-bottom: 2px;
  79.     margin-top: 8px;
  80.     font-family: consolas;
  81.     padding: 5px 5px 5px 15px;
  82.     font-size: 12px;
  83.     border-left: 20px solid #000000; /**navigation border colour**/
  84.    
  85. -webkit-transition: all 0.4s ease-in-out;
  86. -moz-transition: all 0.4s ease-in-out;
  87. -o-transition: all 0.4s ease-in-out;
  88. -ms-transition: all 0.4s ease-in-out;
  89. transition: all 0.4s ease-in-out;
  90. }
  91.  
  92. #sidebar .linksback a {
  93.     text-decoration: none;
  94.     color: #000000;
  95. }
  96.  
  97. #sidebar .linksback:hover {
  98.     color: #000000; /**hover naviagtion text colour**/
  99.     border-left: 40px solid #000000; /**hover navigation border colour**/
  100.    
  101. -webkit-transition: all 0.4s ease-in-out;
  102. -moz-transition: all 0.4s ease-in-out;
  103. -o-transition: all 0.4s ease-in-out;
  104. -ms-transition: all 0.4s ease-in-out;
  105. transition: all 0.4s ease-in-out;
  106. }
  107.  
  108. #sidebar .linksask {
  109.     color: #000000; /**navigation text colour**/
  110.     width: 100px;
  111.     letter-spacing: 2px;
  112.     margin-left: 20px;
  113.     margin-bottom: 2px;
  114.     font-family: consolas;
  115.     padding: 5px 5px 5px 15px;
  116.     font-size: 12px;
  117.     border-left: 20px solid #000000; /**navigation border colour**/
  118.    
  119. -webkit-transition: all 0.4s ease-in-out;
  120. -moz-transition: all 0.4s ease-in-out;
  121. -o-transition: all 0.4s ease-in-out;
  122. -ms-transition: all 0.4s ease-in-out;
  123. transition: all 0.4s ease-in-out;
  124. }
  125.  
  126. #sidebar .linksask a {
  127.     text-decoration: none;
  128.     color: #000000;
  129. }
  130.  
  131. #sidebar .linksask:hover {
  132.     color: #000000; /**hover naviagtion text colour**/
  133.     border-left: 40px solid #000000; /**hover navigation border colour**/
  134.  
  135. -webkit-transition: all 0.4s ease-in-out;
  136. -moz-transition: all 0.4s ease-in-out;
  137. -o-transition: all 0.4s ease-in-out;
  138. -ms-transition: all 0.4s ease-in-out;
  139. transition: all 0.4s ease-in-out;
  140. }
  141.  
  142. #sidebar .linkspast {
  143.     color: #000000; /**navigation text colour**/
  144.     width: 100px;
  145.     letter-spacing: 2px;
  146.     margin-left: 20px;
  147.     margin-bottom: 2px;
  148.     font-family: consolas;
  149.     padding: 5px 5px 5px 15px;
  150.     font-size: 12px;
  151.     border-left: 20px solid #000000; /**navigation border colour**/
  152.    
  153. -webkit-transition: all 0.4s ease-in-out;
  154. -moz-transition: all 0.4s ease-in-out;
  155. -o-transition: all 0.4s ease-in-out;
  156. -ms-transition: all 0.4s ease-in-out;
  157. transition: all 0.4s ease-in-out;
  158. }
  159.  
  160. #sidebar .linkspast a {
  161.     text-decoration: none;
  162.     color: #000000;
  163. }
  164.  
  165. #sidebar .linkspast:hover {
  166.     color: #000000; /**hover naviagtion text colour**/
  167.     border-left: 40px solid #000000; /**hover navigation border colour**/
  168.    
  169. -webkit-transition: all 0.4s ease-in-out;
  170. -moz-transition: all 0.4s ease-in-out;
  171. -o-transition: all 0.4s ease-in-out;
  172. -ms-transition: all 0.4s ease-in-out;
  173. transition: all 0.4s ease-in-out;
  174. }
  175.  
  176. #sidebar .linksdash {
  177.     color: #000000; /**navigation text colour**/
  178.     width: 100px;
  179.     letter-spacing: 2px;
  180.     margin-left: 20px;
  181.     margin-bottom: 2px;
  182.     font-family: consolas;
  183.     padding: 5px 5px 5px 15px;
  184.     font-size: 12px;
  185.     border-left: 20px solid #000000; /**navigation border colour**/
  186.    
  187. -webkit-transition: all 0.4s ease-in-out;
  188. -moz-transition: all 0.4s ease-in-out;
  189. -o-transition: all 0.4s ease-in-out;
  190. -ms-transition: all 0.4s ease-in-out;
  191. transition: all 0.4s ease-in-out;
  192. }
  193.  
  194. #sidebar .linksdash a {
  195.     text-decoration: none;
  196.     color: #000000;
  197. }
  198.  
  199. #sidebar .linksdash:hover {
  200.     color: #000000; /**hover naviagtion text colour**/
  201.     border-left: 40px solid #000000; /**hover navigation border colour**/
  202.    
  203. -webkit-transition: all 0.4s ease-in-out;
  204. -moz-transition: all 0.4s ease-in-out;
  205. -o-transition: all 0.4s ease-in-out;
  206. -ms-transition: all 0.4s ease-in-out;
  207. transition: all 0.4s ease-in-out;
  208. }
  209. #sidebar .linkscred {
  210.     color: #000000; /**navigation text colour**/
  211.     width: 100px;
  212.     letter-spacing: 2px;
  213.     margin-left: 20px;
  214.     font-family: consolas;
  215.     padding: 5px 5px 5px 15px;
  216.     font-size: 12px;
  217.     border-left: 20px solid #000000; /**navigation border colour**/
  218.    
  219. -webkit-transition: all 0.4s ease-in-out;
  220. -moz-transition: all 0.4s ease-in-out;
  221. -o-transition: all 0.4s ease-in-out;
  222. -ms-transition: all 0.4s ease-in-out;
  223. transition: all 0.4s ease-in-out;
  224. }
  225.  
  226. #sidebar .linkscred a {
  227.     text-decoration: none;
  228.     color: #000000;
  229. }
  230.  
  231. #sidebar .linkscred:hover {
  232.     color: #000000; /**hover naviagtion text colour**/
  233.     border-left: 40px solid #000000; /**hover navigation border colour**/
  234.    
  235. -webkit-transition: all 0.4s ease-in-out;
  236. -moz-transition: all 0.4s ease-in-out;
  237. -o-transition: all 0.4s ease-in-out;
  238. -ms-transition: all 0.4s ease-in-out;
  239. transition: all 0.4s ease-in-out;
  240. }
  241.  
  242. #image {
  243.     right: 0px;
  244.     bottom: 0px;
  245.     width: 300px;
  246.     position: fixed;
  247. }
  248.  
  249. #container {
  250.     width: 662px;
  251.     height: auto;
  252.     background-color: #000000; /**main blogroll container background colour*/
  253.     margin-top: 0px;
  254.     padding: 10px 0 10px 20px;
  255.     margin-left: 200px;
  256.     position: absolute;
  257.     background-image: url(/**MAIN BLOGROLL CONTAINER BACKGROUND IMAGE**/);
  258. }
  259.  
  260. #container .followings {
  261.     border: 0px;
  262.     width: 64px;
  263.     padding: 2px;
  264.     opacity: 0.8;
  265.     height: 64px;
  266.    
  267. -webkit-transition: all 0.4s ease-in-out;
  268. -moz-transition: all 0.4s ease-in-out;
  269. -o-transition: all 0.4s ease-in-out;
  270. -ms-transition: all 0.4s ease-in-out;
  271. transition: all 0.4s ease-in-out;
  272. }
  273.  
  274. #container .followings:hover { 
  275.     opacity: 1.0;
  276. -moz-border-radius: 35px;
  277. border-radius: 35px;
  278.  
  279. -webkit-transition: all 0.4s ease-in-out;
  280. -moz-transition: all 0.4s ease-in-out;
  281. -o-transition: all 0.4s ease-in-out;
  282. -ms-transition: all 0.4s ease-in-out;
  283. transition: all 0.4s ease-in-out;
  284. }
  285.  
  286. </style>
  287.  
  288. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  289.    
  290. </head>
  291. <body>
  292.  
  293. <img id="image" src="YOUR PICTURE URL HERE" />
  294.  
  295. <div id="container">
  296.  
  297. {block:Following}{block:Followed}
  298.  
  299. <a href="{FollowedURL}" title="{FollowedTitle}" />
  300.  
  301. <img class="followings" src="{FollowedPortraitURL-64}" /></a>
  302.  
  303. {/block:Followed}{/block:Following}
  304.  
  305. </div>
  306.  
  307. </div>
  308.  
  309. <div id="sidebar">
  310. <div class="title">following</div>
  311. <img class="usericon" src="{PortraitURL-64}" />
  312.  
  313. <div class="linksback">
  314. <a href="/">back to blog</a></div>
  315.  
  316. <div class="linksask">
  317. <a href="/ask">inbox</a></div>
  318.  
  319. <div class="linkspast">
  320. <a href="/archive">archive</a></div>
  321.  
  322. <div class="linksdash">
  323. <a href="http://tumblr.com">dashboard</a></div>
  324.  
  325. <div class="linkscred">
  326. <a href="http://yukoki.tumblr.com">credit</a></div>
  327.  
  328. </div>
  329.  
  330. </div>
  331.  
  332. </div>
  333.  
  334. </div>
  335. </div>
  336.  
  337. </body>
  338. </html>
create a new version of this paste RAW Paste Data