Cara Menambahkan Apple Retina Display untuk Blog

Cara Menambahkan Apple Retina Display untuk Blog 
Hampir semua orang tahu apa itu Retina Display ketika Apple merilis MacBook Pro dengan fitur ini. Hari ini di tutorial ini saya ingin memberitahu sobat tentang cara menambahkan Apple seperti efek tampilan Retina Display ke blog sobat dengan menggunakan jQuery sederhana dan CSS. Saya berharap itu pasti akan meningkatkan pengunjung blog sobat.

Cara Menambahkan Apple Retina Display untuk Blog dengan mudah. Mari kita ikuti step by step berikut:
-Masuk ke Blogger Dashboard> Tata Letak
-Klik Tambah Gadget Html
-Copy dan paste di bawah ▼ kode di dalamnya 

<style> *{ /* A universal CSS reset */ margin:0; padding:0; } #iphone{ /* The iphone frame div */ width:750px; height:400px; background:url('https://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('https://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('https://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('https://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="https://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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://latesthack.googlecode.com/svn/img/script.js"></script>

Tambahkan Retina Display ini untuk posting blog Sobat, juga dapat menambahkan efek retina ini untuk posting blog sobat juga. Cukup ikuti langkah sederhana untuk melakukan tugas ini. itu saja!
-Beralih posting blog Anda dari Compose ke EDIT HTML saat Anda menulis posting
-Salin kode html di atas dan paste itu dalam posting blog Anda di mana Anda ingin tampilan efek retina display.

Cara Memberikan Efek Zoom Gambar Pada Posting Blog
-Login ke akun Blogger sobat.
-Masuk ke bagian Template >> Edit HTML.
-Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,dan letakan kode berikut di atas kode ]]></b:skin>

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

-Kode di atas bisa sobat ubah-ubah lagi untuk memberikan efek Zoom yang berbeda dan silakan berkreasi sendiri.
-Jika sudah,maka klik Simpan Template dan lihat hasilnya.
Atau masukan kode ini, cara sama dengan diatas namun efek zoom dibuat berputar-putar, untuk itu pilih sesuai selera sobat.

.post img{-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out;} .post img:hover {-o-transform: scale(1.2) rotate(360deg) translate(0px); -moz-transform: scale(1.2) rotate(360deg) translate(0px); -webkit-transform: scale(1.2) rotate(360deg) translate(0px); -o-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -webkit-transition: all 1.5s ease;}

Cara Memberikan Efek Zoom Tulisan Pada Posting Blog
-Login ke akun Blogger sobat.
-Masuk ke bagian Template >> Edit HTML.
-Carilah kode ]]></b:skin> dengan menggunakan tombol ctrl+F ,dan letakan kode berikut di atas kode ]]></b:skin>

/* kode untuk huruf awal ----------------------------------------------- */ .hendi { float:left; color: #ffffff; background:#A71414; line-height:60px; padding-top:1px; padding-right:5px; font-family:times; font-size:80px;}

 Keterangan:
-  Kode color: #pilih warna sesuai selera sobat
-  Kode background:#pilih warna sesuai selera sobat
-  Kode line-height:ganti tingginya sesuai selera sobat
-  Kode font-size:ganti besarnya sesuai selera sobat
Jika sudah jangan lupa save dan lihat cara menerapkannya.

Cara Penerapannya pada Blog
Untuk menerapkannya , setiap kali anda membuat postingan / artikel, rubahlah posisi mode editor posting blogger ke posisi " HTML " , maka Kliklah menu HTML yang berada di atas sebelah kiri layar editor postingan. Contoh yang diterapkan: <span class="hendi">huruf awal kata</span>huruf berikutnya
yaitu lihat kata awal huruf Hampir diatas  <span class="hendi">H</span>ampir. Jika sobat mau menerapkan silahkan sesuaikan selera sobat.

Cukup mudah dan simple yang membuat blog enak dilihat serta memberi tampilan efek yang menarik pengunjung blog milik sobat.

Semoga bermanfaat dan menambah keindahan blog sobat.