API tools faq
paste
Advertisement
thewisepotato

Google All-in-One Page

thewisepotato
Apr 7th, 2014
981
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.12 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  6.  
  7. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  8.  
  9. <!--SCRIPTS-->
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12. $('#links a').click(function(){
  13. $('#links a').removeClass('cur');
  14. $(this).addClass('cur');
  15. });
  16. $('.ab').click(function(){
  17. $('.con').css('left','-100%');
  18. $('#about').css('left','0');
  19. });
  20. $('.br').click(function(){
  21. $('.con').css('left','-100%');
  22. $('#blogroll').css('left','0');
  23. });
  24. $('.na').click(function(){
  25. $('.con').css('left','-100%');
  26. $('#navi').css('left','0');
  27. });
  28. $('.fa').click(function(){
  29. $('.con').css('left','-100%');
  30. $('#faq').css('left','0');
  31. });
  32. $('#search a').click(function(){
  33. window.location.href = 'http://{Name}.tumblr.com/search/' + $('#search textarea').val();
  34. });
  35. });
  36. </script>
  37.  
  38. <style type="text/css">
  39.  
  40. /*----GENERAL----*/
  41.  
  42. body {
  43. font-family: Arial;
  44. font-size: 0.75em;
  45. padding: 0;
  46. margin: 0;
  47. background-color: white; /*CHANGE THE BACKGROUND COLOR*/
  48. background-image:url();/*ADD A BACKGROUND IMAGE URL INSIDE THE PARENTHESES*/
  49. }
  50.  
  51. img {
  52. max-width: 100%;
  53. }
  54.  
  55. table {
  56. font-size: 1em;
  57. }
  58.  
  59. a {
  60. text-decoration: none;
  61. color: #1e0fbe; /*CHANGE THE COLOR OF LINKS*/
  62. }
  63.  
  64. a:hover {
  65. text-decoration: underline;
  66. }
  67.  
  68. .sh {
  69. -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  70. -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  71. box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  72. }
  73.  
  74. h1, h2, h3, h4, h5, h6 {
  75. font-weight: normal;
  76. }
  77.  
  78. h2 {
  79. font-size: 1.33em;
  80. margin-bottom: 0;
  81. }
  82.  
  83. .con {
  84. -webkit-transition: all 0.5s ease;
  85. -moz-transition: all 0.5s ease;
  86. -ms-transition: all 0.5s ease;
  87. -o-transition: all 0.5s ease;
  88. transition: all 0.5s ease;
  89. }
  90.  
  91. blockquote {
  92. border-left: solid 1px black;
  93. padding-left:15px;
  94. margin-left:15px;
  95. }
  96.  
  97. /*--------*/
  98.  
  99. /*----TOP BAR----*/
  100.  
  101. #tbar {
  102. height: 45px;
  103. width: 100%;
  104. background-color: #f1f1f1; /*CHANGE TOP BAR BACKGROUND COLOR*/
  105. padding-top: 15px;
  106. position: relative;
  107. }
  108.  
  109. #tbar span.about {
  110. position: absolute;
  111. top: 50%;
  112. right: 15px;
  113. cursor: default;
  114. margin-top: -8px;
  115. font-size: 1.1em;
  116. color:black; /*CHANGE THE COLOR OF YOUR URL IN THE TOP RIGHT CORNER*/
  117. }
  118.  
  119. /*----SEARCH BAR----*/
  120.  
  121. #search {
  122. height: 30px;
  123. margin-left: 128px;
  124. }
  125.  
  126. #search textarea {
  127. background-color: #fff;
  128. height: 24px;
  129. width: 50%;
  130. font-size: 1.25em;
  131. font-family: Arial;
  132. padding-left: 5px;
  133. line-height: 24px;
  134. }
  135.  
  136. /*--------*/
  137.  
  138. /*----LINKS----*/
  139.  
  140. #lbox {
  141. border-bottom: solid 1px #ebebeb;
  142. height: 57px;
  143. padding: 0;
  144. width: 100%;
  145. }
  146.  
  147. #links {
  148. position: absolute;
  149. left: 123px;
  150. top: 60px;
  151. }
  152.  
  153. #links a {
  154. display: inline-block;
  155. padding: 20px 10px;
  156. text-transform: capitalize;
  157. border-bottom: solid 3px transparent;
  158. text-decoration: none;
  159. color: #777; /*CHANGE THE COLOR OF THE NAVIGATION LINKS*/
  160. margin: 0 5px;
  161. }
  162.  
  163. #links a.cur {
  164. font-weight: bold;
  165. border-bottom: solid 3px #dd4b39; /*CHANGE THE BOTTOM BORDER COLOR OF THE SELECTED LINK*/
  166. color: #dd4b39 !important;/*CHANGE THE FONT COLOR OF THE SELECTED LINK*/
  167. }
  168.  
  169. #links a:hover {
  170. color: black;/*CHANGE THE HOVER COLOR OF THE NAVIGATION LINKS*/
  171. }
  172.  
  173. /*--------*/
  174.  
  175. /*----ABOUT SECTION----*/
  176.  
  177. #about {
  178. width: 100%;
  179. position: absolute;
  180. top: 118px;
  181. left: 0;
  182. z-index: 99999;
  183. overflow-x: hidden;
  184. height: 425px;
  185. }
  186.  
  187. #about .maint {
  188. position: absolute;
  189. top: 50px;
  190. left: 128px;
  191. height: 305px;
  192. width: 505px;
  193. background-color: white; /*CHANGE THE BACKGROUND COLOR OF THE MAIN ABOUT BOX*/
  194. padding: 25px;
  195. overflow: auto;
  196. text-align: justify;
  197. color:black; /*CHANGE THE FONT COLOR OF THE MAIN ABOUT BOX*/
  198. }
  199.  
  200. #about .ffile {
  201. position: absolute;
  202. top: 50px;
  203. left: 703px;
  204. background-color: white; /*CHANGE THE BACKGROUND COLOR OF THE FACT FILE*/
  205. height: 130px;
  206. width: 430px;
  207. padding: 15px;
  208. }
  209.  
  210. #about .ffile div {
  211. width: 280px;
  212. height:117px;
  213. overflow:auto;
  214. float: left;
  215. }
  216.  
  217. #about .ffile td:first-child {
  218. color: #1e0fbe; /*CHANGE THE COLOR OF THE FACT FILE LABELS*/
  219. vertical-align: top;
  220. }
  221.  
  222. #about .ffile td:last-child {
  223. color: #9d9d9d; /*CHANGE THE COLOR OF THE FACT FILE TEXT*/
  224. vertical-align: top;
  225. }
  226.  
  227. #about .ffile h2 {
  228. margin-top: -5px;
  229. margin-bottom: 5px;
  230. color:black; /*CHANGE THE TITLE COLOR OF THE FACT FILE*/
  231. }
  232.  
  233. #about .ffile img {
  234. position: absolute;
  235. top: 15px;
  236. right: 15px;
  237. height: 130px;
  238. width: 130px;
  239. }
  240.  
  241. #about img.sh {
  242. position: absolute;
  243. top: 230px;
  244. left: 703px;
  245. height: 175px;
  246. width: 460px;
  247. }
  248.  
  249. /*--------*/
  250.  
  251. /*----BLOGROLL SECTION----*/
  252.  
  253. #blogroll {
  254. width: 100%;
  255. position: absolute;
  256. top: 118px;
  257. left: -100%;
  258. background-color: #f1f1f1; /*CHANGE THE BLOGROLL BACKGROUND COLOR*/
  259. text-align: center;
  260. overflow-x: hidden;
  261. padding-bottom: 40px;
  262. }
  263.  
  264. #blogroll a {
  265. display: inline-block;
  266. position: relative;
  267. margin: 15px 0 0 15px;
  268. z-index: 9;
  269. }
  270.  
  271. #blogroll a:last-of-type {
  272. margin-bottom: 15px;
  273. }
  274.  
  275. #blogroll a span {
  276. display: inline-block;
  277. position: absolute;
  278. bottom: 0;
  279. left: 0;
  280. background-color: rgba(0,0,0,0.6); /*CHANGE THE BACKGROUND COLOR OF THE BLOG NAME*/
  281. color: #d6d6d6; /*CHANGE THE FONT COLOR OF THE BLOG NAME*/
  282. width: 100%;
  283. font-size: 0.8em;
  284. padding: 2px 0;
  285. opacity: 0;
  286. word-break: break-all;
  287. z-index: 9;
  288. }
  289.  
  290. #blogroll a:hover span {
  291. opacity: 1;
  292. }
  293.  
  294. /*--------*/
  295.  
  296. /*----NAVIGATION SECTION----*/
  297.  
  298. #navi {
  299. width: 100%;
  300. position: absolute;
  301. top: 118px;
  302. left: -100%;
  303. overflow-x: hidden;
  304. display: inline-block;
  305. }
  306.  
  307. #navi div {
  308. padding: 10px;
  309. margin-left: 128px;
  310. text-align: justify;
  311. color: #2518b4; /*CHANGE THE COLOR OF THE NAVIGATION HEADINGS*/
  312. }
  313.  
  314. #navi a {
  315. font-weight: normal;
  316. color: #444; /*CHANGE THE COLOR OF THE NAVIGATION LINKS*/
  317. }
  318.  
  319. /*--------*/
  320.  
  321. /*----FAQ----*/
  322.  
  323. #faq {
  324. width: 100%;
  325. position: absolute;
  326. top: 118px;
  327. left: -100%;
  328. overflow-x: hidden;
  329. display: inline-block;
  330. color: #444; /*CHANGE THE FONT COLOR OF THE FAQ*/
  331. padding-bottom: 50px;
  332. height:auto;
  333. }
  334.  
  335. #faq div:first-of-type {
  336. position: absolute;
  337. top: 55px;
  338. left: 675px;
  339. height: 190px;
  340. width: 410px;
  341. padding: 25px;
  342. }
  343.  
  344. #faq div:last-of-type {
  345. position: absolute;
  346. top: 315px;
  347. left: 675px;
  348. height: 500px;
  349. width: 410px;
  350. padding: 25px;
  351. }
  352.  
  353. #faq h1 {
  354. margin-left: 128px;
  355. width: 500px;
  356. }
  357.  
  358. #faq h1:first-of-type {
  359. margin-top: 55px;
  360. }
  361.  
  362. #faq h1:nth-of-type(1n) {
  363. color: #075f23; /*CHANGE THE FIRST FAQ COLOR*/
  364. }
  365.  
  366. #faq h1:nth-of-type(2n) {
  367. color: #609; /*CHANGE THE SECOND FAQ COLOR*/
  368. }
  369.  
  370. #faq h1:nth-of-type(3n) {
  371. color: #2518b4; /*CHANGE THE THIRD FAQ COLOR*/
  372. }
  373.  
  374. #faq blockquote {
  375. margin-left: 143px;
  376. border-left: solid 1px black;
  377. padding-left: 15px;
  378. text-align: justify;
  379. width: 484px;
  380. }
  381.  
  382. /*--------*/
  383.  
  384. /*----BOTTOM BAR----*/
  385.  
  386. #bbar {
  387. width: 100%;
  388. height: 40px;
  389. line-height: 40px;
  390. background-color: #f2f2f2; /*CHANGE THE BACKGROUND COLOR OF THE BOTTOM BAR*/
  391. position: fixed;
  392. bottom: 0;
  393. left: 0;
  394. z-index: 99999999;
  395. border-top: solid 1px #e4e4e4; /*CHANGE THE TOP BORDER COLOR OF THE BOTTOM BAR*/
  396. }
  397.  
  398. #bbar a {
  399. color: #777; /*CHANGE THE FONT COLOR OF THE BOTTOM BAR TEXT*/
  400. }
  401.  
  402. #bbar a:first-of-type {
  403. margin-left: 128px;
  404. }
  405.  
  406. #bbar a:hover {
  407. color: #333; /*CHANGE THE HOVER COLOR OF THE BOTTOM BAR TEXT*/
  408. text-decoration: none;
  409. }
  410.  
  411. /*--------*/
  412.  
  413. {CustomCSS}
  414. </style>
  415.  
  416. </head>
  417. <body>
  418.  
  419. <div id="tbar">
  420.  
  421. <div id="search">
  422. <textarea rows="1"></textarea>
  423. <a style="background-image:url(http://static.tumblr.com/puls2hm/5Eun2b0am/screen_shot_2014-03-12_at_11.24.20_am.png); display:inline-block; width:60px; height:30px; border:none; position:absolute;"></a>
  424. </form>
  425.  
  426. <span class="about">{Name}.tumblr.com</span>
  427. </div>
  428.  
  429. </div>
  430.  
  431. <div id="lbox">
  432. <div id="links">
  433. <a href="/">Home</a>
  434. <!--IF YOU WANT ANOTHER LINK, COPY THE HOME LINK AND EDIT IT. PLEASE DO NOT EDIT THE CLASS FOR THE BELOW LINKS.-->
  435. <a class="ab cur">About</a>
  436. <a class="br">Blogroll</a>
  437. <a class="na">Navigation</a>
  438. <a class="fa">FAQ</a>
  439.  
  440. </div>
  441. </div>
  442.  
  443. <!----ABOUT SECTION---->
  444.  
  445. <div id="about" class="con">
  446. <div class="maint sh">
  447.  
  448. <h1>About Title Here</h1>
  449.  
  450. <p>This is your About Me section. Write as much or as little as you want, it's up to you! If you write a lot, the box will scroll. Have fun!</p>
  451.  
  452. </div>
  453.  
  454. <div class="ffile sh">
  455.  
  456. <h2>Fact File title here</h2>
  457.  
  458. <!----TO ADD ANOTHER FACT FILE ROW, COPY ANY LINE FROM <tr> TO </tr> . ADD OR DELETE AS MANY AS YOU'D LIKE---->
  459. <div><table>
  460. <tr>
  461. <td>Name:</td><td>NAME</td>
  462. </tr>
  463. <tr>
  464. <td>Age:</td><td>AGE</td>
  465. </tr>
  466. <tr>
  467. <td>Location:</td><td>LOCATION</td>
  468. </tr>
  469. <tr>
  470. <td>Likes:</td><td>LIKES</td>
  471. </tr>
  472. <tr>
  473. <td>Dislikes:</td><td>DISLIKES</td>
  474. </tr>
  475. </table></div>
  476. <!--THIS IMAGE IS IN THE FACT FILE-->
  477. <img src="FACT FILE IMAGE URL HERE"/>
  478. </div>
  479.  
  480. <!--THIS IMAGE IS BELOW THE FACT FILE, AND WILL BE RESIZED AUTOMATICALLY TO 460 by 175 PX-->
  481. <img src="ABOUT IMAGE URL HERE" class="sh"/>
  482. </div>
  483.  
  484. <!-------->
  485.  
  486. <!----BLOGROLL SECTION---->
  487.  
  488. <div id="blogroll" class="con">
  489. {block:Following}{block:Followed}
  490. <a href="{FollowedURL}"><img src="{FollowedPortraitURL-128}"/><br/><span>{FollowedName}</span></a>
  491. {/block:Followed}{/block:Following}
  492. </div>
  493.  
  494. <!-------->
  495.  
  496. <!----NAVIGATION SECTION---->
  497.  
  498. <div id="navi" class="con">
  499.  
  500. <!--FEEL FREE TO ADD OR REMOVE AS MANY LINKS OR CATEGORIES AS YOU WANT-->
  501.  
  502. <div>
  503. <h2>Heading Here</h2>
  504. <a href="LINK URL HERE">Link</a> -
  505. <a href="LINK URL HERE">Link</a> -
  506. <a href="LINK URL HERE">Link</a> -
  507. <a href="LINK URL HERE">Link</a>
  508. </div>
  509.  
  510. <div>
  511. <h2>Heading Here</h2>
  512. <a href="LINK URL HERE">Link</a> -
  513. <a href="LINK URL HERE">Link</a> -
  514. <a href="LINK URL HERE">Link</a> -
  515. <a href="LINK URL HERE">Link</a>
  516. </div>
  517.  
  518. <div>
  519. <h2>Heading Here</h2>
  520. <a href="LINK URL HERE">Link</a> -
  521. <a href="LINK URL HERE">Link</a> -
  522. <a href="LINK URL HERE">Link</a> -
  523. <a href="LINK URL HERE">Link</a>
  524. </div>
  525.  
  526. <div>
  527. <h2>Heading Here</h2>
  528. <a href="LINK URL HERE">Link</a> -
  529. <a href="LINK URL HERE">Link</a> -
  530. <a href="LINK URL HERE">Link</a> -
  531. <a href="LINK URL HERE">Link</a>
  532. </div>
  533.  
  534. <div>
  535. <h2>Heading Here</h2>
  536. <a href="LINK URL HERE">Link</a> -
  537. <a href="LINK URL HERE">Link</a> -
  538. <a href="LINK URL HERE">Link</a> -
  539. <a href="LINK URL HERE">Link</a>
  540. </div>
  541.  
  542. </div>
  543.  
  544. <!-------->
  545.  
  546. <!----FAQ SECTION---->
  547. <div id="faq" class="con">
  548. <div class="sh"><iframe frameborder="0" scrolling="no" width="410" height="190" src="http://www.tumblr.com/ask_form/{Name}.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]--></div>
  549.  
  550. <div class="sh"><iframe id="submit_form" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" frameborder="0" height="500" scrolling="no" width="410"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]--></div>
  551.  
  552. <!----ADD OR REMOVE AS MANY QUESTIONS AS YOU NEED BY COPYING AND PASTING EVERYTHING FROM <h1> TO </blockquote> ---->
  553.  
  554. <h1>Question?</h1>
  555. <blockquote>Answer goes here. The answer can be as long or short as you want.</blockquote>
  556.  
  557. <h1>Question?</h1>
  558. <blockquote>Answer goes here.</blockquote>
  559.  
  560. <h1>Question?</h1>
  561. <blockquote>Answer goes here.</blockquote>
  562.  
  563. </div>
  564.  
  565. <!-------->
  566.  
  567. <div id="bbar">
  568. <a href="/">Home</a> &nbsp; &nbsp; <a href="/ask">Ask</a> &nbsp; &nbsp; <a href="/archive">Archive</a> &nbsp; &nbsp; <a href="http://tumblr.com/dashboard">Dashboard</a> &nbsp; &nbsp; <a href="//syntaxthemes.tumblr.com">Theme</a>
  569. </div>
  570.  
  571.  
  572. <!------DO NOT REMOVE THE CREDIT. DOING SO WOULD MAKE YOU A THIEF.------->
  573. <a href="http://syntaxthemes.tumblr.com">
  574. <img style="position:fixed; bottom:0; right:0; display:block; opacity:0.7; margin:0; z-index:999999999999!important;" onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=0.7" src="http://static.tumblr.com/puls2hm/QOHn1brjx/st.png"/></a>
  575. <!----------------------------------THANK-------------------------------->
  576.  
  577. </body>
  578. </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!