Cara Membuat Scroll Menu Sidebar di Blogspot

Hallo bro...ketemu lagi kita di blognya Blogspot dan Wordpres, dan saya disini akan membahas tentang bagaimana Cara Membuat Scroll Menu Sidebar di Blogspot. Cara Membuat Scroll di Blogspot ada 2 jenis sobat diantaranya :
  1. Scroll di menu side bar 
  2. Scroll didalam postingan, seperti contoh scroll di postingan ini.
Nah sekarang ane mo jelasin Scroll yang ada di menu side bar, dulu nanti ane jelasin yang satunya di lain waktu. Okeh sobat kita langsung ajah ke TKP....

Untuk memasangnya  sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah menu label atau menu yang lainnya dengan fungsi scroll.

Untuk membuatnya, mari ikuti cara-caranya berikut ini :
  • Login ke blogger dengan ID sobat tentunya. 
  • Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.
  • Anggap saja sobat telah membuat judul labelnya dengan nama “Kategori”. 
  • Sekarang tuju ke Edit HTML
  • Klik Expand Template Widgets
  • 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. 
  • 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>

  • Jangan lupa Save.
Oh ya sobat disetiap template memiliki karakter yang berbeda-beda, mungkin di blog sobat kodenya adalah 

 <div class='widget-content'>

tidak seperti yang ada di blog saya yakni 

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

Sekian dulu ya sob...selamat mencoba

1 comment:

  1. Terimakasih untuk infonya sangat bermanfaat, akan saya coba di blog saya perawatanwajah.co.id

    ReplyDelete