API tools faq
paste
Advertisement
mogimochi

Multi-Page [02] Suikomu

mogimochi
Jul 26th, 2014
16,285
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Multi-Page [02] Suikomu
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim page as your own.
  14. 5. Do not redistribute.
  15.  
  16. --------------------------------------------------------------------------
  17. Please look out for notes throughout the code
  18. to help you in customizing the page!!
  19. --------------------------------------------------------------------------
  20.  
  21. --------------------------------------------------- UPDATE VER 220914 -->
  22.  
  23. <title>{title}</title>
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25. <link rel="shortcut icon" href="{Favicon}" />
  26.  
  27. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  28. <script type="text/javascript" src="https://static.tumblr.com/lv6casp/aCNm74ixy/stepcarousel.js">
  29. /***********************************************
  30. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  31. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  32. * This notice must stay intact for legal use
  33. ***********************************************/
  34. </script>
  35.  
  36. <script type="text/javascript">
  37. stepcarousel.setup({
  38. galleryid: 'mygallery', //id of carousel DIV
  39. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  40. panelclass: 'panel', //class of panel DIVs each holding content
  41. autostep: {enable:false, moveby:1, pause:3000},
  42. panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  43. defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://31.media.tumblr.com/90af5f6d84916b1a64adb255f91c81e3/tumblr_inline_n9b9ytX3Z51rshr70.png', -80, 120], rightnav: ['https://31.media.tumblr.com/90af5f6d84916b1a64adb255f91c81e3/tumblr_inline_n9b9ytX3Z51rshr70.png', 70, 120]},
  44. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  45. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  46. })
  47. </script>
  48.  
  49. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  50. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  51. <script>
  52. (function($){
  53. $(document).ready(function(){
  54. $("a[title]").style_my_tooltips({
  55. tip_follows_cursor:true,
  56. tip_delay_time:0,
  57. tip_fade_speed:300,
  58. attribute:"title"
  59. });
  60. });
  61. })(jQuery);
  62. </script>
  63.  
  64. <script type="text/javascript" src="https://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  65. <script src="https://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  66. <script type="text/javascript">
  67. $(window).load(function () {
  68. $('#wander').masonry({
  69. itemSelector : ".destination",
  70. },
  71. function() { $('#wander').masonry({ appendedContent: $(this) }); }
  72. );
  73. });
  74. </script>
  75.  
  76. <style type="text/css">
  77.  
  78. @font-face { font-family: "pix"; src: url('https://dl.dropboxusercontent.com/s/68bdyrv4fsayhg8/04B_03__.TTF'); }
  79. @font-face { font-family: "bit"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  80.  
  81.  
  82.  
  83. /** SCROLLBAR CUSTOMIZATION *********************************************/
  84.  
  85. ::-webkit-scrollbar { width: 7px; }
  86. ::-webkit-scrollbar-track-piece { background-color: transparent; }
  87. ::-webkit-scrollbar-thumb:vertical {
  88. width: 1px;
  89. background-color: #e1998b; /**scrollbar colour**/
  90. border-top: 4px solid #fff; /**scrollbar surrounding colour**/
  91. border-right: 3px solid #fff; /**scrollbar surrounding colour**/
  92. border-bottom: 4px solid #fff; /**scrollbar surrounding colour**/
  93. border-left: 3px solid #fff; /**scrollbar surrounding colour**/
  94. }
  95.  
  96.  
  97. /** TEXT SELECTION CUSTOMIZATION ***************************************/
  98.  
  99. ::selection {background-color: #f7bba1;color: #fff;}
  100. ::-moz-selection {background-color: #f7bba1;color: #fff;}
  101. ::-webkit-selection {background-color: #f7bba1;color: #fff;}
  102.  
  103.  
  104. /** TOOLTIPS CUSTOMIZATION **/
  105.  
  106. #s-m-t-tooltip {
  107. padding: 3px 6px;
  108. margin: 20px 14px 7px 10px;
  109. letter-spacing: 1px;
  110. text-transform: uppercase;
  111. z-index: 999;
  112. color: #fff; /** change the text color **/
  113. background-color: #000; /** background color **/
  114. font-family: courier new; /** font **/
  115. font-size: 8px; /** font size **/
  116. }
  117.  
  118. body {
  119. background-color: #fff;
  120. background-image: url(http://33.media.tumblr.com/7cb8e3b3ec9697ad7ddd73a84ed50152/tumblr_mromkr3Jid1qzc8vuo7_1280.jpg); /**replace the green image link with your own background image link [between the parenthesis]**/
  121. background-size: cover;
  122. background-attachment: fixed;
  123. margin: 0;
  124. word-wrap: break-word;
  125. }
  126. a { text-decoration:none; }
  127.  
  128.  
  129. /** MAIN WINDOW CUSTOMIZATION *******************************************/
  130.  
  131. #main {
  132. margin-top: 90px;
  133. width: 590px;
  134. height: 405px;
  135. padding: 25px;
  136. background-color: rgba(255,255,255,0.3); /** 0.3 is the opacity for the main window background **/
  137. border: 1px solid rgba(255,255,255,0.4); /** 0.4 is the opacity for the main window border **/
  138. }
  139.  
  140. .mainimg {
  141. height: 315px;
  142. width: 120px;
  143. display: block;
  144. float: left;
  145. }
  146.  
  147.  
  148. /** NAVIGATION CUSTOMIZATION ********************************************/
  149.  
  150. .navi {
  151. background-color: #fff; /**background colour of the page nav**/
  152. padding: 20px 20px 20px 30px;
  153. border-left: 50px solid #f5a1a5; /**the originally pink box with the cake in it**/
  154. width: 490px;
  155. font-size: 8px;
  156. text-align: left;
  157. letter-spacing: 3px;
  158. text-transform: uppercase;
  159. font-family: pix;
  160. height: 8px;
  161. }
  162.  
  163. .navi a {
  164. color: #ccc;/**text colour of the page nav**/
  165. margin-right: 8px;
  166. width: 73px;
  167. display: block;
  168. float: left;
  169. text-align: center;
  170. }
  171.  
  172. .cadet {
  173. color: #f5a1a5;/**this should be the same colour as the colour on line 152! (the originally pink box colour)**/
  174. position: absolute;
  175. font-size: 20px;
  176. margin: 13px 47px;
  177. }
  178.  
  179. .favi {
  180. width: 16px;
  181. float: left;
  182. margin: 15px 20px 10px 18px;
  183. }
  184.  
  185.  
  186. /** CAROUSEL CUSTOMIZATION (RECOMMENDED: DO NOT TOUCH!)**/
  187.  
  188. .stepcarousel{
  189. position:relative;
  190. width:550px;
  191. height: 315px;
  192. }
  193.  
  194. .stepcarousel .belt{
  195. position:absolute;
  196. left:0px;
  197. top:0px;
  198. }
  199.  
  200. .stepcarousel .panel{
  201. float:left;
  202. overflow:hidden;
  203. width:550px;
  204. }
  205.  
  206. #mygallery-paginate {
  207. position: absolute;
  208. width: 550px;
  209. opacity: 0.5;
  210. margin: -10px 0;
  211. }
  212.  
  213.  
  214. /** MAIN CONTENT CUSTOMIZATION ******************************************/
  215. /** This is where the styling for all your about boxes, tag boxes, blogroll, etc goes. **/
  216.  
  217. #mcontent {
  218. background-color: #f3f3f3;/**main background colour**/
  219. padding: 20px;
  220. height: 315px;
  221. width: 550px;
  222. overflow: hidden;
  223. }
  224.  
  225.  
  226.  
  227. /**** ABOUT ME SECTION CUSTOMIZATION ************************************/
  228.  
  229. .quote {
  230. background-color: #c3dac3; /**quote speech bubble background**/
  231. color: #fff; /**quote text colour**/
  232. font-family: pix;
  233. font-size: 8px;
  234. letter-spacing: 1px;
  235. width: 400px;
  236. float: right;
  237. padding: 15px 10px;
  238. height: 32px;
  239. }
  240. .qt {
  241. color: #c3dac3;/**this must be the same colour as on line 218!! (the quote speech bubble background)**/
  242. font-size: 20px;
  243. position: absolute;
  244. margin: -5px -20px;
  245. }
  246.  
  247. .bio {
  248. font-family: bit;
  249. font-size: 10px;
  250. float: right;
  251. padding: 15px;
  252. width: 390px;
  253. text-align: justify;
  254. height: 213px;
  255. overflow: auto;
  256. margin-top: 10px;
  257. background-color: #ffffff; /**biography background**/
  258. color: #555555; /**biography text**/
  259. }
  260.  
  261. .bio b,strong {
  262. font-weight: 400;
  263. color: #f88b8d; /**biography bold text**/
  264. }
  265.  
  266. .bio i,em {
  267. color: #aaaaaa; /**biography italic text**/
  268. }
  269.  
  270. .bio a {
  271. color: #b8cfc1;/**biography links**/
  272. text-decoration: underline;
  273. }
  274.  
  275. .bio a:hover {
  276. color: #aaaaaa;/**biography links hover**/
  277. }
  278.  
  279.  
  280.  
  281. /**** NAVIGATION/TAGSLIST CUSTOMIZATION ********************************/
  282.  
  283. #wander {
  284. font-family: bit;
  285. font-size: 10px;
  286. float: right;
  287. width: 430px;
  288. text-align: justify;
  289. height: 315px;
  290. overflow: auto;
  291. }
  292.  
  293. .destination {
  294. margin-left: 10px;
  295. margin-bottom: 10px;
  296. width: 197px;
  297. float: left;
  298. }
  299.  
  300. .category {
  301. font-size: 10px;
  302. font-family: courier new;
  303. width: 177px;
  304. padding: 6px 10px;
  305. text-align: center;
  306. text-transform: uppercase;
  307. letter-spacing: 1px;
  308. color: #fff; /**category text colour**/
  309. }
  310. #ca { background-color: #c3dac3; }/**category background colour 1**/
  311. #cb { background-color: #fabcb2; }/**category background colour 2**/
  312. #cc { background-color: #a7c0ac; }/**category background colour 3**/
  313.  
  314. .tag {
  315. margin-top: 4px;
  316. background-color: #fff; /**tag background colour**/
  317. color: #aaa;/**tag text colour**/
  318. padding: 4px 10px;
  319. width: 177px;
  320. transition: 0.6s;
  321. }
  322.  
  323. .taga {
  324. color: #ff5b85; /**tag arrowhead pointer colour**/
  325. margin-right: 6px;
  326. }
  327.  
  328. .tag:hover {
  329. padding: 4px 10px 4px 20px;
  330. width: 167px;
  331. }
  332.  
  333.  
  334.  
  335. /***** BLOGROLL CUSTOMIZATION ******************************************/
  336.  
  337. #followingcon {
  338. float: right;
  339. width: 430px;
  340. height: 315px;
  341. overflow: auto;
  342. }
  343. .followicon {
  344. border-radius: 1000px;
  345. padding: 8px;
  346. margin: 0 2px 5px 2px;
  347. background-color: #ffffff;/**following blog icon background**/
  348. border: 1px solid #eee;/**following blog icon border**/
  349. }
  350.  
  351.  
  352.  
  353. /**** FAQ/ASKBOX CUSTOMIZATION *****************************************/
  354.  
  355. #faqcon {
  356. float: right;
  357. width: 430px;
  358. height: 315px;
  359. overflow: auto;
  360. }
  361.  
  362. .faq {
  363. float: right;
  364. width: 383px;
  365. background-color: #ffffff;/**faq question background colour**/
  366. color: #444444;/**faq question text colour**/
  367. text-align: left;
  368. font-family: bit;
  369. font-size: 10px;
  370. padding: 10px;
  371. margin-right: 10px;
  372. margin-bottom: 10px;
  373. }
  374.  
  375. .faq b,strong {
  376. background-color: #a1afa1;/**faq question number background colour**/
  377. color: #fff;/**faq question number text colour**/
  378. padding: 2px 4px;
  379. font-weight: 400;
  380. margin-right: 3px;
  381. }
  382.  
  383. .faq blockquote {
  384. margin: 5px;
  385. padding: 2px 10px;
  386. border-left: 1px solid #ddd;/**faq answer blockquote**/
  387. color: #777;/**faq answer text**/
  388. }
  389.  
  390. .faq blockquote a {
  391. text-decoration: underline;
  392. color: #ffb7ac;/**faq answer links**/
  393. }
  394.  
  395. .faq blockquote a:hover {
  396. color: #ddd;/**faq answer links hover**/
  397. }
  398.  
  399. .faq blockquote b,strong {
  400. background-color: #fff;/**faq question background colour (same as line 363)**/
  401. color: #e25f85;/**faq answer bold text**/
  402. padding: 0;
  403. font-weight: 400;
  404. }
  405.  
  406. .faq blockquote i,em {
  407. color: #aaaaaa;/**faq answer italic text**/
  408. }
  409.  
  410. .askbox {width: 405px;}
  411.  
  412.  
  413. /** please do not touch or edit the following **/
  414.  
  415. #credit {
  416. background-color: rgba(255,255,255,0.3);
  417. border: 1px solid rgba(255,255,255,0.4);
  418. font-family: pix;
  419. font-size: 8px;
  420. text-transform: uppercase;
  421. letter-spacing: 1px;
  422. color: #000;
  423. position: fixed;
  424. bottom: 10px;
  425. right: 10px;
  426. padding: 3px 6px;
  427. }
  428.  
  429.  
  430. {CustomCSS}
  431.  
  432. </style>
  433. </head>
  434. <body>
  435.  
  436. <center>
  437.  
  438.  
  439. <div id="main">
  440.  
  441. <a href="/" title="return to blog"><img class="favi" src="https://31.media.tumblr.com/7268288f89b276f47de05e9aefb1fc17/tumblr_inline_n99krlrZ3L1rshr70.png"></a>
  442. <div class="cadet">▶</div>
  443.  
  444.  
  445. <div class="navi">
  446.  
  447. <!--page navigation titles-->
  448.  
  449. <a href="/">about me</a><!--you can change 'about me' to whatever you want your bio page to be called in that main page navigation-->
  450. <a href="/">wander</a><!--change wander for the tagslist title-->
  451. <a href="/">blogroll</a><!--change blogroll for the blogroll title-->
  452. <a href="/">whisper</a><!--change whisper for the faq+askbox title-->
  453.  
  454. <div align="left"><p id="mygallery-paginate">
  455. <img src="https://31.media.tumblr.com/71a9bf10018404a1fd79b2a1a416749f/tumblr_inline_n9b9c06WFk1rshr70.png" data-over="https://31.media.tumblr.com/7b8a56e2d611190692a2c1663cb31d5e/tumblr_inline_n9b9boeGms1rshr70.png" data-select="https://31.media.tumblr.com/7b8a56e2d611190692a2c1663cb31d5e/tumblr_inline_n9b9boeGms1rshr70.png" data-moveby="1" /></p></div>
  456.  
  457. </div>
  458.  
  459.  
  460.  
  461. <div id="mcontent">
  462.  
  463. <div id="mygallery" class="stepcarousel">
  464. <div class="belt">
  465.  
  466.  
  467. <!---------------------------- A B O U T -------------------------------->
  468. <div class="panel">
  469.  
  470. <img class="mainimg" src="https://31.media.tumblr.com/9f11f4ecdf0e1a76a34025289e83a1ec/tumblr_inline_n9b0w8Aiqm1rshr70.jpg">
  471. <!-- Replace the link in between the "apostrophes" with your own image link. The image should be 120px by 315px! -->
  472.  
  473. <div class="quote">
  474. <div class="qt">◢</div>
  475. <!------- TYPE YOUR QUOTE HERE ------------------------------------------>
  476. Your quote should be 4 lines long. It doesn't have to be a quote either, it could be a greeting to readers.
  477.  
  478. </div>
  479.  
  480. <div class="bio">
  481.  
  482. <!------------ DELETE THE BELOW TEXT AND TYPE YOUR BIO HERE ------------->
  483.  
  484. Hello! You are viewing <a href="http://yukoki.tumblr.com">yukoki</a>'s <b>Multi-Page [02]</b>, by the name of <i>Suikomu</i> or 吸い込む (it means 'inhale'). This page comes with a space for an about me section (which you're currently viewing), a tagslist/navigation section, a blogroll, and an FAQ page with the ask box below it.</p>
  485. <p>The <b>about section</b> comes with a quote and a bio section. The quote <i>must</i> be 4 lines long. The bio section can be as long as you'd like, and a scrollbar appears when it gets too long.</p>
  486. <p>The <b>'wander'</b> section is your navigation/tags section. Add a category, and the tags go underneath it. You can have <i>three</i> different category background colours!</p>
  487. <p>The <b>blogroll</b> section obviously displays your blogroll, or all the people whom you follow.</p>
  488. <p>And <b>whisper</b> brings you to your faq+ask box page! You can add as many faq questions as you'd like. Keep in mind that you <i>don't</i> have to retain the same format I have currently up for how the faq might look -- Feel free to go crazy and do whatever you'd like. Please note that for your ask box to work, you <b>do</b> have to key in your url in the appropriate area!</p>
  489. <p>Content credits go to <a href="http://maruti-bitamin.tumblr.com/">maruti-bitamin</a>. Background by <a href="http://yukoki.tumblr.com/post/92811591432/victor-bykov">Victor Bykov</a>. Made with the help of <a href="http://str-wrs.tumblr.com/post/47193897583/tutorial-sliding-viewer-live-preview">str-wrs</a>' sliding viewer tutorial!</p>
  490.  
  491.  
  492. </div><!--biography-->
  493. </div><!--panel (about)-->
  494.  
  495.  
  496.  
  497.  
  498. <!--------------------------- W A N D E R -------------------------------->
  499.  
  500. <div class="panel">
  501.  
  502. <img class="mainimg" src="https://31.media.tumblr.com/907828daf3c88fb7a01ef2f97f7be269/tumblr_inline_n9b0w5MxcF1rshr70.jpg">
  503. <!-- Replace the link in between the "apostrophes" with your own image link. The image should be 120px by 315px! -->
  504.  
  505. <div id="wander">
  506.  
  507. <!--
  508.  
  509. The basic tag box should look like the following:
  510.  
  511. <div class="destination">
  512. <div class="category" id="ca">woodland</div>
  513. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  514. willow's hill
  515. </div></a>
  516. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  517. enchanted woods
  518. </div></a>
  519. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  520. silent forest
  521. </div></a>
  522. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  523. druid's hollow
  524. </div></a>
  525. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  526. evergreen orchard
  527. </div></a>
  528. </div>
  529.  
  530. line 509: 'woodland' is where your category should go.
  531. <div class="category" id="**ca**">: the ca surrounded by the
  532. **asterisks** can be changed with cb and cc to have more
  533. category colours!
  534.  
  535. line 510 - 512: how a tag link should look like. Put in the name of the tag after /tagged/. The second line (511) is the line that will be dsplayed as the tag.
  536.  
  537. -->
  538.  
  539. <div class="destination">
  540. <div class="category" id="ca">woodland</div>
  541. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  542. willow's hill
  543. </div></a>
  544. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  545. enchanted woods
  546. </div></a>
  547. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  548. silent forest
  549. </div></a>
  550. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  551. druid's hollow
  552. </div></a>
  553. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  554. evergreen orchard
  555. </div></a>
  556. </div><!--destination-->
  557.  
  558. <div class="destination">
  559. <div class="category" id="cb">rivers</div>
  560. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  561. pisces' way
  562. </div></a>
  563. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  564. river of regrets
  565. </div></a>
  566. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  567. marina waters
  568. </div></a>
  569. </div><!--destination-->
  570.  
  571. <div class="destination">
  572. <div class="category" id="cc">mountains</div>
  573. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  574. mt. sophia
  575. </div></a>
  576. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  577. elves' caldera
  578. </div></a>
  579. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  580. argentum range
  581. </div></a>
  582. </div><!--destination-->
  583.  
  584. <div class="destination">
  585. <div class="category" id="ca">plains</div>
  586. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  587. amaranthine field
  588. </div></a>
  589. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  590. cavallo plain
  591. </div></a>
  592. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  593. calendula spring
  594. </div></a>
  595. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  596. primula field
  597. </div></a>
  598. </div><!--destination-->
  599.  
  600. <div class="destination">
  601. <div class="category" id="cb">tunnels</div>
  602. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  603. dwarven mines
  604. </div></a>
  605. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  606. copper tunnels
  607. </div></a>
  608. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  609. rillanon's burrow
  610. </div></a>
  611. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  612. allegare tunnel
  613. </div></a>
  614. </div><!--destination-->
  615.  
  616. <div class="destination">
  617. <div class="category" id="cc">settlements</div>
  618. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  619. rifle's cross
  620. </div></a>
  621. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  622. hachidori village
  623. </div></a>
  624. <a href="/tagged/"><div class="tag"><span class="taga">></span>
  625. farfallae
  626. </div></a>
  627. </div><!--destination-->
  628.  
  629. </div><!--wander-->
  630.  
  631. </div><!--panel (wander)-->
  632.  
  633.  
  634. <!-------------------------- B L O G R O L L ---------------------------->
  635.  
  636. <div class="panel">
  637.  
  638. <img class="mainimg" src="https://31.media.tumblr.com/5b7c00a6a12604c805cbaac17c88d1ae/tumblr_inline_n9b75okjNC1rshr70.jpg">
  639. <!-- Replace the link in between the "apostrophes" with your own image link. The image should be 120px by 315px! -->
  640.  
  641. <div id="followingcon">
  642. {block:Following}
  643. {block:Followed}
  644. <a href="{FollowedURL}" title="{FollowedName}"><img class="followicon" src="{FollowedPortraitURL-48}"></a>
  645. {/block:Followed}
  646. {/block:Following}
  647. </div><!--followingcon-->
  648.  
  649. </div><!--panel(blogroll)-->
  650.  
  651.  
  652.  
  653. <!---------------------------- W H I S P E R ---------------------------->
  654.  
  655. <div class="panel">
  656. <img class="mainimg" src="https://31.media.tumblr.com/9787a29acd3cc5aee9e2a8bfaf87c030/tumblr_inline_n9ba1i0QFO1rshr70.jpg">
  657. <!-- Replace the link in between the "apostrophes" with your own image link. The image should be 120px by 315px! -->
  658.  
  659. <div id="faqcon">
  660.  
  661. <!-- An example:
  662.  
  663. <div class="faq">
  664. <b>01</b> Can you tell me about this page? </p>
  665. <blockquote>
  666. The page's name is <b>Multi-Page [02] Unmei</b>. It features an about me section, a navigate/tagslist section, a blogroll, and an faq+ask box.
  667. </blockquote>
  668. </div>
  669.  
  670. Or you can just type whatever you'd like. :>
  671.  
  672. -->
  673.  
  674. <div class="faq">
  675. <b>01</b> Can you tell me about this page?</p>
  676. <blockquote>The page's name is <b>Multi-Page [02] Unmei</b>. It features an about me section, a navigate/tagslist section, a blogroll, and an faq+ask box.</blockquote>
  677. </div>
  678.  
  679. <div class="faq">
  680. <b>02</b> Where can I get the code for it?</p>
  681. <blockquote>From <a href="">this</a> pastebin paste. If you can't access it due to pastebin being blocked, send me a message and I'll send you a different code.</blockquote>
  682. </div>
  683.  
  684. <div class="faq">
  685. <b>03</b> How do I install this page?</p>
  686. <blockquote>At the paste, click the little clipboard icon and copy the entire code to your clipboard. Next, go to your customize page, scroll down and click <b>+ Create a new page</b>. Set the page type to <i>Custom CSS</i>, and use ctrl+v to paste down the copied code. [Visit <a href="http://yukoki.tumblr.com/tut1">here</a> for more detailed instructions.</blockquote>
  687. </div>
  688.  
  689. <div class="faq">
  690. <b>04</b> The art used is so nice! Who is the artist?</p>
  691. <blockquote><a href="http://maruti-bitamin.tumblr.com/">maruti-bitamin</a> of tumblr!</blockquote>
  692. </div>
  693.  
  694. <div class="askbox">
  695. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/***.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  696.  
  697. <!--------------------------- EXTREMELY IMPORTANT: YOUR ASK BOX ----------
  698.  
  699. You need to fill in your own URL to get it to be sent correctly.
  700. In the SECOND line of the above block of text, you should see ***.tumblr.com. You have to replace the *** with your url, or it the ask box won't work at all!
  701.  
  702. ------------------------------------------------------------------------->
  703.  
  704. </div><!--askbox-->
  705.  
  706. </div><!--faqcon-->
  707. </div><!--panel(faq)-->
  708. </div>
  709. </div><!--mcontent-->
  710. </div><!--main-->
  711.  
  712.  
  713. </center>
  714.  
  715. <a href="http://yukoki.tumblr.com"><div id="credit">yukoki</div></a>
  716.  
  717. </body>
  718. </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!