Add Apple Like Retina Display for Blogger Blog

Each and every one know whats Retina Display when Apple released MacBook Pro with this feature. Today in this tutorial I would like to tell you about how to add Apple like retina display effect to your blogger blog by using simple jQuery and CSS. I hope it will definitely increase your Email subscribers. Its originally created by Tutorialzine and I just re-shared in my blog.

You can see a live demo of Apple like retina display effect for blogger blog. Its a screenshot which I have taken from my demo blog. Just click on below ▼ pic and you will then find out what we are gonna do right now.

Add Apple like Retina display to your blogger blog

You can add it in your blogger gadget easily. Let me explain you how to do it. Follow below steps.

Go to Blogger Dashboard >Layout
Click on Add a Gadget
Copy and paste the below ▼ code in it

<style>
*{
 /* A universal CSS reset */
 margin:0;
 padding:0;
}

#iphone{
 /* The iphone frame div */
 width:750px;
 height:400px;
 background:url('http://3.bp.blogspot.com/-tot6cSqJ8Os/UC8onuGn6LI/AAAAAAAABaI/xugZQcyCnIg/s1600/labstrike-googlecode-iphone-4G.png') no-repeat center center;
 position:relative;
}

#webpage{
 /* Contains the webpage screenshot */
 width:499px;
 height:283px;
 position:absolute;
 top:50%;
 left:50%;
 margin:-141px 0 0 -249px;
}

#retina{
 /* The Retina effect */
 background:url('http://3.bp.blogspot.com/-2_DE-vghuEQ/UC8Z9iz3CdI/AAAAAAAABZo/aRL9yve1Kv4/s1600/labstrike-screenshot-googlecode.png') no-repeat center center white;
 border:2px solid white;

 /* Positioned absolutely, so we can move it around */
 position:absolute;
 height:180px;
 width:180px;

 /* Hidden by default */
 display:none;

 /* A blank cursor, notice the default fallback */
 cursor:url('http://latesthack.googlecode.com/svn/img/blank.cur'),default;

 /* CSS3 Box Shadow */
 -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
 -webkit-box-shadow:0 0 5px #777;
 box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

 /* CSS3 rounded corners */
 -moz-border-radius:90px;
 -webkit-border-radius:90px;
 border-radius:90px;
}

#retina.chrome{
 /* A special chrome version of the cursor */
 cursor:url('http://latesthack.googlecode.com/svn/img/blank_google_chrome.cur'),default;
}

#main{
 /* The main div */
 margin:40px auto;
 position:relative;
 width:750px;
}

/* The styles below are only needed by the demo page */

h1{
 padding:30px 0;
 text-align:center;
 margin:40px 0 30px;
 font-size:44px;
 color:white;
 font-weight:normal;
}

h2{
 font-weight:normal;
 text-align:center;
}

h1,h2{
 font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

p.credit{
 text-align:center;
 margin:50px;
}

p.credit a{
 color:#707070;
 font-size:10px;
 text-decoration:none;
 border-bottom:1px dotted;
}

p.credit a:hover{
 border:none;
}

a, a:visited {
 color:#0196e3;
 text-decoration:none;
 outline:none;
}

a:hover{
 text-decoration:underline;
}

a img{
 border:none;
} 
</style>
<div id="main">

    <div id="iphone">
        <div id="webpage">
            <img src="http://3.bp.blogspot.com/-2_DE-vghuEQ/UC8Z9iz3CdI/AAAAAAAABZo/aRL9yve1Kv4/s1600/labstrike-screenshot-googlecode.png" width="499" height="283" alt="Web Page" />
            <div id="retina"></div>
        </div>
    </div>
    
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://latesthack.googlecode.com/svn/img/script.js"></script>

Add this Retina Display to your blog post

You can also add this retina effect to your blog post too. Just follow below two simple steps to do this task. that's all!

Switch your blog post from Compose to EDIT HTML while you writing post
Copy the above html code and paste It in your blog post where you wanna display retina effect

Replace the URL of highlighted lines from above ▲ code with your image URL

Pages

Add Apple Like Retina Display for Blogger Blog