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://copy-copy-copy.blogspot.com
2. http://hackerbpd.blogspot.com
3. http://xtkj2cmuahacker.blogspot.com
4. http://aas111.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" target="_blank">Rubrik Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu" 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" target="_blank">Rubrik Elektronik</a>
&nbsp;
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
&nbsp;
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
&nbsp;
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
&nbsp;
<a href="http://amen24.googlepages.com/koded%27treemenu" 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" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" 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" target="_blank">Abu Amin</a>
&nbsp;&nbsp;
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
&nbsp;&nbsp;

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

<b>:::C:::</b>
&nbsp;&nbsp;
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
&nbsp;&nbsp;
<a href="http://catatanpojok.blogspot.com" 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><< A >></b>
<br/>
&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

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

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


Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<< B >>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok


Untuk arah horizontal :

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

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

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


Hasilnya akan seperti ini :

<< A >>   • Abu Amin    • Adryy-fx    << B >>   • Belati    • Benhard Journey    << C >>   • 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 :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

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

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

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" 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" width="10" hight="10" border="0">&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" 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 :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

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" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>
&nbsp;&nbsp;
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" 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.

Membuat Penggalan Artikel

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya cuma hiks.... hiks masih dikit yang mau klik iklan aku tapi ga apa-apa berarti belum rezekinya (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?


Maka kode yang kita buat adalah sebagai berikut :


<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>

Kode tersebut hasilnya akan seperti ini :


Electronic Shopping

---

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

---

Biar lebih faham, sedikit saya uraikan :

<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.


Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

Sign in di blogger dengan id sobat

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

Cari kode seperti di bawah ini :

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :


<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
<hr width="100%" align="left">
<br/>
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Klik tombol Preview untuk melihat perubahan yang baru di lakukan

Apabila sudah OK, klik tombol save Template Changes

Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.


Untuk template baru :

Sign In di blogger dengan id sobat

Klik menu Layout

Klik menu Page Elements

Klik Add a Page Element

Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

Copy paste kode penggalan artikel yang telah kita buat tadi

Klik tombol SAVE CHANGES

Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

Bila sudah OK, klik tombol SAVE

Selesai.

Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !