×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Fitur Fullscreen pada Blog

Faronesia.com - Hai sobat blogger, apakah anda pernah melihat blog dengan fitur tambahan seperti fullscreen? Jika iya, keren sekali bukan? Dengan fitur fullscreen memungkinkan para pembaca fokus pada halaman blog tersebut. Namun jika anda belum pernah melihat fitur fullscreen maka silahkan coba terlebih dahulu sensasinya dengan menekan tombol fullscreen milik faronesia yang berada di pojok kanan bawah.

Umumnya fitur Fullscreen digunakan pada sebuah embed, misalnya embed video. Namun, kali ini anda bisa merasakannya pada blog sobat. Fitur fullscreen ini berfungsi menutup bilah address bar dan tab browser agar pengunjung terfokus pada halaman blog dan tampilan blog akan terasa seperti layaknya sebuah aplikasi.

Kekurangannya, anda tidak bisa membuat fitur fullscreen ini bekerja otomatis saat membuka blog karena browser akan mengabaikannya, fitur fullscreen ini juga tidak bisa dibuat dengan cache blog yang artinya saat anda membuka halaman baru maka anda harus mengaktifkannya kembali. Jadi, fitur fullscreen ini harus melibatkan Pengguna dengan aksi menekan tombol fullscreen pada PC atau lebih mudahnya dengan menekan tombol F11 pada keyboard PC.

Bagaimana dengan perangkat mobile? Anda bisa menggunakan fitur fullscreen ini dengan menekan tombol fullscreen yang ada pada blog. Ketika pengguna mengklik ikon fullscreen blog maka halaman akan terbuka otomatis fullscreen, artinya pengguna membuka blog seperti sebuah aplikasi, tanpa address bar browser terlihat di atas blog.

Tutorial ini terinspirasi dari suhu saya pemilik blog kompiajaib namun saya modifikasi sekian rupa agar lebih sedap dipandang, user friendly serta mudah diterpakan disegala template. Jadi, saya dapat menjamin bahwa tutorial ini mudah digunakan oleh blogger pemula sekalipun.

Perbedaan fitur fullscreen besutan kompiajaib dengan fitur fullscreen faronesia adalah pada model penempatanya, faronesia memodifikasi fitur fullscreen menjadi sebuah tombol melayang layaknya tombol back-to-top dengan tujuan memudahkan pengguna saat ingin membutuhkannya.

Apakah fitur fullscreen mempengaruhi loading blog? Jawabannya tidak, karena fitur fullscreen buatan saya ini termasuk script yang ringan dan pasti aman jika diterpakan pada blog sobat.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat Fitur Fullscreen pada Blog

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode seperti ini ]]></b:skin> atau </style>
  • Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/** FULLSCREEN BY FARONESIA.COM **/
#openfull, #exitfull {
position:fixed;
float:left;
z-index:201;
bottom:25px;
Left:20px;
color: #fff;
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
padding:10px 10px 10px;
border-radius: 50px;
background: #19b5fe;
text-align: center;
width: auto;
box-shadow: 4px 4px 4px rgba(0 , 0 , 0 , 0.12) , 0 4px 4px 4px rgba(0 , 0 , 0 , 0.12);
-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
#openfull:active, #exitfull:active, #openfull:focus, #exitfull:focus {
outline: 0;
}
#exitfull {
    display: none;
}
  • Lalu letakkan kode dibawah ini tepat dibawah kode <div id='post-wrapper'>
<div class='Open Fullscreen' id='openfull' onclick='openFullscreen();'>Fullscreen mode</div>
<div class='Exit Fullscreen' id='exitfull' onclick='closeFullscreen();'>Normal mode</div>
  • Selanjutnya letaakan Js dibawah ini tepat diatas kode </body>
<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
  document.getElementById("openfull").style.display = "none";
  document.getElementById("exitfull").style.display = "block";
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
  document.getElementById("openfull").style.display = "block";
  document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>
  • Selanjutnya simpan dan terapkan template yang sudah anda modifikasi
  • Terakhir, lihat hasilnya

Demikianlah mengenai Cara Membuat Fitur Fullscreen pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.
Buka komentar
Tutup komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial