Buat anda yang punya banyak teman, atau yang hobinya tukar menukar link, dan daftar linknya sudah sangat banyak dan mengganggu pemandangan blog kita, berikut ada beberapa cara untuk mengatur link agar tidak banyak mengambil tempat di sidebar blog anda.
Mungkin banyak teman² yang sudah tahu tips ini, kan cuma standart HTML, jadi kategori tips ini adalah Beginner 
. Cara dibawah ini bisa diterapkan pada Blogger, Wordpress atau yang lainnya karena standart HTML dan CSS. Kita ambil contoh untuk Blogger dan Wordpress saja ya. Sedikit kerja manual gpp kan
Menggunakan List Box
Silahkan tambahkan script berikut ini dimanapun anda mau (sidebar, footer, dll)
<!--Simple CSS Style for List Box by Sandi (http://tipis.web.id)-->
<style>
.link-select {
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
WIDTH : 150px;
COLOR: #2277DD;
FONT-FAMILY: "trebuchet ms";
BACKGROUND-COLOR: #FFFFCC;
}
</style>
Ket :
Script CSS diatas berfungsi untuk mempercantik tampilan List Box, silahkan modifikasi sendiri bisa kan?
Kemudian lanjutkan dengan menambahkan HTML Script dibawah ini
<!--Simple HTML List Box for Manage Links by Sandi (http://tipis.web.id)-->
<select onchange="if (this.value!='') window.open(this.value,'_blank')" class=link-select>
<OPTION value="" selected>my FRIEND's</OPTION>
<OPTION value="http://friend1.com/"><a href="http://friend1.com/">Friend 1</a></OPTION>
<OPTION value="http://friend2.com/"><a href="http://friend2.com/">Friend 2</a></OPTION>
<OPTION value="http://friend3.com/"><a href="http://friend3.com/">Friend 3</a></OPTION>
<OPTION value="http://friend4.com/"><a href="http://friend4.com/">Friend 4</a></OPTION>
<OPTION value="http://friend5.com/"><a href="http://friend5.com/">Friend 5</a></OPTION>
<OPTION value="http://friend6.com/"><a href="http://friend6.com/">Friend 6</a></OPTION>
<OPTION value="http://friend7.com/"><a href="http://friend7.com/">Friend 7</a></OPTION>
<OPTION value="http://friend8.com/"><a href="http://friend8.com/">Friend 8</a></OPTION>
<OPTION value="http://friend9.com/"><a href="http://friend9.com/">Friend 9</a></OPTION>
<OPTION value="http://friend10.com/"><a href="http://friend10.com/">Friend 10</a></OPTION>
</select>
Ket :
Silahkan edit satu² linknya dengan URL dan nama teman anda. Apabila anda ingin menambahkan GROUP baru, COPY dua kali HTML script diatas, kemudian ganti keterangan dan URL serta namanya.
Hasilnya kira² seperti ini :
Menggunakan MARQUEE
Silahkan tambahkan script berikut ini dimanapun anda mau (sidebar, footer, dll)
<!--Simple CSS Style for Marquee by Sandi (http://tipis.web.id)-->
<style>
.link-marquee {
WIDTH: 160px;
HEIGHT: 200px;
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #2277DD;
FONT-FAMILY: "trebuchet ms";
BACKGROUND-COLOR: #FFFFCC;
BORDER: 1px solid black;
TEXT-ALIGN: center;
}
</style>
Ket :
Script CSS diatas berfungsi untuk mempercantik tampilan Marquee, silahkan modifikasi sendiri bisa kan?
Kemudian lanjutkan dengan menambahkan HTML Script dibawah ini :
<!--Simple HTML MARQUEE for Manage Links by Sandi (http://tipis.web.id)-->
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" class=link-marquee>
<p>
-== my FRIEND's ==-<br/>
<a href="http://Friend1.com" target="_blank">Friend 1</a><br/>
<a href="http://Friend2.com" target="_blank">Friend 2</a><br/>
<a href="http://Friend3.com" target="_blank">Friend 3</a><br/>
<a href="http://Friend4.com" target="_blank">Friend 4</a><br/>
<a href="http://Friend5.com" target="_blank">Friend 5</a><br/>
<a href="http://Friend6.com" target="_blank">Friend 6</a><br/>
<a href="http://Friend7.com" target="_blank">Friend 7</a><br/>
<a href="http://Friend8.com" target="_blank">Friend 8</a><br/>
<a href="http://Friend9.com" target="_blank">Friend 9</a><br/>
<a href="http://Friend10.com" target="_blank">Friend 10</a>
</p>
</marquee>
Ket :
Jika ingin tulisan link berjalan dari atas kebawah ganti direction menjadi DOWN (sebelumnya UP).
Silahkan edit satu² linknya dengan URL dan nama teman anda. Apabila anda ingin menambahkan GROUP baru, COPY dua kali HTML script diatas mulai tag <p> sampai </p>, PASTE persis dibawah tag </p>, kemudian ganti keterangan dan URL serta namanya.
Hasilnya kira² seperti ini :
Menggunakan tag DIV
Silahkan tambahkan HTML script berikut ini dimanapun anda mau (sidebar, footer, dll) :
<div style="overflow: auto; width: 160px; height: 200px; border:1px solid #336699; align:center; background-color:#FFFFCC;">
<p>
<ul>
<li><a href="http://Friend1.com" target="_blank">Friend 1</a></li>
<li><a href="http://Friend2.com" target="_blank">Friend 2</a></li>
<li><a href="http://Friend3.com" target="_blank">Friend 3</a></li>
<li><a href="http://Friend4.com" target="_blank">Friend 4</a></li>
<li><a href="http://Friend5.com" target="_blank">Friend 5</a></li>
<li><a href="http://Friend6.com" target="_blank">Friend 6</a></li>
<li><a href="http://Friend7.com" target="_blank">Friend 7</a></li>
<li><a href="http://Friend8.com" target="_blank">Friend 8</a></li>
<li><a href="http://Friend9.com" target="_blank">Friend 9</a></li>
<li><a href="http://Friend10.com" target="_blank">Friend 10</a></li>
<li><a href="http://Friend11.com" target="_blank">Friend 11</a></li>
<li><a href="http://Friend12.com" target="_blank">Friend 12</a></li>
<li><a href="http://Friend13.com" target="_blank">Friend 13</a></li>
<li><a href="http://Friend14.com" target="_blank">Friend 14</a></li>
<li><a href="http://Friend15.com" target="_blank">Friend 15</a></li>
<li><a href="http://Friend16.com" target="_blank">Friend 16</a></li>
<li><a href="http://Friend17.com" target="_blank">Friend 17</a></li>
<li><a href="http://Friend18.com" target="_blank">Friend 18</a></li>
<li><a href="http://Friend19.com" target="_blank">Friend 19</a></li>
<li><a href="http://Friend20.com" target="_blank">Friend 20</a></li>
</ul>
</p>
</div>Ket:
Untuk ukuran panjang (height) dan lebar (width) silahkan atur sendiri sesuaikan dengan desain blog anda. Begitu juga pewarnaannya.
Hasilnya kira² seperti ini :
Selamat mencoba dan semoga bermanfaat
Matur suwun pada Om Cahyo untuk konsultasi javascriptnya
Nb:
Script diatas sudah SEO friendly, karena menggunakan kode HTML biasa, tanpa JavaScript, adapun JavaScriptnya hanya untuk memanggil window baru saja
Untuk cara manajemen link khusus buat wordpress (langsung ambil dari Blogroll), penjelasannya ntar ya, soalnya kan kudu pakek query dulu 
blogroll tmn saya masih dikit mas,
ntar de klo dah bejibun,
tak pake tips nya mas…
@Danu : blogroll saya jg masih dikit kok, cuman pernah nemuin blog yg linknya buanyuaaaaak (lupa URLnya), satu sisi sidebar habis kegusus blogroll. thx dah mo mampir
Idenya bagus sekali…napa ga kepikiran yah *dasarnya memang telmi*? aku kembangkan idenya di blogku gpp ya mas?
Aku udah coba ni, dan berhasil, ship. Tapi ada persoalan sedikit apakah yang diganti itu setiap ada tulisan friend-nya, soalnya kan ada dua tempat dengan tulisan sama. Itu pertama, kedua, bagaimana dengan warna. Soalnya aku kan ngopi aja di atas. Tapi bagaimana kalau mau ganti warna. Bisa liat aku punya dong! dua blogku yang dia atas dan di http://konflik-keluarga.blogspot.com. Ma kasih ya untuk masukannya.
ok juga trik nya
aduh,saya kok ga bisa ya. saya benar2 baru belajar nge blog, bahasa pemrograman juga ga ngerti.saya pengen bisa bikin blog bagus.gmn ya??
Waaaah bener2 ampir sama cuma yg disini lebih yahud… tapi suer deh aku ga nyontek lho, is pure ilmu hitam yang aku dapat akhir tahun lalu cuma lupa lagi dari mana tersimpan di notepad kompi… heuheu. Tapi disini memang lebih mantab tutorialnya mas. Sukses selalu
hehehehe……….sepertinya today udah bisa dipraktekkan nih
* menyeringai kaya’ devil *
Mo nanya. pak
Untuk kategori “Menggunakan MARQUEE”
blogrollnya koq cuma sampe 10 link aja yah yg kliatan berjalan??
dan dibagi menjadi 4 kategori
saya sudah coba, namun tetap saja cuma 10 yg berjalan…
masalahnya blogroll di tempat saya lumayan banyak
makasih sebelumnya
benar2 inform yg beguna..
trima kasih n’ salam persaHabatan buat sEmua nya fren2 …
:: cHao ::
Wah, infonya berguna, tp saya blum ada blogroll, mulai kepiiran nih.
Hi , saya mau Tanya nih. Bagaimana cara bikin menu kolom 1 berisi isi menu
Kolom ke 2 tentang contentnya.jadi seperti ini :
Menu Resep Masakan
Ayam
Daging
Ikan
Chinesse food
Sea food
Soto
Minuman dll
Dan kolom ke 2 tentang isinya. Jadi jika saya klik sea food maka kolom ke 2 akan berisi macam2 resep2 masakan seafood , kalo di klik Soto akan keluar di kolom 2 resep2 masakan soto dst.
Dan saya upload template sendiri dengan 3 kolom. Jadi bukan bawaan dari blogger.
Sehingga tidak ada label dan linknya/listnya. Jadi bagaimana cara membuat halaman per halamannya.dan cara postingnya Tolong bantuannya jika ada yang bisa silahkan kirim ke email saya hartsut@yahoo.com thanks my all friends
aku paling suka yang terakhir….
aduh..
ini dia yang saya cari2..
makasih ya mas…
saya mau nge tes script nya dulu di blog saya..
waduh,,,ternyata blogroll bisa di macem2in…hmmmm….
saya masukin link-link yang saya temuin di postingan saya, contohnya link diatas. blog tipis.web.id juga ada, saya temuin bareng yang lain
waaahhhhh bener banget nih artikel bagus dan memang saya lagi butuh kodingnya untuk blog saya…maklum link dah kebanyakan di blog…^_^
terima kasih infonya, silakan mampir yaa ke sini dan jika mau artikel menarik lainnya silakan berkunjung ke sini yaaa…
wah caranya banyak bener.., saya juga punya satu cara yang baik,, dan menghemat waktu. dengan mengedit tampilan dari daftar link standar punya blogger.
info bagus..
kapan2 bakalan saya coba ni..
kunjunganku hari ini
makasigh tipsna
Harus banyak belajar bahasa html neh… thanks for share
kayana ribet, tapi pas dicobain mah biasa aja ..hehe..
gigantic journal you land
thanks tips dan tutorialnya…
kalo ini sih udah ane pake dari dulu..:D
ngudi kaweruh mas, trims infonya memang lagi cari yang beginian
Menggunakan List Box, blog jadi lebih rapi.
saya lebih suka pakai yang tag DIY, karena lebih kelihatan rapih dan mudah mengaturnya.
btw thanks ya mas
wah ini postingan keberapa ya? saya lihat tahun 2008 di tanggalnya, saya baru aja mulai belajar. tak kejar ya,,, mau?
tipsnya laris manis.. menambh pengetahuan saya lagi nh.. massih harus banyak belajar Script..
thnks info menariknya.. lam kenal gan..
dog tags
wah bagus banget pilihannnya kalo pake marque jadi kelihatan lebih dinamis enak di pandang juga,, makasih artikelnya
wah saya lagi kesusahan ngatur link di artikel ne mas, kalo dipake di dalam postingan bisa juga to
wah terima kasih atas infonya, salam hangat,,
magnificent publish, very informative. I’m wondering why the opposite specialists of this sector don’t realize this.
You should proceed your writing. I am confident, you have a great
readers’ base already!
Terima kasih atas informasi yang sangat bermanfaat. salam kenal
mantab infonya gan,,, langsung dipraktekan
Excellent points, but with reference to selecting out search phrases to go as well as your “single” and
“interested in” demos; how many keywords and phrases would you
consider you typically contain inside a marketing campaign like the
kinds you confer with?
My blog post - online dating sites free trials