Link

22
Cara membuat label scroll

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 tempatkan?, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar Menu scroll tentunya sudah banyak yang tau Contohnya disidebar blog ini, 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. Untuk membuatnya, silahkan ikuti langkah-langkahnya berikut ini :)

   1. Login ke blogger
      
   2. Buatlah Label dengan menambah Gadget pada sidebar, Beri judul [kategori]
            
   3. Sekarang tuju ke Edit HTML.

   4. Klik Expand Template Widgets.
    
   5. Cari label yang sudah Kamu buat tadi, dengan CTRL+F dan ketikkan "Kategori", maka akan muncul    kode HTML dari kategori tersebut, tapi jangan pusing melihat kode HTML tersebut.
      
   6. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah Kamu buat tadi.
      <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>      
   7. Jangan lupa Simpan Template.
Catattan: Setiap template mempunyai karakter yang berbeda, mungkin di blog Kamu 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. ;)

Label: ,

22 komentar:

ahmad mengatakan...

wiiih, keren!!! ane dah nyoba sob. tapi sekarang beralih ke label cloud. hehehe

Penchenk mengatakan...

Sob kalau yang buat template klasik ada gak? ane pengen coba...

Fadel mengatakan...

Kalau yang buat template klasik saya belum coba"nti saya cari caranya ya>>Penchenk

Manchester United Tech mengatakan...

thx ats tutorialnya, kalo saya pake yg animasi....

danuakbar.com mengatakan...

cuma bisa bilang "SIP".
maaf komennya g banyak dan alakadarnya :D

katir mengatakan...

sip.....semoga saja saya bisa amengaplikasikanya....
makasih gan.....

wowewvck mengatakan...

mantab nice info...sob

Fadel mengatakan...

Thanks sudah komentarnya..

BeDa mengatakan...

Terima kasih tutorialnya. Dengan scroll menghemat space dan tampak lebih rapi

robby mengatakan...

Pertama sob... label scroll memang sangat bermanfaat khususnya bagi yang labelnya banyak.... lebih hemat space gitu sob....

damar- BLOG TIPS mengatakan...

Tukeran link yuk Sob . . ..ada ngga


ke blogku yah, sama-sama newbie, saling komen

he he

Gudangblog | Belajar SEO mengatakan...

Wah... mantap banget nih,, infonya,, TQ

Akbar Yahya mengatakan...

wew hebat ni

oh iya cara rubah kota komntar di dekat Subscribe by email
itu gi mana ya?

Mas Harri mengatakan...

Benar banget ni trik nya biar gak kelihatan puanjang,....

hery mengatakan...

ya dah tak coba dulu aja mas moga bisa

Fadel mengatakan...

hery> iya" coba aja dulu kalo ada masalh. tanya aja

Belajar Ngeblog, Tips Trick, Free Template mengatakan...

Nice post.. ehehe..
Kalau saya lebih seneng dijadikan cloud saja..kalau banyak..

mas doyok mengatakan...

kalau aku gak suka mas kebanyaan scroll di blog :D
jadi ya panjang aja :D

epuljapanese mengatakan...

Mas kok di template saya pas di save templates ada tulisan gini:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

gimana tuh??? mohon jawabannya

Fadel mengatakan...

@epuljapanese sepertinya sobat ada salah memasukan kode puutup sehingga, tidak dapat disimpan, coba periksa kembali beberapa kodenya, :)

LSOtour(Visit Sumbawa) mengatakan...

Thank you bro, gue dah kemana-mana cr info, kebanyakan gk jelas, ktmu disini dech!, thanks ya!

Anonim mengatakan...

hatur nuhun !

Posting Komentar

Silahkan tinggalkan komentarnya...