Membuat blogroll diwordpress.com

Cara membuat Blogroll disidebar pada wordpress.com

1. Masuk ke [Menu] [Tulisan] -> [Tambahkan baru] lalu klik Mode HTML.

2. Copy – Paste code dibawah ini kedalam mode HTML tadi,

<div style="overflow: auto; width: 220px; height: 175px; background-attachment: scroll; background-image: url('http://alamat gambar yang anda inginkan.jpg'); border: 0 solid #0000ff; padding: 5px; border: 2px solid #0000ff;">

Masukkan Nama Link Sahabat Anda Disini

</div>

Sehingga hasilnya seperti ini :

Keterangan :

  • width: 220px  = adalah lebar dari area blogroll, dapat disesuaikan dengan lebar sidebar Anda.
  • height: 175px = adalah tinggi area blogroll, ini juga dapat Anda sesuaikan dengan keinginan Anda.
  • background-image: url('http://alamat gambar yang anda inginkan.jpg') = adalah gambar yang dapat anda tambahkan di belakang nama-nama blog sahabat Anda. (support format : jpg, png dan gif animasi)
  • border: 2px  = besar garis pinggir
  • solid #0000ff  = warna garais

3. Kembali ke Mode Visual, maka Anda dapat melihat hasilnya seperti gambar berikut :

Masukkan Nama Link Sahabat Anda Disini

4. Selanjutnya Anda dapat menghapus tulisan “Masukkan Nama Link Sahabat Anda Disini” dengan nama Link Sahabat yang Anda inginkan. Misalnya “Irfan Handi – Hanya Ingin Berbagi“, blok nama link tersebut lalu klik tombol insert/edit link, atau dengan menekan (alt + Shift + A)tampak pada gambar dibawah.

maka akan muncul pop up seperti dibawah ini.

5. Masukkan alamat link blog misalnya http://irfanhandi.wordpress.com/. Centang Open link in a new window/tab untuk membuka di halaman baru atau biarkan saja untuk membuka di halaman yang sama, jangan lupa klik tombol Tambahkan Tautan, maka hasilnya akan terlihat seperti berikut :

Nah, Anda sudah berhasil membuat blogrollnya, sekarang Anda tinggal mengisi nama-nama blog sahabat yang ingin Anda ajak untuk bertukar link.

Sedikit saya tambahkan untuk menambahkan link selanjutnya yaitu dengan menekan enter pada akhir nama blog dan silahkan lakukan cara yang sama seperti cara diatas, misalnya :

Dengan menambahkan blog baru maka secara otomatis scroll yang kita inginkan akan muncul, seperti yang terlihat pada contoh berikut :

Perlu diperhatikan :

Agar hasilnya tersusun kebawah tambahkan kode <div> didepan link dan diakhiri dengan kode </div> seperti contoh dibawah ini :

<div style="overflow: auto; width: 220px; height: 175px; background-attachment: scroll; background-image: url('http://alamat gambar yang anda inginkan.jpg'); border: 0 solid #0000ff; padding: 5px; border: 2px solid #0000ff;">

<div><a href="http://irfanhandi.wordpress.com/" target="_blank">Irfan Handi - Hanya Ingin Berbagi</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>

<div><a href="http://blogteman.wordpress.com/" target="_blank">Blog Teman yang lain</a></div>
</div>

Tinggal Finishingnya, yaitu untuk memunculkannya disidebar.

Caranya, Silahkan buka Menu [Tampilan] klik [Widget] dan cari Widget Teks, lalu klik sambil tahan dan geser ke sidebar blog Anda.

Kembali ke halaman blogroll yang Anda buat tadi dan masuk ke Mode HTML, blok semua kode tersebut atau dapat juga dengan menekan (CTRL + A) lalu copy (CTRL + C) dan pastekan (CTRL + V) pada Widget Teks yang telah Anda buat tadi dan jangan lupa Simpan.

Selesai.

Refresh Halaman Blog Anda dan Lihat Hasilnya.

About tamarkaryadi

Iam Manchunian

Posted on December 8, 2012, in Ngeblog. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: