Rabu, 22 Februari 2012

Biasanya pada template yang sudah ada, pada format Unordered List mereka menggunakan simbol atau Unordered List yang default, seperti contohnya di bawah ini :
• Panduan Blogger Pemula,
• Belajar Seo Blogspot,
• Kumpulan Template Blogspot.
Contoh tersebut menggunakan Unordered List default atau umum dan banyak yang menggunakannya, nah tujuan saya membuat panduan yang satu ini adalah merubah tampilan Unordered List default tersebut menjadi lebih menarik, unik, memikat pengunjung, juga agar terlihat rapi.
Pada panduan merubah Unordered List ini saya memberikan dua style atau tampilan yang berbeda dan Anda dapat memilih salah satu dari 2 style yang akan saya berikan.
Sebelumnya, silahkan lihat style atau tampilan dari Unordered List di bawah ini,
Tampilan Unordered List seperti di bawah ini,
  • Blogger templates,
  • Templates,
  • Tool,
  • Tutorial,
  • Photoshop,
  • Javascript,
  • [./Eggi-Imcyber].

Langsung saja kita awali dengan cara yang paling utama dahulu,
  • Silahkan kalian login dengan email dan password Anda ke blogger,
  • Selanjutnya, pada dasboard blog Anda silahkan pilih Template,
  • Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
Kode Unordered List
.post-body ul,
.post-body ol{
  margin: 1em;
  padding-left: 1em;
}
.post-footer ul{
  margin: 1em;
  margin-top: -0.5em;
  padding-left: 1em;
}
.post-body ul li,
.post-footer ul li {
  list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAlOhV4qGmuhOO9_SZGm_2HsB8XZc8i5O12e9l1hELJp0lgFtTLtpXoBGPHk7nRTr3X8Rcy79IFWPNsOqKVXeWmJqDi0cgScZ0ktOuo-b_orv4QG1OsJq86rUKl64WvUILV1t7E56Fpk/s400/uncheck.gif);
  border-bottom: 1px solid #ccc;
  padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
  cursor: pointer;
  list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT5ErmEWRONzRyw7YwBV9JAUbV2dZhKtvfTBzsN5-V523ppapMgMAc11DypJRzj85VTvfOPwlhyphenhyphenjn_aQIl-_nn9n-sr9JLzxOtnRvTFBfYcJuJBdVWPv66seI7W0U2oNcOAzT75tUaOMo/s400/check.gif);
  background-color: #f2f2f2;
  color: #B1291F;
}
  • Selanjutnya, silahkan copy paste salah satu kode CSS tersebut lalu letakan di atas atau sebelum kode di bawah ini,
]]></b:skin>
  • Lalu, Simpan Template.
Sekian panduan  mengenai Unordered List pada postingan, semoga artikel ini dapat bermanfaat dan dapat dicoba.
Selamat mencoba dan selalu saya ucapkan terima kasih

6 komentar:

  1. Gan bagus ....buat belajar..
    follback blogku ya!
    Gan tukaran link yukk!!

    BalasHapus
  2. wahhh... ane baru lihat ginian di blog..
    mantab dehhh

    BalasHapus
  3. @Simple Semua
    masa sih kk??
    di coba ya kk :D

    BalasHapus
  4. mantap gan tutorialnya, thanks ya :D

    BalasHapus
  5. @Cirebon-Cyber4rt
    :D
    sip gan...
    sering" main ya gan :D

    BalasHapus