Tutorial Blog : Menampilkan blogroll model scroll

Saya kembali menuliskan tentang tutorial blog, ada beberapa email dan komentar yang menanyakan bagaimana membuat blogroll seperti yang saya punya. Sebenarnya kalo teman-teman search di google pasti mendapatkan juga tutorialnya. Namun ada beberapa minta dikirim lewat email, nah daripada mengirimkan email setiap ada yang bertanya, saya langsung buat postingannya aja. OK.

Box link atau blogroll model scroll untuk lebih menghemat penggunaan sidebar apalagi jika memiliki tautan yang banyak, sehingga perlu disederhanakan misalnya dengan bentuk scroll seperti yang saya gunakan. Membuat box link di sidebar di samping seperti berikut :

caranya gampang, bagi pengguna wordpress baik yang wordpress.com atau yang berengine wordpress (domain sendiri), bisa langsung menuju design (desain) >> widget .

Kemudian add (tambah) text (teks) menjadi salah satu bagian dari sidebar anda. Silahkan edit text tersebut dan masukkan kode-kode berikut :

<div style=”background-color:white;border:2px solid #cccccc;overflow:auto;height:200px;width:200px;”>
:: <a href=”http://die4pleasure.com/”>’K</a&gt;
<br> :: <a href=”http://abeeayang.wordpress.com/”>abeeayang&trade; </a>
</br><br> :: <a href=”http://meetabied.wordpress.com/”>abied</a&gt;
</br><br> :: <a href=”http://praditya.net/”>adit</a&gt;
</br><br> :: <a href=”http://buayaganteng.wordpress.com/”>adit TC’05</a>
</br></div>

intinya ada di :

<div style=”background-color:white;border:2px solid #cccccc;overflow:auto;height:200px;width:200px;”></div>

di divnya ini silahkan dimodifikasi sesuai kebutuhan anda, dari warna (background-color) ukuran garis tepi (border), scrollnya, maupun dari ukuran kotaknya (height dan width).

Kategori

Untuk menambahkan judul dari blogroll/box link kita bisa menambahkan di atas link-link kita yang satu kategori dengan code berikut :

<div style=”background-color:#D0D0D0;text-align:left;”>
<b>INSTITUSI</b></div>

Bagi pengguna blogspot, lebih mudahkan, tinggal memasukkan code tersebut di edit htmlnya 🙂 Saya ndak perlu jelaskan banyak-banyak, saya rasa dengan melihat code-codenya anda-anda udah bisa memahaminya 🙂

Demikian penjelasan saya, semoga bermanfaat 🙂

UPDATE :

kalau teman-teman kesulitan mencopy langsung code, silahkan diganti tanda petik duanya dulu dari ” menjadi ” .

NB :

  • tutorial ini bagi yang belum tau, sekedar berbagi ilmu 🙂
  • terima kasih buat blog teman2 yang saya jadikan contoh 😀 hehehe

Tutorial Blog :

Diterbitkan oleh aRuL

blogger, netizen, engineer wanna be, sometimes as a trainer, and maybe a consultant for anything

80 tanggapan untuk “Tutorial Blog : Menampilkan blogroll model scroll

  1. Makasih mas…. Kemarin saya coba liat dengan view page sources, bisa ternyata 🙂 tapi dengan penjelasan ini, jadi semakin jelas. Hatur nuhun…. 🙂

  2. # mahma mahendra : ok 🙂
    # 2 Gelandangan : ok. sama2 🙂
    # 3 theunordinaryworld : ok, semoga bisa yah 🙂
    # 4 Abeeayang™ : heheh sama2 terimakasihnya 🙂
    # 5 kucluk : ok bro 🙂
    # 6 Anang : mantap apane?
    # 7 Nazieb : emang berbahaya yah pake kode HTML yakz? mm baru tau…
    # 8 Dhimas : ok, terima kasih 😉
    # 9 ario saja : terima kasih 🙂
    # 10 Tony : bisa koq… bisa banget, tapi detilnya sy ndak tau 😀
    # 11 gajah_pesing :ok, sama2 🙂

  3. mas di blog saya kok ga bisa ya??
    udah nyoba berkali-kali tapi keluarnya bukan yang bentuk scroll

    kodenya ini kan?? blogrollnya

    tapi setiap saya save kode sisanya cuma blogrollnya aja

    kira-kira salah dimana ya??
    mohon bantuannya mas 😀

  4. # 13 ma2nn-smile : ok, sama2
    # 14 Ersis Warmansyah Abbas : terima kasih pak
    # 15 Oemar Bakrie : saya sudah nulis diblog pak grandis
    # 16 Ersis Warmansyah Abbas : terima kasih pak, koq double? :mrgreen:
    # 17 sawali tuhusetya : ok pak, iyah pak sawalikan pernah pake, udah buat halaman sendiri yakz 😀
    # 18 agunk agriiza : ok silahkan
    # 19 Bayu Aditya : ok mas
    # 20 pnsgila : silahkan mas… yah itu sih tergantung kita mas
    # 21 samsul : ok sama2
    # 22 Anggara : sama2 pak
    # 23 Fachia : ok2,
    # 24 Muda Bentara : silahkan
    # 25 FaNZ : ok, silahkan
    # 26 Farid Yuniar : ok silahkan
    # 27 kita : ok2
    # 28 zoel : ok deh 😀
    # 29 Epat : thx yah
    # 30 dantyka : itu saya sudah jelaskan di update, tulis ulang tanda petiknya
    # 31 dantyka : ok2 ngerti koq 😉
    # 32 agunk agriiza : saya sudah update gung, silahkan dicoba 😉

  5. # 34 xero : iyap benar banget 🙂
    # 35 Nazieb : oalah kirain mudah dihack.. hahahaha 😀
    # 36 pinkyangga : ok2 pinky sukses juga di sana 🙂
    # 37 Artha : ok2 sama2 🙂
    # 38 ndop : namanya berbagi ndop 😛

  6. k, kalau mau yang “Read more” gimana? beberapa waktu lalu dapet infonya dari site orang, tapi koq ak dah coba2 tapi belum berhasil juga… bisa bantu, kak?

    trims b4… salam..

  7. lapor mas!!
    sudah saya coba berkali-kali, tapi ga sukses mas

    ternyata kode ini

    tidak mau nge_ savechange, setelah di savechage kode tersebut hilang.
    kenapa mas ya?
    apakah kode tersebut tidak sesuai dengan theme wordpress saya ya?

    hasil sementaranya bisa sampeyan lihat di blog saya. sisi kanan paling bawah sendiri…

    maaf ngrepotin mas.
    terimakasih.

  8. siang mas?…saya mau numpang belajar ya mas?oya mas saya nyoba ngikutin Tutorial Blog : Menampilkan blogroll model scroll koq gk bs ya?alamat yang muncul malah alamat saya dan alamat yang dituju seperti ini mas ” http://www.cyberministry-online.co.cc/http://asruldinazis.worldpress.com ” sehingga gk bs ke buka alamat yg sy tuju wkt pk blogroll model scroll?mohon petunjuknya ya mas?thanks…salam kenal n minta ijin ya blog nya saya link ke tmpt sy?GBU

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 )

Foto Google

You are commenting using your Google 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 )

Connecting to %s

%d blogger menyukai ini: