Breaking News
Loading...
Monday, April 22, 2013

Cara membuat scroll pada arsip blog

5:11 AM

cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan keren. sobat blogger juga bisa membaca postingan saya kemarin Cara Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa menarik dan ringkas menggunakan efek scroll. lebay...... hahaha
Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......
  • Cara/tutorial
  1.  Login ke Blogger.
  2.  Di halaman Dasbor, kita pilih Rancangan Blogger.
  3.  Kemudian pilih Edit HTML
  4.  Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F. 
  5.  Jika sudah ketemu Selanjutnya tambahkan beberapa kode dan akan nampak seperti ini

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>
Keterangan :
  • Kode yang berwarna BIRU adalah kode yang ditambahkan, dan letakkan kode  warna biru seperti yang ada di contoh, ingat letakkanlah dengan tepat
  • Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
  • 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
  • Dan untuk merubah warna background rubahlah kode #FFFFFF dengan kode warna yang cocok dengan anda bisa dicari di DISINI
  • Jika sudah klik Save templates dan lihat hasilnya. 

0 comments:

Post a Comment

 
Toggle Footer