Cara mengatur Teks dan Gambar Postingan Pada Blog AMP

Table of Contents

Setelah kita bisa merapihkan secara otomatis, tanpa harus mengatur posisi teks ketika kita membuat postingan. Yang jadi masalah selanjutnya adalah ketika kita menginginkan teks tertentu harus berada pada posisi tengan / posisi kiri, ini yg dulu saya hadapi, ini semua hanya saya ingin membuat sebuah postingan serapih mungkin. Setelah saya googling ternyata jalan keluarnya ada pada postingan punya suhu saya sendiri kang adhy tentunya, di situ dengan gamblang dijelaskan cara - caranya.

Menurut suhu saya sebenarnya menyimpan gambar untuk postingan Blogger sangatlah mudah, tinggal klik ikon upload gambar di komputer maka gambar akan tampil di postingan blog. Namun gambar - gambar tersebut tentunya harus kita atur letak dan ukurannya agar tampil bagus dan rapih serta tidak terlalu membebani loading blog.

Namun biasanya untuk membetulkan kode HTML postingan, seperti menghapus Style yang dipasang secara inline seperti <div style= "text-align: center;"> dan lainnya. Itu karena style yang dipasang secara inline dapat menyumbang loading blog.

Cara terbaiknya yaitu menggunakan CSS style dari edit HTML, misalnya untuk tag <div style="text-align: center;"> kita rubah menjadi <div class="center"> dengan CSS yang di simpan di edit HTML seperti berikut : .center {text-align: center;} Begitu juga untuk left, right atau justify

Begitupun untuk gambar postingan, khususnya untuk gambar postingan blog AMP HTML (sebenarnya ini berlaku untuk semua jenis blog), letak dan ukuran gambar semestinya diatur dengan CSS dari edit HTML.

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

Kode ini agar ketika kita ingin mengatur posisi teks pada postingan ditengah :

.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-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-right{clear: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-right{clear:both;float:none;margin:1em auto;text-align:center;}
}

Kode ini agar ketika kita ingin mengatur posisi teks pada postingan rata kiri :

.img-center{text-align:left;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:left;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:left;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:left;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-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-right{clear:both;float:none;margin:1em auto;text-align:left;}
}
@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-right{clear:both;float:none;margin:1em auto;text-align:left;}
}