API tools faq
paste
Advertisement
cornetespoir

Base code 01: Blogroll

cornetespoir
May 22nd, 2016
611
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.68 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. //Blogroll base
  3.  
  4. by espoirthemes //
  5.  
  6.  
  7. +Obviously, edit it as much as you want! But this can still serve as blogroll on its own.
  8.  
  9. +instructions are throughout the code. I made them as straightforward as possible, to cover if you're very new to html and css
  10.  
  11. +the preview in the customization page might look kinda off, so you'll have to save and go to the page to make sure everything's working right
  12.  
  13. +Feel free to replace the credit with your own! However, if you barely do anything, don't remove it.
  14.  
  15.  
  16. -->
  17. <!DOCTYPE html >
  18. <html>
  19. <head>
  20.  
  21. <!-- you can change the title here -->
  22.  
  23. <title>Blogroll</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!-- tooltip script -->
  27. <script type="text/javascript"
  28. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  29. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:200,
  36. tip_fade_speed:300
  37. }
  38. );
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <!-- this is so you can automatically add icons from font awesome -->
  44. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  45.  
  46. </head>
  47.  
  48.  
  49. <style type="text/css">
  50.  
  51.  
  52. /*tool tips */
  53. #s-m-t-tooltip{
  54. max-width:300px;
  55. margin-top:20px;
  56. margin-left:20px;
  57. border:1px dotted #222;
  58. font-family:sans-serif;
  59. padding:5px 5px;
  60. background:#fff;
  61. color:#222;
  62. z-index:99999999;
  63. font-size:12px;
  64. letter-spacing:2px;
  65. }
  66.  
  67.  
  68. /*scrollbar that appears in chrome */
  69. ::-webkit-scrollbar {
  70. width:10px;
  71. height:10px;
  72. padding:2px;
  73.  
  74. }
  75.  
  76. /*a styling thing I do sometimes is make the scrollbar tracks border thicker, so that it looks like its smaller than the thumb */
  77. ::-webkit-scrollbar-thumb {
  78. background:#888;
  79. border:2px solid #fff;
  80. border-top:none;
  81. border-bottom:none;
  82. border-radius:8px;
  83. }
  84.  
  85. ::-webkit-scrollbar-track {
  86. background:#eee;
  87.  
  88. border:4px solid #fff;
  89.  
  90.  
  91. }
  92.  
  93.  
  94. body {
  95. margin:0;
  96. word-wrap:break-word;
  97. /*background color and image. image url goes between the '' */
  98. background:#fff url('');
  99. background-attachment:fixed;
  100. /*font size: please try not to make it too tiny */
  101. font-size:14px;
  102. font-family:sans-serif;
  103. line-height:100%;
  104. }
  105.  
  106. /*links */
  107. a {
  108. text-decoration:none; /*erase this if you want links to be underlined */
  109. color:#444; /*color of links */
  110. transition:.6s; /*how fast the transition is when hovering */
  111.  
  112. }
  113.  
  114. a:hover {
  115. color:#eee; /*color of the links when hovering */
  116. transition:.6s;
  117. }
  118.  
  119.  
  120.  
  121. /*blogroll container */
  122.  
  123. #container {
  124. position:relative; /*this will make the container move when you scroll down. to change this, make it fixed. However, you'll need to edit the margins if you do this */
  125. /*margins go like this: top right bottom left */
  126. margin:50px auto auto auto ;
  127.  
  128. width:600px; /*width of container */
  129. height:500px; /*you can remove this if you want it to scroll with the rest of the page */
  130. background:white; /*background color */
  131. padding:20px;
  132. border:1px solid #ddd; /*border around container */
  133. overflow:auto;
  134.  
  135. }
  136.  
  137.  
  138. /* images of the people you're following */
  139.  
  140. #container img {
  141. border-radius:100%; /*remove this if you want square images */
  142. padding:2px;
  143. border:1px solid #eee; /*border around images */
  144.  
  145. /*size of images, in case you wanted something different than the default size of the images */
  146. width:64px;
  147. height:64px;
  148. /*how far apart the images are from each other. the bigger the number, the farther apart they are */
  149. margin:22px;
  150. /*the first 2 numbers are to make the shadow go to the bottom or right. the 3rd controls how blurry the shadow is, and the last makes the shadow wrap around the image */
  151. box-shadow:1px 1px 0px 0px #888;
  152. transition:.6s;
  153. }
  154.  
  155. /*this is an example of a hover effect for the images. this one just makes it spin */
  156. #container img:hover {
  157. transform:rotate(100deg);
  158. transition:.6s;
  159. box-shadow:none; /*doing this makes the box shadow disappear on hover */
  160.  
  161. }
  162.  
  163.  
  164. /*I've styled the credit to look like the images, but feel free to remove the borders and box shadows if you just want text, or completely rewrite it to look how you want it to */
  165. #credit {
  166. bottom:10px;
  167. right:10px;
  168. border-radius:100%;
  169. padding:2px;
  170. background:white;
  171. border:1px solid #ddd;
  172. box-shadow:1px 1px 0px #888;
  173. position:fixed;
  174. transition:.6s;
  175. font-size:16px;
  176. line-height:100%;
  177. width:14px;
  178. height:14px;
  179. text-align:center;
  180. }
  181.  
  182. #credit:hover {
  183. box-shadow:none;
  184. transition:.6s;
  185. }
  186.  
  187. </style>
  188.  
  189. <body>
  190.  
  191. <!--container -->
  192. <div id="container">
  193.  
  194. <!--these 2 blocks are basically to check if you're following anyone, and also to tell who you're following -->
  195. {block:Following} {block:Followed}
  196.  
  197. <!-- I've made it to where the image is a link to the blog, and when you hover over it, the tooltip shows the blog's name, and then the title of the blog -->
  198. <a href="{FollowedURL}" title="{FollowedName} | {FollowedTitle}">
  199.  
  200.  
  201. <!--you can change the 128 to any of these: 16, 24, 30, 40, 48, 64, 96, 128
  202. the numbers are the default heights and widths of the images. If you don't want any of those sizes, you can edit the sizes under the css for #container img
  203. -->
  204. <img src="{FollowedPortraitURL-128}">
  205. <!-- Make sure the number for the PortraitURL is either the same size or bigger, otherwise the image will appear blurry or stretched out
  206.  
  207. like if you make the size 50px, keep the portrait url at 64, 96, or 128.
  208. because of this, you really shouldn't make the images larger than 128...plus that's super big anyway.
  209. -->
  210.  
  211. </a>
  212. <!--closing blocks for if and who you're following -->
  213. {/block:Followed} {/block:Following}
  214. </div> <!--closing div for container -->
  215.  
  216.  
  217. <!-- and that's it for the html! This last part is the credit. the link is around the div so that the whole thing is a link, like with the images -->
  218.  
  219. <a href="http://espoirthemes.tumblr.com" title="credit" style="color:#aaa">
  220. <div id="credit">©</div>
  221.  
  222. </a>
  223.  
  224. </body>
  225.  
  226. </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!