Baca lewat email biar asik ->
author

Artikel ini ditulis oleh : Putu Hadi

Putu Hadi adalah Blogger dan Penulis penyuka Android. Follow saya di Twitter, artikel ini bermanfaat buat kamu? jangan lupa tinggalkan komentar ya...


Senin, 05 Januari 2009

Membuat link agar tampak rapi


Modar modar modar, kuliah sibuk banget, ditambah seringnya rapat English club, tugas numpuk, kecele banget nih lookj. Bisa-bisa 2 atau 3 minggu ke depan blog ga update dan gak keurus. Mana pikiran udah sumpek mampet kaya got-got di Jakarta, kehabisan ide buat mosting tutorial. Tapi lookj akan berjuang mempertahankan eksistensi blog ini di jagat perbloggeran, cayo!!. Belakangan ini banyak yang nanya, udah sampai lebih dari 3 kali ada pertanyaan yang sama, pertanyaannya intinya begini "Lookj, gimana sih buat link yang rapi seperti link di atas shoutmix blog ini?". Bloggers teman-teman seperjuangan atau yang baru punya blog, itu sebenarnya pake HTML sederhana yang bikinnya super duper manual. Lookj bukannya gak ngasi tahu tetapi emang itu dasarnya dibuat dari HTML yang culun punya dan mungkin tidak lebih susah dari membuat email domain sendiri ataupun tidak lebih terkenal dari forum friendster prostitusi. Tetapi gak apa-apalah, lookj jelasin aja deh daripada ngebahas pertarungan blogger yang gak henti karena adanya blogger nyeleneh.


Mengapa lookj sebut HTML dasar? ya memang dasar banget ni HTMLnya, sebenarnya di blog Kang Rohman udah dijelasin kok cuman mungkin sobat blogger belum nyoba ngemodif dikit-dikit. Untuk membuat deretan link posting rekomendasi seperti punya lookj itu dibuat manual. Link tersebut juga bukan hanya dipakai untuk posting rekomendasi melainkan juga dipakai link-link tertentu yaitu link teman-teman blogger misalnya. Inilah script sederhana yang dipakai, hanya ditambahin garis minus ( - ) yang diketik berulang kali


<center><div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
<div align="justify">
1. <a href="link">Nama link</a><br/>
-----------------------------------------------------------------------<br/>
2. <a href="link2 ">Nama link2</a><br/>
-----------------------------------------------------------------------<br/>
3. <a href="link">Nama link3</a><br/>
-----------------------------------------------------------------------<br/>
4. <a href="link2">Nama link4</a><br/>
-----------------------------------------------------------------------<br/>
5. <a href="link3">Nama link5</a><br/>
-----------------------------------------------------------------------<br/>
6. <a href="link4">Nama link6</a><br/>
-----------------------------------------------------------------------<br/>
7. <a href="link5">Nama link7</a><br/>
-----------------------------------------------------------------------<br/>
8. <a href="link6">Nama link8</a><br/>
-----------------------------------------------------------------------<br/>
9. <a href="link7">Nama link9</a><br/>
-----------------------------------------------------------------------<br/>
10. <a href="link8">Nama link10</a><br/>
-----------------------------------------------------------------------<br/>
11. <a href="link9">Nama link11</a><br/>
-----------------------------------------------------------------------<br/>
12. <a href="link10">Nama link12</a><br/>
-----------------------------------------------------------------------<br/>
13. <a href="link11">Nama link13</a><br/>
-----------------------------------------------------------------------<br/>
</div>
</div></center>



hasilnya adalah seperti ini:



1. Nama link
-----------------------------------------------------------------------
2. Nama link2
-----------------------------------------------------------------------
3. Nama link3
-----------------------------------------------------------------------
4. Nama link4
-----------------------------------------------------------------------
5. Nama link5
-----------------------------------------------------------------------
6. Nama link6
-----------------------------------------------------------------------
7. Nama link7
-----------------------------------------------------------------------
8. Nama link8
-----------------------------------------------------------------------
9. Nama link9
-----------------------------------------------------------------------
10. Nama link10
-----------------------------------------------------------------------
11. Nama link11
-----------------------------------------------------------------------
12. Nama link12
-----------------------------------------------------------------------
13. Nama link13
-----------------------------------------------------------------------



Untuk script ini perhatikan jumlah tanda ( - ) yang jumlahnya harus sama dan cocok dengan lebar box. Untuk mengubah lebar box dan tingginya maka anda bisa mengubah angka yang saya tandai warna merah pada script di atas. Terkadang juga saat mempaste di blogger jaraknya menjadi agak jauh tapi itu gak masalah, tinggal hilangin aja jarak antar linknya.

atau kalau pembatasnya ingin dipakai garis tegas yang gak putus putus bisa pakai yang ini:


<center><div style="border: 1px solid rgb(238, 238, 238); padding: 10px; overflow: auto; width: 300px; height: 200px;">
<div align="justify">
1. <a href="http://www.blogger.com/link">Nama link</a><hr />
2. <a href="http://www.blogger.com/link2">Nama link2</a><hr />
3. <a href="http://www.blogger.com/link3">Nama link3</a><hr />
4. <a href="http://www.blogger.com/link4">Nama link4</a><hr />
5. <a href="http://www.blogger.com/link5">Nama link5</a><hr />
6. <a href="http://www.blogger.com/link6">Nama link6</a><hr />
7. <a href="http://www.blogger.com/link7">Nama link7</a><hr />
8. <a href="http://www.blogger.com/link8">Nama link8</a><hr />
9. <a href="http://www.blogger.com/link9">Nama link9</a><hr />
10. <a href="http://www.blogger.com/link10">Nama link10</a><hr />
11. <a href="http://www.blogger.com/link11">Nama link11</a><hr />
12. <a href="http://www.blogger.com/link12">Nama link12</a><hr />
13. <a href="http://www.blogger.com/link13">Nama link13</a><hr />
</div>
</div></center>



Hasilnya jadi gini:



Kalau memakai garis yang tegas tadi maka anda tidak perlu memperhitungkan lebar box.

Bagaimana? sederhana banget kan tutorialnya? bagi yang udah expert jangan marah nih...kan belum tentu semua blogger udah bisa buat link yang rapi.

19 komentar:

  1. Boleh juga nih tutornya, tapi saya lagi banyak kerjaan jadi mls lagi deh otak-atik template dan sejenisnya..anyway good tutor. Keep posting Broo

    BalasHapus
  2. wah binggung

    biarkan diriku dengan kegaptekanku

    BalasHapus
  3. Naruhnya dibagian mana? terus buat menu drop downya gimana?

    BalasHapus
  4. Info bagus nie biar lunk gak makan tempat..ntar di praktekin deh..

    BalasHapus
  5. siip...matep bro..
    :D
    makasih tips nya..

    BalasHapus
  6. wadoh manual yak..satu satu dung...kalo pake link list aja gimana

    BalasHapus
  7. @Ches : iya sih ini lumayan menguras waktu banget
    @Gde :biasa aja bli
    @Suwung : mas suwung pura-pura gaptek nih
    @Erik : Adu lupa, itu di add widget mas
    @Achiles : iya tapi manual banget
    @Cebong : pake linklist bukannya manual juga masukkin linknya?

    BalasHapus
  8. Oh,..begono to...
    Sukses..

    BalasHapus
  9. Mantap Bos tips nya...sangat bermamfaat

    BalasHapus
  10. "Matur nuwun sanget mas, eco temenan ilmune mas. Mugi-mugi blog kang Lookj luwih apik."

    udah itu aja

    BalasHapus
  11. @Indung : iya begono
    @KlikDana : sama-sama
    @Star : mudah-mudahan bermanfaat
    @Iwa : uiks...bahasa apaan tuh ga ngetri

    BalasHapus
  12. keren nih.....brani nyoba nih...blogQ juga acak-acakan..heheheh..lumayan ada pencerahan

    BalasHapus
  13. infonya mantaaaaaab...

    sukses selalu yaa mas..

    BalasHapus
  14. waduh...rapi bener

    mau dong...makacih ya

    BalasHapus
  15. waw... makasih... info na...

    BalasHapus

Artikel ini berguna? jangan menjadi silent reader, saya akan selalu menjawab komentar

Ada 2 aturan berkomentar yaitu jangan asal komentar, jangan mengiklan, hargai penulis yang membuat artikel ya..terima kasih.