edisini

Widget Linklist Blogger

Blogger menyediakan widget linklist yang memudahkan kita membuat daftar link tanpa harus membuka HTML editor tema. Dalam template berbayar biasanya widget ini dimanfaatkan menjadi menu navigation dan bisa menjadi dropdown menu hanya dengan menambahkan underscore ( _ ) pada nama link tersebut. Sebelumnya saya mengira itu adalah code bawaan blogger, namun setelah saya coba ternyata tidak bisa menjadi dropdown hanya dengan menambah underscore.

Linklist widget dengan underscore

Memanipulasi Underscore menjadi Dropdown

Jika kita tambahkan underscore pada nama linklist widget itu juga akan menjadi salah satu huruf dalam nama tersebut. Disini kita akan memanipulasi underscore agar tidak tampil pada nama link namun menjadi code bahwa nama itu adalah bawahan dari link diatasnya. Simak caranya berikut.

Menambah javascript

Pada tema HTML editor tambahkan javascrip berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
/* Widget LinkList Menjadi Dropdown Menu */
$("#LinkList100").each(function() {
    var e = "<ul id='nav'><li><ul id='sub-menu'>";
    $("#LinkList100 li").each(function() {
        var t = $(this).text(),
            n = t.substr(0, 1),
            r = t.substr(1);
        "_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='sub-menu'>")
    });
    e += "</ul></li></ul>";
    $(this).html(e);
    $("#LinkList100 ul").each(function() {
        var e = $(this);
        if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
    });
    $("#LinkList100 li").each(function() {
        var e = $(this);
        if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
    })
});
//]]>
</script>

Keterangan :

Pada code diatas #LinkList100 merupakan id dari widget linklist yang akan kita buat menjadi dropdown menu. Gantilah #LinkList100 dengan id widget kamu. Biasanya kode widget seperti ini <b:widget id='LinkList100' locked='false' title='' type='LinkList' version='1'>

Lalu save template dan lihat hasilnya, kita tinggal menambahkan CSS untuk mempercantik tampilannya.

Biasanya script seperti itu ada di template berbayar dan disembunyikan dalam javascript yang dikunci, Semoga berhasil