shad0w-share

2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog merupakan panduan dasar yang sudah banyak diketahui oleh teman-teman blogger, bahkan mungkin sebelum saya lahir garis border sudah ada heheee.. Menambahkan garis border (baca: bingkai) kadang perlu di lakukan untuk memberikan keindahan tersendiri pada tampilan gambar atau mungkin akan membuat keunikan tersendiri jika dilakukan dengan beberapa trik khusus ketika menambahkan garis border ini atau menggunakan bermacam garis border untuk membingkainya

Cara menambahkan garis border gambar blog ini ada dua cara yang bisa kita lakukan yaitu dengan cara manual dan otomatis.

1. Cara Manual
   Yaitu memberikan garis border pada gambar dengan cara menambahkan kode-kode css secara langsung kedalam artikel gambar didalam area postingan. Sehingga setiap memasang gambar didalam artikel dan ingin menambahkan bingkai untuk gambar tersebut maka kita harus menyertakan kode css untuk bingkai gambar ini.
   
   Berikut contoh sekaligus demonya..
   
   

   Gambar tanpa garis border			Gambar dengan garis border

   
   Untuk memberikan garis border secara manual untuk artikel gambar, silahkan masukkan kode berikut ini
   
   

   <div style="border: 5px solid blue;">
   <img alt="Judul" height="125" src="Link Gambar" title="Judul" width="200" /></div>

2. Cara Otomatis
   Yaitu menambahkan kode-kode css untuk garis border gambar didalam kode template sehingga jika ketika kita membuatnya secara otomatis maka seluruh tampilan gambar di artikel akan memiliki garis border yang sama antara tampilan gambar yang satu dengan yang lainnya.
   
   Untuk membuat garis border gambar blog secara otomatis ini, cukup menambahkan kode berikut kedalam halaman pengeditan template blog anda namun jika didalam template sudah tersedia kode berikut, kita cukup memodifikasinya sesuai dengan keinginan dan tidak perlu ditambahkan lagi
   
   Berikut cara menambahkan garis border gambar blog secara otomatis
   
   • Masuk ke menu Template >> Edit Html >> tekan Ctrl+F
   • Silahkan cari kode post .img atau post-body img didalam template blog. Jika sudah ada maka cukup memodifikasinya sesuai dengan keinginan
   • Jika tidak kode post .img, tambahkan kode berikut sebelum atas diatas ]]></b:skin>
     

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

   • Lihat hasilnya disetiap tampilan gambar yang ada didalam artikel

Selanjutnya, untuk menampilkan gambar menggunakan border atau bingkai silahkan pilih sesuai keinginan anda. Apakah menggunakan cara manual atau otomatis
Dan, terimakasih telah berkunjung, silahkan tinggalkan komentar anda untuk artikel ini, 2 Cara Menambahkan Garis Border (Bingkai) Gambar Blog

Cara Membuat Garis Border Melengkung - Pada artikel sebelumnya, saya sudah menjelaskan tentang cara menambahkan garis border dan macam macam garis border untuk gambar di artikel atau di blog. Pada artikel ini, masih dengan topik yang sama akan dilanjutkan lebih spesifik lagi tentang garis border dengan tampilan yang berbeda dari sebelumnya yaitu membuat garis border melengkung. Maksud dari garis border melengkung ini adalah kita akan membuat garis border yang memiliki sudut melengkung dari setiap pojok yang digunakan dalam menampilkan sebuah bingkai gambar seperti yang terlihat pada tampilan gambar berikut ini


Demo dan Kode


Kode: <div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: #cccccc; border-radius: 20px; border: 2px solid black; color: black; font-family: Arial; padding: 5px;">Tepi Kiri Kanan Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Atas Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 0em 0em 1em; background-color: green; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kiri Bawah Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Atas Melengkung</div>

Kode: <div style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Pojok Kanan Bawah Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kiri Melengkung</div>

Kode: <div style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">Tepi Kanan Melengkung</div>

Untuk membuat tampilan seperti diatas. Anda cukup menambahkan kode-kode yang ada diatas untuk setiap jenis garis border melengkung kedalam artikel gambar di area postingan

Itulah cara membuat garis border melengkung. Untuk tampilan yang lebih dan memiliki keunikan tersendiri, silahkan atur kode-kode berikut yang ada didalam kode diatas

-moz-border-radius: 0em 0em 0em 1em;
border-radius: 0em 0em 0em 1em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 20px;
background-color: #ccc;
border: 2px solid black;
color: #000;
padding: 5px;

Silahkan ganti dan atur setiap skala (nomer ukuran) yang ada diatas dan lihat hasilnya dengan perubahan yang anda lakukan. Maaf saya tidak bisa menjelaskan lebih lanjut untuk mengatur skala ini karena hal ini semata-mata untuk mendorong anda agar lebih kreatif dan imajinatif dalam mengaplikasikan sebuah panduan.

Demikian, jika ada kesulitan atau perbedaan ide mari kita diskusikan bersama dengan berkomentar untuk artikel ini, Cara Membuat Garis Border Melengkung

Macam Macam Garis Border Blog sebenarnya sudah banyak yang membahas tentang topik ini namun tidak ada salahnya jika saya membahas ulang untuk anda karena selain itu juga melengkapi artikel saya yang lain cara menambahkan garis border (bingkai) gambar blog. Pada artikel ini, macam macam garis border blog, saya tidak banyak memberikan dan menjelaskan garis border blog yang biasa digunakan karena semua macam macam garis border garis blog ini sudah terbiasa digunakan.


Berikut macam macam garis border blog yang biasa digunakan

Kode: <div style="-moz-border-radius: 80px; -webkit-border-radius: 80px; border-radius: 80px; border: 2px solid #A89D61; background:#D2CCAD; width: 150px; height: 150px;">Circle Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px solid red; font-size: 30px; padding: 15px; width: 300px;">Solid Border Style</div>

Kode: <div style="background:#0000;#000;border: 9px double red; font-size: 30px; padding: 15px; width: 300px;">Double Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px groove red; font-size: 30px; padding: 15px; width: 300px;">Groove Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px ridge red; font-size: 30px; padding: 15px; width: 300px;">Ridge Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px dotted red; font-size: 30px; padding: 15px; width: 300px;">Dotted Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px dashed red; font-size: 30px; padding: 15px; width: 300px;">Dashed Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px inset red; font-size: 30px; padding: 15px; width: 300px;">Inset Border Style</div>

Kode: <div style="background:#0000;color:#000;border: 9px outset red; font-size: 30px; padding: 15px; width: 300px;">Outset Border Style</div>

Menggabungkan garis border dalam satu elemen yang memiliki perbedaan dari segala sisi setiap garis border yang digunakan seperti yang terlihat pada contoh berikut ini


Kode:
<div style="background: #0000; border-bottom: 6px dashed green; border-left: 6px groove red; border-right: 6px dotted blue; border-top: 6px outset pink; color: black; font-size: 30px; padding: 15px; width: 400px;">Menggabumgkan Garis Border</div>

Itulah sekilas tentang macam macam garis border dan anda bisa memodifikasinya sesuai dengan keinginan anda

Cara Membuat Efek Terang (Fokus) Gambar Blog merupakan kebalikan dari efek blur gambar blog yang telah saya bahas sebelumnya yaitu memberikan efek pada gambar dimana tampilan awal dari gambar tersebut adalah buram atau blur namun setelah di sorot dengan mouse maka tampilan gambar akan berubah menjadi terang atau fokus. Membuat efek terang gambar blog merupakan cara terbaik merubah tampilan blog daripada menggunakan efek blur karena ia akan lebih memperjelas tampilan gambar itu sendiri.

Namun, meskipun memberikan efek terang atau fokus gambar blog, ia tidak lebih baik dari mempebesar gambar blog karena adanya tampilan terbatas yang ditampilkan oleh gambar tersebut. Dan detail yang ditampilakn juga kurang terlihat jelas namun berbeda jika memberikan efek Zoom gambar blog seperti yang terlihat pada tampilan gambar berikut ini

Demonya


Dan jika anda ingin membuat efek terang (fokus) gambar blog berikut caranya ;
Masukkan kode berikut kedalam artikel gambat blog anda

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>

Ganti warna biru dengan link gambar anda

Sekian. Terimakasih telah berkunjung dan membaca artikel ini, cara membuat efek terang (fokus) gambar blog

Cara Membuat Efek Blur Gambar Blog sebenarnya bukanlah suatu gaya atau style yang harus dipasang atau diberikan pada gambar blog untuk mempercantik atau memberikan nuansa lain pada blog karena dengan membuat efek blur gambar blog malah tidak akan memperindah tampilan blog itu sendiri dan menurut saya akan menjadi aneh karena dengan adanya efek blur gambar blog akan memperburuk tampilan blog itu sendiri.

Seperti contohnya, ketika anda memasang gambar blog di artikel dan itu gambar yang sangat bagus untuk dilihat namun karena adanya efek blur ini maka gambar yang seharusnya tampil cantik tiba-tiba menjadi buram dan jelas ini akan memperburuk tampilan blog anda. Seperti yang terlihat pada gambar beikut ini

Demo
Gambar asli


Efek blur


Namun sebagai pemilik blog, tentu anda memiliki pemikiran dan penilaian tersendiri seperti apa tampilan blog yang anda inginkan, mau diapakan tampilan blog anda tersebut, semua ada ditangan anda. Dan, sebagai saran saja, lebih baik membuat efek terang gambar blog itu yaitu membuat fokus gambar blog atau memperbesar blog dengan efek Zoom. Dua pilihan terakhir menurut saya lebih baik digunakan.

Dan jika anda ingin membuat efek blur gambar blog, berikut caranya ;
Masukkan kode berikut kedalam artikel gambar di blog anda
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyHUSdNfIdq2zjDDp0NtD47d3xxMX5SaS4AQBfYeAVthHFrgMvMymQNh7Uwcg1aQjgwKkd-OdFGHuvpEGJX6x67L3g5zqyImdaDkdIeAOMGe3plxVTfTt8mHF6hjhwQe7K-dvowEAKyBU/s320/New+Picture+%2812%29.png" style="opacity: 0.4;" />

Ganti warna biru dengan link gambar anda

Terimakasih telah membaca artikel ini, cara membuat efek blur gambar blog. Jika ada salah kata atau kalimat yang saya tulis, saya mohon maaf karena sebuah ide untuk membangun blog tergantung personal masing-masing dan jika ada ide yang lain mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Efek Blur Gambar Blog