Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Soft Theme (blogroll)

By: Ditasaur on Jun 10th, 2012  |  syntax: None  |  size: 6.79 KB  |  hits: 5,986  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!-- SOFT BLOGROLL THEME BY RAMYEONS // http://ramyeons.tumblr.com / http://hobakjeon.tumblr.com
  2.  
  3. ---------------------RULES--------------------------------
  4.  
  5. *DO NOT USE MY THEME CODES AS BASE CODES FOR YOUR OWN THEME
  6. *DO NOT CLAIM AS YOUR OWN OR I WILL HUNT YOU DOWN
  7. *DO NOT BREAK ANY RULES OR YOU WILL BE REPORTED
  8. *YOU MAY EDIT THIS THEME, BUT LEAVE THE CREDITS ALONE
  9. *DO NOT TAKE MY CREDITS OUT
  10.  
  11. ----------------------HOW TO CUSTOMIZE BLOGROLL---------------------------------
  12.                                  
  13.                                   HOW TO CHANGE THE SIDEBAR IMAGE
  14. To change the sidebar image, find this:
  15. http://static.tumblr.com/iuggpng/bpUm5fh56/side.png
  16. and replace it with whatever image you would like.
  17.  
  18.                                   HOW TO CHANGE THE SIDEBAR DESCRIPTION
  19. Find this:
  20. This is a list of the wonderful blogs im following ~
  21. Then replace it with whatever description you would like.
  22.  
  23.                                   HOW TO CHANGE THE BLOGROLL TITLE
  24. Find this:
  25. <div style="position:absolute; left:500px; top:45px;">Blogroll</div></div>
  26. Replace "Blogroll" with whatever title you would like. Max # of characters: 8 ~ 12.
  27.                                  
  28.                                   HOW TO CHANGE THE BACKGROUND IMAGE
  29. Find this (theres 2 of them) :
  30. http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png
  31. Replace it with whatever background img you would like to use.
  32.  
  33.                                   HOW TO CHANGE THE DESC AND BLOG URL'S COLORS
  34. DESC: Change the "white" in background-color:white; to a hex color code in #desc
  35. To change the color of the text, add color:HEX COLOR CODE HERE;
  36. To change the border color/remove it, change the #eee in border. To change the width of the border, chanhe the 1px to 0px or 5px, etc.
  37. BLOG URL: Same as the desc, but it is in the div #names
  38.  
  39.                                   HOW TO CHANGE THE TITLE:
  40. Change "Blogroll" in between <title></title>
  41.  
  42.                                   HOW TO CHANGE FONTS AND FONT SIZES:
  43. Find font-family and font-size and change them.
  44.  
  45.  
  46. ----------------------------CREDITS:-----------------------------
  47.  
  48. Image: http://icanchangemylife.tumblr.com
  49. Background: http://subtlepatterns.com/
  50.  
  51. -->
  52.  
  53.  
  54. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  55.  
  56. <head>
  57.  
  58. <title>Blogroll</title>
  59. <link rel="shortcut icon" href="{Favicon}">
  60. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  61.  
  62. <style type="text/css">
  63.  
  64.  
  65.  
  66. body {
  67.  
  68. background-image:url(http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png);
  69. color:#555;
  70.  background-repeat:repeat;
  71.  
  72.     background-attachment:fixed;
  73.  
  74. font-family:trebuchet ms;
  75. font-size:9px;
  76. text-transform:none;
  77.  
  78. }
  79.  
  80.  
  81.  
  82. @font-face {font-family: "print";src: url('http://static.tumblr.com/iuggpng/oQfm4mzne/princ___.ttf');}
  83.  
  84.  
  85.  
  86. a, a:link, a:active, a:visited {
  87. color: #555;
  88. text-decoration:none;
  89. border-bottom:0px dashed #fc8b65;
  90. padding-bottom:20px;
  91. -webkit-transition: all 0.8s ease-out;
  92. -moz-transition: all 0.8s ease-out;
  93. transition: all 0.8s ease-out;
  94.  
  95. }
  96.  
  97. a:hover {color:#888;
  98. border-bottom:1px dashed #fc8b65;
  99. padding-bottom:1px;
  100. -webkit-transition: all 0.8s ease-out;
  101. -moz-transition: all 0.8s ease-out;
  102. transition: all 0.8s ease-out;
  103.  
  104. }
  105.  
  106.  
  107.  
  108. #taemin {
  109. position:absolute;
  110. top:150px;
  111. left:400px;
  112. width:600px;
  113.  
  114. }
  115.  
  116. #pic {
  117.     margin-left:10px;
  118. margin-bottom:10px;
  119. float:left;
  120. z-index:-999;
  121. }
  122.  
  123. #pic:hover .pic {
  124.     -moz-border-radius:100px;
  125. border-radius:100px;
  126.     -webkit-transition: all 1.5s ease-out;
  127. -moz-transition: all 1.5s ease-out;
  128. transition: all 1.5s ease-out;
  129. }
  130.  
  131. .pic:hover {
  132.     -moz-border-radius:100px;
  133. border-radius:100px;
  134. -webkit-transition: all 1s ease-out;
  135. -moz-transition: all 1s ease-out;
  136. transition: all 1s ease-out;
  137. }
  138.  
  139. .pic {
  140.     -webkit-transition: all 0.8s ease-out;
  141. -moz-transition: all 0.8s ease-out;
  142. transition: all 0.8s ease-out;
  143. }
  144.  
  145. #pic:hover #names {
  146.     opacity:1;
  147.     -webkit-transition: all 0.8s ease-out;
  148. -moz-transition: all 0.8s ease-out;
  149. transition: all 0.8s ease-out;
  150.     }
  151.    
  152. #names {
  153.     z-index:999;
  154.     max-width:87px;
  155. min-width:87px;
  156. height:auto;
  157. overflow:hidden;
  158.     margin-top:-40px;
  159.     margin-left:-18px;
  160.     color:#aaa;
  161.     opacity:0;
  162.     text-align:center;
  163.     font-family:consolas;
  164.     font-size:8px;
  165.     text-transform:uppercase;
  166.     padding:3px;
  167.     letter-spacing:2px;
  168.     border-left:3px solid black;
  169.     border-right:3px solid black;
  170.     position:absolute;
  171.     background-color:#fff;
  172.     -webkit-transition: all 0.8s ease-out;
  173. -moz-transition: all 0.8s ease-out;
  174. transition: all 0.8s ease-out;
  175. }
  176.  
  177. #side {
  178.     position:fixed;
  179.     top:200px;
  180.     left:100px;
  181. }
  182.  
  183. #sidedesc {
  184.     position:absolute;
  185.     margin-top:10px;
  186.     margin-left:10px;
  187.     width:170px;
  188.     padding:5px;
  189.     opacity:.8;
  190.     border:1px solid #eee;
  191.     background-color:white;
  192. }
  193.  
  194. #nav {
  195.     display:inline block;
  196.     width:auto;
  197.     font-family:open sans;
  198.     font-size:20px;
  199.     float:left;
  200.     margin-top:-35px;
  201.     position:absolute;
  202.     letter-spacing:2px;
  203.     padding-bottom:20px;
  204.     border-bottom:0px dotted #aaa;
  205.     -webkit-transition: all 0.8s ease-out;
  206. -moz-transition: all 0.8s ease-out;
  207. transition: all 0.8s ease-out;
  208. }
  209.  
  210. #nav:hover {
  211.     border-bottom:1px dashed #aaa;
  212.     padding-bottom:1px;
  213.     -webkit-transition: all 0.8s ease-out;
  214. -moz-transition: all 0.8s ease-out;
  215. transition: all 0.8s ease-out;
  216. }
  217.  
  218. #taemin a:hover {
  219.     border:none;
  220. }
  221.  
  222. #tiffany {
  223.     position:fixed;
  224.     top:0px;
  225.     left:0px;
  226.     font-family:print;
  227.     font-size:50px;
  228.     letter-spacing:30px;
  229.     text-transform:uppercase;
  230.     background-image:url(http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo12_r1_250.png);
  231.     width:100%;
  232.     height:100px;
  233.     z-index:999;
  234.     }
  235.    
  236.     @font-face {font-family: "print";src: url('http://static.tumblr.com/iuggpng/oQfm4mzne/princ___.ttf');}
  237.  
  238.  
  239.  @font-face {font-family: "open sans";src: url('http://static.tumblr.com/iuggpng/jrXm0dlyf/opensans-condlight.ttf');}
  240.  
  241.  
  242. </style>
  243. </head>
  244. <body>
  245.  
  246. <div id="tiffany">
  247.  
  248. <div style="position:absolute; left:500px; top:45px;">Blogroll</div></div>
  249.  
  250.  
  251. <div id="side">
  252. <a href="/" id="nav">Go back</a>  
  253. <div style="margin-left:150px;"><a href="http://hobakjeon.tumblr.com" id="nav">Credit</a></div>
  254. <img src="http://static.tumblr.com/iuggpng/bpUm5fh56/side.png" width="200">
  255. <div id="sidedesc">This is a list of the wonderful blogs im following ~
  256. &nbsp;<a href="http://icanchangemylife.tumblr.com/" target="new">© image</a>
  257. </div>
  258.  
  259. </div>
  260.  
  261. <div id="taemin">
  262.  
  263.  
  264. {block:Following}
  265. {block:Followed}
  266.  
  267. <div id="pic"><a href="{FollowedURL}" target="new"><img src="{FollowedPortraitURL-64}" class="pic"></a>
  268. <div id="names">{FollowedName}</div>
  269. </div>
  270. {/block:Followed}
  271.  
  272. {/block:Following}
  273.  
  274. </div>
  275.  
  276. </body>
  277.  
  278. </html>
create a new version of this paste RAW Paste Data