Blog Ocha: Tutorial

7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

<a href='https://cara-ocha.blogspot.com' target='_blank' title='Cara Ocha'><b>Blog Ocha</b></a> - <a href='https://cara-ocha.blogspot.com/2018/03/7-cara-membuat-efek-hover-keren-pada.html' target='_blank' title='7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan'><b>7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan</b></a> - Hallo sahabat <a href='https://cara-ocha.blogspot.com' target='_blank' title='Cara Ocha'><b>Blog Ocha</b></a> dimanapun kalian berada, selamat malam dan selamat berkunjung kembali ya guys, setelah kemarin membahas dan berbagi mengenai <a href='https://cara-ocha.blogspot.com/2018/03/cara-membuka-dan-memperbaiki-adapter.html' target='_blank' title='Cara Membuka Dan Memperbaiki Adapter Charger Laptop Asus X441S'><b>Cara Membuka Dan Memperbaiki Adapter Charger Laptop Asus X441S</b></a>, pada kesempatan malam ini akan sedikit mengulas <a href='https://cara-ocha.blogspot.com/2018/03/7-cara-membuat-efek-hover-keren-pada.html' target='_blank' title='7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan'><b>7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan</b></a>, untuk selengkapnya simak terus dibawah ini ya...<br/><br/>

OK Next... Tutorial Blogger kali ini <a href='https://cara-ocha.blogspot.com' target='_blank' title='Cara Ocha'><b>Ocha</b></a> ingin mengajak kalian untuk mempercantik blog dengan tips dan trik Desain Blog, yaitu <span lang="EN-CA" style="color: #000000; font-family: "abel" , sans-serif; font-size: 13.5pt; line-height: 107%;">ca</span>ra membuat efek hover pada gambar atau image di postingan blog... Ada banyak cara untuk memberi efek hover pada gambar di postingan blog, salah satunya yaitu efek image dengan CSS3 dan JQuery...<br/><br/>

Namun kali ini <a href='https://cara-ocha.blogspot.com' target='_blank' title='Cara Ocha'><b>Blog Ocha</b></a> menggunakan code CSS 3... Pada artikel 7 Efek Hover CSS 3 Keren pada Gambar ini, kalian juga dapat melihat semua live demo dari contoh aneka efek hover keren pada gambar, seperti Efek hover <mark>Transparan, Efek hover zoom, spin, border, transform</mark> dan yang lainnya dibawah ini serta code CSS 3 yang bisa sobat copy dan diletakkan di blog atau template sobat...<br/><br/>

<h3>7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan</h3><br/>

Efek gambar atau juga disebut Efek hover, tersebut akan terlihat ketika mouse didekatkan pada gambar yang bersangkutan atau diarahkan dengan mouse / pointer pada gambar tersebut, gambar juga dapat berupa link yang tertuju pada sebuah URL tertentu tetapi bisa juga tanpa link samasekali...<br/><br/>

Penggunaan efek atau hover effect pada gambar / image pada postingan sobat, selain menambah cantik tampilan blog juga memperbesar kemungkinan peningkatan pageview blog dikarenakan pengunjung atau visitor tentu akan lebih betah berlama - lama di blog kalian... Dan kemungkinan mengunjungi blog sobat kembali lebih terbuka... so, kenapa tidak dicoba saja sob ??...<br/><br/>

<h3>#1. Contoh Efek Hover ( Transparan - CSS Image Opacity )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img1:hover {<br/>
opacity:0.3;<br/>
filter:alpha(opacity=30); /* For IE8 and earlier */<br/>
}</code></pre><br/>

<h3>#2. Contoh Efek Hover ( Berputar - 360 deg rotate image )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img2{<br/>
-webkit-transition: all 1s ease-in-out;<br/>
-moz-transition: all 1s ease-in-out;<br/>
-o-transition: all 1s ease-in-out;<br/>
transition: all 1s ease-in-out;<br/>
}<br/><br/>

.img2:hover {<br/>
-webkit-transform:rotate(360deg);<br/>
-moz-transform:rotate(360deg);<br/>
-o-transform:rotate(360deg);<br/>
-ms-transform:rotate(360deg);<br/>
transform:rotate(360deg);<br/>
}</code></pre><br/>

<h3>#3. Contoh Efek Hover ( Spin and Zoom )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img3 {<br/>
-webkit-transition: all 1s ease-in-out;<br/>
-moz-transition: all 1s ease-in-out;<br/>
-o-transition: all 1s ease-in-out;<br/>
transition: all 1s ease-in-out;<br/>
}<br/><br/>

.img3:hover {<br/>
-webkit-transform: scale(1.2) rotate(1080deg);<br/>
-moz-transform: scale(1.2) rotate(1080deg);<br/>
-o-transform: scale(1.2) rotate(1080deg);<br/>
-ms-transform: scale(1.2) rotate(1080deg);<br/>
transform: scale(1.2) rotate(1080deg);<br/>
}</code></pre><br/>

<h3>#4. Contoh Efek Hover ( Zoom )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img4 {<br/>
    height:auto;<br/>
    transition: all 0.5s;<br/>
    -o-transition: all 0.5s;<br/>
    -moz-transition: all 0.5s;<br/>
    -webkit-transition: all 0.5s;<br/>
}<br/><br/>

.img4:hover {<br/>
    transition: all 0.3s;<br/>
    -o-transition: all 0.3s;<br/>
    -moz-transition: all 0.3s;<br/>
    -webkit-transition: all 0.3s;<br/>
    transform: scale(1.5);<br/>
    -moz-transform: scale(1.5);<br/>
    -o-transform: scale(1.5);<br/>
    -webkit-transform: scale(1.5);<br/>
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);<br/>
}</code></pre><br/>

<h3>#5. Contoh Efek Hover ( Melingkar )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img5 {<br/>
    border-radius: 30px 0 30px 0;<br/>
    -moz-border-radius: 30px 0 30px 0;<br/>
    -webkit-border-radius: 30px 0 30px 0;<br/>
    -o-border-radius: 30px 0 30px 0;<br/>
    transition: all 0.5s;<br/>
    -moz-transition: all 0.5s;<br/>
    -webkit-transition: all 0.5s;<br/>
    -o-transition: all 0.5s;<br/>
}<br/><br/>

.img5:hover {<br/>
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);<br/>
    border-radius:0;<br/>
    -moz-border-radius:0;<br/>
    -webkit-border-radius:0;<br/>
    -o-border-radius:0;<br/>
}</code></pre><br/>

<h3>#6. Contoh Efek Hover ( Mengecil )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img6 {<br/>
    box-shadow: 0 3px 6px rgba(0,0,0,.25);<br/>
    transform:  rotate(+2deg);<br/>
    -o-transform: rotate(+2deg);<br/>
    -webkit-transform:  rotate(+2deg);<br/>
    -moz-transform: rotate(+2deg);<br/>
}<br/><br/>

.img6:hover {<br/>
    box-shadow:  0 3px 6px rgba(0,0,0,.5);<br/>
    transform:  rotate(-1deg);<br/>
    -webkit-transform:  rotate(-1deg);<br/>
    -o-transform:  rotate(-1deg);<br/>
    -moz-transform: rotate(-1deg);<br/>
}</code></pre><br/>

<h3>#7. Contoh Efek Hover ( Rotasi dan Bayangan )</h3><br/>

<pre data-codetype="CSS" title="CSS"><code class="language-markup">.img7 {<br/>
border:5px solid #0000ff;<br/>
}<br/>
.img7:hover {<br/>
border:8px solid #00ff00;<br/>
}</code></pre><br/>

<h3>Cara Pemasangan Ke 7 Efek Hover Keren Pada Gambar Didalam Postingan</h3><br/>

Efek Hover ini umunya berjalan dengan baik pada browser Google Chrome dan Mozilla Firefox ( update earlier Browser recomended ), sedangkan pada IE gunakan minimal IE8 atau update earlier... Untuk menggunakanya efek - efek hover diatas, langkah yang harus dilakukan yaitu meletakkan salah satu kode CSS diatas yang sobat suka atau semuanya juga boleh dan pasang sebelum tag <mark>]]></b:skin></mark> pada template blog kalian dengan cara sebagai berikut...<br/>

<ul><li>Log in Blogger.Com</li>
    <li>Pilih Template => Edit HTML</li>
    <li>Tekan F3 => cari kode <mark>]]></b:skin></mark></li>
    <li>Copy kode CSS diatas yang sobat sukai, pastekan / letakkan tepat sebelum tag <mark>]]></b:skin></mark></li>
    <li>Kemudian Save Template</li></ul><br/>

<div style="background:#fafafa;color:#000;border:1px dashed #0b5394;border-radius:5px;padding:8px;margin:8px;text-align:justify;">Penulisan pada postingan blog => Post Editor Blogger dalam mode HTML, yaitu menggunakan kode HTML berikut :</div><br/>

<ol><li><h3>Efek Hover Gambar Tanpa Link</h3><br/>
     Gunakan kode HTML berikut untuk penulisan efek hover tanpa link :<br/>
<pre data-codetype="HTML" title="HTML"><code class="language-markup"><img class="<mark>img1</mark>" src="URL GAMBAR" /></code></pre><br/>
<div style="background:#fafafa;color:#000;border:1px dashed #0b5394;border-radius:5px;padding:8px;margin:8px;text-align:justify;"><mark>Note: </mark> Kode tersebut digunakan juga apabila sobat mempunyai lebih dari satu efek hover css pada templatenya, yaitu cukup ganti <mark>img1</mark> dengan <mark>img2</mark> dan seterusnya</div></li>

<li><h3>Efek Hover disertai Link / URL</h3><br/>
    Gunakan kode HTML berikut :<br/>
<pre data-codetype="HTML" title="HTML"><code class="language-markup"><a <mark>class="img1"</mark> href="https://cara-ocha.blogspot.co.id"><img  border="0" <mark>src="URL GAMBAR"</mark> /></a></code></pre><br/>
<div style="background:#fafafa;color:#000;border:1px dashed #0b5394;border-radius:5px;padding:8px;margin:8px;text-align:justify;"><mark>Note: </mark> <kbd>class="img1"</kbd> : nama code css hover yang sobat pilih dan <kbd>URL GAMBAR</kbd>  : alamat URL gambar</div></li></ol><br/>

<H3>Tonton Video Tutorialnya</h3><br/>
<center><iframe width="300" height="300" src="https://www.youtube.com/embed/nOB0Ol7rKhQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center><br/>

OK Next... kiranya hanya <span lang="EN-ID" style="color: #000000; font-family: "abel" , sans-serif; font-size: 13.5pt; line-height: 107%;">I</span>tu saja yang dapat admin <a href='https://cara-ocha.blogspot.com' target='_blank' title='Cara Ocha'><b>Blog Ocha</b></a> sampaikan pada kesempatan malam hari ini, mengenai <a href='https://cara-ocha.blogspot.com/2018/03/7-cara-membuat-efek-hover-keren-pada.html' target='_blank' title='7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan'><b>7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan</b></a> selamat malam dan sampai jumpa lagi di postingan selanjutnya!!!...<br/>

Blog Ocha - 7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan - Hallo sahabat Blog Ocha dimanapun kalian berada, selamat mala...

Cara Membuat Blog Gratis Di Blogger Blogspot

05:37 Unknown

<a href='https://cara-ocha.blogspot.com/2018/02/cara-membuat-blog-gratis-di-blogger.html' target='_blank' title='Blog Ocha'><b>Blog Ocha</b></a> - <a href='https://cara-ocha.blogspot.com/2018/02/cara-membuat-blog-gratis-di-blogger.html' target='_blank' title='Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!'><b>Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!</b></a> - Hallo sahabat blog <a href='https://cara-ocha.blogspot.com/' target='_blank' title='Blog Ocha'><b>Ocha</b></a> dimanapun kalian berada, pada kesempatan kali ini admin blog  <a href='https://cara-ocha.blogspot.com/' target='_blank' title='Ocha'><b>Ocha</b></a> akan sedikit berbagi dan mengulas bagaimana caranya mendaftar atau membuat blog gratisan di <a href="/" title="www.blogger.com"><b>Blogspot.com ( Blogger.com )</b></a> dengan mudah, simple dan gratis cuma beberapa menit saja, dikhususkan bagi sobat yang baru saja ingin memulai ngeblog namun tidak tahu cara membuatnya ?? sangat tepat sobat masuk kesini, karena disini akan admin ulas dengan rinci dan sedetail mungkin, namun sebelum melanjutkan jangan lupa baca juga postingan sebelumnya ya guys, tentang <a href='https://dp-bbm23.blogspot.com/2018/02/kata-kata-sedih-ditinggal-kekasih.html' target='_blank' title='Kata Kata Sedih Ditinggal Kekasih'><b>Kata Kata Sedih Ditinggal Kekasih</b></a> dan berikut ulasan selengkapnya....<br/><br/>

Mungkin Sobat sedang kebingungan bagaimana <a href='https://dp-bbm23.blogspot.com/2018/02/cara-mudah-dan-gratis-membuat-blog-di.html' target='_blank' title='Cara Mudah Dan Gratis Membuat Blog Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!'><b>Cara Membuat Blog</b></a>, apakah karena tugas sekolah yang diharuskan murid-muridnya mempunyai blog agar bisa mengikuti latihan dan mengerjakan tugas di blog masing-masing agar mendapat nilai, ataukah ada sebab lain seperti ingin berbagi kisah hidup, <a href='https://dp-bbm23.blogspot.com' target='_blank' title='DP BBM 23'><b>kata mutiara</b></a>, <a href='https://dp-bbm23.blogspot.com' target='_blank' title='DP BBM 23'><b>kata bijak</b></a>, <b><a href='https://dp-bbm23.blogspot.com' target='_blank' title='DP BBM 23'>kisah lucu</a></b>, atau <a href='https://dp-bbm23.blogspot.com' target='_blank' title='DP BBM 23'><b>foto lucu</b></a> supaya dapat diketahui oleh khalayak umum, ataupun Sobat ingin membuat blog karena ada teman yang bisa mendapatkan penghasilan dari blog...<br /><br/>

<b>Blog</b> pada dasarnya disebut sebagai Web Blog yang merupakan salah satu aplikasi web yang mana postingan atau artikel yang diposting didalam blog sering sekali berurutan, yaitu dari tulisan terbaru hingga tulisan yang paling lama...<br /><br />

Kenapa harus di blogger / blogspot ? Karena di situs tersebut kita dapat <i>membuat blog se<span lang="EN-CA" style="color: #000000; font-family: "abel" , sans-serif; font-size: 13.5pt; line-height: 107%;">ca</span>ra gratis</i> dan juga telah bekerja sama dengan <b>Google</b>, jadi blog yang dibuat Sobat masih baru sekalipun bisa tampil blognya di mesin pencari Google... Dan di Blogger.com tampilannya sangat simple untuk yang masih awam atau yang masih pemula serta mudah untuk di otak - atik seperti ganti template atau background blog, menambah widget seperti kalender, jam dinding, dsb<br /><br/>

<h2><a href='https://cara-ocha.blogspot.com/2018/02/cara-membuat-blog-gratis-di-blogger.html' target='_blank' title='Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!'><b>Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!</b></a></h2><br/><br/>

Berikut <span lang="EN-ID" style="color: #000000; font-family: "abel" , sans-serif; font-size: 13.5pt; line-height: 107%;">i</span>ni langkah-langkah <a href='https://cara-ocha.blogspot.com/2018/02/cara-membuat-blog-gratis-di-blogger.html' target='_blank' title='Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!'><b>Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!</b></a><br /><br />

<form>
 <fieldset>
  <legend><i class="fa fa-external-link" aria-hidden="true"></i> Baca Juga :</legend>
  <i class="fa fa-paper-plane" aria-hidden="true"></i> <a href='https://merenyahocara.blogspot.co.id/2017/08/mere-nyaho-cara-daftar-iklan-exoclick.html' target='_blank' title='Mere Nyaho Cara Daftar Iklan Exoclick Untuk Blog Atau Situs Dewasa'><b>Mere Nyaho Cara Daftar Iklan Exoclick Untuk Blog Atau Situs Dewasa</b> <i class="fa fa-external-link" aria-hidden="true"></i></a><br>
  </fieldset>
</form><br/>

<h3>1. Masukan email Gmail</h3><br/>

Masuk ke <kbd><a href="http://www.blogger.com/" target="_blank" title="Blogger.com"><b>Blogger.com</b></a></kbd> ,sama halnya seperti daftar Facebook, di <b>blogger</b> juga harus mempunyai email Gmail terlebih dahulu, yang belum mempunyai email Gmail, harap membuat dulu, Yang belum mempunyai email dan belum tahu caranya membuat email, silakan <a href='https://merenyahocara.blogspot.com/2017/09/mere-nyaho-cara-mendaftarmembuat-blog.html' target='_blank' title='Mere Nyaho Cara Mendaftar/Membuat Blog di Blogspot Dengan Mudah, Simple dan Gratis Hanya Beberapa Menit Saja!!!'><b>klik disini</b></a>... Untuk mendaftar, silakan isikan nama email Gmail beserta passwordnya, sama seperti log in ke gmail.com... Setelah itu klik <span style="color: blue;">Masuk</span><br /><br/>

Setelah sobat siap memiliki akun gmail ( akun email ), tahap berikutnya cara pendaftaran membuat blog, yang perlu Sobat lakukan klik saja link tadi <kbd><a href="http://www.blogger.com/" target="_blank" title="Blogger.com"><b>Blogger.com</b></a></kbd>, selanjutnya Sobat tinggal klik <b>Buat Blog Baru</b><br /><br/>

<h3>3. Isikan Judul dan Alamat Blog</h3><br/>

Nanti akan ada menu melayang ( menu pop up ), tinggal sobat Isikan Judul dan Alamat blog dengan nama blog sesuai keinginan Sobat, dan Apabila Sudah diisi alamat blognya maka nanti ada tulisan dibawahnya Alamat blog ini tersedia, kalau tidak sobat bisa mengganti nama blog yang lainnya seperti nama lengkap atau terserah sobat...<br /><br />

<h3>4. Pilih Template</h3><br/>

Nah, apabila sudah kini tinggal memilih template atau tampilan blog, pilih sesuai selera Sobat, Untuk template bisa dirubah lagi jadi pilih kalau merasa tidak ada yang bagus, pilih sembarang saja...<br /><br />

Setelah selesai, Selamat blog Sobat sudah jadi, tinggal klik Mulai mengeposkan untuk membuat artikel terbaru bagi blog Sobat atau klik gambar pensilnya, Nanti akan tampil halaman kosong untuk menulis artikel, tinggal ikuti sesuai petunjuknya karena sama dengan menulis di Ms.Word, setelah selesai membuat artikel tinggal klik <span style="color: blue;">Publikasikan</span><br /><br />

<form>
 <fieldset>
  <legend><i class="fa fa-external-link" aria-hidden="true"></i> Baca Juga :</legend>
  <i class="fa fa-paper-plane" aria-hidden="true"></i> <a href='https://merenyahocara.blogspot.co.id/2017/08/cara-mengambil-screenshot-blog-atau.html' target='_blank' title='Cara Mengambil Screenshot Blog Atau Website Satu Halaman Penuh ( Full Page ) Dengan Mudah Cepat dan Simple'><b>Cara Mengambil Screenshot Blog Atau Website Satu Halaman Penuh ( Full Page ) Dengan Mudah Cepat dan Simple</b> <i class="fa fa-external-link" aria-hidden="true"></i></a><br>
  </fieldset>
</form><br/>

<h3><b>Sumber Artikel</b></h3><br/>

<a href='https://dp-bbm23.blogspot.com/2018/02/cara-mudah-dan-gratis-membuat-blog-di.html' target='_blank' title='https://dp-bbm23.blogspot.com/2018/02/cara-mudah-dan-gratis-membuat-blog-di.html'><b>https://dp-bbm23.blogspot.com/2018/02/cara-mudah-dan-gratis-membuat-blog-di.html</b></a><br/>
<a href='https://merenyahocara.blogspot.com/2017/09/mere-nyaho-cara-mendaftarmembuat-blog.html' target='_blank' title='https://merenyahocara.blogspot.com/2017/09/mere-nyaho-cara-mendaftarmembuat-blog.html'><b>https://merenyahocara.blogspot.com/2017/09/mere-nyaho-cara-mendaftarmembuat-blog.html</b></a><br/><br/>

<h3><b>Tonton Video Tutorialnya</b></h3><br/>

Nah, itulah tadi guys <a href='https://cara-ocha.blogspot.com/2018/02/cara-membuat-blog-gratis-di-blogger.html' target='_blank' title='Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!'><b>Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!!</b></a> yang dapat admin blog <a href='https://cara-ocha.blogspot.com/' target='_blank' title='Blog Ocha'><b>Ocha</b></a> sampaikan, semoga bermanfaat dan dapat membantu kalian semuanya, selamat pagi dan sampai jumpa lagi, Bye!!!<br/>

Blogger Cara Buat Tutorial Cara Membuat Blog Gratis Di Blogger Blogspot

Blog Ocha - Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!! - Hallo sahabat blog Ocha dimanapun kalian b...

7 Cara Membuat Efek Hover Keren Pada Gambar Didalam Postingan

Cara Membuat Blog Gratis Di Blogger Blogspot

Populer

Labels

Blog Archive