API tools faq
paste
Petra1999

SOCIAL MEDIA PAGE 01 | cloudythms.tumblr.com

Petra1999
Mar 17th, 2017
1,610
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 31.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
  3.  
  4. <!-----------------------------------------------------------------------
  5.  
  6.  
  7.  
  8.   {   cloudythms
  9.            SOCIAL MEDIA PAGE  01    }
  10.  
  11.  
  12.   !!!! THERE IS A NEW (AND BETTER) VERSION OF THIS THEME
  13.   AVAILABLE HERE: https://cloudythms.tumblr.com/post/177067077404/
  14.            
  15.          
  16.   =>   https://cloudythms.tumblr.com/
  17.                - visit me if you have questions!
  18.  
  19.  
  20.  
  21.           == RULES ==
  22. - You may move, but not remove the credit
  23. - Leave this comment
  24. - Edit the rest as much as you want
  25. - Do not redistribute without permission / use as base
  26. - Do not claim as your own
  27.  
  28.  
  29.           == CREDITS ==
  30. Icons made by SimpleIcon and Freepik from www.flaticon.com
  31.    https://www.flaticon.com/authors/simpleicon
  32.    https://www.flaticon.com/authors/freepik
  33.    
  34.    
  35.    
  36.    
  37.    
  38.    
  39.    H O W    T O     U S E :
  40.    
  41.    
  42.    
  43. *** using existing pages & icons ***
  44.    
  45. 1. copy this code:
  46.  
  47.        <a href="LINK_TO_YOUR_PROFILE_HERE">
  48.        <li class="facebook"><p>facebook</p>
  49.        <img src="https://placehold.it/1"></li></a>
  50.  
  51. 2. paste it below the others
  52.  
  53. 3. replace "pagename" by whatever page you want to link to. for example "facebook" for facebook. leave the quotation marks.
  54. ctrl+f "possible icons" for them
  55.  
  56. 4. replace "text_shown_on_hover" and "LINK_TO_YOUR_PROFILE_HERE" with what you want
  57.  
  58. 5. (optional) add another word after the pagename (but in the quotation marks) to replace the icon but leave the hover color of the page.
  59. for example: if you have an art tumblr you might use <li class=tumblr art">.
  60. ctrl+f for "extras" to see what is available.
  61.  
  62.  
  63.  
  64.  
  65.  
  66. *** adding your own ***
  67.  
  68. ctrl+f for "adding1", "adding2", and "adding3" for instructions
  69.  
  70.  
  71. ---------------------------------------------------------------------->
  72.  
  73.  
  74. <!-- Text that appears on the tab / browser window -->
  75. <title>{Title}'s social media</title>
  76.  
  77. <link rel="shortcut icon" href="{Favicon}"/>
  78.  
  79.  
  80. <!-- ----------------------- DO NOT EDIT THIS CODE  --------------------- -->
  81.        
  82.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  83.     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300|Roboto:400,700,500,300|Lato:400,700,300|Montserrat:400,700|Source+Sans+Pro:400,300,700' rel='stylesheet' type='text/css' />
  84.    
  85.    
  86. <!-- --------------------------- TOOLTIPS -------------------------- -->
  87.  
  88.  
  89. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  90. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  91. <script>
  92. (function($){
  93. $(document).ready(function(){
  94. $("a[title]").style_my_tooltips({
  95. tip_follows_cursor:true,
  96.  
  97. tip_delay_time:20,
  98. tip_fade_speed:200,
  99.  
  100. attribute:"title"
  101. });
  102. });
  103. })(jQuery);
  104. </script>
  105.  
  106.  
  107. <!-- ---------------------------------------------------------------- -->
  108. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  109. <!-- ---------------------------------------------------------------- -->
  110. <style type="text/css">
  111.        
  112. /* ****************************** BASICS ****************************** */
  113.  
  114.     body {
  115.         padding:3%;
  116.         font-family:Open Sans, sans-serif;
  117.         font-size:11px;
  118.         color:black;
  119.     }
  120.    
  121.     .center {
  122.         position: absolute;
  123.         top:50%;
  124.         left:50%;
  125.         padding:15px;
  126.         -ms-transform: translateX(-50%) translateY(-50%);
  127.         -webkit-transform: translate(-50%,-50%);
  128.         transform: translate(-50%,-50%);
  129.     }
  130.    
  131.     blockquote{
  132.        border-left:2px solid #d3d3d3;
  133.        padding-left:10px;
  134.        margin-left:10px;
  135.     }
  136.        
  137.            
  138.     /* no ugly dotted border */
  139.     a, a:focus {
  140.         color:#48a5bf;
  141.         outline: 0;
  142.     }
  143.    
  144.    
  145.     /* <hr> style (divider) */
  146.     hr{
  147.         border: 0;
  148.         height: 1px;
  149.         background-image: linear-gradient(to right,
  150.             rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  151.     }
  152.    
  153.    
  154.     /* text selection style */
  155.     ::selection {
  156.       background: #d3d3d3;
  157.     }
  158.     ::-moz-selection {
  159.       background: #d3d3d3;
  160.     }
  161.    
  162.     body > iframe:first-child { display: none !important; } /* tumblr */
  163.    
  164.     /* tooltips */
  165.    
  166.     .tooltip{
  167.     display: inline;
  168.     position: relative;
  169. }
  170. #s-m-t-tooltip {
  171. max-width:300px;
  172. border-radius: 0px;
  173. padding:3px 4px 5px 4px; /* padding inside tooltip */
  174. margin:-50px 0px 0px -50px; /* distance from word */
  175. background-color:#ffffff;
  176. border:1px solid #E0E0E0;
  177. font-family:calibri;
  178. font-size:10px;
  179. letter-spacing:1px;
  180. text-transform:uppercase; /* remove if you want */
  181. color:#000;
  182. z-index:999999999999999999999999999999999999; /* leave this */
  183. }
  184.      
  185.        
  186. /* ****************************** NAVIGATION ****************************** */
  187.  
  188.  
  189.     #title{
  190.         font-size:13px;
  191.         letter-spacing:3px;
  192.         word-spacing:2px;
  193.         text-transform:uppercase;
  194.         color:#919191;
  195.     }
  196.    
  197.     #navi {
  198.         font-size:10px;
  199.         text-transform:lowercase;
  200.         color:#919191;
  201.     }
  202.    
  203.     #navi a, #navi a:visited, #navi a:link, #navi a:active {
  204.         color:#919191;
  205.         text-decoration:none;
  206.         letter-spacing:0.5px;
  207.         margin-right:5px;
  208.        
  209.         transition: all 0.2s ease-in-out;
  210.         -webkit-transition: all 0.2s ease-in-out; /* Chrome & Safari */
  211.        -moz-transition: all 0.2s ease-in-out; /* Firefox */
  212.         -o-transition: all 0.2s ease-in-out; /* Opera */
  213.     }
  214.    
  215.     #navi a:hover {
  216.         color:#48a5bf;
  217.         text-decoration:underline;
  218.     }
  219.    
  220.    
  221.     #stuff {
  222.         position: absolute;
  223.         top:25%;
  224.         left:50%;
  225.        
  226.         -ms-transform: translateX(-50%) translateY(-50%);
  227.         -webkit-transform: translate(-50%,-50%);
  228.         transform: translate(-50%,-50%);
  229.     }
  230.    
  231. /* ************************** POPUP ************************** */
  232.        
  233.        
  234.        
  235.      /* The Overlay (background) */
  236. .overlay {
  237.     /* Height & width depends on how you want to reveal the overlay (see JS below) */  
  238.    height: 100%;
  239.     width: 0;
  240.     position: fixed; /* Stay in place */
  241.     z-index: 1; /* Sit on top */
  242.     left: 0;
  243.     top: 0;
  244.     background-color: rgb(0,0,0); /* Black fallback color */
  245.     background-color: rgba(255,255,255, 0.7); /* Black w/opacity */
  246.     overflow-x: hidden; /* Disable horizontal scroll */
  247.     transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  248.     color:black;
  249. }
  250.  
  251. /* Position the content inside the overlay */
  252. .overlay-content {
  253.     position: relative;
  254.     top: 25%; /* 25% from the top */
  255.     width: 100%; /* 100% width */
  256.     text-align: center; /* Centered text/links */
  257.     margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  258. }
  259.  
  260. .overlay-content p{
  261.     width:50%;
  262.     left:25%;
  263.     position:relative;
  264. }
  265.  
  266. .overlay-content img{
  267.     width:32px;
  268.     height:32px;
  269.    
  270.     border-radius: 5px 5px 5px 5px;
  271. -moz-border-radius: 5px 5px 5px 5px;
  272. -webkit-border-radius: 5px 5px 5px 5px;
  273. border: 0px solid #000000;
  274. }
  275.  
  276. /* The navigation links inside the overlay */
  277. .overlay a {
  278.     padding: 8px;
  279.     text-decoration: none;
  280.     font-size: 36px;
  281.     color: black;
  282.     display: block; /* Display block instead of inline */
  283.     transition: 0.3s; /* Transition effects on hover (color) */
  284. }
  285.  
  286. /* When you mouse over the navigation links, change their color */
  287. .overlay a:hover, .overlay a:focus {
  288.     color: #4c4c4c;
  289. }
  290.  
  291. /* Position the close button (top right corner) */
  292. .overlay .closebtn {
  293.     position: absolute;
  294.     top: 20px;
  295.     right: 45px;
  296.     font-size: 60px;
  297. }
  298.  
  299. /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  300. @media screen and (max-height: 450px) {
  301.     .overlay a {font-size: 20px}
  302.     .overlay .closebtn {
  303.         font-size: 40px;
  304.         top: 15px;
  305.         right: 35px;
  306.     }
  307. }
  308.  
  309. .question:hover{
  310.     cursor:help;
  311. }
  312.        
  313.                
  314. /* ************************** SOCIAL MEDIA ************************** */
  315.  
  316.            
  317.     #wrapper {
  318.            
  319.     }
  320.    
  321.        
  322.    
  323.     ul#social {
  324.       list-style-type: none;
  325.       margin: 0;
  326.       padding: 0;
  327.       text-align: center;
  328.     }
  329.    
  330.     ul#social li {
  331.       display: inline-block;
  332.       height: 50px;
  333.       margin: 0 1em 1em 0;
  334.       position: relative;
  335.       width: 50px;
  336.      
  337.         background: linear-gradient(to right, black 50%, #595959 50%);
  338.         background-size: 200% 100%;
  339.         background-position:right bottom;
  340.      
  341.       -webkit-transition-duration: 0.25s;
  342.         transition-duration: 0.25s;
  343.         -webkit-transition-delay: 0s;
  344.         transition-delay: 0s;
  345.         -webkit-transition-timing-function: ease-out;
  346.         transition-timing-function: ease-out;
  347.     }
  348.    
  349.     ul#social li:hover {
  350.         background-position:left bottom;
  351.     }
  352.  
  353.    
  354.     ul#social img {
  355.         margin-top:12.5px;
  356.         width:25px;
  357.         height:25px;
  358.        
  359.         -webkit-filter: invert(1);
  360.         filter: invert(1);
  361.     }
  362.    
  363.     ul#social li p {
  364.         visibility: hidden;
  365.         width: 120px;
  366.         background-color: #6b6b6b;
  367.         color: #fff;
  368.         text-align: center;
  369.         padding: 5px 0;
  370.         border-radius: 6px;
  371.    
  372.         /* Position the tooltip text */
  373.         position: absolute;
  374.         z-index: 1;
  375.         bottom: 110%;
  376.         left: 50%;
  377.         margin-left: -60px;
  378.    
  379.         /* Fade in tooltip */
  380.         opacity: 0;
  381.         transition: opacity 0.5s;
  382. -webkit-box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  383. -moz-box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  384. box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  385.     }
  386.    
  387.     /* Tooltip arrow */
  388.     ul#social li p::after {
  389.         content: "";
  390.         position: absolute;
  391.         top: 100%;
  392.         left: 50%;
  393.         margin-left: -5px;
  394.         border-width: 5px;
  395.         border-style: solid;
  396.         border-color: #6b6b6b transparent transparent transparent;
  397. -webkit-box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  398. -moz-box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  399. box-shadow: 0px 2px 0px 0px rgba(255,255,255,1);
  400.     }
  401.    
  402.     /* Show the tooltip text when you mouse over the tooltip container */
  403.     ul#social li:hover p {
  404.         visibility: visible;
  405.         opacity: 1;
  406.     }
  407.    
  408.     /* adding1 : (see below)
  409.    
  410.     make a comma (,) after the last "hover" and paste this:
  411.    
  412.         ul#social li.example:hover
  413.        
  414.        replace example with your pagename (no spaces or numbers)
  415.     */
  416.    
  417.     ul#social li.facebook:hover, ul#social li.twitter:hover,
  418.     ul#social li.googleplus:hover, ul#social li.linkedin:hover,
  419.     ul#social li.pinterest:hover, ul#social li.instagram:hover,
  420.     ul#social li.tumblr:hover, ul#social li.reddit:hover,
  421.     ul#social li.stumbleupon:hover, ul#social li.deviantart:hover,
  422.     ul#social li.youtube:hover, ul#social li.listography:hover,
  423.     ul#social li.weheartit:hover, ul#social li.polyvore:hover,
  424.     ul#social li.redbubble:hover, ul#social li.lookbook:hover,
  425.     ul#social li.eighttracks:hover, ul#social li.aooo:hover,
  426.     ul#social li.oldinstagram:hover, ul#social li.altaooo:hover,
  427.     ul#social li.spotify:hover, ul#social li.alttumblr:hover,
  428.     ul#social li.images:hover, ul#social li.music:hover,
  429.     ul#social li.movie:hover, ul#social li.camera:hover,
  430.     ul#social li.altmusic:hover, ul#social li.star:hover,
  431.     ul#social li.heart:hover, ul#social li.palette:hover,
  432.     ul#social li.brush:hover, ul#social li.email:hover,
  433.     ul#social li.messenger:hover, ul#social li.phone:hover,
  434.     ul#social li.chat:hover, ul#social li.altyoutube:hover,
  435.     ul#social li.link:hover, ul#social li.internet:hover,
  436.     ul#social li.shop:hover, ul#social li.dollarsign:hover,
  437.     ul#social li.eurosign:hover, ul#social li.snapchat:hover,
  438.     ul#social li.business:hover, ul#social li.webdesign:hover,
  439.     ul#social li.olddeviantart:hover, ul#social li.example:hover
  440.     { background-position:left bottom; }
  441.    
  442.    
  443. ul#social li.facebook
  444. { background: linear-gradient(to right, #3C5A9A 50% /* change color here */
  445. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  446.  
  447. ul#social li.twitter
  448. { background: linear-gradient(to right, #21A5DF 50% /* change color here */
  449. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  450.  
  451. ul#social li.googleplus
  452. { background: linear-gradient(to right, #F63E28 50% /* change color here */
  453. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  454.  
  455. ul#social li.linkedin
  456. { background: linear-gradient(to right, #0173B2 50% /* change color here */
  457. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  458.  
  459. ul#social li.pinterest
  460. { background: linear-gradient(to right, #CB2027 50% /* change color here */
  461. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  462.  
  463. ul#social li.instagram
  464. { background: linear-gradient(to right, #E4484A 50% /* change color here */
  465. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  466.  
  467. ul#social li.oldinstagram
  468. { background: linear-gradient(to right, #517FA4 50% /* change color here */
  469. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  470.  
  471. ul#social li.tumblr, ul#social li.alttumblr
  472. { background: linear-gradient(to right, #2A445F 50% /* change color here */
  473. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  474.  
  475. ul#social li.reddit
  476. { background: linear-gradient(to right, #FF1A00 50% /* change color here */
  477. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  478.  
  479. ul#social li.stumbleupon
  480. { background: linear-gradient(to right, #EB4924 50% /* change color here */
  481. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  482.  
  483. ul#social li.deviantart, ul#social li.olddeviantart
  484. { background: linear-gradient(to right, #05cc46 50% /* change color here */
  485. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  486.    
  487. ul#social li.youtube, ul#social li.altyoutube
  488. { background: linear-gradient(to right, #cd1f20 50% /* change color here */
  489. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  490.  
  491. ul#social li.listography
  492. { background: linear-gradient(to right, #c12aca 50% /* change color here */
  493. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  494.  
  495. ul#social li.weheartit
  496. { background: linear-gradient(to right, #ff4477 50% /* change color here */
  497. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  498.  
  499. ul#social li.polyvore
  500. { background: linear-gradient(to right, #000000 50% /* change color here */
  501. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  502.  
  503. ul#social li.redbubble
  504. { background: linear-gradient(to right, #E41421 50% /* change color here */
  505. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  506.  
  507. ul#social li.lookbook
  508. { background: linear-gradient(to right, #000000 50% /* change color here */
  509. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  510.  
  511. ul#social li.eighttracks
  512. { background: linear-gradient(to right, #3e546e 50% /* change color here */
  513. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  514.  
  515. ul#social li.aooo, ul#social li.altaooo
  516. { background: linear-gradient(to right, #911111 50% /* change color here */
  517. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  518.  
  519. ul#social li.spotify
  520. { background: linear-gradient(to right, #9BD44E 50% /* change color here */
  521. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  522.  
  523. ul#social li.snapchat
  524. { background: linear-gradient(to right, #FFE100 50% /* change color here */
  525. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  526.  
  527.  
  528.  
  529. ul#social li.example
  530. { background: linear-gradient(to right, black 50% /* change color here */
  531. ,#595959 50%); background-size: 200% 100%; background-position:right bottom; }
  532.  
  533.  
  534. /* adding2 : copy the last block of code above and paste it.
  535.             change "li.example" to "li.yourpagename"
  536.             (use the same page name as before.)
  537.             then change "black" to any color you want.
  538.             (you can use color codes e.g. #000000 )
  539. */
  540.  
  541.  
  542. /* ******************************* MORE ******************************* */
  543.  
  544.  
  545.     /* add your own CSS code here */
  546.      
  547.     .exampleclass{
  548.         color:black;
  549.     }
  550.  
  551.  
  552. </style>
  553.  
  554.        
  555.         <script>
  556.             /* Open when someone clicks on the span element */
  557. function openNav() {
  558.     document.getElementById("myNav").style.width = "100%";
  559. }
  560.  
  561. /* Close when someone clicks on the "x" symbol inside the overlay */
  562. function closeNav() {
  563.     document.getElementById("myNav").style.width = "0%";
  564. }
  565.         </script>
  566.  
  567.  
  568. <script>$(document).ready(function(){
  569.    
  570.    
  571.     // possible icons
  572.     // (don't forget the extra icons a bit further down)
  573.    
  574.     $(".facebook img").attr("src",
  575.     "https://image.flaticon.com/icons/svg/34/34304.svg");
  576.     $(".twitter img").attr("src",
  577.     "https://image.flaticon.com/icons/svg/34/34238.svg");
  578.     $(".googleplus img").attr("src",
  579.     "https://image.flaticon.com/icons/svg/299/299411.svg");
  580.     $(".linkedin img").attr("src",
  581.     "https://image.flaticon.com/icons/svg/34/34227.svg");
  582.     $(".pinterest img").attr("src",
  583.     "https://image.flaticon.com/icons/svg/152/152817.svg");
  584.     $(".instagram img").attr("src",
  585.     "https://image.flaticon.com/icons/svg/87/87390.svg");
  586.     $(".oldinstagram img").attr("src",
  587.     "https://image.flaticon.com/icons/svg/48/48898.svg");
  588.     $(".tumblr img").attr("src",
  589.     "https://image.flaticon.com/icons/svg/34/34316.svg");
  590.     $(".alttumblr img").attr("src",
  591.     "https://image.flaticon.com/icons/svg/220/220379.svg");
  592.     $(".reddit img").attr("src",
  593.     "https://image.flaticon.com/icons/svg/34/34103.svg");
  594.     $(".stumbleupon img").attr("src",
  595.     "https://image.flaticon.com/icons/svg/33/33478.svg");
  596.     $(".olddeviantart img").attr("src",
  597.     "https://image.flaticon.com/icons/svg/152/152850.svg");
  598.     $(".deviantart img").attr("src",
  599.     "https://image.flaticon.com/icons/svg/220/220793.svg");
  600.     $(".youtube img").attr("src",
  601.     "https://image.flaticon.com/icons/svg/33/33265.svg");
  602.     $(".altyoutube img").attr("src",
  603.     "https://image.flaticon.com/icons/svg/33/33671.svg");
  604.     $(".listography img").attr("src",
  605.     "https://image.flaticon.com/icons/svg/61/61739.svg");
  606.     $(".weheartit img").attr("src",
  607.     "https://image.flaticon.com/icons/svg/48/48970.svg");
  608.     $(".polyvore img").attr("src",
  609.     "https://image.flaticon.com/icons/svg/107/107499.svg");
  610.     $(".redbubble img").attr("src",
  611.     "https://image.flaticon.com/icons/svg/34/34627.svg");
  612.     $(".lookbook img").attr("src",
  613.     "https://image.flaticon.com/icons/svg/344/344264.svg");
  614.     $(".eighttracks img").attr("src",
  615.     "https://image.flaticon.com/icons/svg/100/100483.svg");
  616.     $(".aooo img").attr("src",
  617.     "https://image.flaticon.com/icons/svg/33/33932.svg");
  618.     $(".altaooo img").attr("src",
  619.     "https://image.flaticon.com/icons/svg/16/16941.svg");
  620.     $(".spotify img").attr("src",
  621.     "https://image.flaticon.com/icons/svg/152/152756.svg");
  622.     $(".snapchat img").attr("src",
  623.     "https://image.flaticon.com/icons/svg/220/220790.svg");
  624.    
  625.     $(".example img").attr("src",
  626.     "IMAGELINK");
  627.    
  628.     /* adding3 : do the same thing as before:
  629.         copy the last block, change "example" to your pagename.
  630.         then replace "IMAGELINK" with the image url you want to use.
  631.        
  632.         you can find icons here:
  633.         https://www.flaticon.com/
  634.         for this theme you want to use filled out black icons.
  635.         (they are automatically inverted)
  636.        
  637.         if you use an icon as an extra (icon used for overwriting an existing icon) paste it below in the "extras" area
  638.        
  639.         done! you can now use your page.
  640.        
  641.     */
  642.    
  643.    
  644.    
  645.     /* E X T R A S */
  646.    
  647.     $(".images img").attr("src",
  648.     "https://image.flaticon.com/icons/svg/34/34239.svg");
  649.     $(".music img").attr("src",
  650.     "https://image.flaticon.com/icons/svg/33/33943.svg");
  651.     $(".movie img").attr("src",
  652.     "https://image.flaticon.com/icons/svg/34/34414.svg");
  653.     $(".camera img").attr("src",
  654.     "https://image.flaticon.com/icons/svg/34/34231.svg");
  655.     $(".altmusic img").attr("src",
  656.     "https://image.flaticon.com/icons/svg/34/34072.svg");
  657.     $(".star img").attr("src",
  658.     "https://image.flaticon.com/icons/svg/121/121726.svg");
  659.     $(".heart img").attr("src",
  660.     "https://image.flaticon.com/icons/svg/121/121729.svg");
  661.     $(".palette img").attr("src",
  662.     "https://image.flaticon.com/icons/svg/352/352970.svg");
  663.     $(".brush img").attr("src",
  664.     "https://image.flaticon.com/icons/svg/353/353001.svg");
  665.     $(".email img").attr("src",
  666.     "https://image.flaticon.com/icons/svg/121/121923.svg");
  667.     $(".messenger img").attr("src",
  668.     "https://image.flaticon.com/icons/svg/121/121916.svg");
  669.     $(".phone img").attr("src",
  670.     "https://image.flaticon.com/icons/svg/121/121942.svg");
  671.     $(".chat img").attr("src",
  672.     "https://image.flaticon.com/icons/svg/121/121922.svg");
  673.     $(".link img").attr("src",
  674.     "https://image.flaticon.com/icons/svg/61/61353.svg");
  675.     $(".internet img").attr("src",
  676.     "https://image.flaticon.com/icons/svg/61/61437.svg");
  677.     $(".shop img").attr("src",
  678.     "https://image.flaticon.com/icons/svg/61/61571.svg");
  679.     $(".dollarsign img").attr("src",
  680.     "https://image.flaticon.com/icons/svg/70/70030.svg");
  681.     $(".eurosign img").attr("src",
  682.     "https://image.flaticon.com/icons/svg/70/70046.svg");
  683.     $(".business img").attr("src",
  684.     "https://image.flaticon.com/icons/svg/17/17185.svg");
  685.     $(".webdesign img").attr("src",
  686.     "https://image.flaticon.com/icons/svg/33/33592.svg");
  687.    
  688.     $(".extraexample img").attr("src",
  689.     "IMAGELINK");
  690.    
  691.    
  692.     });</script>
  693.        
  694.        
  695. </head>
  696. <body>
  697.  
  698.              
  699. <div id="myNav" class="overlay">
  700.   <a href="javascript:void(0)" class="closebtn question" onclick="closeNav()">&times;</a>
  701.   <div class="overlay-content">
  702.  
  703.  
  704.  
  705.   <!-- add your image here, it's 32x32 -->
  706.   <img src="https://assets.tumblr.com/images/anonymous_avatar_64.gif">
  707.  
  708.     <p>
  709.     you can add some text here.
  710.     </p>
  711.    
  712.     <p>
  713.     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  714.     </p>
  715.    
  716.    
  717.    
  718.    
  719.   </div>
  720.  
  721. </div>
  722.    
  723.     <span id="stuff">
  724.    
  725.     <!-- change the title here -->
  726.     <p id="title">My Social Media</p>
  727.    
  728.     <div id="navi">
  729.    
  730.         <!-- change your links here -->
  731.         <a href="/">return</a>
  732.         <a href="https://www.tumblr.com/dashboard">dashboard</a>
  733.         <a href="/LINK">custom link</a>
  734.         <a href="https://cloudythms.tumblr.com/" target="_blank">theme</a>
  735.        
  736.        
  737.         <!-- delete this if you don't want a popup: (from here) -->
  738.         <span onclick="openNav()" class="question"><u>more...</u></span>
  739.         <!-- (to here) -->
  740.        
  741.     </div>
  742.    
  743.     </span>
  744.    
  745.     <div id="wrapper" class="center">
  746.     <ul id="social">
  747.    
  748.    
  749.     <!--
  750.    
  751.     tutorial on how to add links is at the start of the code.
  752.    
  753.     here's the thing you have to copy and paste:
  754.    
  755.        <a href="LINK_TO_YOUR_PROFILE_HERE">
  756.        <li class="facebook"><p>facebook</p>
  757.        <img src="https://placehold.it/1"></li></a>
  758.        
  759.  
  760.    ctrl+f "possible icons" for them
  761.    
  762.    
  763.     -->
  764.    
  765.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  766.         <li class="facebook"><p>facebook</p>
  767.         <img src="https://placehold.it/1"></li></a>
  768.        
  769.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  770.         <li class="twitter"><p>twitter</p>
  771.         <img src="https://placehold.it/1"></li></a>
  772.        
  773.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  774.         <li class="googleplus"><p>googleplus</p>
  775.         <img src="https://placehold.it/1"></li></a>
  776.        
  777.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  778.         <li class="linkedin"><p>linkedin</p>
  779.         <img src="https://placehold.it/1"></li></a>
  780.        
  781.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  782.         <li class="pinterest"><p>pinterest</p>
  783.         <img src="https://placehold.it/1"></li></a>
  784.        
  785.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  786.         <li class="instagram"><p>instagram</p>
  787.         <img src="https://placehold.it/1"></li></a>
  788.        
  789.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  790.         <li class="oldinstagram"><p>oldinstagram</p>
  791.         <img src="https://placehold.it/1"></li></a>
  792.        
  793.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  794.         <li class="tumblr"><p>tumblr</p>
  795.         <img src="https://placehold.it/1"></li></a>
  796.        
  797.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  798.         <li class="alttumblr"><p>alttumblr</p>
  799.         <img src="https://placehold.it/1"></li></a>
  800.        
  801.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  802.         <li class="reddit"><p>reddit</p>
  803.         <img src="https://placehold.it/1"></li></a>
  804.        
  805.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  806.         <li class="stumbleupon"><p>stumbleupon</p>
  807.         <img src="https://placehold.it/1"></li></a>
  808.        
  809.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  810.         <li class="deviantart"><p>deviantart</p>
  811.         <img src="https://placehold.it/1"></li></a>
  812.        
  813.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  814.         <li class="olddeviantart"><p>olddeviantart</p>
  815.         <img src="https://placehold.it/1"></li></a>
  816.        
  817.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  818.         <li class="youtube"><p>youtube</p>
  819.         <img src="https://placehold.it/1"></li></a>
  820.        
  821.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  822.         <li class="altyoutube"><p>altyoutube</p>
  823.         <img src="https://placehold.it/1"></li></a>
  824.        
  825.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  826.         <li class="listography"><p>listography</p>
  827.         <img src="https://placehold.it/1"></li></a>
  828.        
  829.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  830.         <li class="weheartit"><p>weheartit</p>
  831.         <img src="https://placehold.it/1"></li></a>
  832.        
  833.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  834.         <li class="polyvore"><p>polyvore</p>
  835.         <img src="https://placehold.it/1"></li></a>
  836.        
  837.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  838.         <li class="redbubble"><p>redbubble</p>
  839.         <img src="https://placehold.it/1"></li></a>
  840.        
  841.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  842.         <li class="lookbook"><p>lookbook</p>
  843.         <img src="https://placehold.it/1"></li></a>
  844.        
  845.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  846.         <li class="eighttracks"><p>eighttracks</p>
  847.         <img src="https://placehold.it/1"></li></a>
  848.        
  849.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  850.         <li class="aooo"><p>ao3</p>
  851.         <img src="https://placehold.it/1"></li></a>
  852.        
  853.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  854.         <li class="altaooo"><p>altao3</p>
  855.         <img src="https://placehold.it/1"></li></a>
  856.        
  857.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  858.         <li class="spotify"><p>spotify</p>
  859.         <img src="https://placehold.it/1"></li></a>
  860.        
  861.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  862.         <li class="snapchat"><p>snapchat</p>
  863.         <img src="https://placehold.it/1"></li></a>
  864.        
  865.         <!-- extras -->
  866.        
  867.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  868.         <li class="images"><p>images</p>
  869.         <img src="https://placehold.it/1"></li></a>
  870.        
  871.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  872.         <li class="music"><p>music</p>
  873.         <img src="https://placehold.it/1"></li></a>
  874.        
  875.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  876.         <li class="movie"><p>movie</p>
  877.         <img src="https://placehold.it/1"></li></a>
  878.        
  879.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  880.         <li class="camera"><p>camera</p>
  881.         <img src="https://placehold.it/1"></li></a>
  882.        
  883.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  884.         <li class="altmusic"><p>altmusic</p>
  885.         <img src="https://placehold.it/1"></li></a>
  886.        
  887.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  888.         <li class="star"><p>star</p>
  889.         <img src="https://placehold.it/1"></li></a>
  890.        
  891.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  892.         <li class="heart"><p>heart</p>
  893.         <img src="https://placehold.it/1"></li></a>
  894.        
  895.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  896.         <li class="palette"><p>palette</p>
  897.         <img src="https://placehold.it/1"></li></a>
  898.        
  899.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  900.         <li class="brush"><p>brush</p>
  901.         <img src="https://placehold.it/1"></li></a>
  902.        
  903.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  904.         <li class="email"><p>email</p>
  905.         <img src="https://placehold.it/1"></li></a>
  906.        
  907.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  908.         <li class="messenger"><p>messenger</p>
  909.         <img src="https://placehold.it/1"></li></a>
  910.        
  911.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  912.         <li class="phone"><p>phone</p>
  913.         <img src="https://placehold.it/1"></li></a>
  914.        
  915.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  916.         <li class="chat"><p>chat</p>
  917.         <img src="https://placehold.it/1"></li></a>
  918.        
  919.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  920.         <li class="link"><p>link</p>
  921.         <img src="https://placehold.it/1"></li></a>
  922.        
  923.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  924.         <li class="internet"><p>internet</p>
  925.         <img src="https://placehold.it/1"></li></a>
  926.        
  927.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  928.         <li class="shop"><p>shop</p>
  929.         <img src="https://placehold.it/1"></li></a>
  930.        
  931.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  932.         <li class="dollarsign"><p>dollarsign</p>
  933.         <img src="https://placehold.it/1"></li></a>
  934.        
  935.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  936.         <li class="eurosign"><p>eurosign</p>
  937.         <img src="https://placehold.it/1"></li></a>
  938.        
  939.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  940.         <li class="business"><p>business</p>
  941.         <img src="https://placehold.it/1"></li></a>
  942.        
  943.         <a href="LINK_TO_YOUR_PROFILE_HERE">
  944.         <li class="webdesign"><p>webdesign</p>
  945.         <img src="https://placehold.it/1"></li></a>
  946.        
  947.          
  948.     </ul>
  949.     </div>
  950.  
  951. <!-- please don't touch this. thank you. -->
  952. <div style="position:fixed;bottom:10px;right:10px;font-size:10px;">
  953. <a href="https://cloudythms.tumblr.com/" title="theme by cloudythms"
  954. style="text-decoration:none;">☁</a></div>
  955. <!-- theme by https://cloudythms.tumblr.com/ -->
  956.  
  957. </body>
  958. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!