Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat
link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

  1. http://rubrik-elektronik.blogspot.com
  2. http://www.rohman24.co.nr
  3. http://jaya-example.blogspot.com
  4. http://user-online.blogspot.com
  5. http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”>Rubrik Elektronik</a>

<br/>

<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”>Free blog template</a>

<br/>

<a href=”http://jaya-example.blogspot.com&#8221; target=”_blank”>Rotating banner blog</a>

<br/>

<a href=”http://user-online.blogspot.com&#8221; target=”_blank”>User Online status</a>

<br/>

<a href=”http://amen24.googlepages.com/koded%27treemenu&#8221; target=”_blank”>Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik


Free blog template


Rotating banner blog


User Online status


Kode menu d tree

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan
link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau
<br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”>Rubrik Elektronik</a>

&nbsp;

<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”>Free blog template</a>

&nbsp;

<a href=”http://jaya-example.blogspot.com&#8221; target=”_blank”>Rotating banner blog</a>

&nbsp;

<a href=”http://user-online.blogspot.com&#8221; target=”_blank”>User Online status</a>

&nbsp;

<a href=”http://amen24.googlepages.com/koded%27treemenu&#8221; target=”_blank”>Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik
 
Free blog template
 
Rotating banner blog
 
User Online status
 
Kode menu d tree

kode &nbsp; yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode &nbsp; adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal &nbsp;&nbsp; , atau &nbsp;&nbsp;&nbsp; , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

  1. http://sncepuspiritualsciencequantum.blogspot.com –> Abu Amin
  2. http://adry-fx.blogspot.com –> Adryy-fx
  3. http://belati.blogspot.com –> Belati
  4. http://benhardleroy.blogspot.com –> Benhard Journey
  5. http://melileagroup.blogspot.com –> Capunk
  6. http://catatanpojok.blogspot.com –> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
<br/>
<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
<br/>
<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
<br/>
<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::

Abu Amin

Adryy-fx

:::B:::

Belati

Benhard Journey

:::C:::

Capunk

Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

<b>:::A:::</b>
&nbsp;&nbsp;
<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
&nbsp;&nbsp;
<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
&nbsp;&nbsp;

<b>:::B:::</b>
&nbsp;&nbsp;
<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
&nbsp;&nbsp;
<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
&nbsp;&nbsp;

<b>:::C:::</b>
&nbsp;&nbsp;
<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
&nbsp;&nbsp;
<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A:::
  
Abu Amin
  
Adryy-fx
  

:::B:::
  
Belati
  
Benhard Journey
  

:::C:::
  
Capunk
  
Catatan pojok

Pemakaian tag <b>…</b> adalah agar karakter yang ada diantara
tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa
yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat
lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><></b>
<br/>
&bull;&nbsp;<a href=”
http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
<br/>
&bull;&nbsp;<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
<br/><br/>

<b><></b>
<br/>
&bull;&nbsp;<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
<br/>
&bull;&nbsp;<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
<br/><br/>

<b><></b>
<br/>
&bull;&nbsp;<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
<br/>
&bull;&nbsp;<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Maka hasilnya akan seperti ini :

<>

• 
Abu Amin

• Adryy-fx

<>

• Belati

• Benhard Journey

<>

• Capunk

• Catatan pojok

Untuk arah horizontal :

<b><></b>
&nbsp;
&bull;&nbsp;<a href=”
http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://adry-fx.blogspot.com&#8221; target=”_blank”>Adryy-fx</a>
&nbsp;&nbsp;

<b><></b>
&nbsp;
&bull;&nbsp;<a href=”http://belati.blogspot.com&#8221; target=”_blank”>Belati</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://benhardleroy.blogspot.com&#8221; target=”_blank”>Benhard Journey</a>
&nbsp;&nbsp;

<b><></b>
&nbsp;
&bull;&nbsp;<a href=”http://melileagroup.blogspot.com&#8221; target=”_blank”>Capunk</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href=”http://catatanpojok.blogspot.com&#8221; target=”_blank”>Catatan pojok</a>

Hasilnya akan seperti ini :

<>
 
• 
Abu Amin
  
• Adryy-fx
  

<>
 
• Belati
  
• Benhard Journey
  

<>
 
• Capunk
  
• Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &bull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif”&gt;

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya
dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi
seperti ini :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif&#8221; width=”12″ hight=”12″ border=”0″>

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode &bull; diatas dengan kode ini :

misalkan :

<img src=”http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif&#8221; width=”10″ hight=”10″ border=”0″>&nbsp;<a href=”http://sncepuspiritualsciencequantum.blogspot.com&#8221; target=”_blank”>Abu Amin</a>

Maka hasilnya akan seperti ini :

 Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu,
silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode &nbsp; di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href=”http://rubrik-elektronik.blogspot.com&#8221; target=”_blank”><img src=”http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif&#8221; border=”0″></a>

&nbsp;&nbsp;

<a href=”http://www.rohman24.co.nr&#8221; target=”_blank”><img src=”http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif&#8221; border=”0″></a>

Hasilnya akan seperti ini :


  

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode &nbsp; agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi…sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

  1. Sig in di blogger dengan id sobat
  2. Klik menu Layout
  3. Klik menu Elemen Halaman
  4. Klik tulisan Tambahkan sebuah Elemen Halaman
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link
  6. Beri judul link yang sobat kehendaki. contoh : link temanku :
  7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia
  8. Klik tombol SIMPAN PERUBAHAN
  9. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
  10. Klik tombol SIMPAN
  11. Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Selamat mencoba !

25 Juni 2007 - Posted by | blog tutorial, membuat link

12 Komentar »

  1. 5 jam yah…ck..ck.. tengkyu bgt atas kebaikannya mas. Satu lagi nih kalo mau bikin menu diatas (spt yg sy mau) tapi didlmya ada bbrp link bgm yah? Sy sdh coba gabungkan dgn kode menu drop down links, tp gak sukses tuh :(. Oh iya tulisan &mnsp (bener gak?) kok nongol yah. eniwei byk2 trimakasih yah mas, smoga dibalas sm yg diatas

    Komentar oleh ati | 27 Juni 2007 | Balas

  2. mba Ati, kemungkinan mba memakai browser firefox. Yang benar adalah –>   , jika di lihat di IE tulisannya benar seperti itu, kalau di firefox munculnya &nbsp; yg di firefox salah mba. Untuk menu yg diatas. saya pake css , coba baca tentang membuat navigasi dengan css

    Komentar oleh rohman | 27 Juni 2007 | Balas

  3. he..he..kodenya malah ga muncul mba. coba deh mba lihat di IE pasti kodenya benar..saya juga baru nyadar nih…

    Komentar oleh rohman | 27 Juni 2007 | Balas

  4. Terima kasih sekali bang rohman! Sudah banyak ilmunya saya ambil! semoga berkah ya bang!

    Komentar oleh Rizki Eka Putra | 2 Oktober 2007 | Balas

  5. Lima jam memposting? I appreciate. Thank utk Anda yang bersedia berbagi ilmu. Nanti akan saya coba semua.

    Komentar oleh Jajank | 4 Oktober 2007 | Balas

  6. makasih banyak mass rohman…
    saya byk dpt ilmu nih disini…
    baru belajar ngeblog nih.

    Komentar oleh netaddict23 | 19 November 2007 | Balas

  7. lagi lagi…

    Komentar oleh ihsan | 29 November 2007 | Balas

  8. saya mau tanya, bagaimana cara buat link satu halaman semisal :
    http://www.achtar.blogspot.com/gallery
    mohon penjelasannya thx

    Komentar oleh attar | 12 Januari 2008 | Balas

  9. mas makasih banyak ilmunya banyak sekai saya gunakan dan ternya lebih baik otodidak seperti ini dari pada beli buku tapi kalau bisa mas nulis aja buku soalnya saya liat dipasaran belum ada yang membahas secara tuntas mengenai blogger…saya dukung mas dan saya orang yang pertama akan beli

    Komentar oleh Noval lahir 01-06-1984 di | 13 Januari 2008 | Balas

  10. Alhamdulillah…akhirnya kutemukan panduan membuat blog.. Terima kasih bang Rohman. Dua jempol tinggi2 buat Anda. 🙂 🙂

    Komentar oleh Oglex2003 | 31 Mei 2008 | Balas

  11. maaf kang rohman

    spasi nya ga berhasil

    mhn pencerahan

    T_Q

    Komentar oleh jaim | 16 Juni 2008 | Balas

  12. Buat blog di hostingsuper.com aja harganya murah bisa langsung install wordpress dsb.

    Komentar oleh hostingsuper | 20 Juni 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s