Menghilangkan Symbol Bullet/Titik dalam elemen ul dan li di Depan Link
Tuesday, April 28, 2015
Cara Menghilangkan Bullet/Titik) didepan Link : list-style-type - Bagaimana cara menghapus kode bullet (lingkaran kecil) atau tanda titik yang ada di depan link. Sebenarnya tanpa menghilangkan tanda tersebut juga tidak menjadi masalah, bahkan kalau symbol bullet dipasang di link akan terlihat lebih rapi seperti kita kalau mengetik tulisan dengan nomor atau symbol di ms-word (microsoft office) akan tersusun rapi tulisan tersebut. Kalau di blogger symbol bullet atau tanda titik biasanya menggunakan kode <li>,,,,,, dan ditutup dengan dengan kode </li>.
Pada template blogger/blogspot pemberian elemen ul, li pada kode CSS dan HTML sering kita lihat dan pada pembahasan sekarang ini saya akan berbagi tips menghilangkan symbol bullet di depan sebuah link aktif. Symbol bullet didepan link tersebut dihasilkan dari penambahan kode <li>.....</li> seperti contoh kode berikut ini :
CONTOH 1 :
<li><a href="http://IndoINT.blogspot.com"></a></li>
Dan hasil dari kode diatas jika dipasang didalam postingan pada mode HTML akan terbentuklah sebuah link dan didepannya ada bullet seperti ini :
Tanda titik atau bullet di depan link dapat dihilangkan dengan cara menambah CSS Style Properti yang kodenya seperti ini : style='list-style-type: none;'
Untuk menghilangkan bullet/titik yang ada di depan link yaitu dengan meletakkan kode style='list-style-type: none;' di belakang kode <li> dan contohnya penempatannya seperti berikut ini :
<li style='list-style-type: none;'><a href="http://IndoINT.blogspot.com/"></a></li>
Maka hasilnya setelah ditambahkan kode warna biru, secara otomatis tanda bullet akan hilang
CONTOH 2 :
Perhatikan contoh widget Recent Posts atau Artikel Terbaru seperti berikut ini :
<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://IndoINT.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Biasanya widget artikel terbaru dipasang di sidebar blog. Untuk menghilangkan symbol bullet cukup menambahkan kode style='list-style-type: none;' dan cara menempatkan kode tersebut seperti berikut ini :
<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li style='list-style-type: none;'>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://IndoINT.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Cukup paham bukan? coba anda praktekkan pasti berhasil.