Cara Membuat Gambar Bulat dengan CSS

Contoh hasil jadi:


Sisipkan gambar ke dalam kode HTML:
<img class="circle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8KQPFOOAtLuF4gkcuETdpWLjpaSX0Rdlf5xtdqmhPJtZdSrxShmgi6pm4K5IV4Aq0x7vKL0Ghrgt6e8RPlhUYvGq7EkN5_7f0iX9h0snK25acXzsFq29zOvvQZz4HAE26LrwREkzCT5k/s1600/Logo+LPIA+embos+Margonda+biru.png"/>

1. ganti teks setelah src= dan di dalam kutip ganda " " dengan url dan gambar yang anda miliki.

Tanpa Menggunakan Border :.circle{ border-radius:100em; opacity:0.5; width:160px; height:160px; }

Border warna warni :
.circle{ border-radius:100em; opacity:0.5; border-top:2px solid #cf2031; border-right:2px solid #0f7dc8; border-bottom:2px solid #2eb31a; border-left:2px solid #eab823; width:160px; height:160px; }

Border 1 Warna
.circle{ border-radius:100em; opacity:0.5; border:2px solid #ddd; width:160px; height:160px; }

Border dengan shadow :
.circle{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://link-to-your/image.jpg) no-repeat; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); }


Referensi:
http://bukanportalberita.blogspot.com/
http://potongankalimat.blogspot.com/
http://fandrajuani.blogspot.com/
http://bavotasan.com/

Segera bergabung : - kursus bahasa Inggris - kursus komputer dengan: Lembaga Pendidikan Indonesia Amerika ( LPIA ) LPIA Margonda Jl. Margonda Raya, No.91C (dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR) Kelurahan: Pancoran Mas Kecamatan : Pancoran Mas Kota: Depok Po Box: 16436 Telepon : (021) 7774443

cara membuat zoom efek image di blog

Memasang cara membuat zoom efek image di blog

Hasil :


Sebelum memasang kode script sebaiknya anda backup template blog anda, untuk berjaga-jaga bila terjadi error saat pemasangan kode.

Step 1

Login blogger Masuk ke halaman dashboard > Template > HTML

Step 2

cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya kode ]]></b:skin>


.hovergallery img{-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

Step 3

cara menggunakan seperti kode dibawah  ini gan,tinggal ganti URL gambar
<a class="hovergallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifitC_lJU1-y3KV0IUkxRFvr4YItU753Om8MQQmUhQDoy2BwjBcDmifuEgiEUnwEk6zeYo0bYAqu6inF103krh5XKKdst1r938YRnhytKlpkjeaOykUsj0hYyTgppH0fU3v8LTF4s-vN4/s1600/Logo+LPIA+embos+Margonda+biru+old.png" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifitC_lJU1-y3KV0IUkxRFvr4YItU753Om8MQQmUhQDoy2BwjBcDmifuEgiEUnwEk6zeYo0bYAqu6inF103krh5XKKdst1r938YRnhytKlpkjeaOykUsj0hYyTgppH0fU3v8LTF4s-vN4/s1600/Logo+LPIA+embos+Margonda+biru+old.png" /></a>

Step 4

terakhir klik simpan

sumber:
http://pucukpucuk.blogspot.com/

---

Segera bergabung : - kursus bahasa Inggris - kursus komputer dengan:
 Lembaga Pendidikan Indonesia Amerika ( LPIA )
 LPIA Margonda 
Jl. Margonda Raya, No.91C
(dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR) Kelurahan: Pancoran Mas Kecamatan : Pancoran Mas Kota: Depok Po Box: 16436

 Telepon : (021) 7774443

Trik Blogger - Hemat Energi

Memasang Mode Hemat Energi (Energy Saving Mode)

Sebelum memasang kode script sebaiknya anda backup template blog anda, untuk berjaga-jaga bila terjadi error saat pemasangan kode.  

Step 1

Masuk ke halaman dashboard > Template > HTML

Step 2

Letakkan kode berikut tepat sebelum kode </head>

<script language='javascript' src='http://the-kampoeng-blogger.googlecode.com/files/ModeHematEnergy.js' type='text/javascript'/>

Step 3 

Save Template




Sumber : http://thekampoengblogger.blogspot.com/

---

Segera bergabung :

• kursus bahasa Inggris 
• kursus komputer

 dengan: Lembaga Pendidikan Indonesia Amerika ( LPIA )
 LPIA Margonda Jl. Margonda Raya, No.91C (dekat lampu merah flyover pertigaan Arief Rahman Hakim atau depan Autopart Ramanda Depok, sebelah Solite Furniture dan ATTIN TOUR) Kelurahan: Pancoran Mas Kecamatan : Pancoran Mas Kota: Depok Po Box: 16436
 Telepon : (021) 7774443

Related Post (Artikel Terkait) di Blog

Related Post (Artikel Terkait) Sederhana di Blog
http://thekampoengblogger.blogspot.com/2013/03/memasang-related-post-sederhana.html

Memasang Related Post (Artikel Terkait) Bergambar (Thumbnail) di Blog http://thekampoengblogger.blogspot.com/2013/03/pasang-related-post-dengan-thumbnail.html