11.2.14
24
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:

HTML Code
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>
*/
HTML Code
<aside>
  ...
  <button id="full-screen-button">Layar Penuh</button>
  ...
  ...
</aside>
HTML Code
postFullScreen({
    beforeInit: function() {
        repText('post-12345');
        hljs.initHighlighting();
    },
    afterInit: function() {
        alert('OK!');
    }
});
HTML Code
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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menampilkan Postingan Blog Secara Layar Penuh
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

24 komentar

  1. pertamax diamankan dulu mbak

    keren mbak tapi saya requesst dong mbak bikin page tanpa ada side bar bagaimana

    BalasHapus
    Balasan
    1. Merubah template 2 kolom menjadi 1 kolom full, itu tinggal menghapus kode tag widget sidebar mas,atau memindahkan sidebar dibawah atau setelah postingan cukup menambahkan kode position:absolute atau relative pada header,maka kolom sidebar akan berpindah dibawah postingan mas,
      semoga dapat membantu

      Hapus
  2. mantap sekali tutorial cara menampilkan postingan blog secara layar penuh ini..

    BalasHapus
    Balasan
    1. sedikit leluasa mizz, dengan tombol tersebut sidebar,footer dan widget lainnya tidak akan muncul,sehingga hanya menampilkan postingan saja

      Hapus
  3. kalau tampilan postingan layar penuh pengunjung jadi lebih puas yaa membacanya
    thanks mbak :))

    BalasHapus
    Balasan
    1. bersumber dari pengalaman mas, hehe..ketika berkunjung pada blog lain yang menggunakan template 3 kolom sehingga ruang posting terlihat mungil, terlalu sempit sehingga kurang nyaman untuk membaca,,kan kalu dengan ini tinggal klik tombolnya,berubah dech jadi zoom

      Hapus
    2. betul, terasa lebih puas :D

      Hapus
    3. lebih fokus untuk artikel saja mas,agar cepat memahami tutorial yang ada pada artikel

      Hapus
  4. Gelar sprei dulu, mbak.

    BalasHapus
    Balasan
    1. mau dijemur atau mau digelar buat dagangan mas,,hehe..just kidding

      Hapus
  5. Terimakasih tutorialnya, mba.

    BalasHapus
  6. ini nih yang sedang saya cari...makasih ya :)

    BalasHapus
  7. kayaknya sih lebih enak yang ga terlalu lebar bos, jadi matanya ga terlalu kekanan dan kekiri mengikuti tulisan, hehehe........

    BalasHapus
    Balasan
    1. tinggal edit kodenya aja bos,jika ingin tampilannya diperkecil

      Hapus
  8. ka mau tanya nih, cara menampilkan semua postingan tanpa read more gimana yah? biar ga perlu buka 1 per 1 page nya.

    thanks :D

    BalasHapus
    Balasan
    1. lumayan sulit dan membingungkan, karena untuk menampilkan semua postingan pada 1 halaman akan sulit ditampilkan, terlebih jika postingan kita sudah mencapai 200-300 posting,
      mungkin yang Anda tanyakan bagaimana melepas readmore disetiap posting pada halaman beranda begitu,

      hal ini butuh pehaman perintah script jquery pada tempe, saya beri contoh sedikit script jquery perintah descripsi untuk posting kurang lebih seperti ini

      [pre]
      var widgetTitle = "Daftar Artikel",
      numPosts = 20,
      numChars = 300,
      //
      ....elemen lainnya...
      //
      [/pre]

      Anda boleh jadikan sebagai alternatif berapa posting yang akan anda tampilkan dalam 1 halaman

      Hapus
  9. kalo halaman misalnya gimana ya ??

    BalasHapus
    Balasan
    1. sidebar, header, footer, dan formulir postingan semuanya halaman, terus halaman yang mana satu neh.?

      Hapus
  10. Makasih tutornya, udh sy pakai di blog sy, Boleh main ke sini borneokopi.com

    BalasHapus
  11. blas...gak faham mbak.......padahal pengin banget ngertinya
    coba pake gambar tutorialnya

    BalasHapus
    Balasan
    1. Nah itu maen ke blog "KOPI KITE" maka akan tahu tutorial ini tentang apa. lihat diakhir postingan ada tombol yang mengatur untuk menghilangkan halaman sidebar, jadi yang hanya tampil halaman posting saja tanpa sidebar.

      Hapus
  12. Postingan Devi keren-keren abis coy...., saya numpang ikutan belajar ya...!

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK