Widget Daftar Isi Blogger Galleria

Tabel Konten
  1. Pengaturan 
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:

Lihat Demo Pembaharuan: Lihat Galleria V2

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!

34 Komentar

  • Piyen

    sangat menarik...
    disimpan dulu ah...

  • iam

    Wah bener2 keren, daftar isi seperti template blogger dynamic view :D
    Lebih hidup jadinya :D

  • Unknown

    keren bang

  • Susi Susindra

    Aduh.. jadi pengen banget....

  • Frzhrdynt

    wahhhh mantap banget sob bener bener keren :D

  • Inspirasi Kecilku

    wah, desain blognya bagus ya.
    saya kagum dengan tampilannya. :)

  • Taufik Nurrohman

    @Inspirasi KecilkuSaya yang membuat blog ini malah kagum dengan tanggapan kalian yang diluar dugaan :D

  • Unknown

    di tempatku kok nggak jalan ya?

  • Taufik Nurrohman

    @Mivt elRahman Nggak jadinya bagaimana ya? Apa gambarnya tidak muncul, atau benar-benar tidak termuat atau bagaimana?

  • Unknown

    @MivtGambarnya gak muncul, trus, masonry-nya juga keliatannya berantakan banget. AKu sebenrenya pengin nampilin ini di homepage.

  • Taufik Nurrohman

    @Mivt elRahman Ada beberapa JQuery yang diletakkan bersamaan. Selain itu, versi 1.3.2 itu sudah cukup lama, lebih baik segera ganti dengan versi 1.7+.
    Untuk script yang ini:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

    Ada dua buah. Hapus semuanya, sisakan satu saja. Dan karena versi itu sudah lama lebih baik ganti dengan ini:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

    Blog Anda sudah dilengkapi dengan JQuery, maka kode yang Saya beri garis bawah tidak perlu disalin. Mungkin itu yang membuat widget ini menjadi sedikit mengalami konflik.
    Pengertian JQuery selengkapnya bisa dipelajari di sini: http://hompimpaalaihumgambreng.blogspot.com/2011/11/perkenalan-jquery.html

  • Unknown

    @Taufik Nurrohmanyes, sip. terima kasih penjelasannya, Bung. lagipula sudah lama aku pengin ganti dari versi 1.3.2 ke versi yang baru, cuma agak ragu.
    Oh iya, kalau ada waktu, kasih tutorial dong bagaimana mengintegrasikan efek jquery untuk thumbnail di auto readmore home page blogspot. Sory, banyak minta hehhe.
    Terima kasih.

  • Unknown

    Tapi setelah dicoba, Mas Taufik, tetep aja sama - gak muncul gambar dan masonry berantakan. Trus aku coba gak ganti url-nya, tetep pakai "http://latitudu.blogspot.com/", malah sukses, hasilnya sesuai. jadi bingung neh. hehe. apa karena aku udah pasang daftar isi di widget ya? di posting juga aku bikin satu daftar isi yang kuambil dari blog Abu farhan. Apa karena itu ya?

  • Unknown

    ini hasilnya, Pak, setelah libs jquery 1.3.2 diganti dengan 1.7.1 https://lh5.googleusercontent.com/-1Y0WGTAeA_g/T2qJY8QLvLI/AAAAAAAACC4/RcwweSCQDis/w449-h297-k/prev.jpg mohon pencerahannya. hehe

  • Taufik Nurrohman

    @Mivt elRahman Widget daftar isi Abu Farhan memiliki script untuk memuat JQuery secara otomatis jika blog yang memakai tidak memiliki JQuery. Tapi setelah Saya teliti seringkali script itu error dan tidak bekerja sesuai harapan (dalam artian: tetap memuat JQuery meskipun blog sudah dilengkapi dengan JQuery). Yang penting usahakan tidak meletakkan dua widget itu dalam halaman yang sama, jangan sampai mereka terakses pada halaman yang sama dalam waktu yang sama.

  • Taufik Nurrohman

    @Mivt elRahman Coba di pengaturan feed blog:

    Klik Pengaturan/Setelan ⇒ Lainnya.
    Lihat pada bagian umpan situs. Coba ubah nilainya menjadi "penuh" lalu simpan:

    Widget tidak akan bekerja kalau kita menonaktifkan feed blog, karena sebagian besar widget Blogger mengunakan feed sebagai produsen untuk memuat posting-posting pada widget tersebut.

  • Taufik Nurrohman

    @Mivt elRahman Ide bagus! <3 Tapi karena konsep auto read more model ini sangat berhubungan langsung dengan kerangka template jadi mungkin Saya akan mewujudkannya dalam bentuk kerangka template saja. Menuliskan tutorial tentang ini untuk menerapkannya pada template tertentu dengan cara manual tidak akan membuat blog bertambah cantik.

  • Unknown

    @Taufik Nurrohman Oh, iya bener. Masalahnya di feed. Udah berhasil sekarang. trims banyak, Mas.

  • Randy

    thanks bangett bang udah saya terapin di gallery ehehe

  • Putra

    mas taufik, halaman ststis saya kok kosong yah?? :(
    ada salah dimanakah? http://si-alam.blogspot.com/p/site-map.html
    padahal mau saya isi widget ini :'(

  • Taufik Nurrohman

    @Alam Perwira Saya nggak melihat elemen .post-body di postinganmu. Sepertinya masalahnya ada di tag kondisional halaman statis.

  • Putra

    @Taufik Nurrohman <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    blablanlanlansajasdbanksdhbasdh
    </b:if>
    </b:if>

    yang bener begitu atau sebaliknya mas? 7:(

  • Taufik Nurrohman

    @Alam Perwira

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    blablanlanlansajasdbanksdhbasdh
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    salinan blablanlanlansajasdbanksdhbasdh
    </b:if>
    </b:if>
  • Putra

    @Taufik Nurrohman saya rubah template, ehh ehh kok malah begini mas? http://memorysite404.blogspot.com/p/site-map.html

  • Taufik Nurrohman

    @Alam Perwira Tambahkan clear:both di #footer:

    #footer {
    clear:both;
    }

    Betulkan juga sidebar dan seksi postingnya. Kok sidebarnya nggak pindah ke samping ya? =(

  • Randy

    bang kenapa gak apdet2 isi gallerynya ya?padahal udah q apdet mulu postingannya? apa yang salah ya?

  • Taufik Nurrohman

    @randy yang penting share Kamu ngasih nama labelnya apa? Bukannya widgetmu sudah disetting supaya cuma menampilkan label tertentu saja?

  • Anonim

    mencoba untuk praktek! heu

  • EM

    assalamu-alaikum,
    ada masalah dengan gambar yang memiliki ukuran tinggi dan lebar yang berbeda,
    jadi hasilnya gambar tersebut tampil tidak seragam dan tidak rapi,
    bagaimana caranya supaya gambar tersebut tampil dengan ukuran yang sama semua?
    satu hal lagi mas, saya menampilkan 20 postingan dalam widgte daftar isi tersebut, dan saya ingin menambahkan link untuk mereload postingan selanjutnya tapi masih dalam halaman yang sama (seperti widget daftar isi blog ini),
    kurang sedikit lagi mas,

    untuk lebih jelasnya berikut link dari blog saya:

    http://goresan-memori.blogspot.com/p/daftar-isi.html

  • Taufik Nurrohman

    Widget ini sudah usang. Pakai yang baru saja, lalu set mode widget ke thumbnail

  • EM

    ok thank you mas

  • Ardy

    wuih,, makasih banyak yaa gan,, saya masih newbie nieh jadinya pengen belajar terus sama mas taufik.. B)

    tolong gan di cek untuk-adek(.)blogspot(.)com/ siapa tau mas tertarik untuk ngasih apaa gituu untuk dijadiin hiasan.. hehe 0:)

  • Unknown

    ijin mencoba yaaaa,,,,,

  • Unknown

    wahh anda telat gan soalnya lagi maintenance lo heheh

Komentar telah ditutup.