Cara Membuat Label Dengan Fungsi Scroll

blogger_logo Tutorial memasang label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label / kategori dalam blognya. Jika di pasang semua tentunya akan makan tempat, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar.

 

Menu scroll tentunya sudah banyak yang tau, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

 

Label

 

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :

  1. Login ke blogger dengan ID sobat tentunya.

     

  2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.

     

  3. Anggap saja sobat telah membuat judul labelnya dengan nama “Kategori”.

     

  4. Sekarang tuju ke Edit HTML.

     

  5. Klik Expand Template Widgets.

     

  6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.

     

  7. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.

     

    <b:widget id='Label1' locked='false' title='Kategori' 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;'>
    <div style='overflow:auto; width:ancho; height:250px;'>
    <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>

    </div>
    </b:includable>
    </b:widget>

     

  8. Jangan lupa Simpan Template.

Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah

<div class='widget-content'>

bukan seperti yang ada di blog saya yaitu :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 

yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

 

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

 

Saya kira itu cukup sekian pelajaran blog kita kali ini, terima kasih. Applause

Berlangganan artikel terbaru via Email
Artikel Lainnya :

65 comments

7 Januari 2010 06.46

Nice post sob. Ane coba dulu. MAkasi.

7 Januari 2010 11.02

Makasih sobat atas tutorialnya..bagussss

7 Januari 2010 13.36

Tutorial yang lengkap dan mantap

mantap bos...langsung cobaaaa...
hehe

btw..bro..cek bagian link exchange blog ini yah :D
saling sundul nih..

8 Januari 2010 22.58

aku kan udah pake yang cloud...huehueheuhue tp bisa juga nih scrollnya aku pake buat yg lain...xixixixixi

9 Januari 2010 17.20

Te hago una pregunta como se puede hacer para que en las entradas antiguas no muestre solo los titulos sino que muestre como en la principal todo el contenido
Tu sitio me parece muy bueno segui asi !!!!
Pd: Yo tengo un template de los tuyos por eso te pregunto

23 Februari 2010 00.11

keren. info nya oke..

Anonim
8 Maret 2010 20.45

sip.....coba pake ni tips...

19 Maret 2010 22.54

tks yah bosku..... ahirnya label di blogku sdh bisa di scroll.. aku sneng bgt.....

9 April 2010 18.00

makasih

10 April 2010 15.37

Sip Neh Thanks Yak Tips2nya... Mantab

10 April 2010 16.13

makasih maz... visit balik ya?

19 April 2010 09.56

thanks k2.... he..he.

25 Mei 2010 09.39

thanks ya infonya.visit my blog

www.fahricaptures.blogspot.com
banyak info menarik

20 Juni 2010 17.20

trims atas tutorialnya sobat kini label ku sudah bisa scroll jhhhee.. :2jempol

20 Juni 2010 18.07

Kalo label kaya punya senior yang ada tab nya tuh gimana?

23 Juni 2010 14.46

thanks mas ilmunya sip buanget dari newcomer

25 Juni 2010 10.24

aduhh,, dah di coba tp kok ga muncul ya..?
gmn nih gan..? Help.. :)

25 Juni 2010 10.36

@chairudin : coba km rendahkan tingginya, ganti 250px jd 100px misalnya

23 Juli 2010 16.09

sep berhasil.... hehe...

thankz kang....

18 Oktober 2010 17.55

Oke sudah saya coba dan berhasil

21 Oktober 2010 19.39

sipp....!

3 November 2010 14.28

makasih i-om
berhasil!!!

26 November 2010 17.10

Wah sip, dah dicoba dan berhasil, thank shob ilmunya ...

24 Desember 2010 21.50

cakep banget mas tutor nya... terimakasih.. :)

6 Januari 2011 23.41

makasih banyak mas...sudah saya terapkan di blog saya dan berhasil...jadi agak rapih nih.... thanks...

8 Januari 2011 10.48

succes trims caranya

qu coba di blogku yah..
thank's..aq ijin copas ya gan..pake pribadi..

16 Februari 2011 10.38

terima kasih tutorialnya sangat membantu saya ..karena kebetulan kodenya sama dengan blog saya....

16 Februari 2011 16.28

sangat membantu gan, TY tutorialnya :D

9 Maret 2011 20.32

suwun..

23 April 2011 01.19

makasih banyak tutorialnya :)

9 Mei 2011 07.16

Thks U For Tutorialnya....

21 Mei 2011 15.33

bang,klw mau bikin tutorial,template dan top komentar kayak blog ini gimana ya?

17 Juni 2011 20.24

Terima kasih untuk Informasinya......sangat memuaskan....Visit in my blog :http://zonapengetahuanku.blogspot.com/
Jangan lupa

10 Agustus 2011 10.23

trim infonya

14 Agustus 2011 22.39

mantaaaaaaaaaaaaap,
thx berat buat tutornya om . . . . ,
^_^

15 Agustus 2011 05.02

Kalo menambahkan fungsi scroll aq dah bisa, nah, kalo nambahin bulletnya gimana....?

22 Agustus 2011 00.29

Thanks banget infonya

9 September 2011 12.30

keren bangett, terima kasih ya atas ilmunya..!!

9 Oktober 2011 21.10

Wah, bener2 mantep nih tutorial.. berhasil..

21 Oktober 2011 20.51

Terimakasih mas boss untuk infonya. setelah muter muter ketemu juga disini.

17 November 2011 10.15

dipasang

9 Januari 2012 16.15

terpakai diblogku.

12 Mei 2012 01.04

gk bisa gank

19 Mei 2012 14.45

sukses gan,,,thanks infonya... kunjungi balik ya gan... www.pasukan-jihad.tk

25 Mei 2012 23.38

wah, ternyata simple sekali tutornya. thanks sob..

14 Juni 2012 05.44

terima kasih=D sudah dipraktekan^^

19 Juni 2012 21.37

sukses gan..mampir ya

14 Juli 2012 01.06

wah..punya ane labelnya masih dikit sob, cuma 3, maklum nubi...kalo banyak pasti ane coba nih,,,thanks atas infonya

22 Juli 2012 06.09

mantab gan..

27 Juli 2012 21.54

sudah dicoba di blog ane dan berhasil.. makasih banyak sob

12 Agustus 2012 07.47

terimakasih gan ,trik yg bagus jd skrang menu label ngga panjang

laku ,com belanja murah dan aman

31 Agustus 2012 10.58

makasih bro, ane dah pusing2 eh ketemu panduannya disini....:)

15 September 2012 20.07

makasi buat adminnya

18 September 2012 16.34

makasih bnyk info nya sangat berguna

21 September 2012 10.36

thanks sudah berbagi ilmunya, sukses selalu....

26 November 2012 13.47

keren gan mksh sudah berbagi,,,,

sip ini triknya. berguna buat yang labelnya banyak banget.

25 Desember 2012 00.58

so swett bgt gan..saya akhirnya berhasil juga..maksih gan..

25 Desember 2012 23.18

mantab gan....sederhana tapi pasti.....izin pasang ya gan.... mksh..

http://mydumay.blogspot.com/

31 Desember 2012 00.19

SAATNYA GUE KATAKAN, SALUT MANTA DEH BRAY!

Poskan Komentar

Reader Community

Recent Comments