Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Posting Layar Penuh

Mode layar penuh.
Mode layar penuh.

Saya membuat sebuah aplikasi/widget kecil untuk membuat posting di blog menjadi memiliki alternatif tampilan “layar penuh”. Tidak benar-benar layar penuh sebenarnya, karena widget ini hanya bekerja dengan cara menyisipkan tabir baru berisi duplikat judul dan konten posting. Kalau Anda ingin membuat fitur full screen sungguhan yang bisa memenuhi seluruh layar, Anda bisa mempelajari API JavaScript ini ⇒ MDN – Using Full Screen Mode

Lihat Demo

Untuk memasang widget ini, masuklah ke halaman editor HTML Templat, lalu letakkan kode ini di atas </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='https://cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/full-screen.min.js'/>
  <script>
  //<![CDATA[
  postFullScreen({
    titleSource: document.querySelector('.post-title'),
    contentSource: document.querySelector('.post-body'),
    background: "#fff",
    color: "inherit",
    fontSize: "120%",
    padding: 50,
    maxWidth: 750,
    openText: "Full Screen Mode",
    closeText: "Exit full screen mode",
    appendButtonTo: null,
    beforeInit: null,
    afterInit: null
  });
  //]]>
  </script>
</b:if>

Atau Saya sarankan lebih baik letakkan kode di atas sedekat mungkin dengan posting. Lebih tepatnya di bagian paling bawah dari posting:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> … </b:section>
</b:section>
<!-- Letakkan di sini -->

Klik Simpan Templat.

Konfigurasi

Opsi Keterangan
titleSource Selektor elemen HTML dimana di dalamnya berisi teks judul. Di atas Saya menggunakan selektor document.querySelector('.post-title') untuk memperoleh teks judul dari dalam elemen <h3 class='post-title'></h3>. Sebagai alternatif, Anda bisa mencoba untuk menggunakan selektor document.title untuk memperoleh judul dari address bar.
contentSource Selektor elemen HTML dimana di dalamnya terdapat konten artikel/posting. Pengaturannya sama persis dengan opsi titleSource.
background Digunakan untuk menentukan warna latar tabir layar penuh.
color Digunakan untuk menentukan warna teks mode layar penuh. inherit artinya warna menyesuaikan dengan warna teks posting.
fontSize Digunakan untuk menentukan besar teks di artikel layar penuh.
padding Digunakan untuk menentukan padding tabir layar penuh.
maxWidth Digunakan untuk menentukan lebar maksimal area artikel layar penuh.
openText Digunakan untuk menentukan teks tombol pemicu layar penuh.
closeText Digunakan untuk menentukan teks tombol penutup tampilan layar penuh.
createButton Digunakan untuk membuat tombol kustom. Lihat penjelasan di bawah.
appendButtonTo Nilai berupa selektor elemen HTML. Jika nilainya null, tombol akan secara otomatis disisipkan di bawah posting. Jika nilainya false, tombol tidak akan disisipkan secara otomatis (bermanfaat jika Anda ingin membuat tombol pemicu tersendiri secara terpisah).
beforeInit Lihat penjelasan di bawah.
afterInit Lihat penjelasan di bawah.

Penjelasan Ekstra

createButton

Opsi ini digunakan sebagai alternatif jika Anda tidak suka dengan tampilan tombol pemicu layar penuh secara normal. Anda bisa memanfaatkan opsi ini untuk menentukan/membuat elemen tombol kustom. Sebagai contoh di sini Saya menggunakan elemen tautan sebagai tombol:

var buttonMarkup = document.createElement('a');
    buttonMarkup.className = "custom-button";
    buttonMarkup.style.display = "block";
    buttonMarkup.style.marginTop = "20px";

postFullScreen({
    openText: "Layar Penuh!",
    createButton: buttonMarkup
});

/*

akan menghasilkan ini:

<a class="custom-button" style="display:block;margin-top:20px;">Layar Penuh!</a>

*/

Lihat Demo

Atau Anda juga bisa menentukan nilainya sebagai objek yang sudah ada. Sebagai contoh Anda membuat tombol pemicu secara manual di tempat tertentu, misalnya di sidebar:

<aside>
  ...
  <button id="full-screen-button">Layar Penuh</button>
  ...
  ...
</aside>

Kemudian Anda bisa melakukan ini untuk membuat tombol tersebut menjadi aktif:

postFullScreen({
    createButton: document.getElementById('full-screen-button'),
    appendButtonTo: false
});

Jangan lupa untuk mengatur opsi appendButtonTo menjadi false karena jika tidak tombol tersebut mungkin akan berpindah tempat. Secara umum akan berpindah ke bagian akhir posting:

Lihat Demo

appendButtonTo

Opsi ini digunakan untuk menentukan ke mana tombol pemicu tampilan layar penuh akan disisipkan. Berikut ini adalah sebuah contoh jika Anda ingin menyisipkan tombol pemicu layar penuh di dalam elemen #button-container:

<div id="button-container"></div>
postFullScreen({
    ...
    appendButtonTo: document.getElementById('button-container')
});

Lihat Demo

beforeInit dan afterInit

Ini adalah opsi untuk membuat fungsi bebas yang akan tereksekusi sebelum (untuk beforeInit) dan sesudah (untuk afterInit) markup tabir tersisip ke blog. Yang paling berguna adalah beforeInit. Fungsi ini bisa Anda gunakan untuk memastikan bahwa manipulasi konten posting yang dilakukan oleh JavaScript telah dilakukan sebelum widget ini tereksekusi. Misalnya mengenai Syntax Highlighter atau JavaScript emotikon. Jika Syntax Highlighter atau JavaScript emotikon tidak diaktifkan sebelum widget ini aktif, maka kemungkinannya posting-posting kode yang berada di dalam artikel layar penuh tidak akan berwarna, dan emotikon-emotikon di dalam artikel tidak akan berubah menjadi gambar:

postFullScreen({
    beforeInit: function() {
        repText('post-12345');
        hljs.initHighlighting();
    },
    afterInit: function() {
        alert('OK!');
    }
});

Pengguna jQuery

Jangan lupa untuk menambahkan indeks [0] setelah selektor jika Anda menggunakan API selektor elemen jQuery:

postFullScreen({
    titleSource: $('.post-title')[0],
    contentSource: $('.post-body')[0]
});

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 17 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!