Add Apple Like Retina Display for Blogger Blog


Best Movies Sites: TOP 10 MOVIE WEBSITES


Apple Retina effect widget for blogger
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.



demo image icon png

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.

apple like retina display for blogger
 

add icon png 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

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

You may also like -



Let me thanks both Tutorialzine, who created this widget and Sonu, (author of latesthack) who edited this post. Hope you like this article. If you're facing any problem feel free to ask via comments. Happy blogging:)