Manajemen Link di Blog Anda

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 :D . 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 :D

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? :D

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? :D

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 :

-== my FRIEND’s ==-
Friend 1
Friend 2
Friend 3
Friend 4
Friend 5
Friend 6
Friend 7
Friend 8
Friend 9
Friend 10


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 :D

Matur suwun pada Om Cahyo untuk konsultasi javascriptnya :D

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 :P

   Read in another language :   by Google Translate

Related Posts

52 Responses to “Manajemen Link di Blog Anda”


  1. 1 Danu

    blogroll tmn saya masih dikit mas,
    ntar de klo dah bejibun,
    tak pake tips nya mas…

  2. 2 Sandi

    @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 :D

  3. 3 @del

    Idenya bagus sekali…napa ga kepikiran yah *dasarnya memang telmi*? aku kembangkan idenya di blogku gpp ya mas?

    Semoga manfaat pak, ada artikel lanjutan tuh yg baru saya posting manajemen link khusus buat pengguna wordpress (blogroll). silahkan dicoba
  4. 4 Nur Wadik

    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.

    Iya mas, sebenarnya link kembar dua itu yang pertama buat jump ke URL tujuan, sedangkan yang satu agar SEO friendly. Untuk pewarnaan silahkan atur sendiri pak. Untuk warna dasarnya (BACKGROUND-COLOR) silahkan ganti kode warna pada style CSS nya, begitu juga untuk warna hurufnya (COLOR), dan yang lainnya
  5. 5 pixelman

    ok juga trik nya

    Semoga manfaat :)
  6. 6 nirzanova

    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??

    gk bs errornya apa mas? Kl bikin blog bagus gmn ya? Emang blog ini bgs ya? Hehe. Bagus apanya,lemot iya
  7. 7 hakimtea

    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 :)

    iya mas percaya :D , nyontek jg gpp kok hehe
  8. 8 Jingga

    hehehehe……….sepertinya today udah bisa dipraktekkan nih

    * menyeringai kaya’ devil *

    hehe ok deh, semoga sukses :D
    Date Answer : Rabu, 02 Juli 2008 13:48:40
  9. 9 Manik

    Mo nanya. pak :D

    Untuk kategori “Menggunakan MARQUEE”

    blogrollnya koq cuma sampe 10 link aja yah yg kliatan berjalan??
    saya sudah coba, namun tetap saja cuma 10 yg berjalan…
    masalahnya blogroll di tempat saya lumayan banyak :D dan dibagi menjadi 4 kategori

    makasih sebelumnya ;)

    wah saya blm pernah error kayak begini nih mas. coba saya dikirimi script lengkapnya yang error tadi, via email ya. ntar saya terawang dulu scriptnya, thx :)
    dijawab pada : Minggu, 10 Agustus 2008 23:55:19
  10. 10 Awan_cLIcK3rz

    benar2 inform yg beguna..

    trima kasih n’ salam persaHabatan buat sEmua nya fren2 …

    :: cHao ::

    makasih, dan salam persahabatan juga buat semua :)
    dijawab pada : Jum’at, 16 Agustus 2008 04:09:14
  11. 11 Shugoshin

    Wah, infonya berguna, tp saya blum ada blogroll, mulai kepiiran nih.

    ya kudu ada blogroll donk mas, namanya juga blog hehe. saya titip atu ya :D
    dijawab pada : Jum’at, 05 September 2008 13:05:24
  12. 12 hartono

    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

    wah kl mo customize gitu di blogspot/wordpress saya belum tahu caranya mas. tapi kl website biasa ya sangat bisa. ada beberapa cara. bisa pakai frameset atau include file. tapi sebelum kita lanjut saya harus tahu dulu masnya pakai blog atau static/dinamic website :)
    dijawab pada : Sabtu, 25 Oktober 2008 21:44:36
  13. 13 jovie

    aku paling suka yang terakhir….

  14. 14 dawiecool

    aduh..
    ini dia yang saya cari2..
    makasih ya mas…
    saya mau nge tes script nya dulu di blog saya..

  15. 15 Wisata SEO Sadau

    waduh,,,ternyata blogroll bisa di macem2in…hmmmm….

  16. 16 agung

    saya masukin link-link yang saya temuin di postingan saya, contohnya link diatas. blog tipis.web.id juga ada, saya temuin bareng yang lain :)

  17. 17 feto

    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…

  18. 18 NurAd1K

    wah caranya banyak bener.., saya juga punya satu cara yang baik,, dan menghemat waktu. dengan mengedit tampilan dari daftar link standar punya blogger.

  19. 19 Batu

    info bagus..
    kapan2 bakalan saya coba ni..

  20. 20 Power Wheels Zone

    kunjunganku hari ini

  21. 21 berbagi

    makasigh tipsna

  22. 22 hatiku

    Harus banyak belajar bahasa html neh… thanks for share

  23. 23 goal 2010

    kayana ribet, tapi pas dicobain mah biasa aja ..hehe..

  24. 24 Tamesha Mccaman

    gigantic journal you land

  25. 25 jojo

    thanks tips dan tutorialnya…

  26. 26 Berbagi Berbagai Hal

    kalo ini sih udah ane pake dari dulu..:D

  27. 27 Makhasin

    ngudi kaweruh mas, trims infonya memang lagi cari yang beginian

  28. 28 Mana

    Menggunakan List Box, blog jadi lebih rapi.

  29. 29 Kawasan Industri Banten

    saya lebih suka pakai yang tag DIY, karena lebih kelihatan rapih dan mudah mengaturnya.

    btw thanks ya mas

  30. 30 sumcara

    wah ini postingan keberapa ya? saya lihat tahun 2008 di tanggalnya, saya baru aja mulai belajar. tak kejar ya,,, mau?

  31. 31 angelica

    tipsnya laris manis.. menambh pengetahuan saya lagi nh.. massih harus banyak belajar Script.. :) thnks info menariknya.. lam kenal gan..

  32. 32 dog tags

    dog tags

  33. 33 Ariyanto

    wah bagus banget pilihannnya kalo pake marque jadi kelihatan lebih dinamis enak di pandang juga,, makasih artikelnya :-)

  34. 34 Pedi

    wah saya lagi kesusahan ngatur link di artikel ne mas, kalo dipake di dalam postingan bisa juga to

  35. 35 KSR Pekalongan

    wah terima kasih atas infonya, salam hangat,, ;-)

  36. 36 bisnis direktori

    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!

  37. 37 Vionetpalu.com

    Terima kasih atas informasi yang sangat bermanfaat. salam kenal

  38. 38 film terbaru

    mantab infonya gan,,, langsung dipraktekan

  39. 39 online dating sites free trials

    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

  40. 40 Membongkar Informasi

    ane coba ya…

  41. 41 hartono
  42. 42 neurovector organic brainwave synchronizer

    If you would like to improve your familiarity only keep visiting this website and be updated
    with the newest information posted here.

    My webpage; neurovector organic brainwave synchronizer

  43. 43 cheap Oakley Eyepatch

    Manajemen Link di Blog Anda at tipi[S]ipit - Blogging Life

  44. 44 budowa instalacji gazowych lpg

    Terrific article! This is the type of info that should be shared around the web.
    Disgrace on Google for no longer positioning this publish upper!
    Come on over and seek advice from my website . Thank you =)

  45. 45 www.youtube.com

    My family all the time say that I am wasting my time here at web, however I know I
    am getting know-how every day by reading thes pleasant posts.

    Feel free to visit my page :: assisted living chicago (http://www.youtube.com)

  46. 46 Cara Bikin Blog gratis

    Makasih sob atas infonya.
    Sangat bermanfaat banget.

  47. 47 Alat bantu sex wanita

    info nya sangat bermanfaat sekali buat pemula seperti ane..

  48. 48 Itupoker.com Agen Poker Online

    Ane coba dulu gan, kelihatannya maknyous……

  49. 49 bambang

    haloo,…ini website emang keren, jadi banyak tahu tentang Internet dan seluk beluknya, terimakasih atas informasi di web ini, jadi banyak tahu nih,

    also visit my site at http://www.eurasianinfoleague.info

  50. 50 ahmat hasim

    artikel is good sangan membantu bagi kaum pelajar seperti saya

  51. 51 Shashi

    I will tell Sogee. And, yes, we both know we have friends. I was just going along with the doom and gloom. I like doing that.”I am so dseresped.”"So am I.”"I think I’ll be like this forever.”"I don’t think it’ll end for either of us.”"Yeah.”"Want to go sledding?”"That sounds like fun.”

  52. 52 direfulray5269.soup.io

    Hi excellent blog! Doees running a blog similar too this require a large amount of
    work? I hage absolutel no expertise in computer programming but I
    was hoping tto start my own blog in tthe near future.

    Anyhow, if you have any recommendations or tips for new blog ownrs please share.

    I know tthis is off topic however I simply haad to ask.
    Many thanks!

  1. 1 akhirnya bisa bikin ini !!! - scarlett journey
Dengan memasukkan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari TIPIS.WEB.ID di inbox anda:

Leave a Reply







peliculas online