The Code Ripper

gkiaramarzan-blog asked: What do you mean by cut and paste?

Lots Of Love

On your dashboard. Use J & K to navigate. R to reblog when you are on the post you like and L to like the same. But, if you press down L for more than a second, you will see something rather cool!

TMBLR CTRLS

Place the code between <style type=”text/css”> and </style>

(Combine or change the values within the {} for your own version of the code. This is just the basics. If you are not sure of what you are doing, then do not tinker! Then again, no one learns without making mistakes.)

Fixed:

#tumblr_controls {position: fixed !important;}

#tumblr_controls {-webkit-filter: invert(100%);}

Fade in and out:

 #tumblr_controls {opacity: 0.5; -webkit-transition: opacity 0.7s linear;  -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
#tumblr_controls:hover {opacity: 1; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

Placement: (Change the amount of pixels to your desire)

#tumblr_controls {top: 5px; right: 5px !important; }

How do I verify your Tumblr blog for Pinterest? (Workaroud)

To verify your Tumblr blog:

Make sure you’ve listed your website on your account on the Settings page, then press the Verify Website button.  On the next page, you’ll see the following instructions:

1. Download the HTML verification file –
1. Press the “Download the HTML verification file” link to download your unique HTML file.
2. The name of your unique file will appear after this link, in this example: pinterest-47b03.html
2. Open the file in a text editor like Notepad and copy the whole code
3. While logged in to Tumblr, go to your blog and click on “Customize” on the top right.
4. In the pages section of the side bar, click on “Add a Page”.
5. Select “Custom Layout” in the menu.
6. Type the name of the file as the page URL.  In this example, you would type: pinterest-47b03.html
7. Do not check “Show a link to this page” because you don’t want your menu to link to it.
8. Paste the code from the file (step #5) in the box and click “Create Page”.
9. Go back to the Pinterest verification page:
1. Press the “Click here” link to verify your blog. 
2. We’ll automatically check your blog for the HTML file name we gave you and then verify it. 
3. Once the process is complete, you’ll see a success message. Your website and a checkmark will display on your profile page and in search results. 
4. Note: you will need to keep this file in your blog in order for your website to continue to be verified.

(Source: itcantfly)

How to add a Tumblr Like (Heart) button to a theme

Note: I’ve updated the code to make it a simple cut-and-paste to eliminate most of the problems people were having getting it working.

Normally, to Reblog or Like a post, you have to go to a separate permalink page and use Tumblr’s icons in the upper right corner of the page to do it. With the following code you can add the ability to Like and Reblog on the main page of your theme.

Reblog uses an undocumented variable, {ReblogURL}. You simply make it the href of a link:

<a href="{ReblogURL}">reblog</a> 

You can see and test an example of this above, in the header of this post.

To add Like functionality, you use the following URL and set it as the src attribute of an invisible <iframe>:

https://www.tumblr.com/<command>/<oauthId>?id=<postId> 

• <command>: like or unlike
• <oauthId>: last eight characters of {ReblogURL}
• <postId>: {PostID}

Example:

https://www.tumblr.com/like/fGKvAJgQ?id=16664837215 

Cut-and-paste the following code block into your theme immediately before </head>. This will give you a Like button on each post that looks like the default Tumblr grey heart. It will turn red when you hover over it and when you click it. If you click it again, it will turn grey again and delete the Like.

Code:

<style> .my-like { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABH0lEQVQ4y62T30vCUBiGv/9YuhBLkCA08FdogRFFYFEUhhZNCCQoSESiIOii68pl5qV6s8Eb7+SMHXNs6S7ejZ3zvA+ccT4BICofvS88dJ7w8vqG8WQC754K17lPjrx3z3l8D4YoVaqIrWbcJNbzaHefNZjfXPdy5b0jsO/IRqMxUpmSBnhz2bx1QL79GPbpEePmzhdSyW8fBDL0SK68HwiGCT2S3NiKREaPzP7QRRNPZSHpwm4kMnqkYbQikdEjZv8HK2ubS4nY75mD6WU8qzeXkrHvToBlWSjuHC4kYo99V8bwBnM0/iMiz542myq2bSPskcmR/zPos7lvP8Lv/nGd+/N6c2Xq2KcXhiY6qV1rxwotU3n/NHF8fgW+g9hfsHJlJUYljcgAAAAASUVORK5CYII=) !important; height:17px; width:19px; cursor:pointer; display:inline-block; vertical-align:top; } .my-liked, .my-like:hover { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAABSklEQVQ4y2P4//8/Awy/O3fu/905c/4/2779/69Pn/4jy8Hwz/fv/z/buvX/vfnz/7+/eBFFDZj4cOXK/8O+Pv+36+rA8W4zs/8Ply1DUXx/4cL/u0yMUdQdCQ76/+nWLbA6hq+PH//fbW6OogAZ3+zvByu81t6OU80ea6v/P16//s9wqboKpyIYPhYeTlDN1abG/wz7HR0JKiQGH3Bz+8+ww0CfKobtMjb6z0ANg+CGgQKPKt50dfnPcL6wkCqGXaoo/8/w5tgxyg3T0wUnYHBiPJuZSZFhF8pK/8NzACjrgKKWHINAOef3168Iw0D429OnGFmKEAZlJVDKR8mbMAyy4XRqClEGnc3J+f/nxw/MjI6OQflxh6EBzvR0Z9o0rCUKVsNA+MuD+/9PJiSgGHQmPf0/KDhw6cFpGAy/OnAAbOibEyf+E1ILAFBjDrchm7KrAAAAAElFTkSuQmCC) !important; height:17px; width:19px; cursor:pointer; display:inline-block; vertical-align:top; } </style> <script> window.onload = function () { document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' ); document.addEventListener( 'click', function ( event ) { var myLike = event.target; if( myLike.className.indexOf( 'my-like' ) > -1 ) { var frame = document.getElementById( 'my-like-frame' ), liked = ( myLike.className == 'my-liked' ), command = liked ? 'unlike' : 'like', reblog = myLike.getAttribute( 'data-reblog' ), id = myLike.getAttribute( 'data-id' ), oauth = reblog.slice( -8 ); frame.src = 'https://www.tumblr.com/' + command + '/' + oauth + '?id=' + id; liked ? myLike.className = 'my-like' : myLike.className = 'my-liked'; }; }, false ); }; </script>

Then cut-and-paste the following button code into your theme where you want your like button to be (this must be inside your {block:Posts}{/block:Posts} block).

Code:

<div class="my-like" data-reblog="{ReblogURL}" data-id="{PostID}" title="Like"></div> 

You can see and test an example of this working above, in the header of this post. If you cut-and-paste the above code into your theme exactly as it’s written and it doesn’t not work for you, contact me and I’ll be happy to take a look at it.

Notes on the update: The class name .like is already used by Tumblr in the notes section of posts, so I changed to .my-like. Many people were either not linking to jQuery or linking the wrong version, so I rewrote it in Javascript to eliminate the need for it. Many people were forgetting to put in the <iframe> or were putting it in the post block (creating multiples), so I moved that into the Javascript. The single most common problem people were having was not putting the Post ID or the Reblog URL in the right place. I eliminated the need for this by moving it to the link.

Really Simple CSS Indicator Gauge

(by jamiebicknell)

If you’re into your stats like I am, then you’ll bound to need a horizontal indicator at some time. These can be used in so many different situations, for example: bandwidth usage, monthly targets, progress or loading bars. This super simple solution only uses 9 lines of CSS and 1 line of HTML per indicator. Simple eh?

.indicator {
    width:145px;
    height:4px;
    background:#DFDFDF;
}
.indicator div {
    height:4px;
    background:#95AFCA;
}

<div class='indicator'><div style='width:38%;'></div></div>

PHP to Show Twitpic Thumbnail Via Tooltips

(by jamiebicknell)

This nice and easy function takes the Twitpic URL and then grabs the thumbnail or mini image. This means that you can grab the image without forcing the user to visit the Twitpic page. The following function will take a string, and automatically convert any Twitpic URLs to thumbnails.

The plug-in I shall be using was created by CSS Globe (See Example 3). Firstly, you will need to download the files ZIP file and extract the main.js and jquery.js from Example 03. In your HTML document you will need the following (remember to change the paths of the JavaScript files):

<script src="query.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<style type='text/css'>
img{
    border:none;
}
#screenshot {
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}
</style>

You will then need to use your favourite method to extract your Twitter timeline (I will be posting my Twitter Class shortly some time in the future).
The following PHP function with convert those Twitpic URLs into the correct markup for the tooltip plug-in.

<?php
function autoTwitpic($text,$type = "thumb") {
    return preg_replace('|http://(www.)?twitpic.com/([a-zA-Z0-9]+)|i','<a href="http://twitpic.com/$2" class="screenshot" rel="http://twitpic.com/show/'.$type.'/$2.jpg">http://twitpic.com/$2</a>',$text);
}
echo autoTwitpic('Check out my latest image http://twitpic.com/1p85f <br />');
echo autoTwitpic('Check out my latest image http://twitpic.com/1p85f','mini');
?>