SEPESER.COM

Efek loading blog

Efek Loading Blog V4: Juggling Animation

Cara memasang Efek Junggling Loading Animation di Blogger

HTML / JavaScript

<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>

<style>

#load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }

$circle-size:10vmin; * { box-sizing:border-box; position:relative; }

.circle{animation:spin 3s linear infinite both; background:#bada55; border-radius:100vmax; /* margin:calc(50vh - 5vmin) calc(50vw - 1vmin); */

/* Half the longest viewport width minus half the width/height of the circle. */

  margin:60vh calc(50vw - 1vmin); height:10vmin; position:absolute; width:10vmin}

.circle + .circle { animation:spin 3s linear 1s infinite both; background:#10aded; }

.circle + .circle + .circle { animation:spin 3s linear 2s infinite both; background:#a991e5; }

@keyframes spin {

    0% { transform:rotate(360deg) translate(0vmax,-10vmax); } 50% { transform:rotate(180deg) translate(0vmax,0vmax); } 100% { transform:rotate(0deg) translate(0vmax,-10vmax); }

}

</style>

<div id="load-page-seocips">

<div class="loader">

  <div class="circle"></div>

  <div class="circle"></div>

  <div class="circle"></div>

</div>

</div>

Contoh Video Tutorial

Image Hover Effect: Tilt

Tilt CSS image hover effect

 Cara 1: Memasang Tilt CSS image hover effect di Tema Blogger

1. Di Blog Blogger 😊

2. Pilih menu Template ➔ Klik disamping Sesuaikan ➔ Edit HTML

Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }

.post-body img:hover { -webkit-transform:rotate(-22deg); -moz-transform:rotate(-22deg); -o-transform:rotate(-22deg); -ms-transform:rotate(-22deg); transform:rotate(-22deg); }

4. Save template

Tadi kamu membuatnya dengan cara memasukan kode CSS langsung ke dalam template blog.Namun, mungkin saja agak sulit jika masih baru dan masih belajar nge-blog. Kamu bisa juga memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya seperti di bawah ini:

Cara 2: Memasang Tilt CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style>

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }

.post-body img:hover { -webkit-transform:rotate(-22deg); -moz-transform:rotate(-22deg); -o-transform:rotate(-22deg); -ms-transform:rotate(-22deg); transform:rotate(-22deg); }

</style>

4. Save.

👉 LIHAT DEMO 👈

Sekian Tilt CSS image hover effect, salam Bloggers.

Brightness CSS image hover effect

Cara 1: Memasang Brightness CSS image hover effect di Tema Blogger

Template ➜ Edit HTML

.post-body img { -webkit-filter:brightness(0.25); -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }.post-body img:hover {-webkit-filter:none; }

Cara 2: Memasang Brightness CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style>

.post-body img { -webkit-filter:brightness(0.25); -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }

.post-body img:hover {-webkit-filter:none; }

</style>

4. Save atau simpan

👉 LIHAT DEMO 👈

Efek hover shadow border radius 1

Cara 1: Memasang CSS Image Hover Effect di Tema Blogger

Template ➜ Edit HTML

.post-body img{background:#FFF;padding:15px;border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}

.post-body img:hover{border-radius:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

Berbicara soal efek animasi blog, sebelumnya juga admin telah berbagi efek hover gambar berputar pada blog, juga membuat efek daun berjatuhan update terbaru di blog dan cara memasang menu navigasi dropdown responsive. 

Cara 2: Memasang CSS Image Hover Effect di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style>

.post-body img{background:#FFF;padding:15px;border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}

.post-body img:hover{border-radius:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

</style>

4. Save atau simpan

Tambahan

Berikut ini adalah jika kamu ingin efek gambar seperti di atas tapi terbalik, maksudnya efek hover pada gambar ini kebalikan dari efek gambar di atas. 

Efek hover Shadow border radius 2

Disini saya langsung saja ke cara yang ke 2, yaitu memasangnya pada widget blog, jika sobat suka dengan cara yang pertama maka bisa mengikuti cara 1 di atas.

Berikut adalah kode + Cara pemasangannya:

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

3. Masukan kode di bawah ini:

<style>

.post-body img{background:#FFF;padding:15px;border-radius:0;box-shadow:0 0 3px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}

.post-body img:hover{border-radius:50% 0;box-shadow:0 0 15px #000;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s ;cursor:pointer}

</style>

4. Save atau simpan

Video Tutorial

Efek Zoom Berputar

Efek Hover Zoom Berputar

edit html

#sepeser img{padding:8px; box-shadow:0 0 3px #333;-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;}

#sepeser img:hover{padding:4px; -o-transform: scale(1.3) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.3) rotate(360deg);border-radius:50%;}

Tampilan HTML

<div id="sepeser">

<div style="text-align: center;">

<a href="http://www.sepeser.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtClMPrUEPcbsLEH7JU6vyRzyDHQ2pAwmrWz6ACx_mtRnI5weh_l_3UeXrEx2_RTqCQ-pY5MiAG8zP-MwuX1yWf_yuvWACsjpS_xBl1QeyPkgvhpic3JwL8JUC6OhP3MLor9e_EP9Iqqa9MdgfI0wjIcJDXYnf09p6boYpMTFHh2A3ho0MoWH1zu5a_O0/s300/contoh-efek-hover-zoom-berputar.jpg" height="250" width="250" /></a>

</div></div>

Cara 2: Memasang Efek Hover Berputar Pada Gambar di Widget Blogger

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode di bawah ini:

efek blog

Efek Animasi di Blog

Cara Membuat Efek Animasi di Blogger

Html/Javascript

Efek Daun Berguguran

Memasang Efek Daun Berterbangan + Efek Lainnya

Efek loading blog

Efek Loading Blog V3

Cara membuat Efek Loading Blog V3 di Blogger

HTML / JavaScript

<link href="https://raw.githack.com/Brando07/sepeser.com/main/loadingv3-santa.css" rel="stylesheet" type="text/css"></link>

<script src="https://raw.githack.com/Brando07/sepeser.com/main/loading-www.sepeser.com.js"></script>

<div id="loadingHalaman">

</div>

Video Tutorial

Penutup

Efek Hover

Efek Hover Pada Gambar

Seorang blogger harus menawarkan konten tertulis berkualitas tinggi kepada audiensnya, yang dapat disajikan secara efektif melalui tulisan yang jelas dan mudah dipahami dilengkapi dengan gambar yang menarik secara visual. Penggunaan efek seperti ini memiliki keuntungan dalam meningkatkan daya tarik visual blog kita. Efek ini menjadi terlihat ketika kursor mouse mengarahkan kursor ke gambar yang telah kita terapkan.

Pada artikel sebelumnya admin juga sudah membahas tentang pembuatan menu navigasi responsive dan efek salju untuk update terbaru. Efek di postingan ini mirip dengan efek zoom berputar pada gambar yang disebutkan di postingan sebelumnya. Selain itu, efek ini dapat ditampilkan di sidebar blog. Berikut adalah panduan tentang cara menerapkannya.

Cara Membuat Efek Hover Pada Gambar di Blogger

1. Masuk ke dashboard Blogger lalu pilih menu Tema

Edit HTML

2. Cari kode dan pastekan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

.gbr { height:280px; width:280px; overflow:hidden; border:0 solid white; margin:5px auto; -webkit-box-shadow:5px 5px 5px #111; box-shadow:5px 5px 5px rgba(0,0,0,0.5); }

.gbr:hover { cursor:pointer; }

.nahini { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }

.nahini:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

3. Untuk menerapkannya contohnya seperti dibawah ini

Tampilan HTML

<div class="nahini gbr">

<a href="https://www.sepeser.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEAe4cutTrjGXZN88xPdDerInYRfvt59evOePh3Iz6K60C-nYM58iMWRQ-qJ94UZ8IVTquqU0FsOvtI7x8X1KF4M192ga93QlHJBiS5DIBmpqNaOizqH8xhxzBxqXT1P1sgaIPMJO0GfY/s1600/efek-gambar-seocips.jpg" alt="template blog"/></a>

</div>

Kamu dapat masukan kedalam postingan / artikel atau menambahkannya ke widget HTML blog.

Ganti tulisan tulisan warna biru dengan link alamat tujuan jika gambarnya diklik, kemudian ganti kode warna merah dengan link gambar milik kamu.

Video Tutorial

Penutup

👉 LIHAT DEMO 👈

efek slide kiri ke kanan

efek slide kanan ke kiri

Widget Facebook Efek Slide

Cara Membuat Widget Fanspage Facebook Efek Slide di Blogger

HTML/JavaScript

Efek Slide dari kiri ke kanan

<style>

.fb-btn-haisob {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;right:0.5%;z-index:9999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;}

.fb-btn-haisob {padding:5px ;color:#fff;font-size:120%;}

.fb-btn-haisob a:link, .fb-btn-haisob a:visited {color:#ffcc00;}

.fb-btn-haisob a:hover {color:#fff;}

.fb-btn-haisob2{background:rgba(1, 0, 1, 0.3);-moz-animation:kiri 15s;-webkit-animation:kiri 15s;animation:kiri 15s}

.fb-btn-haisob2 {padding:3px ;color:#fff;font-size:120%;}

@-webkit-keyframes atas{

from{transform:translate(0px, -2000px)}

to{transform:translate(0px,0px)}

}

@keyframes atas{

from{transform:translate(0px, -2000px)}

to{transform:translate(0px,0px)}

}

@-webkit-keyframes kiri{

from{transform:translate(-30000px, 0px);}

to{transform:translate(0px,0px);}

}

@keyframes kiri{

from{transform:translate(-30000px, 0px);}

to{transform:translate(0px,0px);}

}

</style>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-btn-haisob">

<div class="fb-btn-haisob2">

<div class="fb-page" data-href="https://www.facebook.com/sepeserdotcom" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sepeserdotcom"><a href="https://www.facebook.com/sepeserdotcom">sepeser.com</a></blockquote></div></div>

</div>

</div>

Efek Slide dari kanan ke kiri