Membuat Blog Badge dengan Effect Mengunakan CSS di Blogger
Blog Badge dengan Effect Menggunakan CSS. Berikut ini kami akan membagikan Badge atau lencana yang dapat anda gunakan untuk mempercantik tampilan blog anda. Misalnya anda ingin mempercantik title blog anda ataupun menggunakannya untuk widget blogger anda.

Blog badge berikut ini berbentuk lingkaran dangan transisi Css yang indah berwarna warni ketika kursor mouse menyentuhnya. Jika sobat tertarik dengan efek-efek blog mungkin sobat dapat membaca artikel sebelumnya seperti widget sosial efek hover atau membuat efek gambar bergetar atau membuat efek tooltip dengan CSS.

Untuk demonya sobat dapat melihat langsung gambar dibawah ini. Bagaimana keren bukan? tertarik untuk menggunakannya? ok berikut adalah Live demo, CSS dan kode HTML nya. Ok selamat mencoba sob..

LIVE DEMO :
Arahkan Cursor Mouse ke gambar dibawah ini!


CSS Blog Badge:

.circle{background:url(http://1.bp.blogspot.com/-5z-NAp4FnJY/U94OMLs-NxI/AAAAAAAAB_A/WEtVmNs-ENg/s310/507cc1.gif);border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h4{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h4 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h4 a,.circle:hover > h4{color:rgba(185,185,185,1)}

HTML Blog Badge:

<div class="circle">
<h4>
<a href="http://www.seocips.com">seocips</a></h4>
</div>

Sekian sobat yang dapat dibagikan untuk saat ini, lihat juga Tutorial blog terbaru seocips yang lainnya. Semoga cara membuat blog badge dengan efek CSS ini bermanfaat. Ok selamat mencoba.

0 Komentar untuk "Cara Membuat Blog Badge Dengan CSS di Blog"