Menampilkan Postingan Blog Secara Layar Penuh

Menampilkan Postingan Blog Secara Layar Penuh - Saat menulis sebuah  postingan dan anda publikasikan tulisan tersebut, bersamaan dengan itu maka tulisan pada post anda akan telihat dan mereka yang membaca, tetapi tulisan anda tidak semuanya termuat dalam satu layar penuh (Full Screen), Nah jika anda perhatikan artikel pada post anda, disisi kanan jika anda menggunakan template dengan right sidebar style, maka kolom layar pada blog anda sudah pasti terbagi 2, 1 kolom untuk postingan dan 1 kolom untuk sidebar.

Ketidakpuasan saya ketika mengunjungi blog yang membagi kolom templatenya dengan desain kolom postingan yang begitu mungil, sehingga keleluasaan saat membaca sedikit terganggu karena dekatnya jarak widget yang ada disidebar blog tersebut, Berawal dari blog itu, ada keinginan membuat suatu struktur widget, seperti yang saya yakin anda semua pasti sudah tahu dengan 3 tombol yang terletak tepat disudut kanan saat kita membuka sebuah layar pada komputer. Ya..!! benar sekali tombol minimalis, tombol full screen dan tombol quict, saat menekan tombol full, layar akan mengecil saat kita pada layar penuh dan begitu sebaliknya.

Bagaimana tombol tersebut dapat bekerja seperti itu, ternyata windows juga menggunakan struktur HTML Code dalam tampilan templatenya, sehingga saya mencari informasi code dari Google API Javascript dan menemukan caranya pada "MDN - Using Full Screen Mode" Berikut Kodenya:

var buttonMarkup = document.createElement('a');
    buttonMarkup.className = "custom-button";
    buttonMarkup.style.display = "block";
    buttonMarkup.style.marginTop = "20px";
postFullScreen({
    openText: "Layar Penuh!",
    createButton: buttonMarkup
});
/*
Please in here your editing code :
<a class="custom-button" style="display:block;margin-top:20px;">Layar Penuh!</a>
*/

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

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

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

Keterangan Kode

1. Kode 1- kode alternatif yang bisa anda gunakan jika anda tidak suka dengan gaya tombol pemicu untuk membuka perintah layar penuh, anda bisa merubahnya, kode ini sudah saya balut dengan element coustum tombol,sehingga efek back/kembali kedefault begitu cepat (0.001.s/sm)
2. Kode 2- pilihan letak untuk mengatur tombol layar penuh tersebut akan ditempatkan dimana
3. Kode 3- merupakan kode tambahan hasil editan dari saya, yang mana untuk nantinya mengatur bentuk,tata letak,warna text pada postingan tidak akan berubah saat tombol tersebut bekerja.
4. Kode 4 - penambahan jika anda menggunakan Jquery, Cukup menambahkan kode yang sudah saya berikan warna merah

Penggabungan kode I,II,III dan IV, akan menghasilkan kode seperti dibawah ini yang nantinya kode inilah yang anda pasang pada HTML Template Code pada blog anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://dte-project.googlecode.com/svn/trunk/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: "Tampilkan Mode Artikel",
    closeText: "Exit full screen mode",
    appendButtonTo: null,
    beforeInit: null,
    afterInit: null
  });
  //]]>
  </script>
</b:if>

Penerapannya Pada Blog

1. Tekan tombol Open HTML pada text area diatas
2. Copy semua kodenya, lalu letakkan diatas kode penutup </body>
3. Simpan Template

Note-
Dikarenakan Struktur kode HTML pada Template tidak semua sama, waktu DEMO pemasangan tombol layar penuh ini tidak muncul saat peletakan pada </body>, untuk itu kita gunakan kode yang paling dekat dengan postingan.
Cari Kode ini:

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

Untuk hasilnya anda bisa lihat pada akhir postingan, ada tombol "Tampilkan Mode Artikel" Silahkan anda Klik.