API tools faq
paste
Advertisement
nasyidazahr

Blogroll #1 by fairielia

nasyidazahr
Aug 4th, 2014
766
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.57 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. BLOGROLL THEME BY FAIRIELIA
  4.  
  5. BLOGROLL BASE CODE BY DESTIEL.COM
  6.  
  7. KEEP ALL CREDITS FORM INVISIBLE ON ITS PLACES. FAILED TO DO SO WILL RESULT IN TERMINATION OF YOUR ACCOUNT
  8.  
  9. -->
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12.  
  13. <head>
  14.  
  15. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  16. <script>
  17. (function($){
  18. $(document).ready(function(){
  19. $("a[title]").style_my_tooltips({
  20. tip_follows_cursor:true,
  21. tip_delay_time:20,
  22. tip_fade_speed:400,
  23. attribute:"title"
  24. });
  25. });
  26. })(jQuery);
  27. </script>
  28.  
  29. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  30.  
  31. <!------
  32.  
  33. YOU CAN CHANGE THE TITLE OF YOUR TAB IF WANTED. REPLACE "BLOGROLL" WITH YOUR DESIRED TITLE.
  34.  
  35. ------>
  36.  
  37. <title>Blogroll</title>
  38. <link rel="shortcut icon" href="{Favicon}">
  39. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  40.  
  41. <style type="text/css">
  42.  
  43. /** YOU CAN CHANGE THE BACKGROUND TO AN IMAGE.
  44. TO DO THIS REPLACE "IMAGEURL" WITH THE URL OF YOUR IMAGE **/
  45.  
  46. #scroll{
  47. bottom:-20px;
  48. position: absolute;
  49. left: 50%;
  50. width:10px;
  51. height:5px;
  52. overflow:hidden;
  53. margin-bottom:80px;}
  54.  
  55. ::-webkit-scrollbar {
  56. height: 9px;
  57. width: 9px;
  58. }
  59.  
  60. ::-webkit-scrollbar-thumb {
  61. border: 3px solid #ffffff;
  62. background-color:#ffb0d0;
  63. }
  64.  
  65. body {
  66. background-color: #fbf4ec;
  67. background-image: url(http://static.tumblr.com/7cb09c24a24725e4c950eb9ded586c9f/t63sqqu/JQPmpmmn4/tumblr_static_tt.png);
  68. background-repeat: repeat;
  69. color:#ccc;
  70. margin-left: -50px;
  71. background-attachment: fixed;}
  72.  
  73. a:link, a:active, a:visited{
  74. text-decoration: none;
  75. -webkit-transition: color 0.3s ease-out;
  76. -moz-transition: color 0.3s ease-out;
  77. transition: color 0.3s ease-out;
  78. color:#ffffff;
  79. }
  80.  
  81. a:hover {
  82. text-decoration: none;
  83. font-style:;
  84. color: #ffb0d0;
  85. }
  86.  
  87. #sidebar{
  88. opacity:1;
  89. position:fixed;
  90. text-transform: normal;
  91. margin-top:40px;
  92. margin-left:30px;
  93. z-index:99;
  94. background: #fff;
  95. background-image:url(http://static.tumblr.com/5uvtpxx/fepmpl7a9/floral__2_.png);
  96. border:2px solid #ffc1da;
  97. width: 100%;
  98. height: 130px;
  99. padding:12px;
  100. transition: all 0.9s ease-out;
  101. -o-transition-transition: all 0.9s ease-out;
  102. -webkit-transition: all 0.9s ease-out;
  103. -moz-transition: all 0.9s ease-out;
  104. }
  105.  
  106. #sidebar:hover{
  107. transition: all 0.9s ease-out;
  108. -o-transition-transition: all 0.9s ease-out;
  109. -webkit-transition: all 0.9s ease-out;
  110. -moz-transition: all 0.9s ease-out;
  111. }
  112.  
  113. #sidebar2{
  114. background:#fff;
  115. border:3px solid #ffb0d0;
  116. margin-top: 30px;
  117. left: 30px;
  118. width:160px;
  119. padding:5px;
  120. border-radius:0px;
  121. height:160px;
  122. position:fixed;
  123. text-align:center;
  124. -webkit-transform: rotate(355deg);
  125. -moz-transform: rotate(355deg);
  126. z-index:99999999999;
  127. -webkit-transition: all .8s ease-in-out;
  128. -moz-transition: all .8s ease-in-out;
  129. -o-transition: all .8s ease-in-out;
  130. -ms-transition: all .8s ease-in-out;
  131. transition: all .8s ease-in-out;
  132.  
  133.  
  134. }
  135.  
  136. #sidebar2:hover{
  137. background:#fe86b7;
  138. -webkit-transform: rotate(0deg);
  139. -moz-transform: rotate(0deg);
  140. -webkit-transition: all .8s ease-in-out;
  141. -moz-transition: all .8s ease-in-out;
  142. -o-transition: all .8s ease-in-out;
  143. -ms-transition: all .8s ease-in-out;
  144. transition: all .8s ease-in-out;
  145.  
  146. }
  147.  
  148.  
  149. div#link1{
  150. position:fixed;
  151. display: inline-block;
  152. overflow:hidden;
  153. height: 40px;
  154. font-family:calibri;
  155. width: 170px;
  156. background:#fe86b7;
  157. color:white;
  158. top: 5px;
  159. left: 0px;
  160. outline:1px dashed #ffffff; outline-offset:-8px;
  161. opacity: 0;
  162. transition: all 0.4s ease-out;
  163. -o-transition-transition: all 0.4s ease-out;
  164. -webkit-transition: all 0.4s ease-out;
  165. -moz-transition: all 0.4s ease-out;
  166. }
  167.  
  168.  
  169. #sidebar2:hover #link1{
  170. opacity: .8;
  171. -o-transition-transition: all 0.9s ease-out;
  172. -webkit-transition: all 0.9s ease-out;
  173. -moz-transition: all 0.9s ease-out;
  174. }
  175.  
  176.  
  177.  
  178. #link1:hover{
  179. border-radius:0px;
  180. background: #fff;
  181. outline:1px dashed #fe86b7; outline-offset:-8px;
  182. -o-transition-transition: all .6s ease;
  183. -webkit-transition: all .6s ease;
  184. -moz-transition: all .6s ease;
  185. transition: all .6s ease;
  186. }
  187.  
  188. #link1 a:hover{
  189. color:#fe86b7;;
  190. font-family:calibri;
  191. font-size:12px;
  192. letter-spacing:3px;
  193. }
  194.  
  195. #link1:hover notes1{
  196. opacity:1;
  197. margin-left:150px;
  198. font-family:calibri;
  199. font-size:10px;
  200. }
  201.  
  202.  
  203.  
  204. div#link2{
  205. position:fixed;
  206. height: 40px;
  207. width: 170px;
  208. font-family:calibri;
  209. background:#fe86b7;
  210. top: 45px;
  211. left: 0px;
  212. outline:1px dashed #ffffff; outline-offset:-8px;
  213. opacity: 0;
  214. -o-transition-transition: all 0.4s ease-out;
  215. -webkit-transition: all 0.4s ease-out;
  216. -moz-transition: all 0.4s ease-out;
  217. }
  218.  
  219. #sidebar2:hover #link2{
  220. opacity: .8;
  221. -o-transition-transition: all 0.9s ease-out;
  222. -webkit-transition: all 0.9s ease-out;
  223. -moz-transition: all 0.9s ease-out;
  224. }
  225.  
  226.  
  227. #link2:hover{
  228. background: #fff;
  229. outline:1px dashed #fe86b7; outline-offset:-8px;
  230. -o-transition-transition: all .6s ease;
  231. -webkit-transition: all .6s ease;
  232. -moz-transition: all .6s ease;
  233. transition: all .6s ease;
  234. }
  235.  
  236. #link2 a:hover{
  237. color:#fe86b7;;
  238. font-family:calibri;
  239. font-size:12px;
  240. letter-spacing:3px;
  241. }
  242.  
  243. div#link3{
  244. position:fixed;
  245. font-family:calibri;
  246. height: 40px;
  247. width: 170px;
  248. top: 85px;
  249. left: 0px;
  250. background:#fe86b7;
  251. outline:1px dashed #ffffff; outline-offset:-8px;
  252. opacity: 0;
  253. -o-transition-transition: all 0.4s ease-out;
  254. -webkit-transition: all 0.4s ease-out;
  255. -moz-transition: all 0.4s ease-out;
  256. }
  257.  
  258. #sidebar2:hover #link3{
  259. opacity: .8;
  260. -o-transition-transition: all 0.9s ease-out;
  261. -webkit-transition: all 0.9s ease-out;
  262. -moz-transition: all 0.9s ease-out;
  263. }
  264.  
  265. #link3:hover{
  266. background: #fff;
  267. outline:1px dashed #fe86b7; outline-offset:-8px;
  268. -o-transition-transition: all .6s ease;
  269. -webkit-transition: all .6s ease;
  270. -moz-transition: all .6s ease;
  271. transition: all .6s ease;
  272. }
  273.  
  274. #link3 a:hover{
  275. color:#fe86b7;;
  276. font-family:calibri;
  277. font-size:12px;
  278. letter-spacing:3px;
  279. }
  280.  
  281. div#link4{
  282. font-family:calibri;
  283. position:fixed;
  284. height: 40px;
  285. width: 170px;
  286. top: 125px;
  287. left: 0px;
  288. outline:1px dashed #ffffff; outline-offset:-8px;
  289. background:#fe86b7;
  290. opacity: 0;
  291. -o-transition-transition: all 0.4s ease-out;
  292. -webkit-transition: all 0.4s ease-out;
  293. -moz-transition: all 0.4s ease-out;
  294. }
  295.  
  296. #sidebar2:hover #link4{
  297. opacity: .8;
  298. -o-transition-transition: all 0.9s ease-out;
  299. -webkit-transition: all 0.9s ease-out;
  300. -moz-transition: all 0.9s ease-out;
  301. }
  302.  
  303. #link4:hover{
  304. background: #fff;
  305. outline:1px dashed #fe86b7; outline-offset:-8px;
  306. -o-transition-transition: all .6s ease;
  307. -webkit-transition: all .6s ease;
  308. -moz-transition: all .6s ease;
  309. transition: all .6s ease;
  310. }
  311.  
  312. #link4 a:hover{
  313. color:#fe86b7;
  314. font-family:calibri;
  315. font-size:12px;
  316. letter-spacing:3px;
  317. }
  318.  
  319. @font-face { font-family: "blackswan"; src: url('http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.ttf'); }
  320.  
  321. .blogtitle{
  322. text-align:center;
  323. width:auto;
  324. height:45px;
  325. line-height:50px;
  326. margin-top:60px;
  327. margin-left:250px;
  328. text-align:center;
  329. font-family: blackswan;
  330. color:#fe86b7;
  331. font-size:130px;
  332. letter-spacing:6px;
  333. font-style:italic;
  334. position:fixed;
  335. text-transform: normal;
  336. z-index:9999;
  337. text-shadow: 1px 1px 1px #fff; /**change the color of text shadow**/
  338. transition: all 0.9s ease-out;
  339. -o-transition-transition: all 0.9s ease-out;
  340. -webkit-transition: all 0.9s ease-out;
  341. -moz-transition: all 0.9s ease-out;
  342.  
  343. }
  344.  
  345.  
  346.  
  347. /**THIS IS THE LAYOUT**/
  348.  
  349.  
  350. #box {
  351. position:absolute;
  352. background:white;
  353. background-image:url(http://static.tumblr.com/5uvtpxx/fepmpl7a9/floral__2_.png);
  354. width:800px;
  355. height:350px;
  356. top:250px;
  357. left:300px;
  358. overflow:auto;
  359. border:3px solid #ffb0d0;
  360. }
  361.  
  362. /* --
  363.  
  364. THIS IS WHO YOU'RE FOLLOWING.
  365.  
  366. -- */
  367.  
  368. .ava img {
  369. border:3px solid #ffb0d0;
  370. margin-top:8px;
  371. padding:0px;
  372. -webkit-transform: rotate(0deg);
  373. -moz-transform: rotate(0deg);
  374. -moz-transition-duration:0.5s;
  375. -webkit-transition-duration:0.5s;
  376. -o-transition-duration:0.5s;
  377. }
  378.  
  379. .ava img:hover {
  380. border-radius:200px;
  381. -webkit-transform: rotate(360deg);
  382. -moz-transform: rotate(360deg);
  383. -moz-transition-duration:0.5s;
  384. -webkit-transition-duration:0.5s;
  385. -o-transition-duration:0.5s;
  386.  
  387. }
  388.  
  389. /**CREDIT. DO NOT DELETE THIS**/
  390.  
  391. #cred{
  392. position:fixed;
  393. opacity: 1;
  394. font-family: calibri;
  395. font-size:16px;
  396. bottom:20px;
  397. right:0px;
  398. padding: 8px;
  399. height:10px;
  400. line-height:8px;
  401. letter-spacing:1px;
  402. text-transform:uppercase;
  403. padding-bottom:5px;
  404. background: #fff;
  405. width:15px;
  406. border: 1px solid #eee;
  407. -o-transition-transition: all 0.9s ease;
  408. -webkit-transition: all 0.9s ease;
  409. -moz-transition: all 0.9s ease;
  410. transition: all 0.9s ease;
  411. -webkit-animation:fade 2.5s;
  412. -moz-animation:fade 2.5s;
  413. -ms-animation:fade 2.5s;
  414. }
  415.  
  416. #cred:hover{
  417. opacity: 0;
  418. width:66px;
  419. -o-transition-transition: all 0.9s ease;
  420. -webkit-transition: all 0.9s ease;
  421. -moz-transition: all 0.9s ease;
  422. transition: all 0.9s ease;
  423. }
  424.  
  425. #creds{
  426. position:fixed;
  427. opacity: 0;
  428. font-family: calibri;
  429. font-size: 12px;
  430. bottom:20px;
  431. right:0px;
  432. padding: 8px;
  433. height:10px;
  434. line-height:8px;
  435. letter-spacing:1px;
  436. text-transform:uppercase;
  437. padding-bottom:5px;
  438. background: #fff;
  439. width:66px;
  440. border: 1px solid #eee;
  441. -o-transition-transition: all 0.9s ease;
  442. -webkit-transition: all 0.9s ease;
  443. -moz-transition: all 0.9s ease;
  444. transition: all 0.9s ease;
  445. }
  446.  
  447. #creds:hover{
  448. opacity: 1;
  449. -o-transition-transition: all 0.9s ease;
  450. -webkit-transition: all 0.9s ease;
  451. -moz-transition: all 0.9s ease;
  452. transition: all 0.9s ease;
  453. }
  454.  
  455.  
  456. </style>
  457.  
  458. <script type="text/javascript">
  459. $(document).ready(function() {
  460. // Tooltip only Text
  461. $('.masterTooltip').hover(function(){
  462. // Hover over code
  463. var title = $(this).attr('title');
  464. $(this).data('tipText', title).removeAttr('title');
  465. $('<p class="tooltip"></p>')
  466. .text(title)
  467. .appendTo('body')
  468. .fadeIn('slow');
  469. }, function() {
  470. // Hover out code
  471. $(this).attr('title', $(this).data('tipText'));
  472. $('.tooltip').remove();
  473. }).mousemove(function(e) {
  474. var mousex = e.pageX + 20; //Get X coordinates
  475. var mousey = e.pageY + 10; //Get Y coordinates
  476. $('.tooltip')
  477. .css({ top: mousey, left: mousex })
  478. });
  479. });
  480. </script>
  481.  
  482. </head>
  483.  
  484. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" />
  485.  
  486. <body>
  487.  
  488. <div id="sidebar"><div class="blogtitle">amazing blogs;</a></div></div>
  489.  
  490. <div id="sidebar2"><div id="link1"><a title="back to my blog" href="/"><div style="margin-top:10px;">M A I N</div></a></div>
  491.  
  492. <div id="link2"><a title="message me here" a href="/ask"><div style="margin-top:10px;">M A I L B O X</div></a></div>
  493.  
  494. <div id="link3"><a title="go back" a href="http://tumblr.com/dashboard"><div style="margin-top:10px;"> D A S H B O A R D </div></a></div>
  495.  
  496. <div id="link4"><a title="theme by fairielia" a href="http://fairielia.tumblr.com"><div style="margin-top:10px;"> T H E M E </div></a></div>
  497.  
  498. <div id="image"><img src="http://38.media.tumblr.com/e6cb59ad77ad9492f23a8f1e2b98efb0/tumblr_n3wah7v72U1s4g4kjo1_500.jpg" height="159px"; width="159px";</div></div></div>
  499.  
  500. <div id="box">
  501.  
  502. <center><div class="ava">
  503.  
  504. {block:Following}{block:Followed}
  505. <a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}"/>
  506.  
  507. {/block:Followed}{/block:Following}</a></div></div>
  508. </center>
  509.  
  510. </body>
  511.  
  512.  
  513.  
  514. <!-----CREDIT---->
  515.  
  516. <div id="cred"><center>©</center></div>
  517. <div id="creds"><center><a title="theme by fairielia" target="blank" href="http://fairielia.tumblr.com" style="color:#ee83bd">fairielia</a></center></div>
  518.  
  519. </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!