7/7/13 - Blogroll Page #001

7/7/13 - W.I.P Theme #001

7/7/13 - W.I.P Link Page #001

Original |   //  Edit | Keshis 

Blogroll Page {001} By Rezuna.

preview: here | code: here | creator: here


Simplistic blogroll page:

  • 2-4 customizable links
  • Rotation and hue effect on icons
  • Customizable title

Please like this post if you plan to use this blogroll page at any point of time, it would be greatly appreciated! c:


How to display a loading before the entire page is fully loaded by Fukuo

Live preview

I’ve been struggling on how to make this stuff lately—as I’m working-hard to learn more Javascript and Jquery. This method had been used on Europhia Theme which display a progress bar before the entire page is fully loaded. I really don’t know if this stuff is still become a trend or not. But, at least, it can be beautify the appearance of your blog.

HTML: Creating the loading bar!

As usual, simply. Just try to insert this code below <body> tags:

<div id="loading"></div>

Javascript and Jquery: 

We need this code to make the loading bar is shown when the page is loaded and then, it disappears slowly by using Fade Out Slow.

Put this code between </style> and </head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"> $(window).load(function() { $("#loading").delay(4000).fadeOut("slow"); }) </script>

CSS: Styling!

So, basically, put this code between <style type=”text/css”> and </style>

#loading {
    position: fixed;
    left: 0px;
	top: 0px;
	width: 100%; 
	height: 100%;  
	z-index: 9999;
	background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;

Don’t be hesitant to change the background and the image of loading bar. You can find more loading bar over here. And here’s how to change by looking the bolded ones: background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;

The first one: It is the URL of images, you can replace it with the loading bar with your liking by choosing the provided links above.

The second one: It is the color of the background. You can change it by getting the HEX CODE over here

If you want to change the duration of the loading bar. You can change it by increasing or decreasing the “.delay(4000)”. I recommend not to change it. Any form of Credit, Like and Reblog are appreciated!


Skinny Jeans (x)  -  Fishbowl (x)  -  Touching Letters (x)
Kraash (x)  -  Two Stick (x)  -  Cray Cray For You (x)
Contribute (x)  -  Zhizn (x) ❤

Hue Image Hover.


+Live Preview.

Go to your HTML Code 
Look for <style type=”text/css”> then paste this code under it:

.img{ border:5px solid #fff; box-shadow:0px 0px 2px #333; -moz-transition:1800ms; -webkit-transition:1800ms; }
img:hover { -webkit-filter: hue-rotate(370deg); -moz-filter: hue-rotate(370deg); -webkit-transition:1800ms; -moz-transition:1800ms; } 

Codes by Queenie.


100 Greatest Free Fonts Collection for 2012



Mini-Icon Settings Menu with the jQuery Toolbar Plugin (tutorial)

Free Font: Fabrica

Making HTML dropdowns not suck (Demo & tutorial)

Cikonss 1.0 (Pure CSS Responsive Icons)

Free Font: Track Type

Free Font: Aleo


[ QUIRKS  ] 

basically an about me page 

Preview | Code | Read this before asking any questions

How to install a page:
  1. Go to your customize page, scroll down the gray left sidebar until you see pages
  2. click on add a page and a screen should come up asking for the  page url and some other options
  3. Create your url. And where it says standard layout, click on it and choose custom layout
  4. Plug in the code, click create page then save page
  5. You are done.


**hover over the boxes for the information to appear


Conrado Salinas Branding


▲THEME #18 by soonjun

picture: 100px width;
2 columns, 250px, 400px or 500px width posts;
infinite scroll option;
caption option;
greyscale option;
3 custom links.

Like or reblog if using ^^


A few things look a bit better on Chrome. Any problems with the theme or questions don’t hesitate to ask.

(Source: soon-co)



Live Previews: (Public) / (Blog) -  Code: pastebin


  • 500px/400px posts
  • Option for Black/White Player
  • Hover Description Option
  • Infinite Scroll Option
  • Grayscale Option
  • 32 Coloring Customization Options
  • Sidebar Image (Size: 250xHeightOfScreen)
  • 6 Links
  • Reblog Button
  • Portrait (96x96)
  • Customized “Read More” Button

This is my third theme so far. Hope you guys like it! I finally learned how to integrate the Infinite Scroll option thanks to tumblring.net. Please like/reblog if using, and please follow the general rules! Thank you!

(Source: cremata)


Theme #33 - {No Regrets} by Darian B.

live preview: here || code: here || designer: here

It’s been a while since I’ve posted a new theme, yeah? Well, I like to think the wait was worth it! I present to you my most customizable theme yet! Featuring Misaka Ackerman from Attack on Titan in the preview, this theme has 9657700 possible option combinations yes, I did do the math, not including colors or the six possible custom links. Anyway, I hope y’all like it!

  • one column 250px, 400px, or 500px posts
  • optional monochrome images
  • show/hide image descriptions
  • show/hide permalink
  • two post title/quote font options
  • two post body font options
  • infinite scroll or pagination
  • six optional custom links
  • optional standalone render image
  • right/left standalone render image placement
  • right/left sidebar placement
  • optional subtitle
  • 50+ customizable colors
please like or reblog this post if you plan to use the theme! :3

(Source: redfox-themes)