Advertisement
harreyeh

pages pack 2 - blogroll

Sep 27th, 2014
2,515
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.50 KB | None | 0 0
  1.  
  2. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  3. <title>{Title}</title>
  4. <!--- change the title of the page here --->
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <!---
  8.  
  9. blogroll page by hardziam.tumblr.com // septembre.co.vu
  10.  
  11. --->
  12.  
  13.  
  14. <script src="http://static.tumblr.com/ta26uqw/yqQn9iy9c/jquery-1.7.1.min.js"></script>
  15. <link href="http://static.tumblr.com/ta26uqw/UcYnarnsw/simptip-small.css" rel="stylesheet" type="text/css">
  16.  
  17.  
  18. <style type="text/css">
  19.  
  20.  
  21. #header{color:white; background:black;}
  22. .title{border-bottom:2px solid #D7BFE3;}
  23. .title:after{background:#aaa;}
  24.  
  25. /* sidebar */
  26. #box{background:#000;}
  27. #box a{color:#fff;}
  28.  
  29. /* NOTE:
  30. to change the color of the tooltips, follow these steps:
  31.  
  32. 1. go CTRL + F.
  33. 2. type in #D7BFE3
  34. 3. Press CTRL + F again. A thing with "Replace with" should pop up.
  35. 3. In that tab, type the color you want (e.g. #ffaacc for pink. Go to colorpicker.com for a color wheel!)
  36. 4. Click "All".
  37.  
  38. The people you follow won't show up on this customization page - refresh the actual page on your actual blog and they'll show up there. Also it won't work for sideblogs! */
  39.  
  40.  
  41.  
  42. /* end of customization. only go further if you know what you're doing */
  43.  
  44. ::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
  45. ::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
  46. ::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}
  47.  
  48.  
  49.  
  50. body {
  51. background: #fff;
  52. margin:0;width:100%;height:100%;
  53. font:11px Corbel;
  54. padding: 0;
  55. position:absolute;
  56. }
  57.  
  58. a {
  59. text-decoration:none;
  60. outline:none;
  61. color:gray;
  62. -webkit-transition: all 0.5s ease-in-out;
  63. -moz-transition: all 0.5s ease-in-out;
  64. -o-transition: all 0.5s ease-in-out;
  65. }
  66.  
  67. a:hover {
  68. color:#eee;
  69. -webkit-transition: all 0.5s ease-in-out;
  70. -moz-transition: all 0.5s ease-in-out;
  71. -o-transition: all 0.5s ease-in-out;
  72. }
  73.  
  74. #header{
  75. width:100%;
  76. top:0;left:0;
  77. padding:20px;
  78. padding-left:40px;
  79. position:fixed;
  80. height:40px;
  81. z-index:1000;
  82. }
  83.  
  84. .title{
  85. font-size:20px;
  86. text-transform:uppercase;
  87. display:inline-block;
  88. padding:10px;
  89. padding-top:4px;
  90. letter-spacing:5px;
  91. }
  92.  
  93. .title:after{
  94. width:430px;
  95. content:'';
  96. position:fixed;
  97. margin-top:34px;
  98. margin-left:9px;
  99. height:2px;
  100. }
  101.  
  102. #entries{
  103. width:800px;
  104. margin-left:20px;
  105. margin-top:80px;
  106. }
  107.  
  108. #post{
  109. width:560px;
  110. margin:20px;
  111. float:left;
  112. }
  113.  
  114. #box{
  115. width:110px;
  116. padding:20px;
  117. padding-top:70px;
  118. position:fixed;
  119. left:615px;
  120. top:0;
  121. z-index:9999;
  122. }
  123.  
  124. #box img{
  125. width:85px;
  126. padding:10px;
  127. padding-bottom:20px;
  128. }
  129.  
  130. #box a{
  131. display:block;
  132. font-size:10px;
  133. padding:6px;
  134. font-style:italic;
  135. text-align:center;
  136. }
  137.  
  138. #box:hover a{
  139. color:#999;
  140. }
  141.  
  142. #box a:hover{
  143. color:white;
  144. }
  145.  
  146. .hidden{display:none;}
  147. .unhidden{display:block;}
  148.  
  149. .search{
  150. height:26px;
  151. margin-left:-20px;
  152. width:150px;
  153. margin-bottom:-40px;
  154. overflow:hidden;
  155. background:#333;
  156. }
  157.  
  158. .search input{
  159. border:1px solid #333;
  160. background:#333;
  161. padding:2px;
  162. padding-left:5px;
  163. color:white;
  164. width:150px;
  165. padding-top:5px;
  166. font:10px Calibri;
  167. }
  168.  
  169. #follower{
  170. display:block;
  171. float:left;
  172. z-index:-99;
  173. padding:10px;
  174. margin:0px;
  175. border-radius:0%;
  176. background:transparent;
  177. transition-duration:.5s;
  178. -moz-transition-duration:.5s;
  179. -webkit-transition-duration:.5s;
  180. -o-transition-duration:.5s;
  181. outline:1px solid #eee;
  182. outline-offset:-1px;
  183. }
  184.  
  185. #follower:nth-of-type(2n+0){
  186. }
  187.  
  188. #follower:hover{
  189. outline:1px solid black;
  190. background:#333;
  191. transition-duration:.5s;
  192. -moz-transition-duration:.5s;
  193. -webkit-transition-duration:.5s;
  194. -o-transition-duration:.5s;
  195. }
  196.  
  197. #follower img{
  198. width:35px;
  199. float:left;
  200. border-radius:0%;
  201. -webkit-filter: grayscale(100%);
  202. transition-duration:.5s;
  203. -moz-transition-duration:.5s;
  204. -webkit-transition-duration:.5s;
  205. -o-transition-duration:.5s;
  206. }
  207.  
  208. #follower:hover img{
  209. -webkit-filter: grayscale(0%);
  210. transition-duration:.5s;
  211. -moz-transition-duration:.5s;
  212. -webkit-transition-duration:.5s;
  213. -o-transition-duration:.5s;
  214. }
  215. /*
  216. * TOOLTIPS ============================================
  217. */
  218.  
  219. [data-tooltip].simptip-position-bottom:before {
  220. border-bottom-color: #D7BFE3;
  221. z-index: 99999;
  222. }
  223.  
  224. [data-tooltip].simptip-position-bottom:after {
  225. background-color: #D7BFE3;
  226. color: #fff;
  227. text-transform:lowercase;
  228. font-style:italic;
  229. background:#D7BFE3;
  230. z-index: 99999;
  231. }
  232. [data-tooltip].simptip-position-left:before {
  233. border-left-color: #d45e73;
  234. z-index: 99999;
  235. }
  236. [data-tooltip].simptip-position-left:after {
  237. background-color: #d45e73;
  238. color: #fff;
  239. z-index: 99999;
  240. }
  241. [data-tooltip].simptip-position-right:before {
  242. border-right-color: #d45e73;
  243. z-index: 99999;
  244. }
  245. [data-tooltip].simptip-position-right:after {
  246. background-color: #d45e73;
  247. color: #fff;
  248. z-index: 99999;
  249. }
  250. [data-tooltip].simptip-position-top.half-arrow:before {
  251. border-right: 7px solid #d45e73;
  252. z-index: 99999;
  253. }
  254. [data-tooltip].simptip-position-bottom.half-arrow:before {
  255. border-right: 7px solid #d45e73;
  256. z-index: 99999;
  257. }
  258.  
  259.  
  260.  
  261. #credit a{
  262. position:fixed;
  263. right:10px;
  264. bottom:10px;
  265. padding:6px;
  266. background:black;
  267. text-transform:uppercase;
  268. color:white;
  269. -moz-transition-duration:1s;
  270. -webkit-transition-duration:1s;
  271. -o-transition-duration:1s;
  272. }
  273.  
  274. #credit a:hover {
  275. background:white;
  276. color:black;
  277. -moz-transition-duration:0.5s;
  278. -webkit-transition-duration:0.5s;
  279. -o-transition-duration:0.5s;
  280. }
  281.  
  282.  
  283. </style>
  284.  
  285. </head>
  286.  
  287. <body>
  288.  
  289.  
  290. <div id="header">
  291. <div class="title">blogroll</div>
  292. </div>
  293.  
  294. <div id="box">
  295. <!--- here you can change the image ---->
  296. <img src="http://33.media.tumblr.com/66e12b88ae19f60654625f1e414bd93c/tumblr_mgwf4mlrdu1qlt206o2_250.png">
  297. <!--- here you can change the image ---->
  298.  
  299. <a href="/">back to blog</a>
  300. <a href="/ask">message</a>
  301. <a href="/dashboard">dashboard</a>
  302.  
  303. <!---- remove this below if you don't want a search box ------>
  304. <a href="javascript:unhide('searchbx');">search tags</a>
  305. <div id="searchbx" class="hidden"><div class="search"><form method="get" action="/search"><input type="text" placeholder="Type and press enter..." value="" name="q"></input></form></div></div>
  306. <!------------------------------------------------------------>
  307.  
  308.  
  309.  
  310.  
  311. </div>
  312.  
  313. <div id="entries">
  314. <div id="post">
  315.  
  316. <div id="followarea">
  317.  
  318. {block:Following}
  319. {block:Followed}
  320. <div id="follower"><span class="simptip-position-bottom simptip-movable" data-tooltip="{FollowedName}">
  321. <a href="{FollowedURL}"><img src="{FollowedPortraitURL-48}"></a></span>
  322. </div>
  323. {/block:Followed}
  324. {/block:Following}
  325. </div></div>
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359. </div>
  360.  
  361. <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>
  362.  
  363.  
  364. </body>
  365.  
  366.  
  367. <script type="text/javascript">
  368. function unhide(searchbx) {
  369. var item = document.getElementById(searchbx);
  370. if (item) {
  371. item.className=(item.className=='hidden')?'unhidden':'hidden';
  372. }
  373. }
  374. </script>
  375.  
  376. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement