API tools faq
paste
Advertisement
midorithemes

blogroll 1

midorithemes
Aug 22nd, 2013
1,643
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!------------------------------------------------------------
  5. pg:001(blogroll 1) by midorithemes(midorinomai)@tumblr
  6.  
  7. >>intended for personal use.
  8. >>do not copy, redistribute, or use as base
  9. >>you can move the credits as long as you do not remove them
  10. >>you can make adjustments but do not remove the credits
  11. >>like the post if you are using
  12.  
  13. thank you and enjoy!
  14. -------------------------------------------------------------->
  15.  
  16. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25. <!------------------------------------------------------------>
  26.  
  27. <script type="text/javascript"
  28. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  29. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("[title]").style_my_tooltips();
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!------------------------------------------------------------>
  39.  
  40.  
  41. <style type="text/css">
  42.  
  43. /*--------> tooltip <--------*/
  44.  
  45. #s-m-t-tooltip{
  46. display:block;
  47. background:#fff;
  48. font-size: 8px;
  49. font-family:calibri;
  50. letter-spacing:1px;
  51. text-transform:uppercase;
  52. color:#814759;
  53. text-align:center;
  54. margin-left:15px;
  55. padding: 3px 5px;
  56. max-width:200px;;
  57. z-index:99;
  58. }
  59.  
  60. /*--------> scrollbars <--------*/
  61.  
  62. ::-webkit-scrollbar{
  63. width:5px;
  64. height:5px;
  65. }
  66. ::-webkit-scrollbar-button:start:decrement,
  67. ::-webkit-scrollbar-button:end:increment{
  68. height:6px;
  69. display:block;
  70. background-color:#fff;
  71. }
  72. ::-webkit-scrollbar-track-piece{
  73. background-color:#fff;
  74. }
  75.  
  76. ::-webkit-scrollbar-thumb:vertical{
  77. height:9px;
  78. background-color:#814759;
  79. border-top:1px solid #814759;
  80. border-bottom:1px solid #814759;
  81. }
  82.  
  83. /*--------> text selection color <--------*/
  84.  
  85. ::selection{
  86. background:#814759;
  87. color:#fff;
  88. }
  89.  
  90. ::-moz-selection{
  91. background:#814759;
  92. color:#fff;
  93. }
  94.  
  95. ::-webkit-selection{
  96. background:#814759;
  97. color:#fff;
  98. }
  99.  
  100. /*--------> general <--------*/
  101.  
  102. body {
  103. background-color:#fff;
  104. margin:0px;
  105. color:#814759;
  106. font-family:Calibri;
  107. font-size:10px;
  108. line-height:100%;
  109. cursor: url(http://i.imgur.com/ZOrzC.png), auto;
  110. overflow:auto;
  111. }
  112.  
  113. a, a:active, a:visited {
  114. color:#d6aba8;
  115. text-decoration:none;
  116. transition:0.7s;
  117. -o-transition-transition:0.7s;
  118. -webkit-transition-duration:0.7s;
  119. -moz-transition-duration:0.7s;
  120. }
  121.  
  122. a:hover {
  123. color:#814759;
  124. transition:0.7s;
  125. -o-transition-transition:0.7s;
  126. -webkit-transition-duration:0.7s;
  127. -moz-transition-duration:0.7s;
  128. cursor: url(http://i.imgur.com/ZOrzC.png), auto;
  129. }
  130.  
  131. img{
  132. border:0;
  133. max-width:100%;
  134. }
  135.  
  136. a img{
  137. border:0;
  138. }
  139.  
  140. #container{
  141. margin:80px auto;
  142. width:785px;
  143. max-height:500px;
  144. overflow:auto;
  145. }
  146.  
  147. /*--------> sidebar <--------*/
  148.  
  149. #sidebar{
  150. width:200px;
  151. height:500px;
  152. /*change sidebar image*/
  153. background-image:url('http://i.imgur.com/AaI7OnO.png');
  154. background-color:#814759;
  155. position:fixed;
  156. }
  157.  
  158. /*--------> description <--------*/
  159.  
  160. #description{
  161. position:absolute;
  162. background-color:#fff;
  163. bottom:20px;
  164. left:20px;
  165. width:140px;
  166. text-align:center;
  167. padding:10px;
  168. opacity:0.4;
  169. transition:0.7s;
  170. -o-transition-transition:0.7s;
  171. -webkit-transition-duration:0.7s;
  172. -moz-transition-duration:0.7s;
  173. }
  174.  
  175. #sidebar:hover #description{
  176. opacity:1.0;
  177. transition:0.7s;
  178. -o-transition-transition:0.7s;
  179. -webkit-transition-duration:0.7s;
  180. -moz-transition-duration:0.7s;
  181. }
  182.  
  183. /*--------> links <--------*/
  184.  
  185.  
  186. #links{
  187. position:absolute;
  188. /*change links bottom margin*/
  189. bottom:105px;
  190. left:20px;
  191. text-align:center;
  192. padding:10px;
  193. opacity:0.0;
  194. transition:0.7s;
  195. -o-transition-transition:0.7s;
  196. -webkit-transition-duration:0.7s;
  197. -moz-transition-duration:0.7s;
  198. }
  199.  
  200. #sidebar:hover #links{
  201. opacity:1.0;
  202. transition:0.7s;
  203. -o-transition-transition:0.7s;
  204. -webkit-transition-duration:0.7s;
  205. -moz-transition-duration:0.7s;
  206. }
  207.  
  208.  
  209. #links a{
  210. margin:5px 0px;
  211. padding:10px;
  212. width:120px;
  213. background-color:#fff;
  214. display:block;
  215. }
  216.  
  217. /*--------> icons <--------*/
  218.  
  219. #following{
  220. margin-left:210px;
  221. }
  222.  
  223. #icon{
  224. float:left;
  225. display:inline;
  226. }
  227.  
  228. #icon img{
  229. border-radius:5px;
  230. padding:3px;
  231. border:1px solid #eee;
  232. margin:3px;
  233. opacity:0.7;
  234. transition:0.7s;
  235. -o-transition-transition:0.7s;
  236. -webkit-transition-duration:0.7s;
  237. -moz-transition-duration:0.7s;
  238. }
  239.  
  240. #icon img:hover{
  241. transition:0.7s;
  242. -o-transition-transition:0.7s;
  243. -webkit-transition-duration:0.7s;
  244. -moz-transition-duration:0.7s;
  245. border-radius:50%;
  246. opacity:1.0;
  247. }
  248.  
  249.  
  250. /*--------> credit <--------*/
  251.  
  252. #credit{
  253. position:fixed;
  254. bottom:10px;
  255. right:5px;
  256. }
  257.  
  258. #credit a{
  259. text-align:center;
  260. padding:3px 5px;
  261. border: 1px solid #814759;
  262. color:#fff;
  263. background-color:#814759;
  264. transition:0.7s;
  265. -o-transition-transition:0.7s;
  266. -webkit-transition-duration:0.7s;
  267. -moz-transition-duration:0.7s;
  268. }
  269.  
  270. #credit a:hover{
  271. border-radius: 50%;
  272. background-color:#fff;
  273. color:#814759;
  274. transition:0.7s;
  275. -o-transition-transition:0.7s;
  276. -webkit-transition-duration:0.7s;
  277. -moz-transition-duration:0.7s;
  278. }
  279.  
  280. </style></head>
  281.  
  282. <body>
  283.  
  284. <div id="container">
  285.  
  286. <div id="sidebar">
  287.  
  288. <!----------- your links here ---------->
  289.  
  290. <div id="links">
  291. <a href="/">home</a>
  292. <a href="http://tumblr.com/dashboard">dashboard</a>
  293. <a href="http://www.pixiv.net/member_illust.php?mode=medium&illust_id=37299120">sidebar credit</a>
  294. </div>
  295.  
  296. <!----------- your description here ---------->
  297.  
  298. <div id="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><br><b>bold</b> <em>italic</em> <a href="/" title="blahhhhh">link</a>
  299. </div>
  300. </div>
  301.  
  302. <!----------- blogroll portion ---------->
  303.  
  304. {block:Following}<div id="following">{block:Followed}
  305. <div id="icons"><a href="{FollowedURL}" title="{FollowedName}"><div id="icon"><img src="{FollowedPortraitURL-48}" border="0" /></div></a>
  306. {/block:Followed}<div id="following">{/block:Following}
  307. </div></div>
  308.  
  309. <!----------- credit ---------->
  310.  
  311. <div id="credit"><a href="http://midorithemes.tumblr.com" title="midorithemes">♪</a></div>
  312.  
  313. </body>
  314. </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!