XHTML Blogger, Widget Label

Tabel Konten
  1. Judul Widget 
  2. Kondisional Tipe Widget 
    1. Markup Widget dengan Tipe List 
    2. Markup Widget dengan Tipe Cloud 
  3. Ikon Edit Cepat 
  • Contoh Markup Widget Label Hasil Modifikasi 
  • Sebuah widget Blogger bertipe Label dapat dinyatakan dalam kerangka seperti ini:

    <b:widget id='Label1' locked='false' title='Category List' type='Label'>
      <b:includable id='main'>
        <b:if cond='data:title'>
          <h2><data:title/></h2>
        </b:if>
        <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
          <b:if cond='data:display == &quot;list&quot;'>
            <ul>
              <b:loop values='data:labels' var='label'>
                <li>
                  <b:if cond='data:blog.url == data:label.url'>
                    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                  <b:else/>
                    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                  </b:if>
                  <b:if cond='data:showFreqNumbers'>
                    <span dir='ltr'>(<data:label.count/>)</span>
                  </b:if>
                </li>
              </b:loop>
            </ul>
          <b:else/>
            <b:loop values='data:labels' var='label'>
              <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                <b:if cond='data:blog.url == data:label.url'>
                  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                <b:else/>
                  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                </b:if>
                <b:if cond='data:showFreqNumbers'>
                  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
                </b:if>
              </span>
            </b:loop>
          </b:if>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
    </b:widget>

    Saat Anda mencoba mengedit atau baru pertama kali menambahkan widget label di blog Anda, maka Anda akan menemukan dua opsi utama untuk menentukan tampilan widget yaitu model widget bertipe list dan cloud. Kode di atas sebenarnya juga sudah menunjukkan markup XML kedua model tersebut. Saya akan pisahkan bagian-bagiannya agar bisa lebih mudah dimengerti:

    Judul Widget 

    Bagian ini menunjukkan markup judul widget. Kondisional yang mengelilinginya berfungsi untuk membatasi agar elemen <h2> pada widget ini hanya muncul jika formulir judul tidak kosong:

    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>

    Kondisional Tipe Widget 

    Bagian ini menunjukkan kondisional yang berfungsi untuk memisahkan tampilan model list dan cloud:

    <b:if cond='data:display == &quot;list&quot;'>
      <!-- Markup widget bertipe `list` -->
    <b:else/>
      <!-- Markup widget bertipe selain `list` -->
    </b:if>

    Markup Widget dengan Tipe List 

    <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
    </ul>

    Markup Widget dengan Tipe Cloud 

    <b:loop values='data:labels' var='label'>
      <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        <b:if cond='data:showFreqNumbers'>
          <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
        </b:if>
      </span>
    </b:loop>
    DataKeteranganTampilan/Contoh Tampilan
    data:displayElemen ini akan menampilkan tipe tampilan widget. Berguna untuk membuat kelas spesifik, terutama pada elemen tubuh widget.list, cloud
    data:blog.url[?]
    data:label.urlElemen ini akan menampilkan URL setiap item label.http://nama_blog.blogspot.com/search/label/-/Nama Label
    data:label.nameElemen ini akan menampilkan nama label.Nama Label
    data:blog.languageDirection[?]
    data:showFreqNumbersKondisional untuk menyatakan apakah jumlah posting pada widget akan ditampilkan atau tidak.true, false
    data:label.countElemen ini akan menampilkan jumlah posting pada label terkait.20
    data:label.cssSizeElemen ini akan menampilkan angka tingkatan berdasarkan perbandingan banyaknya jumlah posting antara label yang satu dengan label yang lainnya. Biasa digunakan sebagai akhiran nama kelas label-size-* pada item label bertipe cloud untuk mengatur besar ukuran masing-masing item melalui CSS.3

    Ikon Edit Cepat 

    <b:include name='quickedit'/>

    Contoh Markup Widget Label Hasil Modifikasi 

    Berikut ini adalah contoh markup XML yang akan mengubah tampilan widget label menjadi berbentuk tabel:

    <b:widget id='Label1' locked='false' title='Category List' type='Label'>
      <b:includable id='main'>
        <b:if cond='data:title'>
          <h2><data:title/></h2>
        </b:if>
        <div class='widget-content'>
          <table>
            <thead>
              <tr><th>Label</th><th>Total Posting</th></tr>
            </thead>
            <tbody>
              <b:loop values='data:labels' var='label'>
                <!--
                  Kondisional `data:blog.url == data:label.url` tidak efektif dan tidak tepat sasaran!
                  Gunakan cara Saya yang ini untuk menciptakan kondisional halaman label yang stabil.
                -->
                <b:if cond='data:blog.searchLabel == data:label.name'>
                  <tr><td><strong><data:label.name/></strong></td><td><data:label.count/></td></tr>
                <b:else/>
                  <tr><td><a expr:href='data:label.url'><data:label.name/></a></td><td><data:label.count/></td></tr>
                </b:if>
              </b:loop>
            </tbody>
          </table>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
    </b:widget>

    40 Komentar

    • Adhy Suryadi

      Jadi tambah bervariasi lagi ya mas labelnya... :-bd

      • Beben Koben

        hu`uh...tabel brooo
        kamana wae ieu master topiq baru nongol lagih..hiehieheihei

        • Anonim

          abis tapa kayaknya =D

          • Unknown

            Baru turun gunung kayaknya :D

    • Unknown

      Wah bisa di coba nich tricknya terima kasih mas ...ngomong 2 design template tambah mak nyus keren mas .. :-bd :-bd :-bd

    • Sikkahoder

      mantappp...nih emang masternyanya deh.. selalu saya ikutin nih tutorialnya.... mas katanya mau ngerubah websitenya seperti wikipedia ya???? aduh sayanganya untuk info desain website masih buta.. tapi kalau info kesehatan, saya mau gabung, karena blog saya hanya khusus kedokteran

    • Anonim

      Makin Keren Aja Templatenya Mas Taufik :-d

    • BrayenL

      Dengan tampilan barunya mas Taufik, semoga tidak ada lagi para Cloner untuk meniru template DTE dan menganggap itu karya mereka :D :-bd

    • kamu info

      mantep bro codingnya :)

    • Fajrin

      wah desain baru nih Mas Taufik :-bd

    • Kang Ismet

      cocok... DTE redesigned, puyeng liat blog banyak mirip DTE.
      hanya masukan dari saya yang newbie.. saya liat hanya komentar yang bernada pertanyaan yang akan dijawab..saya rasa ga ada salahnya membalas komentar2, walaupun hanya sapaan. dari sekian komentar di atas, ga satupun ada tanggapan..
      saya pernah baca cara berkomentar yang baik di blog ini, mana yang perlu ditanggapi dan tidak.. tapi komentar tanpa tanggapan sama sekali, menurut saya seakan admin blog kurang welcome dan terkesan 'sombong'.
      sorry lho mas... hanya unek2 saya aja

      • Taufik Nurrohman

        Nggak terbiasa ngobrol yang pendek-pendek si pak. Lagipula Saya juga tidak enak kalau setiap kali membalas Saya hanya akan membawa pengunjung kembali ke halaman yang sama berkali-kali cuma untuk membalas kembali sapaan Saya. Kesannya, Saya ini cuma berusaha untuk meningkatkan pageview saja.

        Dengan meningkatkan standar yang jelas, mungkin Saya bisa membuat halaman yang mereka kunjungi menjadi lebih bermanfaat. Dan yang terpenting adalah setiap halaman yang mereka kunjungi diharapkan akan mereka gunakan untuk dibaca, bukannya hanya untuk dikomentari saja/dilihat bagian komentarnya saja. Toh komentar-komentar yang masuk di sini pada akhirnya akan dibaca oleh orang lain juga. Jadi harus hati-hati, supaya orang lain tidak perlu pusing-pusing untuk memilah komentar mana yang penting untuk mereka dan yang bisa bermanfaat secara langsung saat mereka baca.

        Mungkin Saya ini memang sombong kali ya pak hehe… :p Saya juga nggak terbiasa blogwalking ke blog-blog lain kecuali ke tempat teman-teman dan kenalan-kenalan lama Saya yang masih sering diajak komunikasi. Terserah orang mau berkata/berpikir apa tentang Saya. Yang jelas Saya punya alasan tersendiri. Tidak usah dikomentari juga tidak masalah. Anggap saja tidak ada adminnya. Blog ini dikelola oleh robot!

        … tapi komentar tanpa tanggapan sama sekali, menurut saya seakan admin blog kurang welcome dan terkesan “sombong” …

        Mungkin Bapak juga tidak sempat memperhatikan, bahwa Saya juga tidak membuat posting khusus tentang desain ulang blog ini!

        Pokoknya, Saya ingin membuat konsep blog ini seperti buku bacaan yang isinya cuma hal-hal penting saja dan tidak bisa kadaluarsa. Bisa dibaca kapan saja, oleh siapa saja dan pada tahun berapa saja.

        • Kang Ismet

          I see.. semua orang punya prinsip berbeda, jujur saja kalau boleh saya katakan DTE sedang booming, desainnya banyak ditiru, fresh content, de el el lah... mas boleh buktikan, walau pun tanpa postingan khusus tentang desain ini, akan terus bertambah 'ucapan selamat untuk redesign' :-d

          masalah blogwalking, itu tergantung prinsip masing2 orang. mungkin penggemar blog ini akan merasa bangga, ketika satu saat dikomentari oleh master taufik, walaupun hanya postingan biasa. hanya masukan aja sih :)

          satu lagi mas, masih tahap redesign, atau lapie saya yang error? tampilan blognya emang sengaja ke kiri, tidak center? soalnya masih ada area blank di sebelah kanan.

          • beritaislam.org

            biasanya klo seorang fans di sapa oleh orang yg di fans nin, bisa jd ada rasa tersendiri bagi seorang fanner... seperti artis/pemain sepak bola yg mau di ajak salaman sama fansnya, bagi seorang fans memiliki rasa yg berbeda :D suatu hal yang berbeda ini mungkin nanti bisa di sampaikan ke orang lain, misal saat ketemu temannya : eh td saya ketemu David beckam lho, dan td aku salaman sama dia dan dia mau lho salaman sama aku hihihihi [seperti ada kebanggaan tersendiri. [punten ya klo nggak paham kata2 saya, memang rada membingungkan sepertinya] :D (sy newbie dan baru beberapa hari berkunjung ke blog ini dan baru tahu, dan coba belajar dari sini ternyata banyak para master di sini) smg makin sukses buat empunya :)

    • Imron Fhatoni

      saya juga mohon maaf sama mas taufik karena saya meniru tampilan DTE :] saya hanya merasa kagum dengan DTE :] mas taufik sehingga saya berusaha meniru tampilannya meskipun jauh dari kesan kesempurnaan tapi DTE :] akan selalu dan selalu menjadi inspirasi saya

    • Imron Fhatoni

      pengen ngikut kang tapi yang pake kancing :D

    • Unknown

      Bagus euy, alhamdulillah selama ini saya mendapat banyak ilmu disini ^_^ semangat terus dan semoga apa yang ditulis dan dibagikan disini menjadi ilmu yang bermanfaat :-bd

    • Kang Ismet

      Kalau Imron Fathoni setuju, boleh dong saya ga setuju, kalau penulis tutorial yang lain harus ikut menulis disini :) nantinya akan keluar khas DTE, kecuali mungkin sangat2 selektif untuk memilih penulis, sehingga tidak asal2an dalam menulis.

      Kalau hanya sebatas wikipedia sih setuju2 aja.. tapi tetep one author taufik nurrohman :)

      • Imron Fhatoni

        :-d :-d :-d

      • Taufik Nurrohman

        Semua posting yang bukan berasal dari Saya akan Saya tandai sebagai posting tamu, jadi tidak perlu khawatir tentang hilangnya karakter blog ini jika penulisnya nanti jadi lebih dari satu:

        Lagipula, penulis tutorialnya juga tidak semata-mata langsung Saya undang sebagai penulis. Sistem multi-author pada Blogger masih rawan untuk disalahgunakan. Bisa gawat kalau blog Saya nanti cuma dijadikan sebagai ruang spam iklan. Persyaratan dan spesifikasi artikel memang ada, tapi rata-rata sama lah seperti yang lain. Yang agak rumit mungkin mengenai standar penulisan HTML di artikel Saya. Tapi itu bisa Saya bantu.

        NB: Nah apa Saya bilang?! Gara-gara kebanyakan mengobrol Saya jadi salah balas komentar ke Imron Fathoni… padahal komentar balasan ini seharusnya Saya tujukan ke Kang Ismet:

        Sengaja Saya buat ke kiri. Ada hubungannya dengan flow design/visual movement artikel, karena sidebar Saya letakkan di sebelah kiri. Selain itu ada faktor lain yang bersifat rahasia.

    • Imron Fhatoni

      lansung saja direalisasikan mas taufik siapa tau banyak yang berpartisipasi..

    • Damar Zaky

      makin mantap templatenya bang

    • budkalon

      berhubungan dengan guest post, sebenarnya saya sering melihat tag kondisional kurang lebih seperti ini:
      <b:if cond="post:label == 'guest Post'"> nah, apakah semua pos hasil pengunjung akan ditandai dengan label itu?

    • Anti Clonner

      Komentar ini telah dihapus oleh administrator blog.

      • Taufik Nurrohman

        Maaf, komentarmu terpaksa Saya hapus. Soalnya yang kamu lakukan itu hanya akan memicu keributan saja tanpa memberikan solusi untuk seseorang yang sedang coba kamu bantu ini. Kalau kamu ingin mencegah orang lain untuk meniru desain orang lain ya mohon tunjukkan saja dengan cara mengajak orang untuk membuat desain sendiri. Jangan dibuat sensasi seperti ini, seolah apa yang kamu lakukan itu cuma ditujukan untuk kepentingan dan kesenanganmu sendiri. Toh poin utamanya cuma tiga:

        1. JANGAN MENJIPLAK TANPA IZIN!
        2. JADILAH DIRI SENDIRI!
        3. JANGAN MENIPU ORANG BANYAK!

        Maaf, tapi Saya harus tegas soal ini. Kamu mungkin senang dengan perdebatan dan konflik dan caci-maki. Tapi di sini Saya yang capek!

        • Taufik Nurrohman

          … terima kasih banyak atas perhatiannya. Mungkin caranya saja yang kurang benar. Maaf sudah merepotkan.

          • Unknown

            berkreasi tanpa batas, selamat atas template barunya :D

            • Imron Fhatoni

              makasih,,makasih,,makasih :D :D :D

              • BrayenL

                Komentar ini telah dihapus oleh pengarang.

    • Unknown

      mantep mas Taufik.. salam kenal :-bd :-bd

    • Anonim

      Jadi lebih bervariasi widget label dengan script yang telah disediakan diatas Mas, nice mas.

    • Sikkahoder

      saya benar-benar mengagumin website ini, yang mau saya tanyakan, apakah jika membuat sistem baru, maksudnya memberikan kesempatan pada yang lain untuk menulis, apakah harus masalah seputar website aja?? ataukah bisa topik yang lain, selain itu, apakah kita bisa masukan juga link sumber pada tulisan kita nantinya di postingan website ini??? Salam kenal SIKKAHODER

      • Taufik Nurrohman

        Sayangnya, web ini dikhususkan untuk membahas masalah seputar web. Dan artikel yang ditulis sebisa mungkin bukanlah artikel yang sudah pernah diposting sebelumnya. Salam kenal juga.

    • Mr. Jom Be

      Terimaksih Mas Taufik atas bantuan kerangka temanya...
      pelan akhirnya bisa saya pelajari...salam sukses

    • Anonim

      om makasih udah share, dan sampe ini pun saya berterimakasih karna postingan ini saya bisa belajar buat template :D tapi belum jadi 100% :p makasih om
      - Salam Damai -

    • Unknown

      saya pengen di ajari mas...
      kagum sama desainnya.... :D

    • Sopala Multapa

      Maaf mas saya mau tanya apa yg harus saya lakukan untuk mendpatkan kata dari label tersebut agar masuk pada data filter contoh untuk isotope .. <a data-filter=".Illustration" href="#">Illustration</a>

      • Dian Anarchyta

        Bantu jawab,
        <a expr:data-filter='.+"data:label.name"' href=''><data:label.name/></a>

    Komentar telah ditutup.