tampilan arsip blog dengan Scroll

Selamat siang kawan, sempat tadi saya mengalami kecelakaan yang lumayan drastis. Tapi alhamdulilahmasih di selamatkan jatuhnya dari sepeda motor, lupakan peristiwa tadi. yukk langsung saja kembali ke layar kaca pembahasan. hehe dalampostingan fathan kali ini fathan akan share sedikit tutorial tips trikmempercantik blog

dengan membuat scroll pada widget arsip biar lebih hematdalam penempatannya disamping itu tampilan pun akan terlihat rapih. Disamping itujuga kawan fathan yaitu agan Romadho Agung meng-request , gimna supaya tampilanarsip di bikin scroll. Baik gan, mungkin ini bisa menjawab pertanyaannya. Hehe ^_^langsung aja yuuu ke pembahasan langkah-langkahnya :

  • Masuk ke akun blogger kawan-kawan :
  • Klik Tata Letak
  • Klik Elemen Halaman
  • Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog Tapi kawan-kawan harus pilih yang gaya Hierarki
  • Setelah itu masuk ke settingan template, klik Edit Html
  • sebelumnya download dulu template kawan-kawan takutnya terjadi kacau nantinya, buat jaga-jaga bila nanti eror
  • Beri tanda centang dulu pada tulisan “Expand Widget Template”
  • Lalu kawan-kawan cari kode seperti yang dibawah ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog'type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>


laluoleh kawan-kawan tambahkan dengan coding seperti ini <divstyle='overflow:auto; width:ancho; height:100px;'> tepat dibawah code <div class='widget-content'>sehingga hasilnya
akanseperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog'type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>

setelahcara yang kesatu selesai , kawan-kawancari lagi coding dengan bentuk seperti di bawah ini lalu tambahkan code"</div>" (tanpa tanda kutip ya kawan buat example saja) :


<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>



sehinggabentuk hasil jadinya akan terlihat seperti yang dibawah ini, kawan-kawan :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog'type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<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>



keterangan : code yang bertuliskan <div style='overflow:auto;width:ancho; height:200px;'> didalamnya terdapat angka 200px yang menunjukan tinggi suatu kotakscroll tersebut, dan kawan-kawan bisa edit dengan sendirinya sesuai selerakawan-kawan, fathan yakin kawan-kawan lebih kreatif dari saya. :D


setelahsemuanya selesai, save template kawan-kawan. Dan lihat hasil yemplate yangsudah kawan-kawan edit barusan. Good luck selamat berpraktik ria kawan :D cukup sekian dulu dari fathan nantikan kembali pada postingan yang selanjutnya .. salam semangat kawan


Share on Facebook
Share on Twitter
Share on Google+

Related : tampilan arsip blog dengan Scroll

18 comments:

  1. wew, jadi arsipnya bisa di scroll gitu ya fath? gue coba ya?

    ReplyDelete
    Replies
    1. iya gan.. seperti contohnya yg ada di pinggir tampilan blog aku

      Delete
  2. punya ane eror gan.. ehehehe
    caranya cuma ituu?
    maaf ya ngrepotiinn :(

    ReplyDelete
    Replies
    1. wah ga mungkin eror gan hehe , itu contohnya saya bisa. hehe
      coba di pelajari.. di pahami, baru di eksekusikan he
      iyah.. cumn itu gan.. soalnya semuanya juga samaan...

      Delete
  3. ngmong ngmong kalo di scroll gini nggak bikin loading blog tambah lama sob,.,???

    ReplyDelete
    Replies
    1. kaynya engga gan.. soalnya aku pake scroll biasa aja, yang nejadiin sebuah blog itu menurt orang2 biasnya kebnyakan widget , java scriptnya gan :D

      Delete
  4. postingan ini benar2 bermanfaat, saya sangat berterima kasih mendapat info terbaik
    terima kasih kawan
    jangan lupa mampir
    ditunggu

    ReplyDelete
    Replies
    1. maksih sob, semoga bermanfaat sedikit share saja. maksih juga selalu support..

      Delete
  5. Hello there... please visit me too :) Ilike this post...

    ReplyDelete
  6. info yg bermanfaat.... thankss...

    ReplyDelete
  7. Ngansip nih masbroo!! hhe..

    Apa kabar mass??

    ReplyDelete
  8. wah nice info :D
    boleh di coba nih !

    ReplyDelete