Membuat Posting Layar Penuh
Tabel Konten
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
Untuk memasang widget ini, masuklah ke halaman editor HTML Templat, lalu letakkan kode ini di atas </body>
:
<b:if cond='data:blog.pageType == "item"'>
<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>
*/
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:
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')
});
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]
});
17 Komentar
Anonim
Keren Banget mas taufik, \o/
kalau ini untuk post,
kalau untuk blog secara keseluruhan gimana mas..??
Taufik Nurrohman
Shiro
Sedikit Rumit juga yah mas taufik :)
Unknown
Layar penuh penting juga, tapi tidak terlalu membuat orang bisa membaca hal hal yang berbau layar penuh, karena sulit untuk membaca dilayar yang penuh itu. tapi salut deh.
misteri.us
FN
\o/ akhirnya keposting juga. mas, apakah ini juga bisa dipakai untuk demo template blog yg diaplikasikan ke postingan?
Unknown
Asik.... :D
mangstab ini :-bd
Unknown
kayak seperti di maxthon mas :)
jadi di browser maxthon jika mengunjungi artikel situs website/blog ada fitur di address bar "reader mode" jadi hanya tertampil artikel dengan tampilan full screen seperti ini , keren (y)
Mr. Jom Be
Mas Taufik saya perhatikan judulnya postingan rapat tuh bila tak menggunakan line-height: 1.1em
judulnya terlalu rapat, mohon maaf mas taufik klo project full-screen.min.js saya edit sedikit
Kang Rian
Seperti metode Print untuk Browser yah mas taufik , kalo saya pikir2 .. :D , lebih menentukan ID mana yang ingin di buat full screen . :)
Unknown
Mas bagaimana supaya kaya labnol ? Yang langsung menghide sidebar, cara ini mirip, cuma kalau di labnol disembunyikan sidebarnya, bagaimana kk javascriptnya ?
Fajar Gooner
banyak juga yang harus di edit ya
Unknown
Dapat trik baru lagi, mungkin nanti bisa dipakai. sekarang bookmark dulu :D
Mas taufik, sy request tutorial dong :D
Bagaimana cara menyembunyikan kode CSS blog di page source code. sy sudah obrak abrik google tapi tidak dapat jawaban yang memuaskan :D
Unknown
tutorial kodenya sepotong2 gk ada pilihan yg sudah jadi, kalau dipraktekan pada postingan blog tombol yg ready tinggal (kopi paste) terletak di akhir artikel, tentu sudah tidak berguna karena orang sudah selesai membaca. kalau mau menyisipkan di bawah judul postingan nggak tau cara bikin button dan meletakkannya (seperti pada contoh). mungkin ini pelajaran untuk yg suka belajar koding bukan untuk umum ya boss ? sulit memahami gaya bahasanya jika yg membaca orang awam macam saya.
Taufik Nurrohman
Bener juga sih. Untuk menyisipkan tombol setelah judul, coba cara ini:
Tambahkan tombol ini sebelum konten posting, bisa diletakkan di atas kode
<div class="post-body entry-content">
. Jumlahnya mungkin ada lebih dari satu (satu untuk tampulan web dan satu untuk tampilan seluler):Lalu set opsi JavaScript menjadi seperti ini:
Unknown
Terimakasih banget mas Taufik, atas jawaban pertanyaan yang saya ajukan, dan sudah saya praktekan di blog saya dan berhasil baik, saya sangat suka dengan ide anda, bagus sekali penempatan fullscreen ini, sangat berguna unuk pembaca yang memiliki masalah penglihatan..salam sukses dari saya untuk anda beserta keluarga..amin. :-bd
Agus Suryawan
keren.... \o/ tp aku g mudeng :-a
kl tidak kberatan ajarin dong master....
Johny Chan
kalau template yang hanya satu halaman saja maksudnya beranda hanya 1 posting saja langsung scrol kebawah. referensinya template apa bos
thank