API tools faq
paste
Advertisement
msarden

BlogRoll Code 01

msarden
Jun 17th, 2014
316
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.83 KB | None | 0 0
raw download clone embed print report
  1. <!-- Blogroll Code 01 made by msarden [Folu]
  2. I know none of you are inhuman enough to steal this code but I still gotta write this:
  3. - No editing, you may only edit selected parts like title and links (I'll specify what you can and can't edit), please don't edit beyond an unrecognisable point.
  4. - No reposting, simply link back to my blog (in the credits) if you're asked for the code.
  5. - Feel free to ask for help*, I'll leave a detailed step-by-step instruction trail, but if you need help, ask.
  6.  
  7. *PS: I won't help if you ask for how to use this page for other purposes like family page or tag page, but I will however take suggestions on what to make next
  8. **Thanks for reading
  9. -->
  10.  
  11. <head><title>Blogroll</title> <!--This is the page title that'll show up on the tab-bar-->
  12.  
  13. <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
  14. <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
  15. <link href='http://fonts.googleapis.com/css?family=Exo+2:400,200|Raleway|Titillium+Web|Roboto' rel='stylesheet' type='text/css'>
  16.  
  17. <link rel="shortcut icon" href="{Favicon}" />
  18.  
  19.  
  20. <style type="text/css">
  21.  
  22.  
  23.  
  24. a {
  25. color: #ccc;
  26. text-decoration: none;
  27. }
  28.  
  29. body {
  30. font-family: Calibri, 'Merriweather Sans' 'Dancing Script' 'Raleway';
  31. color: #777;
  32. background-color: #FFF;
  33. }
  34.  
  35. /*These are the defs. for the top bar, please don't make any changes here (you really won't need to)*/
  36.  
  37. .topbar {
  38. background-color: #fff;
  39. height: 77px;
  40. width: 300px; /*Topbar dimensions [you may change]*/
  41. margin: auto;
  42. margin-top:150px;
  43. padding-bottom: 3px;
  44. border-bottom: 4px double #d4d4d4;
  45. border-top: 4px double #d4d4d4;
  46. }
  47.  
  48. .title {
  49. font-family: 'Raleway', sans-serif;
  50. font-weight: normal;
  51. font-size: 12px;
  52. text-decoration: none;
  53. text-transform: uppercase;
  54. margin-top: -15px;
  55. text-align: right;
  56. color: #7d7d7d; /*font color [feel free to change]*/
  57. letter-spacing: 2px;
  58. }
  59.  
  60. .topbar img {
  61. margin-top: 7px;
  62. margin-left: 4px;
  63. padding: 6px;
  64. border: 1px solid #d4d4d4;
  65. height: 50px;
  66. width: 50px;
  67. }
  68.  
  69. .links {
  70. width: 270px;
  71. text-align: right;
  72. width: auto;
  73. height: 7px;
  74. text-transform: uppercase;
  75. margin: auto;
  76. margin-left: 80px;
  77. margin-top: -17px;
  78. }
  79.  
  80. .links a {
  81. width: 270px;
  82. font-family:'Merriweather Sans';
  83. padding: 0px;
  84. font-size: 7px;
  85. color: #b8b8b8;
  86. margin-top: -10px;
  87. }
  88.  
  89. .links a:hover {
  90. font-style: italic;
  91. text-decoration: none;
  92. -moz-transition: 0.2s ease-in;
  93. -webkit-transition: 0.2s ease-in;
  94. -o-transition: 0.2s ease-in;
  95. transition: 0.2s ease-in;
  96. opacity: 0.8;
  97. }
  98.  
  99. .stroke {
  100. margin-top:0px;
  101. width:100%;
  102. height:3px;
  103. float:left;
  104. }
  105.  
  106. .stroke2 {
  107. position: fixed;
  108. text-transform: uppercase;
  109. background-color: #fff;
  110. right: 10px;
  111. bottom: 19px;
  112. }
  113.  
  114. .stroke2 a {
  115. width: auto;
  116. height: 7px;
  117. padding: 3px;
  118. font-family: 'Merriweather Sans';
  119. font-size: 7px;
  120. letter-spacing: 1px;
  121. color: #7d7d7d;
  122. border: 4px double #d4d4d4;
  123. }
  124.  
  125. /**Blogroll defs. here; If you're unfamiliar with coding I advice not editing anything here as a slight change might cause your laptop to explode (no but really it could really mess up the layout)**/
  126.  
  127. .fullbox {
  128. background: #000;
  129. width: 690px;
  130. margin: auto;
  131. margin-top: 100px;
  132. }
  133.  
  134. h1 {
  135. font-family: 'Dancing Script';
  136. font-style:normal;
  137. font-size: 12px;
  138. letter-spacing: 2px;
  139. margin-top: 10px;
  140. margin-left: 76px;
  141. color: #323232;
  142. text-align: right;
  143. font-weight: normal;
  144. text-transform: lowercase;
  145. }
  146.  
  147. .boxtainer {
  148. margin: auto;
  149. width: 230px;
  150. height: 60px;
  151. float: left;
  152. position: relative;
  153. font-style: normal;
  154. color: #fafafa;
  155. font-size: 6px;
  156. letter-spacing: 2px;
  157. overflow: hidden;
  158. background: #fafafa;
  159. font-weight: normal;
  160. }
  161.  
  162. .boxtainer img {
  163. float: left;
  164. position: left;
  165. margin-left: 4px;
  166. margin-top: 5px;
  167. }
  168.  
  169. .boxtainer img:hover {
  170. -webkit-filter: grayscale(100%);
  171. -webkit-transition-duration: .20s;
  172. -moz-filter: grayscale(100%);
  173. -moz-transition-duration: .20s;
  174. -moz-opacity: 100;
  175. -o-filter: grayscale(100%);
  176. -o-transition-duration: .20s;
  177. transition-duration: .20s; opacity: 90;
  178. }
  179.  
  180. .urlbox {
  181. width: 184px;
  182. height: 5px;
  183. position: relative;
  184. font-family: 'Merriweather Sans';
  185. text-transform: uppercase;
  186. margin-left: 48px;
  187. margin-top: 5px;
  188. text-align: center;
  189. }
  190.  
  191. .urlbox:hover {
  192. font-style: italic;
  193. text-decoration: none;
  194. -moz-transition: 0.2s ease-in;
  195. -webkit-transition: 0.2s ease-in;
  196. -o-transition: 0.2s ease-in;
  197. transition: 0.2s ease-in;
  198. }
  199.  
  200.  
  201.  
  202. </style>
  203. </head>
  204.  
  205.  
  206. <body>
  207.  
  208. <!--These are my credits, leave intact-->
  209.  
  210. <div class="stroke2">
  211. <a href="http://msarden.tumblr.com/">Msarden.</a>
  212. </div>
  213.  
  214.  
  215.  
  216. <div class="topbar">
  217.  
  218.  
  219. <a href="/"><!--This is where you add the image, erase from here--><img src="https://31.media.tumblr.com/4efe4c64f94eb17f13558b69fc8146aa/tumblr_inline_n6ppi6pHsD1rbyhdm.png"/><!--to here, and insert your image url--></a>
  220.  
  221. <div class="links"> <!--top bar links, to add more, use format:
  222. <a href="InsertLinkHere">InsertTitleHere-->
  223. <a href="/">Link1.</a>
  224. <a href="/">Link2.</a>
  225. <a href="/">Link3.</a>
  226. <a href="/">Link4.</a>
  227. </div>
  228.  
  229. <div class="title"><!--Blog title, change from here-->
  230. <b>M</b>sarden's <b>B</b>log-<b>R</b>oll.<!--to here--></div>
  231.  
  232. <!--*ps: to get format in the preview just put <b>First letter</b>-->
  233.  
  234.  
  235. </div>
  236.  
  237.  
  238. <!-- You don't need to worry much from this point on, so don't bother yourself-->
  239.  
  240. <div class="fullbox">
  241.  
  242.  
  243. {block:Following}
  244. {block:Followed}
  245.  
  246. <div class="boxtainer">
  247. <a href="{FollowedURL}">
  248. <img src="{FollowedPortraitURL-40}" width="40px" align="left">
  249. </a>
  250.  
  251. <div class="urlbox">
  252. <a href="{FollowedURL}">
  253. <div style="background:#323232">{FollowedName}</div>
  254. </a>
  255.  
  256. <div class="stroke" style="background-color:#bfc0bf">
  257. </div>
  258. </div>
  259.  
  260. <h1>{FollowedTitle}</h1>
  261.  
  262. </div>
  263.  
  264. {/block:Followed}
  265. {/block:Following}
  266.  
  267.  
  268. </div>
  269. </body>
  270. </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!