Instagram feeds for your Tumblr blogs

With everyone going gaga over taking pictures of sushis or pizzas or fries and seemingly photogenic foods, Instagram has turned into a necessity for most Tumblr users. Your photo posts are all probably from your instagram account now! And I know you guys want them on your sidebars somehow so I thought I’d give you guys an easy-to-follow tutorial on how put an instagram feed your blog.

Read More


I sort of remember promising a tutorial some time ago so I thought this might be the right time to do this. Damn, that post took more than an hour to finish. It actually took more time fixing that access token page so you guys wouldn’t have to exert to much energy. But heh, I think it’s a time well spent so I think it’s okay. I hope this could help you guys.

November 3,2012 | 11 notes | Comments | Share

Damn it Shrink-wrapping

I’ve been fixing some few bugs on the theme regarding photo posts. You see, it has that red thing appearing on hover right? Well it doesn’t work that well when the image isn’t as wide as the post div. This would simply be fixed by applying float on the div but since the width isn’t set, I can’t find a way to center it. I found a work around this by applying display:table on the parent div of the image. Boom, it wraps perfectly around the image and it even centers beautifully by applying margin: auto. Unfortunately, I recently found out that display:table does some stupid things on Opera, thus, rendering that method unusable. 

Then I figured I could use display:inline-block instead. Then give the parent div a text-align:center attribute. Guess what? It worked. I fucking worked. I feel like I’ve wasted two hours of my life. Damn it.

September 27,2012 | 1 note | Comments | Share

Punching holes on divs using jQuery

Punchy

So the other day, the ever awesome Gabrielle Wee posted something about her problem regarding the :before and :after pseudoelements, specifically their inability to work with CSS3 transitions. Now that post really got me pulling some of my hair out so the next day(which was yesterday), I decided to try and solve it out. Eventually, instead of solving the problem, I ended up getting sidetracked and started getting immersed with another problem, which was making/punching holes inside div elements. I think Masking would be a better term for it actually. I’ve encountered this problem before but they were all just fleeting thoughts so I’ve never really bothered thinking about it that much. Until now. 

Technically, this would easily be attainable by using images instead. But the problem was that images are… err, I really don’t see that much problems with them, really. Aside from the fact that you can’t use transition effects freely on them, that is. Anyway, my goal was to punch a hole into a div and let the background behind it see through the hole. I had to achieve that without using images. Soooo right, enough with the crappy introductions.

View Demo
Demo #1(Fixed BG)
View Demo
Demo #2(Static BG)

The Idea

The idea was to overlay a div(.hole) over another div(.container) and give the former the same background as the background of the one which was to be masked(body). So in plain speaks, this isn’t actually masking. All I’m going to do is put the .hole div inside a .container div and set the same background as the background of the body. I think I’m starting to go around in circles. Anyhow, I’ll be then setting the background-position of .hole to the negative value of its current offset position in the document. So for example, if the current position of the .hole div is 100px from the top and 500px from the left of the document, then the background position of the will be -500px 100px. Well that was the initial idea. I had to modify the technique a bit for fixed background since it wasn’t behaving the same way static backgrounds does.

The script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){    

 masker = '.holey'; //this would be the hole div inside the container div
 maskee = 'body'; //this is the element which's background should "see through" the hole

//This would take the bg-image of the maskee and its current bg-attachment
 bgs= $(maskee).css("background-image");
 attach= $(maskee).css("background-attachment");
//This sets the bg-image and attachment for the hole div if its bg-attachment is fixed
 if (attach == "fixed"){
     $(masker).each(function(){
	 offset= $(this).offset();
		$(this).css({
		    "background": bgs,
		    "background-attachment": attach
		});
	});
    $(window).scroll(function () { 
	  $(masker).css({
		"background": bgs,
		"background-attachment": attach
	    	});
	});
 }
//This sets the bg-image and position for the hole div if its bg-attachment is anything other than fixed
else{ $(masker).each(function(){ offset= $(this).offset(); $(this).css({ "background": bgs, "background-position": -offset.left + "px" + " " + -offset.top + "px" }); }); $(window).scroll(function () { $(masker).each(function(){ offset= $(this).offset(); $(this).css({ "background": bgs, "background-position": -offset.left + "px" + " " + -offset.top + "px" }); }); }); } }); </script>

So right. That’s it. Be sure to remove the jquery.js if you’re already using another version. As I’ve said, since fixed backgrounds behave differently, I had to give it a different function to process. Or something like that. I’m not really sure but I think this can still be reduced as I think I’ve been putting in unnecessary parts here and there. I mean aside from the comments. Ha ha. 

Oh right, remember to set the body’s margin to 0px incase you’re going to punch a div to it. It adds up some 8px(on Chrome) on the .hole’s offset and it would ruin the whole thing as the background-position would also shift 8px both to the left and top.

How to use it

It’s as easy as a piece of cake. Just paste the codes above into your page’s <head> tag or just above </body>. After that, make sure to replace the value of the masker and the maskee. The masker would be the hole div, in this tutorial’s case, .hole. The maskee on the other hand would be the element you want to be seen through the hole. In this tutorial’s case, it’s the body. The rest would then be up to the script. 

What it can’t do

Well the thing is, this wouldn’t work on fixed holes in static backgrounds. But I think there wasn’t much point in doing that anyway so I didn’t do it. I mean what would you need that for? Aside from that, obviously, as it isn’t really masking nor punching, this wouldn’t work if you want texts or another div to see through the hole. In theory though, I think that should be achievable using iframes. No promises though. It’s only a wild guess. lol.

Anyway, I’ve tried it on Gchrome, Firefox, Opera, and Safari and it’s working on all of those. Well at least on the versions I’m using. Drop me a comment below incase you see something off.

September 12,2012 | 3 notes | Comments | Share

How to rename multiple files at once in Windows

I’ve been renaming a lot of images for a client earlier today and I thought I’d post a tutorial about how to rename multiple files(hundreds of them) at once. Note that this would rename files in a way that they would be in the order that they currently appear in the folder. This would be useful for stuff like renaming hundreds of music files from the same artist so they’d appear next to each other. The same goes for images.

Anyway, to do that, all you’ll have to do is open the folder that has the files. Press Ctrl+A, then press F2. After that, all the files will appear higlighted except for one(the first one) which would allow you to rename that file. Put any name you want then press Enter. All the files will then be renamed after that name. For example, if you put storyimages as the name of the first image, the next one would be named storyimages(1), the next one after that storyimages(2) and so forth. 

So right. That’s it. Hope that could help you one day.

July 18,2012 | 1 note | Comments | Share

Batch convert PNG files to JPEG files

Ok since I’ve virtually nothing to do today, I thought I’d tell you guys how I batch converted PNG files to JPEG files

You see, I’ve been downloading scans of this manga—don’t ask me what, I won’t tell— into my MP5 to read lately. The problem though is that it only reads JPEG files and PNG files would only appear as “unknown files”. Well, I’ve downloaded the last 7 chapters of the series and each chapter contains about around a hundred images each. 

Now while reading it last night, I discovered that the images on Chapter 4 all through Chapter 8 were all saved in PNG format so my reading galore was interrupted. Well I thought it wasn’t much of a problem since I could just “change them tomorrow manually”, I thought. But then I realized that there wouldn’t be less than 500 images. That would probably take me forever to change manually.

So to cut the story short, I Googled programs to do it but all of them were pretty lame so I didn’t use them. I also didn’t want to rely on online converters since that would mean uploading the files and then downloading them all over again.

Until at long last, I found this article telling you how to do it. And all you’ll ever need is you’re trusty Photoshop! The article used CS2 for it but I used CS3 so I think there shouldn’t be any problems regarding the versions you’re using. 

Now to do it, all you’ll have to do is run your Photoshop(of course), click on File>Scripts>Image processor. A window that looks like the image at the left should appear after that.

In number 1 , choose the folder you’re going to convert. In number 2, choose the destination folder. Then on number three, choose the save as JPEG option and change the number under it to 10. After that, click Run and that’s it! Just wait for it to process the images and a new folder will appear on that destination folder you chose.

So right, despite taking  7 paragraphs to tell you such an easy task, I hope that could help you one day. I mean dude, it just converted 196 files in less than 5 minutes. That would’ve taken me an hour or so manually (with Tumblr on another window and all)!

July 6,2012 | 1 note | Comments | Share

Transferring blogs

I’ve been transferring some blogs to my Dump blog account. I’ve been trying to clean this account so all those blogs that I’m not really using will be transferred to that other account. 

Basically, I made that account so I can organize my preview pages, back when I was still making premade themes, more properly. But since I don’t do them anymore, they’ll be the home of all the URLs I’ve been hoarding for a very long time. Don’t worry though. The URLs I’m currently hoarding aren’t really that classy and I doubt you’d even like them. 

Anyways, if you want to know how to transfer blogs to another account, all you’ll have to do is invite that account to the blog. To be more precise, you’ll need a new account of course, and you’ll have to click on the blog you want to transfer. On the dashboard of that blog, look at the sidebar and there should be a button there that says Members—it’s below the Followers button. Click on that and you’ll be redirected to a page that would probably be showing your account with the words (admin) beside it.

Now what you need to do is enter the email address you used for your other account on the text-field above. After that,Tumblr would say that a link was sent to that address and that you can also send links yourself. Get that link if you’re in a hurry and once you’re logged in to the other account, paste that. That blog will then be a blog co-owned by that account after that.

You can now press the Leave this Blog button for your main account.

Well that’s it. Hope that helps.

June 28,2012 | 3 notes | Comments | Share

Making a Pop-up Ask Box

Wouldn’t it be convenient if instead of going to another page to ask someone, all you’ll have to do is click on a link and a pop up ask box would appear? It saves a lot of seconds and that awful background music wouldn’t have to reload all over again. So for anyone who likes that, here’s a little treat.   

Read More

June 8,2012 | 22 notes | Comments | Share

How to download any videos off the web

Since I’m feeling really light-headed today, let me teach you a trick I’ve been using for ages when watching anime on the net.

This trick would let you play a pre-loaded video directly from your machine. That means, you can play any videos you’ve loaded(as long as the browser you used isn’t closed yet) using your computer’s video player, offline. This would be a nice trick to remember esp. if you’re the type of person who prefers watching it offline and loads several videos to watch in advance. 

This would involve playing the cached video directly from your cache. It’s actually very easy.

First, find a video that you’d want to download/watch. Press the play button and let it finish buffering. This is actually a really useful trick since there would be times when waiting a video buffer is relatively faster than downloading it from its host’s servers. With this trick all you’ll have to do is wait.

Next, download this application. Don’t worry. it’s safe. I’ve been using it for months(I think it’s been a year). It’s a small file too so it shouldn’t take that long. After you’ve downloaded it, install it then let it run.

Let the program load videos from your cache. BTW, to put it simply, all the videos you play, whether they’re from Youtube, or Dailymotions or xHamster, is saved on the cache folder of your browser. It gets deleted afterwards once you close that browser. This program lets you copy it into your hard drive for future “streaming”. 

Once the program has loaded, find the video you’ve loaded. Right click on a video and Play it. If you don’t have a player yet, I’d suggest downloading Media Player Classic since that’s what I’m using and it hasn’t caused me any troubles yet. VLC player has, though, so you might want to slash that out. Once you’ve found the correct video, right click on the file on the prgram and Copy it to a hard drive of your preference.

That’s it! Now you can play 5, 6, 7, or how many videos you want and let it load! You can watch them all later if you want once they’re on your hard drive. This would be a neat alternative/substitute for Youtube downloaders. It can even get videos that downloaders doesn’t support. And plus, it downloads videos in its original uploaded form. So if the original video was on mp4, it would download it as an mp4 file. You’ll have to do the conversions if you need to.

Hope that helps.

April 11,2012 | 9 notes | Comments | Share
1 2