Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Lightbox for Blogger : Beautifull Blogger Image Viewer

Nggak perlu panjang lebar, semua pasti 'dah pada tahu apa tuh lightbox. Image Viewer yang akan kita buat kali ini nggak pakai jQuery namun menggunakan prototype.js dan scriptaculous.js. Semua javascript dan kode CSS-nya dah lengakap n tinggal pasang di bawah tag pembuka header (<head>). Hanya, ... ini sekedar saran tapi cukup penting : setelah di coba dan berhasil, javascript lightbox dan css lightbox-nya sebaiknya sampeyan upload secara pribadi di file hosting agar bisa digunakan secara pribadi pula. mengapa hal seperti ini penting dilakukan? Ya... tentu saja berkaitan dengan bandwidth. Jika sampeyan upload sendiri pastinya yang akan pakai juga hanya sampeyan sendiri juga, so ... dengan begitu loading bisa cepat dan blog sampeyan tetap car .... lancar ...nggak pakai lelet! He .... he ... You, know?!
Oooiiii.... yah... barangkali ada nyang blom tahu apa itu lightbox, silahkan sampeyan buka demonya di bawah ini. Jika demo mungkin lelet ya mohon dimaafkan karena hanya mampu pakai hosting gratisan, bat... sobat!!
Cara Membuat Lightbox

  • Login : Login ke Blogger dengan cara:
    • Tulis Alamat Email.
    • Tulis Password.
    • KLIK "Login".
  • Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan".
  • Kembali lanjutkan dengan klik link "Edit HTML".
  • Back-up Templates :
    • KLIK Download template Lengkap/Download Full Templates.
    • Simpan file template di folder PC.
    • Kembali di halaman Edit HTML.
  • Cari kode : <head> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode! (lihat menu sebelah kiri: special tutorials.
  • Letakkan Link kode CSS dan javascript lightbox tepat di bawahnya.
  • Klik Save Template.

Link Javascript dan Kode CSS Lightbox:
<link href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/01/GR_lightbox-2.04.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script src="http://lightbox-image-viewer.googlecode.com/files/gubhugreyot-lightbox-2.04.js" type="text/javascript"></script>

Cara Penulisan kode Lightbox:


Single Image

<a href="image.jpg" rel="GRlightbox" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Image Gallery

<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="GRlightbox[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Catatan/Keterangan:
  • Seperti yang sudah tersampaikan di atas, agar loading blog sampeyan tidak terganggu karena "tidak boleh tidak" link javascript dan link CSS lightbox yang ada di posting ini pasti akan digunakan oleh banyak pengguna, maka sebaiknya GR_lightbox-2.04.min.js dan GR_lightbox-2.04.css di upload sendiri di file hosting.
  • Dalam CSS dan javascript ada 4 buah image yang digunakan sebagai background. Upload juga background-image ini dan ganti yang sebelumnya sudah disertakan.
    • http://lightbox-image-viewer.googlecode.com/files/prevlabel.gif (GR_lightbox.css)
    • http://lightbox-image-viewer.googlecode.com/files/nextlabel.gif (GR_lightbox.css)
    • http://lightbox-image-viewer.googlecode.com/files/loadingAnimation.gif (GR_lightbox.min.js)
    • http://lightbox-image-viewer.googlecode.com/files/closelabel.gif (GR_lightbox.min.js)
  • Untuk upload javascript dan kode CSS silahkan lakukan di Google Sites atau Google Code.
  • Bagi yang membutuhkan panduan upload dan simpan file (javascript, css dll) di Google Sites, silahkan klik di sini!.
  • Image.jpg = image dalam ukuran besar.
  • thumbnail.jpg = image dalam ukuran kecil.
  • gallery-1 = gallery pertama. Jika ada beberapa kelompok buatlah perbedaan gallery dengan gallery-2, galler-3 ... dsb. Gallery bisa diganti dengan nama yang lain!
  • Jika blog mengalami masalah ketika menggunakan file dari google sites, karena link css menggunakan hosting dari google sites, silahkan download kode cssnya, kemudian copy dan pastekan di atas kode ]]></b:skin> yang terletak di atas kode </head>

Cara Membuat link pada caption

Membuat link pada caption dilakukan dengan cara membuat link pada title dimana symbol atau caracter-nya dituliskan dalam bentuk kode html. Perhatikan contoh di bawah ini disekitar teks yang bercetak tebal (lihat demo single image!).

Penulisan kode secara umum

<a href="image.jpg" rel="GRlightbox[gallery]" title="gubhugreyot.blogdetik.com"><img src="thumbnail.jpg" width="200" height="150" /></a>

Menambahkan link pada caption lightbox (dituliskan pada title):

<a href="image.jpg" rel="GRlightbox[gallery]" title="&lt;a href=&quot;http://gubhugreyot.blogdetik.com&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;"><img src="thumbnail.jpg" width="200" height="150" /></a>

Test/Percobaan:

Gunakan kode berikut di halaman posting untuk melakukan percobaan:

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Jemuah PON, January, 20, 2012

» Happy Blogging - gubhugreyot «

5 komentar:

  1. Mas, di blog gallery saya ini ndak berfungsi sama sekali.. semua lightbox yg ada.. kenapa ya? Saya pengin di bagian post photonya tertata apik seperti layaknya gallery... mohon pencerahannya, terimakasih..

    BalasHapus
  2. Pak, kenapa di template blog yang saya gunakan lightbox tersebut tidak bekerja.

    yang bekerja justru kotak thumbnailnya, ketika saya klik gambar tersebut mengarah ke url asal gambar tersebut.

    apakah bisa dijelaskan tentang kejadian ini ? terima kasih

    BalasHapus
  3. ♣️ KumpulQQ - Situs Judi Bandar66, DominoQQ, BandarQ dan SakongOnline Terpercaya



    KumpulQQ merupakan tempat yang tepat buat kamu para pecinta permainan Judi Poker Online Terpercaya. Situs Poker yang berdiri pada awal tahun 2016 ini telah memiliki kredibilitas, dan prestasi yang membanggakan. Kamu akan mendapatkan pelayanan transaksi deposit, dan withdraw yang super cepat dengan mendaftar menjadi anggota tetap di KumpulQQ.com.



    Adapun permainan yang disediakan oleh Agen Poker Online yang satu ini adalah Bandar66, BandarQ, Sakong, Bandar Poker, Poker Online, Domino 99, Capsa Susun Dan Adu Q.



    Bonus Refferal : 20% ( Seumur Hidup )

    Bonus Rollingan : 0.5% 



    Dalam 1 User id, ada 8 Games!!!

    ➡️ Bandar66 [New Game]

    ➡️ Sakong [HOT GAME]

    ➡️ Poker

    ➡️ Bandar Q [Hot Game]

    ➡️ Bandar Poker

    ➡️ Capsa Susun

    ➡️ Domino

    ➡️ Adu Q



    Minimal Deposit ➡️ 20rb

    Minimal WithDraw ➡️ 20rb



    PASTIKAN ANDA HANYA BERMAIN DAN LOGIN DI LINK KAMI YANG RESMI

    ALTERNATIF LINK KAMI PALING UPDATE :



     WWW.KUMPULQQ.ORG | WWW.SERINGWD.COM | WWW.KUMPULQQ.COM



    BBM PIN : E38A42E0

    CALL : +6282139703595

    LINE : KUMPULQQ



    Raih Dan Menangkan Jackpot Sampai Ratusan Juta Hanya bersama Seringwd.com 😊

    BalasHapus
  4. TOGELKAMI adalah bandar togel terpercaya, terbaik, dan teraman di Indonesia
    TOGELKAMI merupakan salah satu situs judi online terbesar yang menyediakan berbagai macam permainan yang menggunakan uang asli. seperti togel online, live casino, dan slot games.

    Sebagai bandar togel, Togelwow2 menyediakan 6 pasaran togel resmi yang sudah tidak asing lagi di kalangan pecinta togel. Mulai dari, Togel Sydney, Togel Singapore, Togel Hongkong, Togel Timorleste, Togel Britania, dan Togel Wynn,TOTOMACAU DAN SGP45

    SEKARANG SUDAH ADA HADIR GAMES TERBARU JUGA BOS ( SLOTS, CARD GAMES, TABLE GAMES, DAN POKER )

    – PROMO NEW MEMBER 10%
    – BONUS DEPO HARIAN 2%
    – KUIS TEBAK LINE TIAP HARI TIAP PASARAN
    - PROMO BONUS PRIZE 4D

    *Memberikan Discount Terbesar :
    2D disc 29,5 % Hadiah x 70
    3D disc 59 % Hadiah x 400
    4D disc 66 % Hadiah x 3.000

    Untuk informasi lebih lanjut silakan hubungi CS TOGELKAMI
    WHATSAPP : +855967195608

    bandar togel
    Bandar Judi Online
    bandar togel
    Data Keluaran Togel
    Nonton Bokep Terbaru
    poker online

    BalasHapus
  5. TERPERCAYA

    Yuk Main TOGEL & CASINO Online Terpercaya di TOGEL dan Nikmati bonus referal yang di berikan oleh BONUS DEPOSIT sebesar 10%.
    PROMO MENARIK :
    - 10% BONUS NEW MEMBER !!
    - BONUS REFERAL UP TO 1%
    - BONUS DEPOSIT HARIAN 2%
    1 User ID untuk semua game, jadi kamu bisa bermain seluruh permainan yang ada di TOGELKAMI,NET

    Jadi tunggu apalagi?
    Segera daftarkan diri anda dan jangan lewatkan bonus dari TOGELKAMI

    WA : +855967195608

    <<<< DAFTAR SEGERA DI SINI >>>>


    togel Online
    casino Online
    judi Online
    toto Online

    BalasHapus

 
GR | Edited by | gubhug reyot