Cara Membuat Gambar Postingan Responsive Pada Blogger Terbaru - Median UI

Tips Membuat Imeges Pada Postingan Blog Responsive

Gambar pada postingan blog harus Responsive apa lagi pada tambilan mobile frendly agar blog kalian terlihat lebih rapi.

Apa Sih Responsive Mobile Friendly Pada Blogger

images by : ID Backlinks

Responsive adalah tampilan blog yang mengikuti ukuran lebar layar Desktop ataupun Smartphone. Responsive juga disebut banyak orang "Seo Mobile Friendly". Sehingga Responsive menjadi factor utama untuk blog Seo (Seo Mobile Friendly) agar blog mendapatkan rating terbaik di mesin pencarian google. Kalau Blog kalian Responsive User akan betah di dalam blog kalain apalagi Artikel yang kalian buat detail dan rapih.

Nah Disini Cmantu akan memberikan Css Dan Html agar tampilan gambar pada postingan blog kalian Responsive  Dengan tampilan yang keren dan terbaru.

Patikan kalian telah login ke Blogger
Pilih themes / Tema - Edit Html
Lalu Kalian Cari </B:Skin> Lalu kalian tempelkan kode dibawah ini tepat di atas kode </B:Skin> Untuk memudahkan kalian mencari kode b:skin Kalian Bisa menggunakan fiitur Keyboard dengan perintah Ctrl+F Lalu Kalian Ketekan </B:Skin>

.Blog .grid-image, .Blog .scroll-image{display:flex;flex-wrap:wrap;align-items:flex-start;margin:30px 0}
.Blog .grid-image img, .Blog .scroll-image img{width:calc(33.333% - 10px);margin:0 15px 15px 0}
.Blog .grid-image img:nth-of-type(3n), .Blog .grid-image img:last-child, .Blog .scroll-image img:nth-of-type(3n), .Blog .scroll-image img:last-child{margin-right:0}
@media screen and (max-width:480px){
.Blog .grid-image img{width:calc(50% - 7.5px)}
.Blog .grid-image img:nth-of-type(2n){margin-right:0}
.Blog .grid-image img:nth-of-type(3n){margin-right:15px}
.Blog .scroll-image{flex-wrap:nowrap;justify-content:flex-start;position:relative;width:114%;left:-7%;padding:0 7%;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.Blog .scroll-image img{display:block;flex:0 0 auto;width:80%;margin:0 15px 0 0}
.Blog .scroll-image img:last-of-type{margin-right:0}
.Blog .scroll-image:after{content:'';display:block;flex:0 0 auto;align-self:stretch;width:7%}
}