API tools faq
paste
bngtan

Blogroll page

bngtan
May 24th, 2016
1,166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  4.  
  5.  
  6. <title>Blogroll</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8.  
  9. <!-- tooltips -->
  10.  
  11. <script type="text/javascript"
  12. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  13. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  14. <script>
  15. (function($){
  16. $(document).ready(function(){
  17. $("[title]").style_my_tooltips({
  18. tip_follows_cursor:true,
  19. tip_delay_time:200,
  20. tip_fade_speed:300
  21. }
  22. );
  23. });
  24. })(jQuery);
  25. </script>
  26.  
  27. <style type="text/css">
  28.  
  29. /** BODY **/
  30. body{
  31. font-family:Arial;
  32. background-repeat:repeat;background:#fff /**change color of background**/
  33. url('http://67.media.tumblr.com/7e75f054542358d155b06daa590f0325/tumblr_inline_nm93fvmY4s1rv4xc4_75sq.png'); /**delete image url if no background image**/
  34.  
  35. }
  36.  
  37. /** TOOLTIPS **/
  38. #s-m-t-tooltip{
  39. max-width:300px;
  40. margin:15px;
  41. padding:5px 5px;
  42. background:#fff; /** tooltip background color **/
  43. color:#aaa; /** toolip color **/
  44. z-index:999999;
  45. font-size:11px;
  46. border:1px solid #ccc;
  47. }
  48.  
  49. /** LINKS **/
  50. a{
  51. text-decoration:none;
  52. -webkit-transition-duration:.6s;
  53. -moz-transition-duration:.6s;
  54. -o-transition-duration:.6s;
  55. -ms-transition-duration:.6s;
  56. }
  57.  
  58. a:hover{
  59. -webkit-transition-duration:.6s;
  60. -moz-transition-duration:.6s;
  61. -o-transition-duration:.6s;
  62. -ms-transition-duration:.6s;
  63. }
  64.  
  65.  
  66. /** CONTAINER **/
  67. #content {
  68. margin:150px auto;
  69. width:350px;
  70. height:250px;
  71. background:#fff; /**color of container background**/
  72. max-height:300px;
  73. border:1px solid #ccc; /** border color of the container **/
  74. padding:20px;overflow:auto;
  75. }
  76.  
  77. /** ICONS **/
  78. #content img{
  79. margin-left:5px;
  80. opacity:0.8;/** delete line if no image opacity **/
  81. border-radius:100%; /** delete line if no round images **/
  82. width:30px; /** size of the images **/
  83. padding:10px;
  84. -webkit-filter:grayscale(25%);
  85. -webkit-transition-duration:.6s;
  86. -moz-transition-duration:.6s;
  87. -o-transition-duration:.6s;
  88. -ms-transition-duration:.6s;
  89. }
  90.  
  91. #content img:hover{
  92. opacity:1;
  93. -webkit-filter:grayscale(0%);
  94. }
  95. /** header **/
  96. #header{
  97. font-weight:bold;
  98. background:#fff; /**color of header background**/
  99. width:374px;
  100. margin-top:-75px;
  101. margin-left:-21px;
  102. padding:8px;
  103. border:1px solid #ccc; /** border color of the header **/
  104. text-align:center;
  105. color:#444444; /** color of the blogroll title **/
  106. position:fixed;
  107. }
  108.  
  109. #header a{
  110. color:#aaa; /*** change the hex code for the color of your links ***/
  111. }
  112.  
  113. #header a:hover{
  114. color:#000; /** color of your links when on hover **/
  115. }
  116.  
  117. /** CREDIT **/
  118.  
  119. .credit a{
  120. font-size:7px;
  121. bottom:7px;
  122. left:10px;
  123. position:fixed;
  124. color:#aaa;
  125. text-decoration:none;
  126. }
  127.  
  128. .credit a:hover{
  129. color:#eee;
  130. }
  131.  
  132. ::-webkit-scrollbar {
  133. width:17px;
  134. height:17px;
  135. }
  136. ::-webkit-scrollbar {
  137. background-color:#fff;
  138. }
  139. ::-webkit-scrollbar-track {
  140. border:8px solid #fff;
  141. background-color:#fff;
  142. }
  143. ::-webkit-scrollbar-thumb {
  144. border:8px solid #fff;
  145. background-color:#ccc; /**change color of scrollbar **/
  146. }
  147. </style>
  148. </head>
  149. <body>
  150.  
  151.  
  152.  
  153. <div id="content">
  154. <div id="header">
  155.  
  156. Blogroll. <!--change this for your header title-->
  157. <br>
  158.  
  159. <!-- here are your links -->
  160.  
  161. <!--link back to your blog-->
  162. <a href="/" title="back to blog"><i class="fa fa-refresh "></i></a>
  163. &nbsp;
  164.  
  165. <!--link back to dashboard-->
  166. <a href="http://www.tumblr.com" title="home"><i class="fa fa-home "></i></a> &nbsp;
  167.  
  168. <!--link to your ask-->
  169. <a href="/ask" title="message"><i class="fa fa-comments"></i></a>
  170. &nbsp;
  171.  
  172. <!--link to your about page-->
  173. <a href="/" title="about"> <i class="fa fa-user"></i></a>
  174. &nbsp;
  175.  
  176. <!--link to your links page-->
  177. <a href="/" title="links"><i class="fa fa-folder"></i></a>
  178. &nbsp;
  179.  
  180. </div>
  181.  
  182.  
  183. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}">{/block:Followed}{/block:Following}
  184. </div>
  185.  
  186. <!-- do not touch the credits it's barely noticeably anyway -->
  187.  
  188. <div class="credit"><a href="http://taehyung.sne.jp" title="coded by yoongity"><i class="fa fa-code fa-2x"></i></a></div>
  189.  
  190. <!-- thank you -->
  191.  
  192. </body>
  193. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!