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 ๐Ÿ˜€ . 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 :

-== 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 ๐Ÿ˜€

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 ๐Ÿ˜›

61 Comments

  1. Danu March 19, 2008 Reply
  2. Sandi March 20, 2008 Reply
  3. @del March 24, 2008 Reply
  4. Nur Wadik April 10, 2008 Reply
  5. pixelman April 21, 2008 Reply
  6. nirzanova May 14, 2008 Reply
  7. hakimtea May 29, 2008 Reply
  8. Jingga July 1, 2008 Reply
  9. Manik August 10, 2008 Reply
  10. Awan_cLIcK3rz August 15, 2008 Reply
  11. Shugoshin September 5, 2008 Reply
  12. hartono October 23, 2008 Reply
  13. jovie January 4, 2009 Reply
  14. dawiecool January 14, 2009 Reply
  15. Wisata SEO Sadau May 30, 2009 Reply
  16. agung June 1, 2009 Reply
  17. feto December 29, 2009 Reply
  18. NurAd1K February 26, 2010 Reply
  19. Batu August 15, 2010 Reply
  20. Power Wheels Zone September 4, 2010 Reply
  21. berbagi October 8, 2010 Reply
  22. hatiku October 8, 2010 Reply
  23. goal 2010 October 8, 2010 Reply
  24. Tamesha Mccaman November 1, 2010 Reply
  25. jojo November 14, 2010 Reply
  26. Berbagi Berbagai Hal August 16, 2011 Reply
  27. Makhasin October 18, 2011 Reply
  28. Mana October 29, 2011 Reply
  29. Kawasan Industri Banten November 14, 2011 Reply
  30. sumcara December 18, 2011 Reply
  31. angelica February 4, 2012 Reply
  32. dog tags June 25, 2012 Reply
  33. Ariyanto October 13, 2012 Reply
  34. Pedi October 13, 2012 Reply
  35. KSR Pekalongan October 13, 2012 Reply
  36. bisnis direktori November 25, 2012 Reply
  37. Vionetpalu.com March 4, 2013 Reply
  38. film terbaru April 6, 2013 Reply
  39. www.youtube.com September 25, 2013 Reply
  40. Cara Bikin Blog gratis October 20, 2013 Reply
  41. Alat bantu sex wanita November 1, 2013 Reply
  42. bambang February 27, 2014 Reply
  43. ahmat hasim July 9, 2014 Reply
  44. Shashi July 11, 2014 Reply
  45. Tips Kecantikan Alami September 10, 2014 Reply
  46. septic tank biotech November 11, 2014 Reply
  47. biotech indonesia November 11, 2014 Reply
  48. stp biotech November 11, 2014 Reply
  49. Negro February 21, 2015 Reply
  50. Silvia March 2, 2015 Reply
  51. jual obat bius June 6, 2015 Reply

Add a Comment

Your email address will not be published. Required fields are marked *