Cara Mengubah Background Blog Accelerated Mobile Pages

Cara Mengganti Background Blog Custom Amp HTML

Background atau latar belakang Blog dengan gambar sendiri memang bisa mempercantik tampilan dan di sesuaikan dengan selera si Empunya blog sehingga bagian latar blog tidak hanya terpaku pada background bawaan Template saja.

Karena Anda sebagai pemilik Blog pun bisa mengubah tampilannya sesuai yang Anda inginkan.

Pada postingan kali ini Saya akan sedikit berbagi pengalaman seputar cara mengganti background blog Accelerated Mobile Pages atau Halaman Mobil yang di percepat.

Lalu Bagaimana cara mengubah tampilan bagian latar blog yang memakai Amp Html?

Untuk cara menggantinya pun tidak terlalu sulit untuk dilakukan,asal Anda teliti dan sabar jika Anda masih dalam tahap belajar atau pemula.

Caranya tak jauh berbeda bahkan hampir sama seperti mengganti background pada blog Non Amp yang sudah Saya tulis sebelumnya.

Hanya saja yang perlu diperhatikan adalah kecermatan dalam peletakan Url gambar yang akan dipakai sebagai background.

Perlu juga untuk Anda ketahui bahwa pada blog yang memakai Accelerated Mobile Page Html ini,setidaknya harus di letakkan di 2 atau 3 lokasi yang berbeda.

Tergantung pada struktur template yang di pakai.

Lokasi yang di maksud adalah bagian style amp-custom halaman beranda,halaman posting,dan halaman statis.

Jika background yang di ganti hanya pada bagian halaman beranda,maka pada halaman lain seperti halaman posting dan halaman statis bisa berbeda.

Namun,perbedaan tersebut tidak terbatas pada background saja,bahkan pada tampilan blog secara keseluruhan pun bisa di buat berbeda.

Kalau boleh saya sedikit membuat sebuah kesimpulan,bahwa tampilan pada blog custom Amp ini bisa berbeda-beda pada setiap halamannya.

Asalkan ID widget yang di pakai pada bagian CSS dan HTML sama.

Ini salah satu nilai plus tersendiri bagi blog Custom Accelerated Mobile Pages selain dari kecepatan loading di tawarkan.

Tentunya dari segi tampilan blog itu sendiri.

Contoh gampangnya begini,

Misal pada bagian beranda kita buat tampilannya seperti wajah Ryanti Cartwright,

Pada halaman posting Revalina.S.Temat,

dan halaman statis memakai wajah Raline Shah.

Hal tersebut bisa di lakukan jika memakai template blog AMP Html.

Ilustrasi Background Blog Amp

Untuk lebih memperjelas perbedaan antara tiga halaman style amp-custom template blog AMP HTML tersebut,silahkan perhatikan kode-kode berikut ini :

✅ HALAMAN BERANDA

Halaman beranda adalah halaman depan sebuah blog yang menampilkan konten postingan blog tersebut secara keseluruhan.

Pada halaman beranda di tandai dengan tag kondisional dan style amp-custom seperti ini.

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<style amp-custom='amp-custom'>

Bla...

Bla...

Bla...

</style>
</b:if>

✅ HALAMAN POSTING

Halaman posting adalah halaman dimana Anda membuka postingan atau artikel tertentu sebuah blog.

Seperti yang sedang Anda lakukan sekarang pada blog ini.

Halaman posting tersebut di tandai dengan tag kondisional dan style amp-custom seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style amp-custom='amp-custom'>

Bla...

Bla...

Bla...

</style>
</b:if>

✅ HALAMAN STATIS

Halaman statis merupakan sebuah halaman blog yang bukan menjadi bagian dari urutan postingan blog.

Halaman statis ini hampir mirip dengan halaman website yang memiliki sifat independen dan bisa saja diberi aturan tersendiri sesuai keinginan.

Meskipun demikian, halaman statis pada blog masih memiliki general setting sesuai template dan styling-nya (CSS).

Pada blog Custom Amp Html,halaman statis di tandai dengan tag conditional dan style amp-custom seperti ini.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style amp-custom='amp-custom'>

Bla...

Bla...

Bla...

</style>
</b:if>

Kembali ke topik,

Agar pembahasan tidak melebar ke permasalahan lain.yang terpenting,Anda harus mempersiapkan gambar yang ingin di gunakan.

Kemudian gambar tersebut di hosting untuk di gunakan URL nya.

Ikuti langkah-langkahnya berikut ini :

1. Siapkan gambar dengan ukuran 1600x1600.
   
   Kalaupun dengan ukuran kecil juga tidak masalah,namun gambar tersebut akan tampak berulang.
2. Kemudian Hosting gambar tersebut.
   
   Anda bisa menggunakan situs hosting gratis seperti Picassa,Photobucket,ImageShack,PostImage,dan lain-lain.
   
   atau untuk lebih gampangnya lagi silahkan Anda lihat cara hosting paling mudah di sini CARA HOSTING GAMBAR PALING MUDAH.
3. Setelah gambar selesai di hosting,selanjutnya adalah Copy alamat URL gambarnya.
4. Pada EDIT HTML template, cari kode seperti di bawah ini,atau yang mirip dengan kode berikut pada tiga bagian style amp-custom seperti yang sudah saya jelaskan di atas.
   
   

   body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zZGaiUwyR7MjFB59EY3u1Ig2kqvr5cIvyZ4MTWAgBYARCVzA8ouzTzY3TharwFEU2ZJqPnRNMU451S43jdIQBpT-PBICa8G-RElX-vxGwozH27ROJVt8G9L4_MpMZsi3QvKW_YOZPPqP/s1600/Berita+Bola.jpg)

   
   Ganti URL gambar berwarna merah di atas dengan URL gambar yang sudah Anda Copy tadi dan Paste-kan sebagai gantinya.
5. Terakhir Save Template.

Selesai sudah Cara Mengganti Background pada Blog Custom Amp Html.jika menurut para Master yang lebih faham dengan Accelerated Mobile Pages,tutorial ini ada kesalahan,mohon koreksinya......🙏

Berbagi :