Skip to main content
Valid AMP

follow us

Merapihkan Artikel Gambar Pada Blog Amp Html

Pada postingan sebelumnya Saya sudah membagikan Posting Gambar Dan Video Valid AMP HTML. Namun dengan cara tersebut gambar yang kita posting belum terlihat rapih alias masih acak-acakan, alasannya adalah gambar masih ada yang melebar, terpotong, dan ada yang terlihat buram. Untuk itu disini Saya akan share bagaimana caranya supaya gambar yang kita posting pada blog AMP HTML tampaklebih rapih.

Sebenarnya artikel ini bukan hanya untuk blog yang valid AMP HTML saja, tetapi untuk blog non AMP juga mesti menerapkan cara ini agar postingan gambar nya lebih tampakrapih.

Postingan ini Saya mampu dari blog kompi abnormal yang membahas perihal Mengatur Gambar Postingan Blog AMP HTML. Nah, semoga artikel gambar di blog kita lebih rapih, kita mesti mengakali dengan CSS yang kita tempatkan di Editor HTML pada template blog kita.

Silahkan simpan arahan CSS berikut di edit HTML, untuk style halaman postingan (untuk blog AMP simpan untuk syle halaman postingan tampilan desktop dan penampilan mobile).

 .img-centertext-align:center;margin:0 auto;
.img-leftclear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;
.img-rightclear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;
.img-width-300,.img-width-400,.img-width-500,.img-width-600width:100%;text-align:center;clear:both
.img-width-300max-width:300px;
.img-width-400max-width:400px;
.img-width-500max-width:500px;
.img-width-600max-width:600px;
@media screen and (max-width:640px)
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-rightclear:both;float:none;margin:1em auto;text-align:center;

@media screen and (max-width:414px)
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-rightclear:both;float:none;margin:1em auto;text-align:center;

Yang harus kita perhatikan adalah width dan height gambar harus sesuai dengan lebar dan tinggi gambar bekerjsama baik blog AMP HTML maupun blog non AMP HTML.

Jika untuk gambar dengan lebar sama atau lebih besar dari lebar halaman postingan, kita cukup menambahkan isyarat layout="responsive" pada tag amp-img mirip berikut:

 
      width="1000"
      height="564"
      layout="responsive"
      alt="Merapihkan Postingan Gambar Pada Blog AMP HTML Merapihkan Postingan Gambar Pada Blog AMP HTML">

Dan untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar 240px, 300px, 400px, 500px, atau 600px, dan lebar postingan yakni 700px. Jika kita tidak menyertakan kode layout="responsive", maka secara otomatis gambar tersebut akan berada di sebelah kiri dan gambar akan terpotong pada layar device yang lebih kecil dari lebar gambar.

Tetapi kalau kita menambahkan layout="responsive" pada gambar tersebut maka gambar akan menjadi buram atau tidak terperinci. Cara yang tepat yaitu memakai class pada CSS di atas. Silahkan ganti isyarat

 

Dengan

 

Maka isyarat HTML-nya akan seperti berikut:

 


      width="300"
      height="169"
      layout="responsive"
      alt="Merapihkan Postingan Gambar Pada Blog AMP HTML Merapihkan Postingan Gambar Pada Blog AMP HTML">
 

Apabila Anda ingin meletakan gambar di samping kiri atau kanan, maka kita tinggal mengubah aba-aba img-center dengan img-left atau img-right.

Begitu pun dengan img-width-300, jikalau lebar gambarnya 400px (atau lebar di bawah 500px) maka silahkan ganti menjadi img-width-400. Begitu pun untuk gambar dengan lebar 500px (atau lebar di bawah 600px) atau 600px (atau lebar di bawah 700px) (Misalkan kita mempunyai template blog dengan lebar postingan 700px), silahkan ganti dengan img-width-500 atau img-width-600, semoga gambar tidak terpotong melampaui lebar artikel.

Nah, mungkin hanya itu saja yang bisa Saya bagikan. Semoga berfaedah.


                        
                        

                        

                      

                      
                      

                      

You Might Also Like:


                      

                    
Next PostNext Post
Previous PostPrevious Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar