Tag Archives: html
Articles

Hidden Message in a Tumblr Post


If you are into Tumblr trends, then you might as well be asking how to display hidden messages or text in Tumblr Posts.  When you highlight a regular piece of text it blocks most part of the text revealing a phrase of your choice.  Some may wonder if it should be by default, well, if it were, it wouldn’t be so funny :) .

Hidden Messages in Tumblr Posts.

  1. Go to Customize >>> Advanced.  Once there insert the following code in Add Custom CSS; After that save and close.

  2. p::selection { background:#000;color:#000; }
    p::-moz-selection { background:#000;color:#000; }
    p span::selection { background:#fff;color:#000; }
    p span::-moz-selection { background:#fff;color:#000; }

  3. Now, let’s create a post where you can display your hidden message.  Choose a Text Post and write/paste your text.  After that click on the tiny HTML button on the edition screen, this should make the html edition screen pop up.
  4. Each part of the text that you want to display when being highlighted, meaning all the text that you want to be part of the hidden message should be surrounded by <span></span>, the rest of the text is surrounded by only a couple of <p></p> tags:

  5. <p> TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT <span>HIDDEN TEXT</span>
    TEXT TEXT TEXT <span>HIDDEN TEXT</span></p>

  6. After click update on the screen and publish your post.  Here is an example of hidden message in a Tumblr Post.



Articles

Making your Tumblr an Endless Scrolling page

To make your own Tumblr have an endless scrolling page (until you reach your very own first post), also known as autopager or autopage, or infinite scrolling , you just need to paste a line of code into your description, but please, pay attention to the tutorial.

UPDATE: We’ve received tons of mails telling us that the tumblr autopager script simply doesn’t work on some tumblr themes, so we added a couple of methods that should cover most layouts, though sometimes is just plainly impossible to make it work.


Tumblr with Infinite Scrolling Pages. Method 1.

Paste the following line of jscript code into your description box to make your blog endless scroll. It doesn’t matter if the description already has text or anything else, since this script won’t show up.

  1. Go To Customize Appereance >> Description and paste the following script:

  2. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  3. Save and Close and check if it works.


Tumblr with Infinite Scrolling Pages. Method 2.

  1. Remove the script you pasted in the description as indicated above
  2. Go to Customize Appereance >> Edit HTML
  3. Paste that same code right above the </head> tag.
  4. Test again if it works.


Tumblr with Infinite Scrolling Pages. Method 3.

  1. Keep the code you inserted in the description, do not erase it.
  2. Before each post type [e.g. {block:Posts }] tag within your theme html, paste the following code:

  3. <div class = "autopagerize_page_element" >
  4. After each closing post type tag [e.g. {/block:Posts}], paste the following code:

  5. </div>

Always copy your entire theme html and save it in a .txt file, just in case you mess up trying to install the tumblr endless scroll.
Articles

How to put a background image in your Tumblr theme

Putting or changing a background image or picture in your Tumblr theme is actually easy. However, the coding and changes to the html Tumblr theme to make it look exactly the way you want can get extremely annoying, depending on the skin you are actually using for your Tumblr layout.

For example, it may not be enough just to insert the url of your image, but you will have to edit, change or delete other background colors that could be covering your image background.

You might also be interesting in adding a scroll to top button tumblr in addition to the background picture. Let’s get started

Keep Reading