websites

Infinitize


By Ilma A. on July 13th 2016 12:49
  • Live Preview: Preview
  • Difficulty: Need CSS and HTML knowledges
  • Updates tabs are usually used on tumblr.

IMPORTANT NOTE: CSS Code is put after < style> or before < /style> HTML Code is put after < body>.

Version One

This one is suitable if you only need one tab. THE CSS if you want the tabs to be on the left side of your screen:
    #updates {
         position:fixed;
         top:25px;
         left:0px;
         padding-left:15px;
         font-family:Cambria;
         font-size:11px;
         text-align:justify;
     }
     
     /*the tabs title */
     #updates h3 {
         text-transform:uppercase;
         background:#333333;
         border:1px solid #666666;
         padding:4px;
         text-transform:uppercase;
         font-size:9px;
         text-align:center;
         margin-top:0px;
         color:#ffffff;
     }
     
     /* the dot and arrow */
     .dot {
         background:#000000;
         width:20px;
      ...			
			

Read More

By Ilma A. on July 13th 2016 12:47

This code is used if you want a different background every time you refresh your blog/theme.

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript">
 // <![CDATA[
 var image_array = new Array();
     image_array[0] = "IMAGEURL";
     image_array[1] = "IMAGEURL";
     image_array[2] = "IMAGEURL";
     image_array[3] = "IMAGEURL";
     image_array[4] = "IMAGEURL";
  
     var rand_path = image_array[Math.floor(Math.random() * image_array.length)];
  
     $(document).ready(function() {
         $("body").css('background-image', 'url('+rand_path+')');
     });
 // ]]>
 </script>

If you want to add more image, add this part after the last image_array:

image_array[PREVNUMBER+1] = "IMAGEURL";

Also if you want apply that to other places’ background other than the body background, change body to the div name of the place (ex: #sidebar, .post).

Read More