Manajemen Link dengan Scroll Box

Wah, tak terasa udah lama saya tidak posting. Kebangetan banget memang, maklum kalo udah jadi orang yang sibuk (maksudnya sok sibuk… 8) ). Seminggu kemarin saya mulai lagi otak-atik draft website perusahaan, rasanya ga kelar-kelar ya? maklum masih amatiran. Mohon bimbingannya dari para senior.

Kali ini saya pengen coba sharingkan tips yang sebenarnya mungkin udah basi, tapi saya coba hangatkan kembali mengenai bagaimana menampilkan blogroll atau link yang kita miliki dan kelewat banyak, namun ingin agar tampilannya simpel, sesuai kategorinya, yang penting hemat tempat.

Salah satu solusi mungkin pernah ditampilkan oleh beberapa orang kawan, seperti mas Sandi atau Tipis, yaitu dengan menggunakan Listbox atau Select Box atau Dropdown. Bagaimana meramu script-nya yang sudah dikemas dalam bentuk plugin, silahkan segera meluncur ke Te-Ka-Pe.

Terinspirasi sama blognya mas Arif yang menampilkan blogrollnya dengan cara scrollbox, jadi kepincut juga pengen coba pake. Mudah-mudahan sih bukan ngejiplak, karena saya sama sekali tidak tahu script yang dipakai mas Arif untuk itu.

Akhirnya setelah saya otak-atik sedikit dengan memodifikasi plugin atau file asli buatan mas Sandi, akhirnya jadi juga tampilan blogroll dengan scroll box itu, seperti yang terlihat di sidebar sebelah kanan dengan judul “My Friends And Supports”. Tinggal pertanyaannya adalah, bagaimana cara bikinnya?
(update: sekarang saya taruh di bagian footer)

(update lagi tanggal 1 Muharram 1431 H : Saya taruh di sidebar sebelah kiri dengan judul “Friends and Supports”).

Pertama kita siapkan notepad atau software text-editor yang Anda miliki (kalo saya pake Edit Plus), lalu copas aja script di bawah ini, lalu save dengan nama sesukahati Anda (misalnya linkbox.php).

<div id="listurl">
 <ul>
 <?php
 $categories = get_terms('link_category', "hide_empty=1");
 foreach ((array) $categories as $cat) {
 $select_cat = "";
 $cat_id = $cat->term_id;
 $select_cat .= "<li class='mainlink'>". $cat->name ."<ul>";
 $args = array('category' => $cat_id, 'hide_invisible' => 0, 'orderby' => 'name', 'hide_empty' => 0);
 $links = get_bookmarks( $args );
 foreach ($links as $link) {
 $select_cat .= "<li class='sublink'><a href='". $link->link_url. "' title='". $link->link_description. "' target='_blank'>" . $link->link_name . "</a></li>";
 }
 $select_cat .= "</ul></li>";
 echo $select_cat;
 }
 ?>
 </ul>
</div>

Lalu upload-lah file linkbox.php tersebut ke folder theme Anda. Berikutnya, tambahkan script di bawah ini ke dalam file style.css yang berada dalam folder theme WordPress Anda. Caranya, masuk ke wp-admin, di menu Appearance klik Editor. Biasanya langsung terbuka editor untuk file style.css, tapi pastikan saja dengan klik style.css di halaman sebelah kanan. Atau bisa juga edit file dari cpanel Anda (wp-content -> themes -> nama themes anda -> style.css). Letakkan script di posisi mana saja (misalnya di atas style footer). Usahakan diletakkan setelah tanda kurawal tutup ( } ).

#listurl {
 font-family: "Trebuchet MS", Tahoma, Arial;
 color: #000000;
 height: 200px;
 width: 95%;
 border: none;
 overflow: auto;
 padding: 5px;
}
#listurl .mainlink {
 margin-left: 0px;
 background: url(images/sidebullet.gif) no-repeat left center;
 padding-left: 20px !important;
 font-size: 12px;
 font-weight: bold;
 list-style-type: none;
}
#listurl .sublink {
 margin-left: 20px;
 background: url(images/mini-blogroll.gif) no-repeat left top;
 padding-left: 16px !important;
 list-style-type: none;
 font-size: 11px;
 font-weight: normal;
}

Catatan: nominal height dan font-family pada #listurl dapat diubah sesuai keinginan atau ukuran pasnya pada template Anda.

Kemudian, kita bisa lihat pada script di atas terdapat image atau gambar yang bisa digunakan sebagai gambar latar atau penghias tampilan blogroll. Anda bisa mendownload gambar berikut ini dengan cara klik kanan pada gambar lalu klik “Save image As…” lalu klik Save.

(mini-blogroll.gif)

(sidebullet.gif)

Lalu upload-lah kedua gambar tersebut ke dalam folder image dalam folder theme Anda (wp-content -> themes -> nama themes anda -> images).

Nah, setelah beres dan semua file sudah siap, maka tinggal memasukkan file linkbox.php pada template blog Anda. Anda dapat menyisipkannya di mana pun Anda mau, bisa di sidebar, header, atau footer. Cara memasukkan file tersebut cukup dengan menyisipkan script berikut ini.

<?php include(TEMPLATEPATH . '/linkbox.php'); ?>

Dah, beres kan?! sekarang tinggal dilihat tampilannya, kalo kurang cocok silahkan ubah style.css sesuai keinginan Anda. Dengan begitu, Anda tidak perlu takut kehabisan tempat buat banyak link atau blogroll. Jadi, silahkan bertukar link sebanyak-banyaknya dengan kawan-kawan Anda.

Semoga tips ini bermanfaat, kalo ada bugs atau tambahan usulan, silahkan ditulis di komentar ya… 🙂