zFCviewer

 

zFCviewer – Focused-Content Viewer widget/script

zFCviwer adalah widget atau script untuk menampilkan konten artikel/post dengan efek fade-in/fade-out dalam sebuah window yang fokus. Konten ditampilkan tanpa embel-embel elemen lainnya yang biasanya ada pada sebuah webpage selain konten artikel seperti header, sidebar dan footer. Kira-kira seperti Safari Reader :)

Apabila anda ingin memanjakan pengunjung blog/website anda dengan menyediakan opsi untuk hanya menampilkan konten artikel saja, silahkan gunakan widget/atau script zFCviewer ini. Tujuannya adalah agar pengunjung lebih nyaman membaca isi artikel/post dengan tampilan yang fokus.

*

zFCviewer Code

Silahkan pasang kode HTML ini di halaman web anda:

<input id="zfcvOpener" name="zfcvOpener" onclick="zfcvToggleDisplay('YOUR-CONTAINER-ID','10%','80%','10%','5%','90%','5%');" value="Fokuskan Artikel" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://zfcviewer.googlecode.com/svn/trunk/js/zfcviwer.js"></script>

*

Usage/Configuration

Wajib Diganti/Ditentukan:

Ganti 'YOUR-CONTAINER-ID' dengan ID elemen container konten artikel yang akan ditampilkan. Salah satu cara untuk mengetahui ID sebuah elemen container konten adalah dengan cara melihat source code halaman web anda di browser (klik kanan halaman web, lalu klik ‘View Page Source’).

(BTW, sebenarnya di sini mau dipasang screenshot biar lebih jelas, tapi belum sempat :P).

Sebagai catatan, di sini perlu ditekankan bahwa yang diperlukan adalah ID container, bukan elemen konten itu sendiri. Elemen container adalah elemen yang di dalamnya terdapat elemen-elemen konten (container = parent dari elemen konten).

Optional

Pada kode di atas terdapat variable Left, Width, Right, Top, Height, dan Bottom. Variabel ini adalah untuk menentukan letak tampilan ‘jendela’ atau ‘window’ viewer. Bila diinginkan, silahkan ganti besaran variabel-variabel tersebut.

  • Left: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
  • Width: Valid input: example: '700px' or '80%' or 'auto' (satuan px, % atau auto).
  • Right: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
  • Top: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
  • Height: Valid input: example: '600px' or '90%' or 'auto' (satuan px, % atau auto).
  • Bottom: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).

Semua variabel tersebut berupa string (teks di dalam tanda kutip/bukan nomor).

*

Demo

Silahkan klik tombol yang bertuliskan ‘Fokus Artikel’ di bagian atas halaman ini (bila ada). Atau silahkan klik tombol ‘View Demo’ di bawah ini (bila mengubah value demo di bawah ini, jangan lupa masukkan satuan px atau %, kecuali memasukkan nilai auto).

Variable Value
YOUR-CONTAINER-ID
Left
Width
Right
Top
Height
Bottom


*

Notes

  • Kode tersebut bisa ditempatkan di mana saja pada bagian body sebuah halaman web. Tapi mungkin sebaiknya ditempatkan di antara konten itu sendiri (di atas atau di bawahnya), agar pengunjung bisa dengan mudah melihatnya.
  • Pada kode di atas dipasang tombol input, namun bisa juga diganti menggunakan link (tag <a></a>), asalkan atribut id, name, dan onclick tetap ada seperti kode di atas. Misalnya jadi seperti ini:
    <a id="zfcvOpener" name="zfcvOpener" onclick="zfcvToggleDisplay('YOUR-CONTAINER-ID','10%','80%','10%','5%','90%','5%');" href="javascript:void(0)">Tampilkan Artikel Saja</a>
    <script type="text/javascript" src="http://zfcviewer.googlecode.com/svn/trunk/js/zfcviwer-op.js"></script>
  • Sebenarnya script zFCviewer ini bukan hanya untuk konten artikel/post, tapi bisa juga digunakan untuk konten lainnya, misalnya konten shoutbox, iframe Facebook Page, zoom image, dll, terserah, asalkan ditentukan ID elemen containernya.

*

Warning

Script ini tidak berjalan di browser Internet Explorer 7 ke bawah.

.

  • i
 Posted by at 00:13

  12 Responses to “zFCviewer”

  1. bang ini caranya saya masih belum ngerti bang
    tolong di kasih Sreen shot nya dong please
    😉

  2. container id itu apaan ya mas?

    • container ID itu maksudnya ID elemen html yang berisi konten artikel

      misalnya:

      <div id=”content”>
      Ini isi/konten artikel
      bla… bla… bla…
      </id>

      nah berarti di contoh itu container ID nya adalah content

      .

  3. Mas untuk HTML diatas ..
    GINI BUKAN MAS <a id="zfcvOpener" name="zfcvOpener" onclick="zfcvToggleDisplay('http://twins-x.blogspot.com/‘,’10%’,’80%’,’10%’,’5%’,’90%’,’5%’);” href=”javascript:void(0)”>Tampilkan Artikel Saja

  4. UNTU BUAT GAMBAR SEPERTI INI :mrgreen: SAAT COMENT GIMANA
    YANG TAHU KIRIMIN KE HARGOBLOG@GMAIL.COM

  5. UNKNOWN UNKNOWN 😡 😡 😡 😡 😡 👿 👿 👿 👿 👿 👿

  6. hasil desain http://www.skaygrup.blogspotr.com

    klik link nya dan join ya :) :)

  7. Kalo untuk menampilkan shoutbox gmn caranya gan,ini sangat bermanfaat bauat blog saya,contohnya zfpmenu sudah terpasang dan sangat efisien,kl yang ini saya msh bingung cara pasangnya di shoutbox,mohon bantuannya ? :roll:

  8. keren mas bro ,, ane coba ,, ??
    visit back

Leave a Reply to belajar mikrotik & jaringan Cancel reply

(required)

(required)


1 + = nine

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

zStickyBar Widget by inimu.com