23 September 2022

Tutorial Cara Membuat Background Gambar di Blog

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Tutorial Cara Membuat Background Gambar di Blog

BACKGROUND pada blog bisa beraneka ragam. Gambar yang ditempelkan bisa diambil dari gambar yang bertebaran di internet tapi bisa juga gambar hasil kreasi sendiri atau desain sendiri. Dalam penerapannya, kita hanya menempelkan beberapa kode CSS di template blog kita.

Gambar yang saya pasang adalah Sanji -anggota Mugiwara One Piece-. Sanji beserta flagnya saya sertakan sebagai background gambar disini. Nanti kalian bisa ganti sesuka hati kalian. Ukurannya pada gambar itu adalah p : 1.637 px dan l : 3.508 px. Jadi kalian tinggal sesuaikan saja gambarnya nanti jangan sampai kekecilan atau kebesaran ya.



Langsung saja ya :

Cara Membuat Background Tampilan Display Blog


1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LzX5QzzdT2-XIPZF0eZH288pyeElIvHB8kJOtlkTIpmEtAckGeMc1G0eJATteAk6-mebkeT8i9m9opyTRpe9jDYYZFCNpL1ym9B2VA_yqjU944nCTJCXZwaj40QlUql9qjG73g-x1IQyAoENy1Y_Je4IHGzF5LbXhBhFWYgjQzMcYP4aJMjrrOqc/s800/SANJI%20BACKGROUND.jpg),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIULvd6SihG1gEtlugJ3eUTMYHwop_SjYnWHcYoEZH0aq16uaa9IzhXh9xFA1_rsgPc2eTfSq9i4ABR61YKmz7U3cP8MN6AkkFA1Gmo3ljp5VKF4VHjIM4xQBnf69XgEHU3iv9eCcE8owObCsTnltQ71R7dgUHlrAOUwYLcBE-sWHj9wcPq8Rn5XkB/s800/SANJI%20BACKGROUND%202.jpg)!important;background-repeat:no-repeat!important;background-attachment:fixed!important;background-position:top left,top right!important;background-size:auto auto,auto auto!important}


Catatan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9HqItcNrG8XxVjTKzo-QfSlaEgrdMeKWpzv002eQDz4jaIxTx1ZT5Jp3WOCOkUkiLDAfTSCykXARp5feYNT1NSYv406XzzrFTLFSTikm3O5P8Xf0-cpafDYAcuNZ-vCNv3UsdLqFOtXIBN3sdXz5pdjtH68N_HL3HLiFnhGam2BOyQzklmiLlUvN/s800/SANJI%20BACKGROUND.jpg -- Diganti dengan gambar kalian sendiri

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIULvd6SihG1gEtlugJ3eUTMYHwop_SjYnWHcYoEZH0aq16uaa9IzhXh9xFA1_rsgPc2eTfSq9i4ABR61YKmz7U3cP8MN6AkkFA1Gmo3ljp5VKF4VHjIM4xQBnf69XgEHU3iv9eCcE8owObCsTnltQ71R7dgUHlrAOUwYLcBE-sWHj9wcPq8Rn5XkB/s800/SANJI%20BACKGROUND%202.jpg -- Diganti dengan gambar kalian sendiri


Demonya ada dibawah :



Selanjutnya adalah memberikan background gambar tunggal pada background blog. Saya mencoba pada template tutorial yang sudah saya modifikasi supaya bisa terpasang gambar pada background blog itu. Caranya hampir sama dengan yang sudah saya beri tutorialnya diatas. Sehingga hanya diubah pada bagiannya sedikit saja. Untuk mencobanya silakan ikuti tutorialnya berikut ini :

1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWK5Tdy9rkhMGyyeU70wfCUcVv6P3hSTiUs0igqnTYpPuZfbafl36Kdj7v5huJbbVIyWZOYFN2uWRhCy9pFSHYGZiqP2hw-N_mNMjZiU26tWVyx43QVojcaM1g9wNDEFEaMQguOaxofZHv7qnvKtuwLceHmUF9-9fW-S7cMiB7CsrvrCh8idOdNn4/s1600/background-kedua-di-blog.jpg);margin:auto;padding:auto;font:80% Arial, Sans-serif;text-align: center;color:#000;}


Demonya ada dibawah :



Catatan : Gambar yang ada di background adalah gambar dari pemilik gambar yang berhak cipta penuh. Alifacode.com hanya sekedar menampilkan untuk contoh blog tutorial. Tidak ada maksud mengklaim secara individu dari kepemilikan tersebut. Terima kasih.

Bagikan ke teman-teman kamu
Label Postingan : CSS , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Cara Membuat Background Gambar di Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon