API tools faq
paste
Advertisement
luciam

Blogroll #3

luciam
Oct 9th, 2014
7,759
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.21 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!-------------------------------------------------
  4. BLOGROLL #03 BY:
  5.  
  6. http://phoenixthemes.tumblr.com
  7. http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
  8. ...................................................
  9. ...................................................
  10.  
  11. TERMS OF USE:
  12. - DON'T CLAIM AS YOUR OWN
  13. - DON'T REMOVE OR MOVE THE CREDIT
  14. - DON'T REDISTRIBUTE
  15. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  16. --------------------------------------------->
  17.  
  18.  
  19. <!--- Instructions here:
  20. Press ctrl+f (cmd+f in mac) and in the searchbox that appears type:
  21. Color: to get to the spots to change all the colors
  22. Title: to change the titles
  23. Links: to change the header links
  24. ----->
  25.  
  26. <title>Blogroll</title><!---Title: browser title--->
  27. <link rel="shortcut icon" href="{Favicon}" />
  28.  
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
  31.  
  32. <head>
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. /*-------------------------------SCROLL----------------------------------*/
  38.  
  39. ::-webkit-scrollbar-thumb:vertical {
  40. border-left: 1px solid #999; /*Color: scrollbar*/
  41. background:transparent;
  42. height:5px;
  43. }
  44.  
  45. ::-webkit-scrollbar-thumb:horizontal {
  46. border-top: 1px solid #999; /*Color: scrollbar*/
  47. background:transparent;
  48. height:3px;
  49. }
  50.  
  51. ::-webkit-scrollbar-corner {
  52. background-color: transparent;
  53. }
  54.  
  55. ::-webkit-scrollbar {
  56. background-color: transparent;
  57. height:2px;
  58. width:5px;
  59. }
  60.  
  61.  
  62. * {
  63. -webkit-transition: all 0.4s ease-out;
  64. -moz-transition: all 0.4s ease-out;
  65. -ms-transition: all 0.4s ease-out;
  66. -o-transition: all 0.4s ease-out;
  67. transition: all 0.4s ease-out;
  68. }
  69.  
  70. #s-m-t-tooltip{
  71. letter-spacing:1px;
  72. max-width:150px;
  73. font-size: 8px;
  74. margin:0px 10px;
  75. padding:3px 5px;
  76. background: #333; /*Color: tooltip bg*/
  77. color: #fff; /*Color: tooltip*/
  78. opacity: .8;
  79. z-index:999;
  80. text-transform:uppercase;
  81. border:1px solid #fff; /*Color: tooltip border*/
  82. }
  83.  
  84.  
  85. body {
  86. background:#eee; /*Color: background*/
  87. background-image:url(''); /*Image: background*/
  88. font-family: consolas, calibri;
  89. }
  90.  
  91. nav {
  92. display:block;
  93. width: 70%;
  94. margin: -15px auto;
  95. text-align:center;
  96. }
  97.  
  98. nav a {
  99. text-transform:uppercase;
  100. color: #666; /*Color: links*/
  101. text-decoration:none;
  102. letter-spacing:0.2em;
  103. font-size: 8px;
  104. font-weight:bold;
  105. margin-right:10px;
  106. }
  107.  
  108. nav a:hover {
  109. text-decoration:underline;
  110. color: #333; /*Color: links hover*/
  111. }
  112.  
  113. #title {
  114. font-family: 'Ubuntu Condensed', consolas, sans-serif;
  115. color: #333; /*Color: title*/
  116. font-size:20px;
  117. padding:20px;
  118. letter-spacing: 0.3em;
  119. width: 70%;
  120. text-align:center;
  121. margin:20px auto 0 auto;
  122. text-transform:uppercase;
  123. }
  124.  
  125. #blogroll {
  126. width: 70%;
  127. margin: 40px auto;
  128. }
  129.  
  130.  
  131. .diamonds {
  132. text-align: center;
  133. overflow: visible;
  134. white-space: nowrap;
  135. display: inline-block;
  136. }
  137.  
  138. .diamond-row-wrap {
  139. text-align: center;
  140. position: relative;
  141. float: left;
  142. clear: both;
  143. }
  144. .diamond-row-upper, .diamond-row-lower {
  145. overflow: visible;
  146. clear: both;
  147. width: 100%;
  148. }
  149. .diamond-row-lower {
  150. position: absolute;
  151. bottom: 0;
  152. }
  153. .diamond-row-lower .diamond-box {
  154. margin-left: 64.644660941%;
  155. margin-top: 64.644660941%;
  156. }
  157.  
  158. .diamond-box-wrap {
  159. float: left;
  160. width: 150px;
  161. height: 150px;
  162. }
  163.  
  164. .diamond-box {
  165. -webkit-transform: rotate(45deg);
  166. -moz-transform: rotate(45deg);
  167. -ms-transform: rotate(45deg);
  168. transform: rotate(45deg);
  169.  
  170. -webkit-box-sizing: border-box;
  171. -moz-box-sizing: border-box;
  172. -ms-box-sizing: border-box;
  173. box-sizing: border-box;
  174.  
  175. overflow: hidden;
  176.  
  177. position: relative;
  178. z-index: 1;
  179.  
  180. width: 70.710678118%;
  181. height: 70.710678118%;
  182. margin: 14.644660941%;
  183.  
  184. border: 1px solid transparent;
  185. }
  186.  
  187. .diamond-box-inner {
  188. -webkit-transform: rotate(-45deg);
  189. -moz-transform: rotate(-45deg);
  190. -ms-transform: rotate(-45deg);
  191. transform: rotate(-45deg);
  192.  
  193. -webkit-transform-origin: center center;
  194. -moz-transform-origin: center center;
  195. -ms-transform-origin: center center;
  196. transform-origin: center center;
  197.  
  198. -webkit-box-sizing: border-box;
  199. -moz-box-sizing: border-box;
  200. -ms-box-sizing: border-box;
  201. box-sizing: border-box;
  202.  
  203. width: 141.421356237%;
  204. height: 141.421356237%;
  205. margin: -20.7106781185% 0 0 -20.7106781185%;
  206. }
  207.  
  208. .diamonds {
  209. text-align: center;
  210. overflow: visible;
  211. white-space: nowrap;
  212. display: inline-block;
  213. }
  214.  
  215. .diamonds img {
  216. width: 72px;
  217. height:72px;
  218. }
  219.  
  220. .diamond-row-wrap {
  221. text-align: center;
  222. position: relative;
  223. float: left;
  224. clear: both;
  225. }
  226. .diamond-row-upper, .diamond-row-lower {
  227. overflow: visible;
  228. clear: both;
  229. width: 100%;
  230. }
  231. .diamond-row-lower {
  232. position: absolute;
  233. bottom: 0;
  234. }
  235. .diamond-row-lower .diamond-box {
  236. margin-left: 64.644660941%;
  237. margin-top: 64.644660941%;
  238. }
  239.  
  240. .diamond-box-wrap {
  241. float: left;
  242. width: 250px;
  243. height: 250px;
  244. }
  245.  
  246. .diamond-box {
  247. -webkit-transform: rotate(45deg);
  248. -moz-transform: rotate(45deg);
  249. -ms-transform: rotate(45deg);
  250. transform: rotate(45deg);
  251.  
  252. -webkit-box-sizing: border-box;
  253. -moz-box-sizing: border-box;
  254. -ms-box-sizing: border-box;
  255. box-sizing: border-box;
  256.  
  257. overflow: hidden;
  258.  
  259. position: relative;
  260. z-index: 1;
  261.  
  262. width: 70.710678118%;
  263. height: 70.710678118%;
  264. margin: 14.644660941%;
  265.  
  266. border: 1px solid transparent;
  267. }
  268.  
  269. .diamond-box-inner {
  270. -webkit-transform: rotate(-45deg);
  271. -moz-transform: rotate(-45deg);
  272. -ms-transform: rotate(-45deg);
  273. transform: rotate(-45deg);
  274.  
  275. -webkit-transform-origin: center center;
  276. -moz-transform-origin: center center;
  277. -ms-transform-origin: center center;
  278. transform-origin: center center;
  279.  
  280. -webkit-box-sizing: border-box;
  281. -moz-box-sizing: border-box;
  282. -ms-box-sizing: border-box;
  283. box-sizing: border-box;
  284.  
  285. width: 141.421356237%;
  286. height: 141.421356237%;
  287. margin: -20.7106781185% 0 0 -20.7106781185%;
  288. }
  289.  
  290.  
  291. </style>
  292. </head>
  293. <body>
  294.  
  295. <div id="head">
  296. <div id="title">Blogroll</div> <!--Title: --->
  297.  
  298. <nav>
  299. <a href="/">home</a> <!--Link: --->
  300. <a href="http://tumblr.com/dashboard">dashboard</a> <!--Link: --->
  301. <a href="/">link 1</a> <!--Link: --->
  302. <a href="/">link 2</a> <!--Link: --->
  303. <a href="/">link 3</a> <!--Link: --->
  304.  
  305. <a href="http://robbarya.tumblr.com">credit</a>
  306. </nav>
  307. </div>
  308.  
  309. <div id="blogroll">
  310.  
  311. {block:Following}{block:Followed}
  312. <figure>
  313. <div class="imagecontainer"><a href="{FollowedURL}"><img alt="{FollowedName}" title="{FollowedName}" src="{FollowedPortraitURL-96}" /></a></div></figure>
  314. {/block:Following}{/block:Followed}
  315.  
  316.  
  317.  
  318.  
  319. </div>
  320. <!----TOOLTIP------------------>
  321.  
  322. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  323. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  324. <script>
  325. (function($){
  326. $(document).ready(function(){
  327. $("[title]").style_my_tooltips({
  328. tip_follows_cursor:true,
  329. tip_delay_time:0,
  330. tip_fade_speed:400,
  331. attribute:"title"
  332. });
  333. });
  334. })(jQuery);
  335. </script>
  336.  
  337. <!----->
  338.  
  339. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  340. <script type="text/javascript" src="http://static.tumblr.com/d4tdea8/bWOnd58a6/jquery.diamonds.js"></script>
  341. <script>
  342. $("#blogroll").diamonds({
  343. size : 100,
  344. gap : 10,
  345. hideIncompleteRow : false,
  346. autoRedraw : true,
  347. itemSelector : ".imagecontainer"
  348. });
  349. </script>
  350.  
  351. <!-----SCRIPT CREDIT: http://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html ------->
  352.  
  353. </body>
  354. </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!