Recent Posts

Blogger

Inspiration

Social

Responsive html

Word press

Tips & Tutor

Freebie

Wednesday, March 12, 2014

How to modify facebook profile theme


When we use Facebook you see only 1 theme. however there's a Chrome Extension (Facebook Profile Extensions) by Google Chrome, Its permit you to vary your Facebook profile theme. This Extension provides you a gallery of Facebook themes, and its terribly simply to access facebook theme and its designs to choose your layouts. integral seven themes in facebook profile extension. you'll be able to additionally add a lot of themes by clicking on a lot of button.

How to modify facebook profile theme:
  • Download this facebook profile extension in Google chrome browser and install It.
  • After you transfer and put in facebook profile extension.
  • You change facebook themes by log in facebook or see higher right ”Themes” menu are else.
  • Click on themes and choose your theme and revel in your facebook theme.
  • You can additionally amendment these themes in chrome settings.
  • Go to options > Tools > Extensions
  • See on facebook profile extensions, click on options and choose your best theme and put it aside.
  • Thats All!! Log in to facebook and revel in your facebook themes.....

Saturday, January 18, 2014

Best top 5 Free Responsive blogger templates

Blogger is a popular platform from Google and it is so powerful tool. Blogger featured with a powerful customisation dashboard not only the content but also the look and feel. Every one like customise their things in blogger. we find the best 5 free responsive blogger themes from designers of 2013.

1. My Extra News - Responsive

This beautiful responsive blogger template layout with many future. It's 2 columns and 3 columns footer with right sidebar the color is black, white and blue with top navigation menu, social media share icon, tab widget siderbar, JSON search result, emoticon, random post, recent post, recent comments and more.

Demo Download


2. B-responsive Blogger Template

Fully Responsive, Mutiple Category posts Widgets  in Footer, Featured  Carousel slider Top (Automatic Update), Featured  Carousel slider Home Widget (Automatic Update), Magazine styled HomePage, Subscribe Widget, Social Icons Widget, Tabbed content Widget for Blogger(Popular,Recent,comments,Tag), Category Posts widget with Small thumbnails with grabs the image automatically, Recent Posts widget with Small thumbnails with grabs the image automatically, Popular Posts widget with Small thumbnails with grabs the image automatically, Latest Tweets Widget, Cool page navigation like Word press, Related post box at the end of every post (To improve Page Views), Horizontal Category Navigation

Demo Download

3. Exelencia - Responsive



This a free blog template with type : 2 column, 3 Columns footer, Black, Blue, Fluid Width, Grey, Left Sidebar, Premium, Responsive, Top Navigation Bar, White


Demo Download

4. Easy News – Responsive Magazine Blogger Template

Easy News is so clean, flexible and has a fully responsive Blogger Template! This template gives you an awesome tool to launch a daily news or magazine website. Easy News has a lot of awesome features

Demo Download

5. RespoAum Responsive Blogger Template

This theme is fully responsive with lot of features, As we all know that PC market is going down and users are using smartphone and tablets to surf the net. This theme fits on every screen which will help you to increase traffic of your blog.

Demo Download

Wednesday, September 25, 2013

Making an Impressive Product Showcase with CSS3


A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product, but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash.

impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!

Demo Download

Tuesday, August 6, 2013

5 Creative Illustrated 404 error pages

Audiko

Audiko’s 404 page is impressive because of its great graphics. It also offers a Google Custom Search bar and a Back to Homepage link.

Illucolor

Illucolor 404 page is great graphics with creative minded with easy to navigate home page.

Lego

Lego 404 page has a nice illustration creative graphics is simple, yet effective and navigate home page.


Molome

Molome’s 404 page is not very functional and useful for the readers, but it is super cute! So they probably won’t mind hitting a dead page. The nav bar is pretty clear, and that’s a plus!

Qype

Qype has a more functional 404 page which allows you to return to the homepage to other categories found on the website. It also gives you some FAQ answers. They successfully combined a practical 404 page with some extra creativity!

Tuesday, June 11, 2013

CSS3 Text Intro Animations



Demo Download

The idea is to blur text and make it appear with a rotation while animating the space between the letters. This can be achieved in a variety of ways using properties like the new CSS filters, animating padding or margin and more. Here we’ll simply use text shadows and letter-spacing to achieve the desired effect. Since we will need to control each letter, we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.

The idea is to have a couple of sentences fade in with the aforementioned effect, so we’ll want to wrap every appearing bit into an h2:


<div class="os-phrases">
    <h2>Sometimes it's better</h2>
    <h2>to hide</h2>
    <h2>in order to</h2>
    <h2>survive evil</h2>
    <h2>Thanatos</h2>
    <h2>This fall</h2>
    <h2>Prepare</h2>
    <h2>Refresh to replay</h2>
</div>

Now that we have the pieces of the sentences in place, let’s apply lettering to wrap every word and letter into a span. We will actually need a letter to be wrapped into two spans because we want to use perspective on each single letter. So let’s go nuts and do this:


$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();

This will created the following insane structure:


<div class="os-phrases" id="os-phrases">
    <h2>
        <span class="word1">
            <span class="char1">
                <span class="char1">
                  S
                </span>
            </span>
            <span class="char2">
                <span class="char1">
                  o
                </span>
            </span>
            <span class="char3">
                <span class="char1">
                  m
                </span>
            </span>
            <!-- ... -->
        </span> <!-- /word1 -->
        <!-- ... -->
    </h2>
    <h2>
        <!-- ... -->
    </h2>
    <!-- ... -->
</div>

Now we styling and animate with css follows Note that the CSS will not contain any vendor prefixes, but you will find them in the files. Our heading will be placed blatantly on the screen, absolutely, occupying all space:


.os-phrases h2 {
    font-family: 'Dosis', 'Lato', sans-serif;
    font-size: 70px;
    font-weight: 200;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 14px;
    text-align: center;
}
.os-phrases h2,
.os-phrases h2 > span {
    height: 100%;
    /* Centering with flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.os-phrases h2 > span {
    margin: 0 15px;
}
.os-phrases h2 > span > span {
    display: inline-block;
    perspective: 1000px;
    transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {
    display: inline-block;
    color: hsla(0,0%,0%,0);
    transform-style: preserve-3d;
    transform: translate3d(0,0,0);
    animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {
    animation-delay: 5s;
}
.os-phrases h2:nth-child(3) > span > span > span {
    animation-delay: 10s;
}
.os-phrases h2:nth-child(4) > span > span > span {
    animation-delay: 15s;
}
.os-phrases h2:nth-child(5) > span > span > span {
    font-size: 150px;
    animation-delay: 21s;
    animation-duration: 8s;
}
.os-phrases h2:nth-child(6) > span > span > span {
    animation-delay: 30s;
}
.os-phrases h2:nth-child(7) > span > span > span {
    animation-delay: 34s;
}
@keyframes OpeningSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        transform: translateZ(130px);
        pointer-events: none;
    }
}
.os-phrases h2:nth-child(8) > span > span > span {
    font-size: 30px;
    animation: FadeIn 4s linear 40s forwards;
}
@keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
    font-weight: 600;
}

Demo Download

Monday, June 10, 2013

7 CSS and JavaScript Performance Tips


Have you ever thought about how many customers you lose by having a slow site? And I’m not talking about file size only, as we rely on browser capacities to understand our code, we need to consider the processing time also.
That’s why sometimes adding a few bites in your code is much better because it save you precious seconds when real browsers or IE try to process your code.
Let’s see a few nice tips on how to improve this:

1. Don’t repeat yourself

You should use the cascade and avoid repeating code. It’s more than just using common classes, you could make good use of the heritance, for instance, so properties that can be set in the parent should be left there. Also you could use the same set of properties for multiple elements (separating multiple selectors using commas, you know).
Also, in your JS make good use of objects, functions and plugins so you don’t need to repeat code.

2. Write from right to left

Unlike us, browsers will process jQuery and CSS selectors from right to left. You may think that this won’t affect your code, but the truth is that it changes everything. A selector like this one is really, really bad:

$(“body #container div a”)
What we think we are writing is “Hey Browser, find the ‘body’ tag, and then inside of it find the #container. There you’ll find a ‘div’ and a couple of ‘a’ elements, let’s select those”. But the browser will actually read the entire page searching for ‘a’ tags, then for each tag it finds it’ll check if it has a div as parent, then check if the div has an element with the #container id, then
check if there’s a body tag beneath them.

This is just too messy. In the JS we have some elegant solutions, like the find function so your code will actually be read as you wanted. Something like this would be good:
$(“#container”).find(“div”).find(“a”)
When you’re writing CSS you don’t have much options but leaving it as specific as possible, so try finding the closest class or ID you can find.

3. ID’s are really fast

Whenever possible use ID’s, they are faster either in CSS or JS. When using JS you have the possibility of using alternatives rather than jQuery to select tags, like document.body or even passing the entire DOM tree as an array (if you already know the exact location of the element).

4. Keep the selectors short

Keep in mind that sometimes an extra item in your selector will just mess up your code. For instance if you have a “ul li a” selector, you could simply use the “ul a” and you’ll be fine.
The best JS tip we can give you is “don’t use it”. Most times you simply don’t need it and using will cost you a lot more in performance, development time, browser compatibility and maintenance.
You can replace a lot of animations by CSS animations, and you could also use a library like yepnope or modernizr to conditionally load fallbacks for browsers that can’t keep up with your awesomeness.

6. You don’t need to declare your vars, but you should

A lot of people simply skip the var declaration step. That’s ok, but you’ll create a lot of global variables that can break other functionalities and also when the browser has to recover it, it’ll search from local to global scope.
Even if you’ll use a global scope var, you can redefine it locally so you’ll save some time. For example, instead of doing this:
var e1= document.getElementById('ID1'),
e2= document.getElementById('ID2');
Do this:
var doc= document,
e1= doc.getElementById('ID1'),
e2= doc.getElementById('ID2');
So you’ll locally store the document var

7. Do math like you do in your head

We tend to think that programming languages do some kind of black magic and give us the result of complex operations. But the truth is that every single operation has a processing cost. For example, instead of doing 2*15 it’s much easier to do 15+15.
The true tip in this case is, use the more native JS code as you can, so avoid relying on jQuery or other plugins because that will certainly take more time to load and often more code to write.

BONUS: 8. Remove one image from your source code

The One Less JPG movement is right when they say that removing one image from your source code would save you far more bites than what you’d save by worrying about JS (and CSS). But the truth is: You should do both.
We should always do our best to improve user experience and if that means that an image will look good in the page, and the fancy JS animation has to be removed, so do it.

Thursday, February 7, 2013

Facebook template installation tutorial

Facebook template
We see how to install a facebook template or own fanpage design in facebook. Below to follow the points

1. Login or Register your facebook account.

2. Create a your page in facebook goto www.facebook.com/pages/create.php

3. After creating the page then find the app Static iframe tab

4. Install the Static iframe tab in FB.

5. Upload your template to the server or using the facebook hosting.
6. In settings add url of your template and fix height.

7. Save the settings and enjoy the page.

Demo pixocular
 
Copyright © 2013 Pixocular