Bocil - Assalamualaikum semua. Akhirnya saya kembali untuk berbagi ilmu hehehe XD, Hari ini saya akan membagikan Tutorial Blog, ini pertama kalinya saya post Tutorial Blog di blog ini. Sebelumnya sobat udah tau Bullet List belum?? jika belum tau nanti setelah tutorial ini akan dijelaskan cara mema
kainya ya, oke langsung saja yuk sob tanpa panjang lebarr...
- Login Blogger
- Masuk Dashboard
- Pilih Template
- Kemudian Pilih Edit Html
- Cari Kode
]]></b:skin>
untuk memudahkan pencarian tekan Ctrl+F
- Pilih salah satu Style yang saya sediakan, dan letakkan di atas
]]></b:skin>
Style 1
.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(http://i.imgur.com/BQeHpoH.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/rALcBdB.png);
}
Style 2
.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(http://i.imgur.com/HGNOq23.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/5vFFLve.png);
}
Style 3
.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(http://i.imgur.com/ei5CRgP.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/NJNVs9P.png);
}
Style 4
.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(http://i.imgur.com/2zUGKbM.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/Pqpx0wi.png);
}
Style 5
.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(http://i.imgur.com/9qocA7Q.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/qkXsEmR.png);
}
Style 6
.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(http://i.imgur.com/CI9LZHe.png);
padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {
list-style-image: url(http://i.imgur.com/SokA2Mt.png);
}
- Jika sudah Copy kode salah satu Style diatas, kemudian Klik Simpan.
- Selesai
Cara Menggunakan Bullet List
Jika sobat masih belum tau cara menggunakan Bullet list sobat bisa lihat gambar dibawah!!
Gimana jelas dengan gambar diatas? saya pikir pasti sudah hehhehe...
Perhatian
Bullet list tidak akan terlihat di dalam posting yang sedang dibuat, Bullet List akan terlihat setelah posting di publikasikan.
Sekian artikel saya hari ini sobat, semoga artikel ini dapat menambah ilmu sobat dan bermanfaat bagi sobat, Jika ada kode rusak atau pertanyaan silahkan komentar di artikel ini..
Baca Juga Artikel
Tips Bermain Resident Evil 4
Keyword: cara membuat bullet list keren, cara membuat bullet list, cara membuat bullet list dengan efek hover, cara membuat bullet list hover, modifikasi bullet list, modifikasi bullet list menjadi hover.