BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Labels Cloud tampa java script

T ernyata oh ternyata. Terutama ini lebih di khususkan bagi yang mempunya kolom sidebar-nya cukup lebar, misalkan sekitar 225px ke atas, ( contohnya bisa lihat lebarnya kolom sidebar blog ini ) .

Jika mengunakan pengurutan labelnya di biarkan jatuh ke bawah , maka akan banyak space kosong yang terbuang percuma. tak enak di lihat layauuu. ( ngertikan maksudnya )

Solusinya bisa saja kita mengunakan sistem label Tag Cloud, biar tulisan labelnya memanjang secara horizontol, dan itu merupakan pilihan yang paling tepat.

Namun ada cara lain yang paling mudah dan murah walaupun tidak sebaik tag Cloud, karena cara yang akan saya uraikan ini tidak mengunakan unsur fietnah dan Java Script. ( terutama cocok sekali bagi yang tidak suka dengan Java - java timur, java tengah atau java barat ).

Sebelum kita lanjutkan inilah tes DNA perbedaan antara labels cloud yang asli dengan label cloud manuali tampa java script. ( kalau ingin lebih menarik tambahkan saja icon-icon luthu di setiap labelnya )

Labels Cloud tampa java script Labels Cloud tampa java script


Baiklah untuk yang penasaran ingin mebaca tulisan ini, kita lanjutkan saja cara membuatnya.

Pertama : pasang dulu elemen label ke blog kita, beri judul atau namai label tersebut, dan inga ! inga !.

Kedua : Buka tab Edit Html kemudian tandai Expand Template Widget.

expand-template 

Ketiga : Cari kode di bawah ini. ( kalau binun cari  tulisan judul yang kita namai untuk label tersebut. gunakan find browser lihat di sini. )

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>  <div class='widget-content'>
    <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>
        <span dir='ltr'>(<data:label.count/>)</span>      </li>
    </b:loop>    </ul>     <b:include name='quickedit'/>
  </div></b:includable></b:widget>

Setelah ketemu buang tulisan ini <ul> <li> </li> </ul> .

kemudian setelah itu, masukan kode di bawah ini.

<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">

</div>

simpan pada posisi seperti tulisan yang saya pertebal.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>  <div class='widget-content'>
<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">

     <b:loop values='data:labels' var='label'>
      <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>
        <span dir='ltr'>(<data:label.count/>)</span>
    </b:loop> </div>    
<b:include name='quickedit'/>  </div></b:includable></b:widget>

Setelah itu coba tekan tulisan Pratinjau.

Jika saudara tidak suka dengan angka setelah label seperti ini:  (2), (1). buang saja dengan cara menghapus tulisan ini (<data:label.count/>).

Dan jika suka dengan tampilan barunnya klik Simpan Perubahan.

Embedded Style.

Cara di atas saya mengunakan Inline Style, yakni menerapkan langsung pada kode Html. Jika ingin menarik dan terkontrol tampilan labelnya. saya sarankan dan saya paling suka membuat dulu sintaks Css -nya atau istilahnya Embedded Style Sheet. karena dengan cara kedua ini keuntungannya kita tidak perlu menghapus tag <ul> <li> </li> </ul>. dan keuntungan lainnya kita bisa menambahkan gambar icon juga aman.

gam-04

Bagaimana cara membuatnya ? tergantung kalau ada yang tertarik saya pasti tulis . ok.

Tulisan Yang Rada Nyambung.

1.blogroll scrolling dengan inline style

2.membuat kotak scroll untuk blogroll

3.mengedit mengatur dan menambah label

del.icio.us tags:
Page views this post: reader

16 komentar:

Kristina DIAN Safitry said...

siiip....perempuan menangis menjadi orang pertama. hoyeeee...gak nangis lagi deh gw,xi..xi...

Reni Dwi Astuti said...

Mas, datang lg nih mau tanya or minta tolong lagi..gmn caranya buat label yang memanjang ke bawah?

kamar ijo said...

makasie yak buat infona... berguna bgt apalagi buat saya yang sama skali cacat ganda soal kode2an... ^_^ skarang labels saya di dari-kamar-ijo.blogspot.com jadi berurut horizontal...

Negeri Hijau said...

bagus banget tutorialnya mas, hanya saja bila ini ditambahkan, tepmplate saya jadi molor...he..he...)

Tips Blogspot said...

wah keren tu tipsnya.. bisa coba donk..

Robbie Philosophy said...

Mw nanya nih Bosz Jalooe, Gmna cara agar Label Cloud Kita mempunyai Size yg besar dan kecil dan sebagian ada yg tebal terus ada gk cara agar ada jarak antara judul label dan labelsnya sendiri bosz.. Ksih solusi ya..Thanks.

JALOE said...

@ robbie

kalau itu mesti pake label cloud yang ada javascriptnya.. seperti yg saya punya ini..

coba pake tutorial yg di sini saja blogger pluggin

Robby said...

SAlamualiakum BOsz, Sudah saya coba tapi gk bisa, malah ada tulisan error template kamu gk bisa di save katanya harus ada tag penutup, BTW tutorial di blog http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html, membutuhkan Javascript gk bos?

JALOE said...

yup rob... gini saja mungkin besok saya buatin postingannya..

enhal said...

Thansk Kang..jadi bisa bikin deh

TUKANG ARSIP said...

wah trik yg sedikit mnrk,dilihar diraba dan sdkit ditulis ya

Abdee Adien said...

ga bisa Gan.. gmana ya Gan blog saya ga bisa di kasih comment form'y.. jadi tiap postingan gada comment.. sharing dunk Gan.. :(

indoshareddotcom said...

mas kok gak dibuat2 sih cloud yang ada iconnya?

JALOE said...

@ Indoshare

iya boss rada males bikinnya neh.. sorry :)

agasta said...

wih keren,

chris said...

wah ..nice posting nie..
thanks scriptnya..:D

o iya jng lupa mampir kesini

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial