Laman

▼

Cara Membuat Kotak Link Teman

Artikel kali ini kita akan membahas cara membuat kotak banner untuk link teman, sekalian untuk menjawab pertanyaan dari pengunjung yang menanyakan cara membuat kotak link teman agar terlihat rapi. Sebetulnya cara membuat kotak link teman ini banyak variasinya, yang tentunya disesuaikan dengan selera rekan-rekan. kita disini hanya membahas beberapa contoh saja :

I. Menggunakan Efek Scrollbar
Contoh :


Untuk model seperti di atas kita tinggal copy paste kan kode script berikut :

<div style="overflow:auto; width:50px; height:80px; padding:10px; border:1px solid #999999;">
<li><a Kode link teman </a></li>
<li><a Kode link teman </a></li>
</div>

Kita dapat mengatur panjangnya (height), lebarnya (width), maupun warnanya disesuaikan dengan keinginan kita.
Untuk kode link teman, kita dapat memasukkan kode banner link blog teman kita, atau kita dapat menuliskan url blognya saja :

<a href="https://alamat blog teman" target=" blank"/>nama blog teman</a>

Contoh bentuk lainnya :



Untuk model seperti di atas kita tinggal copy paste kan kode script berikut :

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 80px; text-align: center;">
<br />(A)<br />
<a href="https://alamat blog teman/" target="_blank">nama blog teman</a><br />
<br />(B)<br />
a href="https://alamat blog teman/" target="_blank">nama blog teman</a><br />
</div>


II. Menggunakan Efek Marquee

Contoh :


* Chyardi Blog

* Chyardi's Blog

* Chyardi Blog

* Chyardi's Blog

Untuk model seperti di atas kita tinggal copy paste kan kode script berikut :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="100%" height="80%">
* <a href="https://chyardi.blogspot.com/" target="_blank">Chyardi Blog</a>
* <a href="https://chyardi.blogspot.com/" target="_blank"><img alt="Chyardi's Blog" src="https://images.cooltext.com/1292839.gif" width="90" border="0" height="15" /></a>
</marquee>

Disini kita juga dapat mengatur panjangnya (height), lebarnya (width), maupun mengubah kode direction-nya "up" (arah pergerakkan teks/link), kita dapat merubahnya menjadi "down", "right", atau "left", sesuaikan dengan keinginan kita.
Untuk alamat link-nya, kita dapat memasukkan kode banner link blog teman kita, atau kita dapat menuliskan url blognya saja, lihat seperti contoh di atas.

Semoga bermanfaat.

31 komentar:

  1. Bagas Abdillah FauziOktober 22, 2010 6:57 PM

    sip deh mas chyardi, tukeran link ma ane ya mas....

    BLOGWALKING

    BalasHapus
  2. I Wayan PartikaOktober 28, 2010 3:59 PM

    thank mas, ats infonya. tukeran link ya, linknya mas udh ku pasang di blogku.
    lihat di http://phartyca.co.cc

    BalasHapus
  3. Adit Edogawa IbanezDesember 22, 2010 12:58 PM

    thx infonya mas. Tukeran link mas.
    mas udah saya pasang linknya di blog saya

    chek di
    http://aditedogawaibanez.blogspot.com/

    BalasHapus
  4. pulsa elektrik murahJanuari 07, 2011 1:11 PM

    tq infonya,klo untuk mengatur agar tersusun sesuai abjab carany gimana ya

    BalasHapus
  5. UnknownFebruari 24, 2011 9:39 PM

    info bagus mas.blogwalking n follow back n tukeran link juga ya mas.makasih sblmnya

    BalasHapus
  6. Rafless bencoolenFebruari 27, 2011 1:17 AM

    kebetulan banget gan lagi nyaari info ginian. . . kayaknya emang bagus yang dalam bentuk scroll.... nice info gan....

    BalasHapus
  7. UnknownMaret 30, 2011 10:58 PM

    gag.
    link kamu da ku pasang, gantian pasang link ku.

    liadt ja di http://www.mynotescul.co.cc

    BalasHapus
  8. Mr.PassMaret 31, 2011 10:56 AM

    siip banged,, mas tukaran link mas ya... udah saya pasang link`a di blog saya www.misterpas.blogspot.com

    BalasHapus
  9. Mr.pasMaret 31, 2011 10:57 AM

    siip,, mas tukaran link`a yaa
    udah sy pasang link`a di blog saya... thank`s info`a berguna banged

    BalasHapus
  10. wageApril 19, 2011 10:56 PM

    makasih ilmu nya mas..sangat berguna sekali...
    salam kenal..

    BalasHapus
  11. zuhriMei 15, 2011 11:48 PM

    mantep mas, tukaran link ya. saya sudah pasang linknya di blog saya. thanks

    BalasHapus
  12. Community Anime Lover's { C.A.L }Juli 03, 2011 2:36 AM

    tnx bett bang ilmunya .. :D

    bang tukeran link yaaa...
    link abang udh sya pasang di blog saiia :D

    BalasHapus
  13. DindikonlineSeptember 11, 2011 9:33 AM

    Terima kasih ya pak...

    BalasHapus
  14. UnknownOktober 26, 2011 2:53 AM

    makasih ya mas sama ilmunya

    BalasHapus
  15. UnknownOktober 27, 2011 12:48 AM

    link nya udah saya pasang di blog aku ni

    BalasHapus
  16. AjiNovember 02, 2011 4:38 PM

    Mantap Neh Bos artikelnya.
    Ane Pasang Link-nya di: www.usahamesin.com

    BalasHapus
  17. Navy's blogDesember 21, 2011 11:25 AM

    keren banget..., thank ya atas infonya, mampir ke blog saya juga mas...
    sekalian tukerin link...sipppp????

    BalasHapus
  18. ArnesJanuari 22, 2012 2:57 PM

    Mantap mas tutornya, tukaran link denganku mas.. aku tunggu ya... salam kenal wassalam

    BalasHapus
  19. chyardiJanuari 24, 2012 3:14 PM

    Terima kasih mas Arnes atas kunjungannya, mengenai tukar link dengan senang hati mas Arnes, sebelumnya silahkan dipasang terlebih dahulu link Blog Chyardi (http://chyardi.blogspot.com), insyaAlloh saya akan segera memasang link blog mas Arnes...
    Salam :)

    BalasHapus
  20. fandriydbFebruari 02, 2012 7:17 PM

    Nice inpo gan..
    Langsung coba ah..

    BalasHapus
  21. Irfan StudentFebruari 07, 2012 5:34 AM

    makasih gan infonya

    BalasHapus
  22. Muhammad NoviyantoMaret 12, 2012 6:03 PM

    link ane jg ya gan.... ane jg udh link blog ini ke blog ane..... n thanks infonya

    BalasHapus
  23. Agriculture ProductMaret 26, 2012 11:04 PM

    langsung saya coba kang,makasih tipsny.

    BalasHapus
  24. Oto BiazzaApril 14, 2012 8:02 AM

    Terlalu membantu
    thank gan

    kunjungi blog saya
    mungkin bermanfaat

    otobiazza.blogspot.com

    BalasHapus
  25. Al-FathcomJuni 01, 2012 11:56 PM

    ini yang saya cari bang
    terima kasih atas tutorialnya tapi kalao boleh tanya maaf saya masih newbie buatnya ini dimana bang di edit HTML apa di addwidget ??? maaf atas pertanyaan saya ini yang masih katrok masalah blog

    BalasHapus
  26. ChyardiJuni 05, 2012 1:08 PM

    Salam kenal Mas Arif Sam, terima kasih sudah berkenan berkunjung ke Blog Chyardi, mengenai membuat Kotak Link Teman, bagi pengguna Blogspot.com :
    - setelah Login/Masuk kita akan masuk ke Dashboard;
    - Dibagian sisi sebelah kiri, kita pilih Menu Tata Letak (posisinya dibawah Menu Statistik);
    - Setelah masuk Menu Tata Letak, kita klik Tambah Gadget, lalu scroll kebawah pilih HTML/JAVASCRIPT kemudian klik tanda + ;
    - Nanti kita akan masuk ke Menu Mengonfigurasi HTML/JAVASCRIPT, disini kita bisa isi Judul-nya jika mau, misalnya kita isi Judulnya LINK TEMAN,

    Nah pada bagian KONTEN disini kita bisa copy paste kode script di atas, terserah apakah akan menggunakan Efek Scrollbar, Efek Marquee, dll
    Tetapi yang perlu diperhatikan jangan lupa atur lebar dan tinggi kotak sesuaikan dengan lebar sidebar blog kita, sesuaikan lagi alamat link teman dan nama blognya, dan terakhir jika ingin diubah sesuaikan lagi kode warnanya dengan blog anda.
    - Setelah selesai klik SIMPAN;
    - Letakan HTML/JAVASCRIPT yang barusan kita buat, ditempat yang kita inginkan pada Blog kita;
    - Terakhir klik Simpan Setelan.
    - Selesai.

    BalasHapus
  27. UnknownAgustus 03, 2012 5:35 PM

    artikel yg bermanfaat bro....tukeran link ya....masih awam ni.......

    BalasHapus
  28. AnonimOktober 23, 2012 5:59 PM

    Mantap ni info nya bwt newbie.
    Thx gan
    Mampir gan

    BalasHapus
  29. UnknownNovember 29, 2013 4:07 PM

    makasih......

    BalasHapus
  30. AnonimJanuari 22, 2014 5:56 PM

    terima kasih postingannya gan,, salam kenal juga ya

    BalasHapus
  31. UnknownMaret 04, 2015 4:30 AM

    thank man . your great

    BalasHapus