Cara Membuat Widget View Button Focused Content Blog

Cara Membuat Widget View Button Focused Content Blog

View Button 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 View Button ini. Tujuannya adalah agar pengunjung lebih nyaman membaca isi artikel/post dengan tampilan yang fokus.

Script View Button Focused Content ini bukan hanya untuk konten artikel/post, tapi bisa juga digunakan untuk konten lainnya, misalnya :

1. Cara Membuat Tombol Skip-AD Blog Sebelum Ke Link Tujuan.

2. Animasi Buku Tamu / Chat Box + Go To Top - Go To Down.

3. Show-Hidden Comment Blog Nan Cantik.

4. Iframe Facebook Page.

5. Zoom image, dll.

Selanjutnya terserah Anda sob, asalkan ditentukan ID elemen containernya.

View Button Code :

<input id="sgtvOpener" name="sgtvOpener" onclick="sgtvToggleDisplay('YOUR-CONTAINER-ID','10%','80%','10%','5%','90%','5%');" value="YOUR-NAME-BUTTON" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://sagita-com.googlecode.com/files/sGTviewer.js"></script>


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’).

Contoh Container ID CONTENT/ARTIKEL :
<div id='content'/>

Maka script nya menjadi :
<input id="sgtvOpener" name="sgtvOpener" onclick="sgtvToggleDisplay('content','10%','80%','10%','5%','90%','5%');" value="Fokuskan Artikel" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://sagita-com.googlecode.com/svn/sGTviewer.js"></script>

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).

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.

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger