Ok sobat, berikut ini admin akan berbagi mengenai cara membuat efek hover zoom dan deskripsi pada gambar di blog.

Yah efek hover adalah efek yang muncul ketika kursor mouse pointer diarahkan atau ada diatas gambar di blog.

Nah ketika pointer mouse ada diatas gambar maka ada efek zoomnya dan deskripsi yang menerangkan gambar tersebut. Yah untuk lebih jelasnya cek saja demonya sob.

Efek Hover Zoom + Deskripsi Pada Gambar di Blogger


Cara Membuat Efek Hover Zoom + Deskripsi Pada Gambar
Giban.Net


Berikut ini adalah kode-kodenya.

CSS


.gibanbox{position:relative;width:80%;height:auto;z-index:2;margin:0 auto;padding:0}
.gibanbox img{position:relative;z-index:1;transition:all .5s ease-in-out;width:auto;max-width:100%;height:auto}
.gibanbox img:hover{transform: scale(1.5) ;-webkit-filter:brightness(0.55);}
.gibanbox div.imgdescription{position:absolute;width:80%;z-index:2;bottom:-100px;left:50%;margin-left:-42%;padding:2%;text-align:center;background:rgba(0,0,0,0.8);color:white;border-radius:8px;opacity:0;transition:all .5s ease .5s;font-size:100%}
.gibanbox div.imgdescription a{color:white;text-decoration:underline}
.gibanbox:hover div.imgdescription{bottom:15px;opacity:.8}
@media screen and (max-width:480px){
    .gibanbox{width:100%;}
}

HTML


<div class="gibanbox">
<img alt="thumbnail" height="300" src="http://4.bp.blogspot.com/-wFt-q2gHZ5Q/VCyqvCFVIZI/AAAAAAAAd30/SnqPim5wz9k/s1600/windows-10.png" width="600" title="Capable of seating 50,000 spectators"/>
<div class="imgdescription">
Ini adalah contoh deskripsi gambar dengan hover, <a href="https://www.giban.net/" title="Contoh Link">Giban.Net</a> ini adalah contoh link dalam deskripsi gambar.
</div>
</div>

Kode - kode di atas silahkan kamu edit sesuai kebutuhannmu. Ok sampai disini dulu sobat, selamat mencoba.

Nah sob pada postingan kali ini admin akan berbagi cara membuat efek hover tooltip facebook page pada tombol facebook di blog.

Efek ini akan muncul ketika kursor mouse berada di atas tombol facebook, yailah namanya juga efek hover, yah kan guys?

Yah buat sobat yang suka utak atik blog dan mencoba ini itu, atau apalah yang ingin memasang windget ini di blog berikut adalah caranya.

Facebook Page Like Button Efek Hover Tooltip


Facebook Page Like Button Efek Hover Tooltip
Facebook Page Like Button Efek Hover Tooltip




Berikut ini adalah kodenya:

<style>
a:link,a:visited { position:relative; } .gibandotnettooltip { width:300px; position:absolute; bottom:400%; margin:0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#2B2B2B; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background:#2aa4cf; border-color:#2aa4cf; } .gibandotnettooltip:before,.gibandotnettooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; } .gibandotnettooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; } a:hover .gibandotnettooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .gibandotnettooltip,.gibandotnettooltip.left { left:0; right:0; } .gibandotnettooltip:before,.gibandotnettooltip:after,.gibandotnettooltip.left:before,.gibandotnettooltip.left:after { left:40px; right:auto; } .gibandotnettooltip:before { border-top-color:#2aa4cf; } .gibandotnettooltip:after { border-top-color:#2aa4cf; } </style>
<center>
<a href="https://www.facebook.com/spezernet" rel="nofollow" target="_blank"><img alt="Like" src="https://2.bp.blogspot.com/-m7tD8AK_ca8/VE4ZKTWX11I/AAAAAAAACZQ/8bmG6zkZZbk/s80/like%2B(1).png" /><span class="gibandotnettooltip"><object allowtransparency="true" data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fspezernet&amp;width&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=483767385088491" frameborder="0" scrolling="no" style="border: none; height: 208px; overflow: hidden;"></object> </span></a></center>

Ganti kode berwana di atas dengan alamat facebook kamu.

Kamu dapat meletakannya di widget, atau di bagian dalam postingan, atau dimanapun yang kamu inginkan di blog kamu.

Coba-coba bongkar artikel-artikel di blog lama admin, eh ketemu artikel menarik yaitu error page 404 dengan animasi Falling Zombie.

Oh yah yang bagi kamu yang tidak tahu apa itu error page 404, sekedar info bahwa halaman ini adalah halaman tidak di temukan di blog, baik itu halaman yang sudah di hapus atau memang tidak ada sama sekali.

Yah mungkin saja kamu ingin membuat halaman 404 kamu terlihat menarik, hmm selain itu buat apa lagi yah? yah silahkan di coba buat kamu yang tertarik.

Error Page 404 Falling Zombie


Error Page 404 Falling Zombie
Error Page 404 Falling Zombie


Cara membuatnya mudah kok, berikut adalah caranya:

1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
3. Letakan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<link href='https://cdn.rawgit.com/Brando07/haisob/newbe/haisob-404-zombie2.css' rel='stylesheet' type='text/css'/>
<div id='error-page'>
  <div id='error-inner'>
    <div class='box-404'>404</div>
    <h1>PAGE NOT FOUND</h1>
    <p>You are half way around the word, but OOPS you make the wrong turn,
let us lead you to the right way,</p>
    <p> return to our
      <a href='http://www.haisob.com' title='HOME'>homepage</a> ?
    </p>
    <div id='search-box'>
      <form action='/search' id='cse-search-box' method='get'>
        <input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='' />
        <button id='search-button' type='submit' />
      </form>
    </div>
  </div>
</div>
<canvas id="canvas"></canvas>
<script src='https://cdn.rawgit.com/Brando07/haisob/newbe/haisob-404-zombie.js' type='text/javascript'/></script>
</b:if>

4. Save template dan selesai.

Nah, kesempatan ini admin akan coba berbagi tutorial blog efek hover yang memang sudah pernah admin posting di blog lama admin.

Yah, sob efek hover flipping content ini akan terlihat ketika pointer mouse di arahkan pada gambar yang di kasi efek ini.

Efek ini bisa kamu gunakan juga loh pada blog blogspot kamu, bisa membuat tampilan blogmu lebih keren loh guys, ok cekidot.

Efek Hover Flipping Pada Gambar


Efek Hover Flipping
Efek Hover Flipping

Arahkan kursor mouse pada gambar di halaman demo di bawah ini untuk melihat efeknya lebih jelas.


Bagaimana, ingin coba membuatnya juga? ikuti saja langkah-langkah di bawah ini guys.

Cara Membuat Efek Hover Flipping di Blogger:


1. Blog kamu di Blogger 😊
2. Pilih menu Template ➔ Edit HTML
3. Selanjutnya letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.gibandotnet-card { position:relative; height:300px; width:300px; margin:20px auto; }
.gibandotnet-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; background:#3C404B; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
.gibandotnet-card > div.back { background:#000; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
.gibandotnet-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.gibandotnet-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.gibandotnet-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }

4) Masukan kode ini dalam postingan dengan mode HTML (Sebelahnya Compose).

<div class="gibandotnet">
<div class="front">
<img src="Link Gambar Depan"/>
</div>
<div class="back">
<img src="Link Gambar Belakang" />
</div>
</div> 

Ganti kode berwarna biru diatas dengan url/link gambar depan dan ganti kode berwarna merah diatas dengan url/link gambar belakang.

Selamat mencoba guys.

Beberapa aplikasi tidak bisa diinstal di Windows 10, permasalahannya selalu muncul peringatan Install .NET Framework 3.5 (Includes 2.0 and 3.0).

Di windows 10 sendiri telah terinstal Net Framework 4.5 namun beberapa aplikasi membutuhkan Net Framework 3.5 untuk instalasinya.

Banyak permasalahan gagal instal misalnya error code 0x800F0906, 0x800F081F, atau 0x800F0907 sehingga gagal menginstal Framework 3.5.

Mengatasi Masalah .NET Framework 3.5 (Includes 2.0 and 3.0) di Windows 10


Cara Instal Net Framework 3.5 Win 10-1
giban.net

Jika kamu mempunya file ISO Windows 10 kamu bisa menggunakan file yang ada di dalam windows 10 ini. Jadi anggaplah disini kamu punya file ISO Win 10.

1. Buka atau bisa juga ekstrak file ISO Windows 10 mu.

Cara Instal Net Framework 3.5 Win 10-2
giban.net

2. File Net Framework-nya ada di folder sources > sxs

Cara Instal Net Framework 3.5 Win 10-3
giban.net


3. Pindahkan atau copy folder sources ke luar misalnya ke Local Disk (D) atau bisa juga di drive yang lain misalya C, E, F dan seterusnya.

Cara Instal Net Framework 3.5 Win 10-4
giban.net

4. Buka cmd atau Command Prompt dengan cara klik kanan kemudian pilih Run as administrator.

Cara Instal Net Framework 3.5 Win 10-5
giban.net

5. Masukan perintah dibawah ini. Jangan lupa mengganti X dengan lokasi dimana kamu menyimpan folder sources tadi. Misal lokasi tadi berada di drive D, maka ganti X dengan D. Kemudian tekan Enter.

Dism.exe /online /enable-feature /featurename:NetFX3 /All /Source:X:\sources\sxs /LimitAccess

6. Tunggu sampai progress mencapai 100% dan terdapat tulisan The operation completed succesfully, itu menandakan bahwa NET framework 3.5 sudah berhasil diinstall/ diaktifkan.

Cara Instal Net Framework 3.5 Win 10-6
giban.net

Nah sekian, selamat mencoba.

Apakah kamu pengguna PC komputer atau laptop dengan OS Windows 10? tidak tahu cara mengambil Screenshot di Windows 10 dengan mudah? nah jika ya, berikut admin bagikan tutorial cara membuat ScreenShoot atau SS di windows 10 dengan mudah.

Memang jika belum tahu caranya pasti berpikir bahwa sulit mengambil screenshoot di windows 10 ( Ya ialah namanya juga belum tahu, bego amat ni admin 😝)

Tapi yah... yang akan admin bagikan ini memang benar caranya mudah sekali dan kamu tidak perlu download dan instal aplikasi pihak ketiga atau apapun diluar sana. Ok langsung saja caranya nih guys.

Cara Membuat / Mengambil Screenshot Layar Windows 10


Cara Mudah Membuat Screenshot di Windows 10
Cara Mudah Mengambil Screenshot di Windows 10

Pastikan tampilan layar laptop atau komputer kamu sudah sesuai kehendak. Tutup apa saja yang ada dilayar yang tidak ingin kamu tunjukan.

Di Keyboard laptop / komputer kamu tekan tombol Windows + PrtSc secara bersamaan.

Cara Membuat Screenshot Layar Windows 10
Windows + PrtSc

Selesai, jika kamu bingung di mana gambarnya berikut cara menemukannya.

Buka File Explorer => Pictures => Gambarnya ada di dalam folder Screenshot

Cara Mengambil Screenshot Layar Windows 10
Folder Screenshot

Bagaimana sobat, mudah bukan cara membuat screenshoot di laptop atau komputer os windows 10?

Memang ada banyak sekali cara membuat screenshoot di layar komputer atau laptop kamu, bahkan kamu bisa menggunakan aplikasi pihak ketiga yang bisa kamu download di luar sana, namun disini admin takkan membahas itu karena menurut admin ini adalah cara paling simpel dan mudah dikerjakan.

Ok sobat, sekian untuk saat ini selamat mencoba.

Memang banyak hal yang bisa kamu lakukan pada Windows 10 jika kamu belum puas dengan settingan defaultnya.

Mungkin saja kamu merasa ukuran kursor atau pointer mouse di Windows kamu terlalu kecil ataupun terlalu besar sehingga ingin mengubahnya.

Berikut admin bagikan cara mengubah ukuran kursor mouse di windows kamu agar jadi seperti yang kamu inginkan.

Ukuran Kursor Pointer Mouse Terlalu Kecil? Terlalu Besar? Begini Cara Mengubahnya!


Pergi ke Setting, atau bisa juga dengan menekan tombol windows+U di keyboard laptop atau komputer kamu. Kemudian pilih Ease of acces.

Cara Memperkecil Kursor Pointer Mouse Windows 10
Ease of acces - Win 10

Selanjutnya jika sudah terbuka tampilan seperti di bawah ini kemudian klik Mouse.

Cara Memperbesar Kursor Pointer Mouse Windows 10
Mouse

Nah di bagian ini kamu dapat memilih ukuran apakah kamu mau memperbesar kursor mouse, memperkecil kursor mouse, mengubah warna mouse, sesuaikan dengan keinginanmu.

Cara Mengatur Kursor Pointer Mouse Windows 10
Setting Mouse Win 10

Selesai, jika kamu ingin mengembalikan seperti semula kamu dapat masuk ke menu ini lagi.

Bagaimana sobat mudah bukan? selamat mencoba.

Mau tahu License Key yang terinstal pada Windows 10 Kamu? Begini caranya! - Beberapa orang sering membackup license key atau product key (PK) untuk keperluan instalasi ulang Windows 10.

Nah, jika nantinya instal ulang Windows dan nantinya diminta Product key-nya maka untunglah kita punya nomor produk yang telah kita backup sebelumnya.

Product Key-nya bisa tulis atau catat, ok sobat berikut ini giban.net akan mencoba berbagi cara mengetahui PK pada Windows 10 yang sudah terinstal di komputer kamu.

Cara Cek License / Product Key Windows 10


Pada kotak pencarian di windows ketikan command prompt , klik kanan pada command prompt kemudian Run as adminstrator.

Cara cek product Key Windows 10
Giban.Net

Masukan perintah di bawah ini

wmic path softwarelicensingservice get OA3xOriginalProductKey

Kemudian klik Enter

Cara Cek License Product KeyWindows 10
Giban.Net

Nantinya disitu akan terlihat deretan angka dan huruf yang merupakan Product Key pada Windows 10 yang terinstal di laptop atau komputer kamu.

Nah, silahkan kamu catat product key untuk dipergunakan disaat kamu membutuhkannya nanti.

Pastinya kebanyakan orang yang memiliki komputer atau laptop ingin beberapa data yang disimpan di folder tidak ingin di akses atau di ketahui orang lain, setidaknya minimal menyembunyikannya.

Seperti versi windows sebelumnya, di windows 10 kamu masih bisa menyembunyikan folder atau file yang kamu inginkan, namun caranya yang berbeda, dan ini lebih mudah dibandikan versi windows sebelumnya.

Nah, kesempatan ini admin akan berbagi tutorial bagaimaan menyembunyikan atau meng-hidden folder di Windows 10. Ok Guys langsung simak...

Cara Menyembunyikan File dan Folder di Windows 10


Pertama, buka file exploler dan klik tab view, kemudian tandai folder yang ingin di sembunyikan, selanjutnya klik Hide selected items seperti pada gambar di bawah ini.

Cara Menyembunyikan File dan Folder pada Windows 10 Home
giban.net

Pilih salah satu opsi kemudian klik OK.

Cara Menyembunyikan File dan Folder pada Windows 10 Pro
giban.net

Menyembunyikan file dan folder pada windows 10 memang lebih mudah dibandingkan menyembunyikan folder dan file pada seri windows-windows sebelumnya. Ok sekian selamat mencoba.

Di Windows 10 ada salah satu fitur luar biasa, yaitu Cortana. Sayang banget jika kamu sudah menggunakan Windows 10 dan tidak memanfaatkan fitur Cortana ini.

Cortana adalah smart virtual assistant yang bisa diajak berinteraksi, dengan memberikan perintah dengan berbicara saja kamu bisa menyuruh Cortana melakukan hal-hal tertentu di Windows 10.

Sayangnya Cortana hadir hanya untuk beberapa negara saja, dan umumnya negara yang biasa menggunakan bahasa Inggris, mungkin karena perintah-perintah suara yang mampu di kenali Cortana adalah bahasa inggris.

Cara Mengaktifkan Cortana di Windows 10


Cara Aktifkan Cortana di Windows 10 Home dan Pro
Cara Mengaktifkan Cortana di Windows 10

Nah kali ini admin akan berbagi bagaimana cara mudah mengaktifkan Cortana di laptop atau komputer kamu yang menggunakan Windows 10.

Caranya sebenarnya mudah saja, kamu tinggal masuk ke settingan windows dan mengubah setingan Region ke negara yang di dukung oleh Cortana.

Cara Mengaktifkan Cortana di Windows 10 Pro Desktop
Setting

Cara Mengaktifkan Cortana di Windows 10 Home
Time & Langue

Cara Mengaktifkan Cortana di Windows 10 Mobile
Region & Langue

Berhasil Mengaktifkan Cortana di Windows 10
Cortana

Nah, sekarang kamu bisa menggunakan Cortana di Windows 10 kamu, agar cortana dapat bekerja lebih maksimal sebaiknya kamu sign ini dengan acunt microsof di Cortana ini.