Tumblr Shake Image Code

Ever seen a Tumblr Shaking Image in your Dashboard feed?. Well, creating those images is easier than you think, since you just need to apply some basic code to your Tumblr html and then you ca choose to have it applies to all your pictures and photos, or just individually.

Getting images urls from other Tumblr blogs is not enough, since javascript code is needed from in your own layout.

How to Insert a Pop Up Ask Box to your Home Page

Paste the following code right before your </head> tag in order to make Tumblr Shaking Picture work:

<style>
.shakeimage{
position:relative}
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1) return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"} if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0}
</script>

Update Preview, SAVE and close.
Now, You need to apply the following Tumblr Code to each image you want to see shaking within the <img/> tag. See example Below as well:

class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"

Example

<img src="http://www.tumblr.com/photo/1280/prostheticknowledge/16760253104/1/example.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()"onClick="top.focus()">

It’s much easier if you first insert the image into your post, and then click on html view to apply the code mention above.

Submit a comment Cancel reply