Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Widget Daftar Isi Blogger Galleria

Pembaharuan: 25 Februari 2012

Daftar Isi Blogger Galleria

Galleria adalah widget daftar isi dengan tema fotografi. Setiap artikel akan ditampilkan sebagai foto-foto dengan judul yang akan tampil saat disentuh. Masonry adalah salah satu kelengkapan utama untuk membangun widget ini. Menjaga agar setiap elemen tampak berjajar dengan rapi dan responsif:


Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru


Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Pilih mode HTML


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-gallery-default-theme.css" type="text/css"></link>
<h4 id="loading">Loading...</h4>
<script type="text/javascript">
var enableMasonry = true,
    idMode        = true,
    showPostDate  = true,
    byLabels      = false,
    labelName     = "Mengenai",
    pBlank        = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png";
    text          = "Komentar",
    numposts      = 999,
    showSpeed     = 1000,
    sDownSpeed    = 400,
    sUpSpeed      = 400,
    loadingItem   = "Loading item...",
    errorText     = "Opps...",
    home_page     = "http://latitudu.blogspot.com/";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-gallery-widget-rev1.js"></script>

Pengaturan

OpsiNilaiKeterangan
enableMasonrytrueGanti nilainya menjadi false jika Anda sudah memakai JQuery Masonry di dalam template
false
idModetrueJika bernilai true, sistem bulan terbit akan menjadi berbahasa Indonesia. Jika bernilai false sistem bulan terbit akan berubah menjadi berbahasa Inggris.
false
showPostDatetrueJika bernilai true, bulan terbit akan ditampilkan. Jika bernilai false bulan terbit akan disembunyikan.
false
byLabelstrueDigunakan untuk memfilter posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelName.
false
labelName"Widget", "JQuery", "CSS", ... (nama label)Tentukan nama label jika opsi byLabels bernilai true.
pBlank"image.jpg", ... (URL Gambar)Gambar cadangan jika posting yang tampil tidak memiliki gambar.
text"Komentar", "Comments", ... (teks)Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
numposts10, 30, 999, ...(numerik)Digunakan untuk menentukan jumlah posting maksimal yang akan ditampilkan.
showSpeed"slow", "fast", 1000, ... (numerik/kecepatan valid JQuery)Digunakan untuk menentukan kecepatan animasi penampilan gambar.
sDownSpeed"slow", "fast", 1000, ... (numerik/kecepatan valid JQuery)Digunakan untuk menentukan kecepatan animasi penampilan judul gambar.
sUpSpeed"slow", "fast", 1000, ... (numerik/kecepatan valid JQuery)Digunakan untuk menentukan kecepatan animasi penghilangan judul gambar.
loadingItem"Sedang memuat gambar...", ... (teks)Digunakan untuk menentukan teks status saat gambar sedang dimuat.
errorText"Maaf, tunggu sebentar...", ... (teks)Digunakan untuk menentukan teks status saat gambar sempat gagal dimuat.
home_page"http://namablogmu.blogspot.com", ... (URL Blog)Ganti URL ini dengan URL blog Anda.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 34 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!