Cara Menambah Radius Border pada Outer Thumbnail Image di Homepage Blog

Radius border atau garis lengkung pada bagian sudut objek image atau box dalam sebuah blog yang terbentuk karena adanya perintah CSS/style yang ditujukan pada objek tersebut, sehingga akan mengalami perubahan bentuk dasar menjadi bentuk yang inginkan oleh CSS/style.

Kali ini saya akan coba membagikan sedikit pengalaman tentang Cara Menambah Radius Border pada Outer Thumbnail Image di Homepage Blog yaitu penempatan radius border pada garis luar atau bingkai thumbnail image di halaman utama blog.

Yang perlu di perhatikan pertama kali adalah kode outer thumbnail image pada homepage, karena penulisan template yang sangat beragam sehingga kalau tidak biasa akan mengalami sedikit kesulitan seperti yang dialami penulis sendiri, Namun kebanyakan penulisan properti CSS/style-nya seperti berikut: outer-wrapper, post-outerwrapper, box-wrapper, box-outerwrapper dan banyak lagi cara penulisan lainnya, seperti contoh dibawah.

.post-outerwrapper{
background:#fff;
border:1px solid #dedede;tambahkan radius border disini}

CSS/style diatas biasanya didahului oleh kode seperti berikut ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Atau gabungan seperti ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType != &quot;error_page&quot;'>

Cara menempatkannya adalah cari CSS/style yang mirip dengan contoh diatas, kemudian tambahkan CSS/style dibawah ini sesudah CSS yang memang ada sebelunya sebelum } penutup.

border-radius: 30px 0 0px 0;

-moz-border-radius: 30px 0 0px 0;

-webkit-border-radius: 30px 0 0px 0;

-o-border-radius: 30px 0 0px 0;

transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 1.5s;

-o-transition: all 1.5s;

Contoh dalam CSS/style lengkap seperti dibawah.

.post-outerwrapper{

background:#fff;

border:1px solid #dedede;

border-radius: 30px 0 0px 0;

-moz-border-radius: 30px 0 0px 0;

-webkit-border-radius: 30px 0 0px 0;

-o-border-radius: 30px 0 0px 0;

transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 1.5s;

-o-transition: all 1.5s;

transition:all 1.5s ease;

width:100%;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

height:100%}

Pada teks box merah diatas adalah CSS/style yang ditambahkan.

Tambahkan CSS/style dibawah ini pada bagian hover.

border-radius:0;

-moz-border-radius:0;

-webkit-border-radius:0;

-o-border-radius:0;}

Contoh lengkap seperti dibawah.

.post-outerwrapper:hover{

border:1px solid #ccc;

border-radius:0;

-moz-border-radius:0;

-webkit-border-radius:0;

-o-border-radius:0;}

CSS/style lengkap diatas contohnya seperti dibawah ini.

.post-outerwrapper{

background:#fff;

border:1px solid #dedede;

border-radius: 30px 0 0px 0;

-moz-border-radius: 30px 0 0px 0;

-webkit-border-radius: 30px 0 0px 0;

-o-border-radius: 30px 0 0px 0;

transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 1.5s;

-o-transition: all 1.5s;

transition:all 1.5s ease;

width:100%;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

height:100%}



.post-outerwrapper:hover{

border:1px solid #ccc;

border-radius:0;

-moz-border-radius:0;

-webkit-border-radius:0;

-o-border-radius:0;}

Perlu di ingat bahwa CSS/style diatas hanya menambah radius border pada bagian sudut kiri atas saja dan akan non aktif jika di hover mouse.

Sekian tutorial singkat ini, mudah-mudahan berguna, saya juga siap menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.