Background Full Screen - Cara Membuat Background Full Screen - Pertanyaan yang perlu kita kembangkan dari Membuat Background Full Screen ini adalah mau kita terapkan pada template body kita atau hanya pada postingan tertentu saja? Pasalnya bila kita terapkan pada postingan tertentu bisa kita kembangkan dengan Cara Membuat Postingan Satu Halaman, maksudnya postingan yang tanpa disertai widget-widget yang ada pada template blog kita.
Menurut sumbernya, cara Cara Membuat Background Full Screen ini cukup menarik jika kita pasang pada blogger kita apa lagi dengan tampilan Stretch atau Full Screen dengan tidak bergerak jika kita gulung kebawah maupun ke atas, tampilan ini akan tetap seperti halnya gambar yang kita jadikan background. Untuk pembutan pada body silahkan ikuti cara berikut:
Login ke Blog Sobat
Masuk Ke Template >> Kamu cari Kode .body {
Letakkan Kode di bawah ini Tepat di bawah .body {
background: url(URL GAMBAR KAMU) no-repeat center center fixed; #fff;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
Nah untuk pengembangan disalah-satu postingan kita tentunya pastekan kode dibawah ini pada Compose Entri kita pada saat kita hendak publish satu artikel. Letaknya terserah mau sobat tempatkan setelah Isi postingan kita atau sebelumnya.
-------- Isi Postingan Kita --------------
<b:if cond="data:blog.pageType == "item"">
<style type="text/css">
#sidebar-wrapper, #header-wrapper, #credit-wrapper, .sf-menu{display:none !important}
body {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgWbS-bBuoTriY5RhqdCEzRA0ynJqXrtcKMVt2blIEDtcwk9IT9bUadmdoAHeIrM3Cu-Y21q5cbL_FQHm4UXnqIArjErKdrwiPobZtQX4jB0Lg7Au9wlfiuU0cONk-vp3-Vx09QeS_qU/s1600/Spanyol.jpg) no-repeat center center fixed; #FD0606;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;}
#outer-wrapper{background:transparent;border:none;}
#main-wrapper{width:930px}
.comment-body {width:400px;color:#0627FD;font-weight:700;}
.comment-author {font-weight:700;text-transform:uppercase;}
.post h1 {color:#ccc;font-weight:700;text-transform:uppercase;}
</style>
</b:if>
Keterangan :
URL Gambar silahkan ganti dengan gambar yang sobat kehendaki, Demo untuk tips ini silahkan sobat klik gambar yang dijadikan gambar profil untuk postingan ini.
Mudah bukan? Tak ada kata sulit untuk sebuah kemauan !
Selamat bereksperimen semoga berhasil!
Ijin copy script nya sob,buat koleksi,siapa tahu ada teman yang butuh,thanks
BalasHapus@Rinko Samani
BalasHapusDengan senang hati bos,Silahkan bila memang berguna.
Makasih sudah berkenan hadir disini.
artikel malah sulit dibaca sob,hehe
BalasHapus