CARA MEMASANG BINGKAI OTOMATIS DI SEMUA GAMBAR POSTINGAN BLOG


Jika kalian sering memasang gambar di postingan blog kalian, pasti lebih enak kelihatan jika di setiap gambar terbingkai dengan baik, namun terlalu merepotkan jika gambar harus di edit dulu di photoshop atau tempat edit foto setiap kali mau memasang gambar di blog kita.

Nah, lebih enak jika tampa di edit tetapi gambar akan secara otomatis terbingkai di setiap postingan kita. caranya seperti berikut :

Perhatikan Kode ini

.post-body img{
padding: 5px;
background-color: #transparan;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-style: outset;
border-color: #666666;

Copy paste CODE HTML tersebut ke Blog kalian, caranya :

1. Masuk ke blogger

2. Pilih Template » Edit HTML

3. Cari kode ]]></b:skin>

4. Setelah ketemu, masukkan kode tadi tepat di atas kode ]]></b:skin> tersebut 

catatan :

*border-color: #666666; = warna HTML, kalian bisa ganti dengan kode warna lain

*border ........ : 5px; = Ketebalan Bingkai kalian, bisa di ubah, semakin besar angkanya, semakin tebal bingkainya.

*background-color: #transparan; = adalah tidak memiliki latar belakang.

* border-style merupakan gaya tampilan bingkai. outset adalah bingkai tersebut seperti timbul keluar.


5. Selain code di atas, kalian memakai kode berikut untuk bingkai putih dengan bayangan yang muncul di gambar.

 .post-body img{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXJuqHpfz4b4RIQ2pABptrppefHyNbnu8VHKwXlsD6bsVPui9Wsrs07WI6SJfKOUAZouC6Rxp8vftiE53eaZUx4KGE8sOqhHJQpsmwpwFWfw8rs24ZGFswIv9t14BpnRRpGWwZaBP9Ho/s400/image-background.png) repeat scroll 0 0 transparent;

padding:7px;

border:1px solid #cecece;

-moz-box-shadow: 0px 0px 5px #BBB;

-webkit-box-shadow: 0px 0px 5px #BBB;

box-shadow: 0px 0px 5px #BBB; }


 

Post a Comment

0 Comments