Tutorial Blog Unik: Efek

Cara Membuat Energy Saving Mode Keren Di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Energy Saving Mode Keren Di Blog</b> - Udah beberapa hari ini saya tidak posting tutorial blogger pemula. Dan di sore yang hujan cukup deras untuk wilayah Surabaya ini, saya akan post tutorial lagi yang kemungkinan besar jarang dipakai oleh para blogger atau pembangun blog. Tutorial yang saya maksudkan adalah <b><a href="http://www.fahmifanirius.ga/2015/02/cara-membuat-energy-saving-mode-keren-di-blog.html" rel="dofollow" title="Cara Membuat Energy Saving Mode Di Blog">Cara Membuat Energy Saving Mode Di Blog</a></b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggw-sgxh4DimvlLyUIKwHL26pmVb2daEtQzC8EbbjMx4A15Rhd1lj5vwfsDqo3KLD6qbZSRZvZ2vgyb3eK3MFmCqPYf_Thls-SMrvrED5oNuTi-VRNSqcTUx44A4gsEOY9E8AI9VlNnjsX/s1600/Screenshot_4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Energy Saving Mode Keren Di Blog" border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggw-sgxh4DimvlLyUIKwHL26pmVb2daEtQzC8EbbjMx4A15Rhd1lj5vwfsDqo3KLD6qbZSRZvZ2vgyb3eK3MFmCqPYf_Thls-SMrvrED5oNuTi-VRNSqcTUx44A4gsEOY9E8AI9VlNnjsX/s1600/Screenshot_4.jpg" title="Cara Membuat Energy Saving Mode Keren Di Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Pasti, diantara sobat saya yang setia membaca artikel blog sederhana saya tidak mengerti untuk maksud dari tutorial ini. Karena memang jarang dipakai oleh para blogger. Untuk itu, sebelum saya memberi tutorial <b>cara membuat energy saving mode di blog</b>, saya akan jelaskan apa maksud dari tutorial dan kegunaannya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Energy menurut kamus besar bahasa Inggris dapat diartikan dengan energi, daya, atau kekuatan. Saving artinya menyimpan. Sedangkan mode adalah mode atau cara. Energy=daya, saving=menyimpan, mode=cara. Jadi, arti dari kata <b>Energy saving mode</b> adalah Cara untuk menyimpan daya di blog.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Entah apa maksud lebih detail dari kalimat tersebut. Karena tutorial <b>cara memasang energy saving mode di blog</b> ini hanya lah sebuah tampilan, bukan berarti benar-benar blog nya menyimpan daya atau kekuatan.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan <b>tampilan energy saving mode</b> akan muncul, ketika pengunjung sobat pergi atau meninggalkan blog sobat. Misalnya pengunjung sobat membuka tab lain atau membuka window lain, maka tampilan <b>energy saving mode </b>akan muncul.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Untuk lebih jelasnya lagi, sobat bisa mencoba tutorial ini. Dan saya akan beri bebarapa <b>cara memasang energy saving mode di blog</b>. Sobat bisa pilih salah satu diantara pilihan cara yang saya berikan.</span><br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"> Cara Membuat Energy Saving Mode Dengan Gambar Sendiri</span></h2>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"></head> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script language='javascript' src='http://infoikiblog.googlecode.com/files/Energy%20Saving%20Mode%20%5BINFOIKI%5D.txt' type='text/javascript'></script></span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Setelah itu masih ada langkah selanjutnya</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Tambahkan gadget/add gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copy kemudian paste kode dibawah ini pada kolom HTML/JavaScript</span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(URL gambar energy saving mode) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">11. Simpan</span><br />
<h2>
<span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Energy Saving Mode Dalam Bahasa Indonesia</span></h2>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"></head> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id'
type='text/javascript'/>
<script>jQuery.noConflict();</script>
</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan</span><br />
<h2>
<span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Energy Saving Mode Dalam Bahasa Inggris</span></h2>
<span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Energy Saving Mode Dalam Bahasa Indonesia</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"></head> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"></head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=30'
type='text/javascript'/>
<script>jQuery.noConflict();</script>
</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan</span><br />
<h2>
<span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Energy Saving Mode Dengan CSS</span></h2>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;">]]></b:skin> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span></div>
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">body::before,
body::after {
  position:absolute;
  position:fixed;
  content:"";
  background:#000;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
  z-index:99999;
}
body::before {
  border:10px solid #ccc;
  border-left:none;
  top:0;
  left:50%;
  right:0;
  bottom:0;
}
body::after {
  top:0;
  left:0;
  border:10px solid #ccc;
  border-right:none;
  right:50%;
  bottom:0;
}
body:hover::before {
  left:100%;
}
body span.energyatas {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 -1px;
  z-index:999999;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body span.energybawah {
  position:absolute;
  position:fixed;
  right:0;
  left:0;
  top:46.5%;
  border:5px solid #ccc;
  margin:0 0 0 0;
  z-index:999999;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover::after {
  right:100%;
}
body:hover::before,
body:hover::after {
  visibility:hidden;
}
body:hover span.energyatas {
  visibility:hidden;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  -webkit-transition:all .2s ease-out;
  transition:all .2s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  top:0;
}
body:hover span.energybawah {
  visibility:hidden;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  -webkit-transition:all .2s ease-out;
  transition:all .2s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  top:100%;
}
body span.energy {
  width:35%;
  border-bottom:5px solid #ccc;
  border-top:5px solid #ccc;
  padding:10px;
  background:#000;
  border-radius:20px;
  font-size:20px;
  color:#fff;
  text-align:center;
  position:absolute;
  position:fixed;
  left:32%;
  right:45%;
  top:40%;
  bottom:45%;
  margin:0 0 0 0;
  z-index:123455543123445556888;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
  opacity:1;
  -moz-transition:all 3s ease-in;
  -o-transition:all 3s ease-in;
  -webkit-transition:all 3s ease-in;
  transition:all 3s ease-in;
  -moz-box-shadow:0 0 20px 3px #6405C2;
  -webkit-box-shadow:0 0 20px 3px #6405C2;
  box-shadow:0 0 20px 3px #6405C2;
}
body:hover span.energy {
  visibility:hidden;
  -moz-transition:all .7s ease-out;
  -o-transition:all .7s ease-out;
  -webkit-transition:all .7s ease-out;
  transition:all .7s ease-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  opacity:0;
  right:0;
  z-index:99999999;
}</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: sobat bisa mengubah sendiri warna nya sesuai dengan keinginan. Untuk mengetahui kode warna, silahkan klik <b><a href="http://www.fahmifanirius.ga/p/blog-page_8.html">KODE WARNA</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Cari lagi kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></body> </span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">7.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIBAWAH kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;"><</span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">body</span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">></span></div>
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><span class='energyatas'></span>
<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>
<span class='energybawah'></span></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: kode <data:blog.title/> dapat diubah dengan keinginan sobat. Kode tersebut menunjukkan nama blog sobat. Sobat bisa mengganti dengan nama biasa.</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Energy Saving Mode Keren Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat energy saving mode di blog dapat memberi tampilan hemat energi blog Anda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">87%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 1297 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Animasi Efek Tutorial Blogger Cara Membuat Energy Saving Mode Keren Di Blog

Cara Membuat Energy Saving Mode Keren Di Blog - Udah beberapa hari ini saya tidak posting tutorial blogger pemula. Dan di sore yang hu...

Cara Membuat Efek Page Loading Di Blog

6:36 PM Unknown 29

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Efek Page Loading Di Blog</b> - Tutorial blogger pemula akan bertambah koleksi lagi di blog kecil saya ini. Saya akan beri tutorial yang satu ini khusus untuk sobat yang berbaik hati mengunjungi blog saya ini. Dikarenakan tutorial blogger yang satu ini jarang sekali dipakai oleh para blogger atau pembuat blog untuk mengikuti tutorial ini. Tutorial tersebut adalah <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-efek-page-loading-di-blog.html" rel="dofollow" title="Cara Membuat Efek Animasi Page Loading Di Blog">Cara Membuat Efek Animasi Page Loading Di Blog</a></b>. Saya sendiri memakai tutorial yang satu ini. :D</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjnmZfk-Ze2a3aoN7N35OPDMqTo8xlgUFzguKhQgsDsRnDNQbWT7bJDF3zrcTwUQM6dtg9s57Mf7Apoe0TdJGiY2vEwZBLRdgirdqVgoBh_bmBn_n29uDoNPbsPy3gsJk-BSvOfim28OB/s1600/fahmi+fanirius+-+loading+14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjnmZfk-Ze2a3aoN7N35OPDMqTo8xlgUFzguKhQgsDsRnDNQbWT7bJDF3zrcTwUQM6dtg9s57Mf7Apoe0TdJGiY2vEwZBLRdgirdqVgoBh_bmBn_n29uDoNPbsPy3gsJk-BSvOfim28OB/s1600/fahmi+fanirius+-+loading+14.png" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> Sudah seperti yang saya katakan diatas bahwa tutorial yang satu ini jarang dipakai oleh para blogger entah kenapa tidak memakai tutorial yang satu ini. Padahal tutorial yang satu ini menurut saya terlihat keren. Efek animasi page loading di blog ini akan muncul ketika pengunjung sobat klik link yang merupakan link dari blog sobat sendiri dan akan pergi ke link atau tautan yang dituju.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Sebelum saya beri tutorial nya, saya akan jelaskan bagaiman tutorial cara membuat efek animasi page loading blog. Efek animasi page loading ini akan muncul menutupi halaman blog ketika pengunjung klik sebuah link di dalam blog sobat. Tapi, jika koneksi pengunjung sobat benar-benar lelet alias lambat, gambar animasi ini tidak akan muncul. :v *justkidd Cara menambahkan efek animasi page loading ini menggunakan kode jQuery. Tapi ini tidak akan memperlambat blog sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Langsung saja, saya akan jelaskan tutorial ini.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;">]]></b:skin> </span></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5.  Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif;">]]></b:skin></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">/* Efek Page Loading */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(<span style="color: cyan;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF</b></span>) no-repeat 50% 50%;padding:1em 1.2em;display:none}</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Cari lagi kode </span><br />
<pre><span style="color: cyan; font-family: Arial, Helvetica, sans-serif;"></body></span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">7. Copy kode jQuery ini lalu paste dan letakkan kode nya tepat DIATAS kode </body></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">8. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Ganti URL gambar nya sesuai dengan keinginan gambar animasi sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Disini saya hanya memberi beberapa animasi loading saja. Jika sobat ingin mencari sendiri ya silahkan. Atau bisa cari di <span style="color: #073763;"><b>www.preloader.net </b></span></span><span style="font-family: Arial, Helvetica, sans-serif;">Untuk mengambil URL gambar dibawah ini dengan cara klik kanan gambar yang dipilih sobat, lalu 'Copy image URL'</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdZ28DSWMYBLE7wXBsJ_A8QeU1c1_sHF_jTYx6ZOGOdgT9QAry1KUNsdhKuJPBIWy4bHDAmoFfRjscc_kS5MCUjcj10_KHCGqXh9Iteq_F7zOLNGeUnaxR_y1skY6udauF5ZbLQ7TPvX5/s1600/Fahmi+Fanirius+-+loading10.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdZ28DSWMYBLE7wXBsJ_A8QeU1c1_sHF_jTYx6ZOGOdgT9QAry1KUNsdhKuJPBIWy4bHDAmoFfRjscc_kS5MCUjcj10_KHCGqXh9Iteq_F7zOLNGeUnaxR_y1skY6udauF5ZbLQ7TPvX5/s1600/Fahmi+Fanirius+-+loading10.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoe5d9tXDXw07YS21Ek8YEVg4f5Op0rvRpD94_VfWV6ogr1YfcXs6kgiI4yTX0WuJJiTqmeZJsCPtEoN856NIllp2ziz2073Mxf2aJrd9Ex0ysw9571fcGGf47wWvohuIvTpSZLGWQmiID/s1600/loading10.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknLwvxFJO13WdhvkQgdm20ZVGyNaveeEr6uEDJmNbwU0fRgq_McZHkrYeyZOSUoXt19r6Aol-8iE2338eLz_5pl0b0OrTQ8iw2apqW_lnM1VBFo7lRkJlr5nhraQKRUfpkpGd3dzEtXwD/s1600/Fahmi+Fanirius+-+loading3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknLwvxFJO13WdhvkQgdm20ZVGyNaveeEr6uEDJmNbwU0fRgq_McZHkrYeyZOSUoXt19r6Aol-8iE2338eLz_5pl0b0OrTQ8iw2apqW_lnM1VBFo7lRkJlr5nhraQKRUfpkpGd3dzEtXwD/s1600/Fahmi+Fanirius+-+loading3.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 20.7999992370605px;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithm5uVjMa4k49_dJy5fPhXEP3mNLs4aMtuvtzp4sqzBJnPP6QuFdGLpFX1A5yVKmdp6_PgRYbGaaPCnbwV1vkJLnNSUfsab4kty6LyEIdFJRVoC56Y74CCvVxx9_3EV4DgKAsBXdD2Mti/s1600/loading7.gif</span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTRtraDniW1hxoL2SvwDjECwNFAFjI3HvA8ei9353AE7kL-XHP82zYXfB_phbmXoTIhv-RxtkhFpKMEM0Nf5ffSu_Ks1cabqj88ykc5A4a6vg1pzyOotIw4xgJuaEJsh1J0UzXkM3r_ou/s1600/Fahmi+Fanirius+-+loading6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTRtraDniW1hxoL2SvwDjECwNFAFjI3HvA8ei9353AE7kL-XHP82zYXfB_phbmXoTIhv-RxtkhFpKMEM0Nf5ffSu_Ks1cabqj88ykc5A4a6vg1pzyOotIw4xgJuaEJsh1J0UzXkM3r_ou/s1600/Fahmi+Fanirius+-+loading6.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouBE_1tcFVC4gcdtFS3y0ahxHH4K_mEpv6rHh_fQsmIVE-TQaGITQIVNJox-vSmCHzFwYzYXNf2ZVdyu3851WaO4llFWjXjhxZXy4sttS5BnthnP2aO4vGVWZi1VmMLlyn3-ySGZwy79H/s1600/loading6.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LAZ3sposyewsHOEx0Rtey5oB4e3PWExTRUiRYXpLyuN5VXKeuSH7NzHLP_ZUqO68ll7TNHS6v3vO7Qhnf9NIOvFi1WIo57Tm27Lvm5Kvbj_dHpAEkIq0AJ1Q0Dwn-0ZhzbYmyrr9JmI3/s1600/Fahmi+Fanirius+-+loading5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LAZ3sposyewsHOEx0Rtey5oB4e3PWExTRUiRYXpLyuN5VXKeuSH7NzHLP_ZUqO68ll7TNHS6v3vO7Qhnf9NIOvFi1WIo57Tm27Lvm5Kvbj_dHpAEkIq0AJ1Q0Dwn-0ZhzbYmyrr9JmI3/s1600/Fahmi+Fanirius+-+loading5.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0cPP6nPwFOjfL9yy2UVZmyihzEftSNQxfsZNEQj2VQ_gtlgNqc6a64oK3_cvfbozZaBADTfMNKppmkjB27D_PMZWHcIaO8kymbSiKBFV0kRxzbbFoAWDFG5jtFeEp_SVWDMuxU7bxgYHE/s1600/loading5.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xMc213h6LprsCvS4jsVeXNGDygcmkK62wykKmt7VHI15pl2xkCYQfJg8lprBrZEeZ1sa8fA_gYNJH_yY2OuaSRtrKkJ-h9hbCvl_a2GyWazT3yJfWpmOprMJiY-_ceirNva35n1ePek6/s1600/Fahmi+Fanirius+-+loading4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xMc213h6LprsCvS4jsVeXNGDygcmkK62wykKmt7VHI15pl2xkCYQfJg8lprBrZEeZ1sa8fA_gYNJH_yY2OuaSRtrKkJ-h9hbCvl_a2GyWazT3yJfWpmOprMJiY-_ceirNva35n1ePek6/s1600/Fahmi+Fanirius+-+loading4.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBBYa2BPNHIF3XDC4VT2V_vqc9Add9XilyUp0fUFTqjuw1R6sOOgOH5mRTaBRaKFK8_VtFVn9-enJJXUqgzIb3sXxsAov0vz6UVbtXoFhqjZ8GAmU8pFHg7JSvSUJh6qAYihkgx4ghdGo/s1600/loading4.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw2ExJjC-9uPa44kBDKKLQ-DxIG8XAoXZe6EI-GAB-5Y-Q6XYNAwm-vVYLAm5m2S3G30xbVg8_uBFL3G4TSijosUO8Q9yogueevt6NlkRDwyiIDHNs7SRmrktbNtf9MPfLWE1F__KU7g1/s1600/Fahmi+Fanirius+-+loading2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYw2ExJjC-9uPa44kBDKKLQ-DxIG8XAoXZe6EI-GAB-5Y-Q6XYNAwm-vVYLAm5m2S3G30xbVg8_uBFL3G4TSijosUO8Q9yogueevt6NlkRDwyiIDHNs7SRmrktbNtf9MPfLWE1F__KU7g1/s1600/Fahmi+Fanirius+-+loading2.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Cl5QlZ-ifac_AtdJIXfS8q9DECb43D9qYjXxDVivktXw5DFRHL1dQzDqHeEbvriwAtmwXxVn6YsYAmTwMc8KQY9A9e0YIfTfcJa-gc8Y-69mf0dr8OTqqR18IkEcpiK9cwzuFToaYs3U/s1600/loading2.gif</span></div>
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh2Hq-v2pc4K2Jjo9trQOJuRDYx6mbYtu8qmfRbnJ1Tf9yRuX_icYTA4uYpMhndFFK1l7D9xVLbCRwzA9FNp0OPH8UrpXRKww1OckhLK1fM6ZXxaHMJVXEpjJUQzHcWbfWhFPUAoRzhzY6/s1600/Fahmi+Fanirius+-+loading1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Page Loading Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh2Hq-v2pc4K2Jjo9trQOJuRDYx6mbYtu8qmfRbnJ1Tf9yRuX_icYTA4uYpMhndFFK1l7D9xVLbCRwzA9FNp0OPH8UrpXRKww1OckhLK1fM6ZXxaHMJVXEpjJUQzHcWbfWhFPUAoRzhzY6/s1600/Fahmi+Fanirius+-+loading1.gif" title="Cara Membuat Efek Page Loading Di Blog" /></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_35Szm52T9Yp4aXzhg6sskrWDLiWlAjz6UqlWEzKHAnhVwBawdrQ7VY4Bo8YqhGH0gkY2psRN98k7nUoSlDop3mMd100qKaMPAwsJZNOoQMYzur8K4RtpYoDCB7WXxenxcoKDne1GukL/s1600/loading1.gif</span><br />
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF" style="margin: 0px; max-width: 80%; padding: 0px;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNF2n_DEXpcfgoCQesZmgnYojLeboII6QA3QgFa0hQYKuuCaxR5io36FF1NBxzQ7kCKlPpHT8lyVuBGiqTyub8u6UApGjJd84g1py5zBqKs-ar8yw8Ldcn7-YiC3njV6BDbK5FL9TS9o/s128-no/Loading1.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz2CcK4BDhaolvX_ByxbU_57umSY9sdHp41s0Pg8CXDf2MWBQkteddjFzRldTN5z0D1e42Glt7L1Z94g8JYN6yrTLlmLZpiobiNZtoqj11vnr68G1gd5a3yDfSx7XKtJgqaliEOIuWP78/s128-no/Loading2.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZW7DzIpWNEjqSd5kn6BhGtk8zmAr4nuwnL7NiMO5l2hBFBXaJo_6A_r9qrmX2FWQVYofia3XvAdh-syhlJtFiFZ6wZdH04L01oTDK25C69_b9TPHsRBlsWFtWOzTZyD4X_4pg01KqIsk/s128-no/Loading3.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEH4wZZ3LojF-dGaVx6IYIybSIIuJcjNk4nLZMfus8J0pCsD2RiU7Py0mSdCzyaRlkDcj2C2tCAGh8hyphenhyphenXECXxmI-quXFJwNWCOVU-mwiojjqxhuJ2IXu_t8g70a9QAW4piFeN1J0B73eA/s128-no/Loading4.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKGZBmDUYXhJRRcWTnh9AlDZ-s42CVnXI02FI45O1IIC1EljTJ9M90XdjdwXg2pea8A_n_zlIorRrEpZexgwBT1F3_8ySHmZEm9MhHHoBV5eE-HIz4V_Oe7NRlx9rk0CCEDotwgiBJlrc/w124-h128-no/Loading5.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJTpHB9uStUpOCUYk408uMSbx8CdejJI_1_p-K47J47dq6uhcWCQHBefRGit62DPXBWiz5fGvTqE5jwOQOYLne1nrAEawTbqZL90caTP96NrkU7wexVHZ3EljeyqQN51E4UbuDXH0gsI/s128-no/Loading6.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnP8bFeeq3AlyvHslyZJu36ZuWQ2Nt-gq67Tk0kdr_UPiIkf2cGOOw1OS9yE7vLlMhm3lhmJYus8AiA05zTvb4lUwYRhqKQT814LDZxpDqixVp8AKiXgauM4qbCIJP5pfoUyYvMomLbo/s128-no/Loading7.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeDU9zTa4bvhTbh0TNw7-7oN54VY9wop6PHHD2BpxO4f6rTayztqQTKRfKVRgyMd1bo-2tumGrgmdQ1CQSzx4sDEbwwPvuw9_KE6tDDuuh0bAFA9py6jsFkfBDqtEhXVaLmOSKb0aYZE/w128-h54-no/Loading8.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqoaQ0a910XQp1ImGnkd6wIcwRPLj6mtFxDMn9u5pRT8Oyt8iqmAQv7arb9Rm_yQXujTFT6HK4t_PmVfiSvEvAbVqmfZpxppTAm58Xl6XPoBuNzNHFfDV5YHSHfUoXk-Bd5pja47dglc/s128-no/Loading9.GIF</span></div>
<div class="separator" style="background-color: white; clear: both; float: none; height: auto; line-height: 23.3999996185303px; margin: 0px auto; max-width: 100%; width: auto;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF" style="margin-left: 1em; margin-right: 1em; text-decoration: none;" title="Cara Membuat Efek Animasi Page Loading di Blog"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Efek Page Loading Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF" style="height: auto; margin: 0px; max-width: 80%; padding: 0px; width: auto;" title="Cara Membuat Efek Page Loading Di Blog" /></span></a></div>
<div style="background-color: white; line-height: 23.3999996185303px; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIEVJ4Jp2yRl72qVHXkJVST-9x0jAvrHmyui461urSWncheYxCH_k23EeJpuqtsSuTb2fBizgjXwsnJeJxjtV_9cWU8rbfQFvQPhPfsFFPWSis-a-BSht7knYEzXSQsEhTgJLBKieAig/w128-h40-no/Loading10.GIF</span></div>
</div>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Efek Page Loading Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat efek animasi page loading di blog membuat blog Anda terlihat lebih keren ketika pengunjung Anda klik link/tautan yang ada di dalam blog.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 1947 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Animasi Efek Tutorial Blogger Cara Membuat Efek Page Loading Di Blog

Cara Membuat Efek Page Loading Di Blog - Tutorial blogger pemula akan bertambah koleksi lagi di blog kecil saya ini. Saya akan beri tuto...

Cara Membuat Label Miring Saat Disentuh Cursor Blog

8:38 PM Unknown 29

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Label Miring Saat Disentuh Cursor Blog</b> - Hari ini, hari minggu tentu nya hari bebas. Kalau bebas, saya ada waktu untuk membuat <b>tutorial blogger pemula</b>. Untuk hari ini, saya akan bahas tutorial tentang <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-label-miring-saat-disentuh.html" title="Cara Membuat Label Cloud Miring Saat Disentuh Cursor Blog">Cara Membuat Label Cloud Miring Saat Disentuh Cursor Blog</a></b>. Banyak sekali cara yang dilakukan oleh para blogger untuk memperindah dan mempercantik blog mereka. Salah satu nya dengan tutorial ini.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Jarang sekali memang, saya menemukan blog yang menerapkan tutorial ini. Tapi, saya juga pernah melihat dan berkunjung ke web/blog orang lain yang menggunakan tutorial ini. <b>Label atau kategori</b> akan <b>miring ketika disentuh cursor blog</b>. Untuk demo nya, lihat animasi di bawah ini.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4ZQyjkdjCK3N4bK3ZEI-VhNQSVMlK7pYJG1x-8-jEWgmR0xMNH5m47LbCXPPMC-7TCYfaoeR7DVp_WMKeOo4k99DM3FZBGF55e_gAPNlSDAUTeUmXs7eD-ZEj7uWBdhXEe3v4XyBocEC/s1600/ab.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4ZQyjkdjCK3N4bK3ZEI-VhNQSVMlK7pYJG1x-8-jEWgmR0xMNH5m47LbCXPPMC-7TCYfaoeR7DVp_WMKeOo4k99DM3FZBGF55e_gAPNlSDAUTeUmXs7eD-ZEj7uWBdhXEe3v4XyBocEC/s1600/ab.gif" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Sobat mungkin tertarik dengan tutorial yang akan saya berikan ini, sobat baca baik-baik. <b>Label atau kategori</b> pasti nya banyak digunakan oleh para blogger, kemungkinan semua blog yang mempunyai banyak postingan atau artikel pasti terdapat label atau kategori nya. Tujuan dari label atau kategori adalah untuk menkategorikan atau menggolongkan beberapa postingan atau artikel sehingga mempermudahkan bagi pengunjung blog untuk membaca informasi didalamnya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan disini, saya akan memberi tutorial yang termasuk efek untuk label atau kategori cloud miring saat disentuh cursor blog. Label yang dipakai harus <b>label cloud</b>. Untuk membuat label cloud bisa ikuti dulu ini, lalu ikuti tutorial <b>cara membuat widget label cloud berputar saat disentuh blog</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Tambahkan gadget/add gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Pilih Label</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Centang yang Cloud. Lihat gambar berikut:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c8gLyqdhMOYX_lo8LUaIs7ry_dYE2HCs_V8Pbn6_r9UXOCrKOFJGBtPsnxcIBq6fH_OKjq6NDIMPvY5ZeGMA0LNIvjjfDLsyaQy7ggWFkTIAIS66AJftiBaaThR_ciVWKB4z5if1WC_9/s1600/Screenshot_1.jpg" imageanchor="1"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4c8gLyqdhMOYX_lo8LUaIs7ry_dYE2HCs_V8Pbn6_r9UXOCrKOFJGBtPsnxcIBq6fH_OKjq6NDIMPvY5ZeGMA0LNIvjjfDLsyaQy7ggWFkTIAIS66AJftiBaaThR_ciVWKB4z5if1WC_9/s1600/Screenshot_1.jpg" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" width="320" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">6. Simpan </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Setelah itu pilih menu Template</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Klik Sesuaikan/customize</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. Pilih advanced</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Lalu Add CSS</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">11. Copy kode dibawah ini kemudian paste kan pada kolom Add CSS</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Label Miring Saat Disentuh Cursor Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxSuPz6zgXtBET9NprNpYNVArq0b49G_rtu52MszXiW805stsr9WoFiQMeVqbqRdcifXOmX5b8R5k0Vwk__okXxWudVGVmbW5aPsYHLKlsPuvzS-01Cs2GCpV54B8ieGib6Dmj52_VepI/s320/saa.PNG" title="Cara Membuat Label Miring Saat Disentuh Cursor Blog" /></span></div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
</div>
<div style="text-align: left;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">.label-size a{text-transform:uppercase;float:left;text-decoration:none} .label-size a:hover{text-decoration:none} .label-size{float:left;font-size:10px;color:#666;text-transform:uppercase;text-decoration:none;border:solid 1px #C6C6C6;border-radius:3px;margin:0 2px 6px 0;padding:3px} .label-size:hover{border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">12. Apply</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Label Miring Saat Disentuh Cursor Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat label cloud miring saat disentuh cursor blog membuat label Anda semakin keren dan berbeda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">92%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2845 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Efek Tutorial Blogger Widget Cara Membuat Label Miring Saat Disentuh Cursor Blog

Cara Membuat Label Miring Saat Disentuh Cursor Blog - Hari ini, hari minggu tentu nya hari bebas. Kalau bebas, saya ada waktu untuk membu...

Cara Membuat Slide Show Keren Di Blog

8:20 PM Unknown 35

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" trbidi="on">
<div dir="ltr" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Slide Show Keren Di Blog</b> - Nambah tutorial blogger lagi nih... Saya buat tutorial ini kemungkinan ide dari pengunjung setia saya yang berbaik hati memberi request kepada saya. :3 tutorial yang beliau request adalah <b><a href="http://www.fahmifanirius.ga/2014/12/cara-membuat-slide-show-keren-di-blog.html">Cara Membuat Slide Show Gambar Di Blog Dengan Efek Keren</a></b>.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=7176782878327236617" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgX8yxcTFOl1BCa9X03H2RPPDHkFhE8n2kw96UORKdQ1opVtoJ0u-Tg0_N76u7HuuULi3jINC1KJWrdOaHvnDXMkIu0jFCDSg2h9-Q3R9Id4ooNEHcWY7g0aJkcHlNEji1Hm-P7DztMth/s1600/unnamed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Slide Show Keren Di Blog" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgX8yxcTFOl1BCa9X03H2RPPDHkFhE8n2kw96UORKdQ1opVtoJ0u-Tg0_N76u7HuuULi3jINC1KJWrdOaHvnDXMkIu0jFCDSg2h9-Q3R9Id4ooNEHcWY7g0aJkcHlNEji1Hm-P7DztMth/s1600/unnamed.png" title="Cara Membuat Slide Show Keren Di Blog" width="200" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Permintaan pengunjung setia saya meminta untuk buatkan tutorial cara membuat slide show dengan jQuery. Sekarang, saya mengabulkannya. :v Bukti screenshot nya:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-IKPVa-rnlQvcOzZ7FAppJrjc2KwKHObhvTJkBPsWlp9tY1WP92xBU3LrNOi4NBmVRtBlG7-azvPWZCIu61_rKsT0odwOyJiZrnoREMxgFctyWftVgGADkDxMG38AerFX17ssRfQdRgX/s1600/Screenshot_3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Slide Show Keren Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-IKPVa-rnlQvcOzZ7FAppJrjc2KwKHObhvTJkBPsWlp9tY1WP92xBU3LrNOi4NBmVRtBlG7-azvPWZCIu61_rKsT0odwOyJiZrnoREMxgFctyWftVgGADkDxMG38AerFX17ssRfQdRgX/s1600/Screenshot_3.png" title="Cara Membuat Slide Show Keren Di Blog" /></span></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Nah, sekarang saya akan jelaskan tutorial tersebut. <b>Cara memasang slide show gambar di blog keren</b> sering dipakai oleh kalangan para blogger. <b>Slide show adalah</b> tampilan dari beberapa gambar yang diluncurkan. Buat sobat pasti dengar kata slide di tv tv. Misalnya acara talkshow yang menyuruh host untuk <b>menampilkan sebuah tampilan beberapa gambar</b> yang di slide/luncurkan.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<b>Slide show</b> juga akan menampilkan beberapa gambar satu per satu di blog dengan beberapa efek. Tapi, disini saya akan jelaskan <b>tutorial cara mudah membuat slide show foto di blog dengan efek yang super keren</b>. Beda dengan slide show yang ada di blog orang lain. Dan juga beda tutorial nya dengan tutorial yang dibuat orang lain. :3</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan disini saya akan jelaskan tutorial tersebut dengan 2 <b>slide show</b> yang berbeda. Sebelum saya akan beri tutorial nya, masing-masing mempunyai <b>efek slide</b> yang berbeda. Cara 1, cara yang mungkin sering di pakai oleh para blogger dan untuk cara 1 mempunyai slide yang biasa. Efek nya hanya transparan kemudian muncul gambar selanjutnya. Untuk cara 2, efek slide show nya keren. Tapi, slide show untuk cara 2, tidak menampilkan gambar yang sobat dimaksud. Namun, <b>slide show</b> yang menampilkan tiap postingan atau artikel sobat dan juga disertai deskripsi dari masing-masing post atau artikel dan juga readmore. (Baca juga: <a href="http://www.fahmifanirius.ga/2014/11/cara-mudah-membuat-auto-read-more.html">Cara Mudah Membuat Auto Read More Otomatis Di Blog</a>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<span style="font-size: large;"><b>Cara 1. Cara Membuat Slide Show Gambar Di Blog</b></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">2. Tata letak/layout</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Add gadget/tambahkan gadget</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. HTML/JavaScript</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Copy kemudian paste kode dibawah ini pada kolom HTML/JavaScript</span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 230px;
}
</style>
<div id="content-slider">
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
<img src="URL Foto Anda"/>"
</div>
</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<span style="font-size: large;"><b>Cara 2. Cara Membuat Slide Show Post Keren Di Blog</b></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Template/rancangan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan; line-height: 20.7999992370605px;">]]></b:skin></span> atau kode <span style="color: cyan;"></style></span></span></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif; line-height: 20.7999992370605px;">]]></b:skin></span><span style="font-family: Arial, Helvetica, sans-serif;"> atau <span style="background-color: #0b5394; color: cyan;"></style></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: #0b5394; color: cyan;"><br />
</span></span> <br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">
.easyslider-wrapper { 
    width: auto; 
    float: left; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #eee; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 350px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover { }
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
6. Selanjutnya cari kode </span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"></head></span></pre>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode </head></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
</span></code></pre>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 24px; white-space: pre;"> </span> <span style="background-color: white; line-height: 24px; white-space: pre;">8. Kode diatas merupakan jQuery. Masih di bagian edit HTML. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode </head></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 24px; white-space: pre;"> </span> </span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span 24px="" line-height:=""><span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript">
$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");

var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){ var triggerID = $active.attr("rel") - 1;

var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
        $active.addClass('active');

$(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 4000); };

rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
</script></span></span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
9. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Masih ada langkah berikut nya. Untuk script dibawah ini, merupakan kode JavaScript yang akan menampilkan post atau artikel secara manual di blog sobat. Copy kemudian paste dan letakkan tepat DIATAS kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="color: cyan;"><div class="main-wrapper"></span> atau kode <span style="color: cyan;"><div id="main-wrapper"></span></span></pre>
</div>
</div>
<br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
<a href="#"><img src="URL gambar" /></a>
   </div>
   <div class='descriptionslider'>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 1</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 2</a><p>Deskripsi</p>< /div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 3</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL post atau artikel'>Post-Title 4</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL 
post atau artikel'>Post-Title 5</a><p>Deskripsi</p></div>
   </div>
   <div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
   </div>
</div>
</b:if>
</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
11. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<span style="font-size: small;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;"><br />
</span><span style="font-size: small;"></span><span style="font-size: small;"></span> </span><br />
<div style="text-align: right;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><strike><span style="font-size: small;">Tutorial Blogger</span></strike></a></b></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">  <span style="color: white; font-size: xx-small;">Taglines:</span></span><br />
<br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Slide Show Keren Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat slide show keren di blog dengan berbagai efek slide yang super keren di blog</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">90%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2841 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Efek Tutorial Blogger Cara Membuat Slide Show Keren Di Blog

Cara Membuat Slide Show Keren Di Blog - Nambah tutorial blogger lagi nih... Saya buat tutorial ini kemungkinan ide dari pengunjung set...

Cara Membuat Efek Gambar Zoom Berputar Di Blog

1:38 AM Unknown 13

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; font-family: inherit; text-align: left;">
<b>Cara Membuat Efek Gambar Zoom Berputar Di Blog</b> - Buat sobat yang suka browsing-browsing, saya yakin pernah ngeliat dan berkunjung ke blog orang lain, dan nyoba <b>nyentuh gambar</b> di artikel blog tersebut. Ternyata gambar di artikel tersebut <b>bisa membesar dan berputar</b>. Ini tutorial pengembangan dari <a href="http://www.fahmifanirius.ga/2014/09/cara-membuat-gambar-membesar-bila-disentuh-kursor.html" target="_blank">Cara Membuat Gambar Membesar Saat Disentuh Kursor</a>. Buat sobat yang sudah  baca pasti tau. Yang belum baca, kemungkinan sudah tau juga. <span class="Apple-style-span" style="font-size: 16px; line-height: 19px;">ヽ(･∀･)ﾉ </span><span class="Apple-style-span" style="font-size: 16px; line-height: 19px;"><span class="Apple-style-span">Yang dimaksud dengan pengembangan disini adalah, tutorial sebelumnya hanya <b>bisa membesar atau zoom saat cursor blog menyentuh gambar</b>. Nah, tapi untuk tutorial ini, tidak hanya <b style="font-family: inherit;">membesar saat disentuh cursor blog, tapi, juga bisa berputar</b>.</span></span></div>
<div style="font-family: inherit;">
<span class="Apple-style-span" style="font-size: 16px; line-height: 19px;"><br />
</span> <span class="Apple-style-span" style="line-height: 19px;"><span class="Apple-style-span">Nah, buat sobat yang belum tau, saya jelasin maksud dari tutorial ini. Namun, saya yakin sobat sudah tau dengan tutorial ini. Bisa dibilang tutorial ini tutorial pasaran dan banyak ditemui di google. Nah, tutorial ini menjelasakan, jika sobat sudah ikuti tutorial ini, coba aja kursor/pointer/tanda panah komputer sobat arahkan ke gambar, dan <b>gambar tersebut akan membesar atau zoom dan juga berputar</b>.</span></span></div>
<div style="font-family: inherit;">
<br /></div>
<div style="font-family: inherit;">
Contoh nya, coba arahkan cursor blog sobat pada gambar berikut ini:</div>
<div style="font-family: inherit;">
<br /></div>
<div id="fahmifanirius" style="font-family: inherit;">
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png"><img alt="Cara Membuat Efek Gambar Zoom Berputar Di Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png" title="Cara Membuat Efek Gambar Zoom Berputar Di Blog" width="200" /></a><br />
<br />
<div style="text-align: left;">
Apa yang terjadi? Unik kan? Gambar diatas bisa berputar dan membesar saat cursor blog menyentuh gambar tersebut. Apakah sobat tertarik dengan tutorial ini? Mari kita simak:<br />
<br />
<div style="text-align: center;">
1. Login Blogger</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
2. Klik template/rancangan</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
3. Edit HTML</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
4. Cari kode <span class="Apple-style-span" style="line-height: 20px;"><span class="Apple-style-span"><span style="background-color: #3d85c6; color: cyan;">]]></b:skin></span> (agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span></span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="line-height: 20px;"><span class="Apple-style-span"><br />
</span></span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="line-height: 20px;"><span class="Apple-style-span">5. Setelah ketemu kode </span></span><span class="Apple-style-span" style="line-height: 20px;"><span style="background-color: #3d85c6; color: cyan;">]]></b:skin></span> copy kode dibawah ini, kemudian paste kan kode dibawah ini tepat diatas kode </span><span class="Apple-style-span" style="background-color: #3d85c6; color: cyan; line-height: 20px;">]]></b:skin></span></div>
<div style="text-align: center;">
<span class="Apple-style-span" style="line-height: 20px;"><br />
</span></div>
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 200px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
<blockquote class="tr_bq">
<div style="text-align: center;">
<br />
<div style="text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;">#fahmifanirius img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}</span></div>
<br />
<span class="Apple-style-span" style="line-height: 20px;"></span> <span class="Apple-style-span" style="line-height: 20px;"></span><br />
<div style="text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;">#fahmifanirius img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</span></div>
<span class="Apple-style-span" style="line-height: 20px;"> </span></div>
</blockquote>
</div>
</div>
<br />
<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">6. Simpan perubahan</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><br />
</span></span></div>
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"></span></span><br />
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"></span></span><br />
<div style="text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Nah, setelah melakukan langkah diatas, masih ada langkah lagi. Ini adalah langkah dimana sobat harus sedikit paham dengan kode HTML. Buat yang masih awam banget dengan kode HTML, coba cermati kata-kata yang saya tulis.</span></span></div>
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"> </span></span> <br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><br />
</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Disini, saya akan jelasin cara menerapkan agar efek gambar zoom dan berputar di blog dapat berajalan. Lakukan hal ini postingan sobat. Jadi, setelah melakukan cara diatas, buka postingan sobat yang gambar nya akan dibuat zoom dan berputar.</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><br />
</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Setelah dibuka, klik HTML. (Letak HTML berdampingan dengan Compose di pojok kanan atas)</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><br />
</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">Nah, disitu tempat kode HTML postingan sobat, sobat harus bisa mengeditnya.</span></span></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: left;">
<span class="Apple-style-span" style="line-height: 20px;">Disini saya gunakan URL gambar yang ada diatas tadi. Jadi, setelah sobat klik HTML yang berdampingan dengan Compose, kemudian copy kode dibawah ini, kemudian paste kan kodenya didalam HTML</span><br />
<span class="Apple-style-span" style="line-height: 20px;"><br />
</span> <span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><div id="fahmifanirius"></span><br style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;" /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><div style="text-align: center;"></span><br style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;" /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><a href="<span class="Apple-style-span" style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png</span>"><img src="</span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><span class="Apple-style-span" style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcBPIsqAwjSucHMdCKKuMa805oHvUcSguBGtqQzeenB5b3fR6Hffvbj_WFJeKR3UzxwdhXP9ohLjw-PMwbfom0lHUvGEu5tCH2ib-6NNcboWC-vqZWSowtWVPx6IBigIqauReARL-StEi/s1600/images.png</span></span><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">" height="200" width="200" /></a></div></span></span><br />
<span class="Apple-style-span" style="line-height: 20px;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #777777; display: inline !important; float: none; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22.880001068115234px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"><br />
</span></span> <span class="Apple-style-span" style="line-height: 20px;">Jadi, sobat tinggal ganti yang tulisannya merah menjadi URL gambar sobat.</span></div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<div style="text-align: left;">
<span style="font-size: x-small;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi.  </span><span style="font-size: x-small;">Semoga berhasil... ˆ⌣ˆ</span></div>
<div style="text-align: start;">
<span style="font-size: x-small;"><br />
</span></div>
<div style="text-align: right;">
<b><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><strike><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank">Tutorial Blogger</a></strike></span></b></div>
<br />
<br />
<br />
<br />
<span style="font-size: x-small;"><br />
</span> <br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-size: x-small;">Cara Membuat Efek Gambar Zoom Berputar Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-size: x-small;">Deskripsi </span></td> <td width="60%"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; font-size: x-small;">Cara Membuat Efek Gambar Zoom Berputar Di Blog, cara membuat efek gambar membesar dan berputar di blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-size: x-small;"><span itemprop="author">Fahmi Fanirius</span> </span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span class="Apple-style-span" style="font-size: x-small;"><span itemprop="ratingValue">86%</span>/       <span itemprop="bestRating">100%</span> Suara Dari <span itemprop="ratingCount">2902</span> votes</span></div>
</td> </tr>
</tbody></table>
</div>
</div>
</div>

Efek Tutorial Blogger Cara Membuat Efek Gambar Zoom Berputar Di Blog

Cara Membuat Efek Gambar Zoom Berputar Di Blog - Buat sobat yang suka browsing-browsing, saya yakin pernah ngeliat dan berkunjung ke blog...

Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor

7:59 AM Unknown 2

<div dir="ltr" style="text-align: left;" trbidi="on">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Cara Membuat Gambar Membesar Bila Disentuh Kursor</span></b> - Hai sobat... Bukan berarti ada konsep baru dalam situs ini, saya mengabaikan artikel lama saya. Saya akan membuat tutorial blogger lagi nih. <a href="http://adf.ly/un2SW">(˘⌣˘)ε˘`)</a> Tutorial blogger kali ini membahas <a href="http://www.fahmifanirius.ga/2014/09/cara-membuat-gambar-membesar-bila-disentuh-kursor.html" target="_blank">Cara Membuat Efek Gambar Membesar Atau Zoom Ketika Disentuh Kursor.</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbQ48QgxIHJSyXvb9NVI8YeduXRe4kh5ngyoN3vnUPEgjvAuPfmPUpZB_UFyvf7KImlvcjsplnxbpEltNyWEB0147J_dCzWuRALlmvxhfenwAI_PieceT_D2-8fgL3PT30Dt_EyscQEGrM/s1600/gf.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbQ48QgxIHJSyXvb9NVI8YeduXRe4kh5ngyoN3vnUPEgjvAuPfmPUpZB_UFyvf7KImlvcjsplnxbpEltNyWEB0147J_dCzWuRALlmvxhfenwAI_PieceT_D2-8fgL3PT30Dt_EyscQEGrM/s1600/gf.gif" title="Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor" width="176" /></a></div>
<br />
<br />
<b>Gambar bisa membesar saat disentuh kursor?</b>  Pastinya tau dong. Kalau sobat sering browsing atau blogwalking pasti  pernah melihat <b>gambar akan membesar saat kursor / pointer / arah panah di blog</b> sobat bergerak menuju gambar tersebut.<br />
<br />
Mungkin, tujuan utam dari tutorial ini yang sering digunakan oleh para Blogger adalah, jika gambar diatur  dengan ukuran kecil, bisa dilihat jelas <b>jika kursor menyentuh gambar</b>  yang dituju. Gambar bisa lebih jelas jika diperbesar. Mungkin gambar  yang Anda upload memang berukuran kecil dan tidak bisa lagi diperbesar.  Dengan fungsi tutorial ini, mungkin sedikit akan membantu pengunjung sobat untuk melihat lebih jelas gambar tersebut.<br />
<br />
Apalagi, jika gambar pada blog sobat terlalu besar ataupun sangat besar, akan membuat loading blog sobat akan lebih lambat jika dibandingkan dengan blog yang dengan gambar berukuran lebih kecil. Oleh karena itu, sekarang saya buat tutorial <b>Cara Membuat Efek Gambar Membesar Atau Zoom Di Blog Saat Disentuh Kursor</b>.<br />
<br />
Ini adalah salah satu cara mempercepat loading blog sobat. Jadi, buat sobat yang mempunyai blog dengan gambar yang besar, bisa  dikecilin lagi. Terus, pake tutorial ini. Agar blog sobat yang mungkin lambat, bisa lebih cepet dari sebelumnya.<br />
<br />
<br />
<div style="text-align: center;">
1. Login Blogger</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
2. Klik Template</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
3. Edit HTML</div>
<br />
<br />
<div style="text-align: center;">
4. Cari kode <span style="color: cyan;"><b><span style="background-color: #073763;">]]></b:skin></span> </b><span style="color: black;">(agar memudahkan pencarian, tekan Ctrl+F pada keyboard)</span></span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span style="color: cyan;"><span style="color: black;">5. Setelah ketemu kode tersebut, copy kode dibawah ini, lalu letakkan / paste kode dibawah ini tepat DIATAS kode </span></span> <span style="color: cyan;"><b><span style="background-color: #073763;">]]></b:skin></span> </b></span></div>
<br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 300px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
<blockquote class="tr_bq">
<pre><code class="css"><span class="class"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">.post</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="tag"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">img</span></span></span><span class="rules"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">{</span></span></span><span class="rules"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-webkit-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.8</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-moz-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.8</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-o-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.8</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-webkit-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transition-duration</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.5</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">s;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-moz-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transition-duration</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.5</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">s;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-o-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transition-duration</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.5</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">s;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">opacity</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0.7</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">margin</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">2</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">px </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">2</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">px </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">0</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">}</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="class"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">.post</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="tag"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">img</span></span></span><span class="pseudo"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:hover</span></span></span><span class="rules"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">{</span></span></span><span class="rules"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-webkit-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">1.1</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-moz-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">1.1</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">-o-</span></span></span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">transform</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="function"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">scale(</span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">1.1</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">)</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">
</span></span><span class="rule"><span class="attribute"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">opacity</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">:</span></span><span class="value"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;"> </span></span><span class="number"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">1</span></span></span><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">;</span></span></span></span></span></code></pre>
</blockquote>
<span class="rule"><span class="Apple-style-span" style="color: cyan;"><span class="Apple-style-span" style="background-color: #0b5394;">}</span></span></span></div>
<br />
<div style="text-align: center;">
6. Simpan perubahan</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Selesai...</div>
<br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span class="Apple-style-span" style="font-size: x-small;"><br />
</span> <br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><strike>Tutorial Blogger </strike></span></a></b></div>
<br />
<br />
<br />
<br />
<br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%">Judul </td> <td width="60%">Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor</td> </tr>
<tr align="justify"> <td width="20%">Deskripsi </td> <td width="60%"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px;">Cara membuat efek gambar membesar saat disentuh kursor, cara membuat efek gambar zoom saat disentuh kursor di blog, cara membuat gambar membesar saat disentuh cursor di blog</span></td> </tr>
<tr align="justify"> <td width="20%">Author </td> <td width="60%"><span itemprop="author">Fahmi Fanirius</span> </td> </tr>
<tr align="justify"> <td width="20%">Author Rating </td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">96%</span>/       <span itemprop="bestRating">100%</span> Suara Dari <span itemprop="ratingCount">3980</span> votes</div>
</td> </tr>
</tbody></table>
</div>
</div>
</div>

Efek Tutorial Blogger Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor

Cara Membuat Gambar Membesar Bila Disentuh Kursor - Hai sobat... Bukan berarti ada konsep baru dalam situs ini, saya mengabaikan artikel l...

Cara Membuat Energy Saving Mode Keren Di Blog

Cara Membuat Efek Page Loading Di Blog

Cara Membuat Label Miring Saat Disentuh Cursor Blog

Cara Membuat Slide Show Keren Di Blog

Cara Membuat Efek Gambar Zoom Berputar Di Blog

Cara Membuat Efek Gambar Membesar Saat Disentuh Kursor

Terpopuler

Kategori

Arsip Blog