Membuat Kotak Blogroll

Anda pasti tau dengan Link,itu sebuah kata kunci yang menghubungkan Blog kita dengan Blog yang lain,tapi apa jadi nya ya kalau link itu udah berjumlah jutaan, mampusdeh , tentu link tersebut lebih mendominasi blog kita,jadi nya pengunjung blog hanya melihat kumpulan link-link tersebut yang mungkin panjangnya kayak gedung pencakat langit,hal ini dapat menyebabkan blog kita melorot, trus gimana dong trik untuk mengakalinya,
Tenang saja kali ini aku akan ngejelasin trik untuk menangkalnya

Untuk trik kali ini ada empat macam kotak blogroll yang akan kita buat,jadi terserah kamu mau pilih kotak Bloroll yang mana:
1. Kotak Blogroll Model Textarea

Contohnya saja seperti kotak blogroll seperti punyaku itu, itu yang terdapa ribuan link didalamnya
Nah begini cara membuatnya :
Pertama Log in ke accunt blogger mu lalu Pasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 300px; height: 200px; text-align: center; "> #link1 <br /> #link2 <br /> #link3 <br /> #link4 <br /> #link </div>

keterangan:
- Kode widht: 300px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu dapat merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Trus ganti tulisan "#link1,#link2, #link3, #link4 dst" dengan daftar link-link kamu, - Jika kamu pingin daftar link-linknya berjajar, maka kamu hilangkan saja kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar. Link-link atau isi didalam kotak ini akan bergerak/berjalan, secara vertikal ataupun secara horizontal.
Jika kamu ingin membuatnya begini caranya membuatnya:
Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="300" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" > #link1 <br /> #link2 <br /> #link3 <br /> #link4 <br /> #dst </marquee>

Keterangan :
- Kode "up" menunjukan arah pergerakan, kamu bisa menggantinya dengan yang lain seperti down, left, right - Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "300" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll mu.

3. Kotak Blogroll Model Abjact

Akusih ngak tau Model kotak Blogroll nya(aku kasih aja Model Abjact,maaf ya) soal nya Link-link yang terdapat di kotak di ini disusun berurutan abjat(A-Z).tentu ini akan mempermudah pencarian terhadap suatu link,kamu ngak sabar ya ingin membuatnya Oke deh gini cara membuatnya

Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<center> <table border="3" cellpadding="5" width="300" height="200"/> <tr> <td> <div style="overflow: auto; height: 200px; width: 300px;"> <div align="center"><a href="http://melq-nge.blogspot.com//" title="NgeBlog">[ Administrator ]</a><br/><div/> <div align="left"><span style="font-weight: bold; color: red; font-size: 110%;">A</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <a href="Link4" title="">link#4</a><br/> <a href="Etc�" title="">link#5</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">B</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">C</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">D</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">E</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">F</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">G</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">H</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">I</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">J</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">K</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">L</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">M</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">N</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">O</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">P</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">Q</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">R</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">S</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">T</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 125%;">U</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">V</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">W</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">X</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">Y</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">Z</span><br/> <a href="Link1" title="">link#1</a><br/> <a href="Link2" title="">link#2</a><br/> <a href="Link3" title="">link#3</a><br/> <br/> <span style="font-weight: bold; color: red; font-size: 110%;">Non Alphabet</span><br/> <a href="" title="title">link#1</a><br/> <a href="" title="title">link#2</a><br/> <a href="" title="title">link#3</a><br/> <br/> </div></div></div></div></td> </tr> </table> <center/>

4. Kotak Blogroll Model Dropdown

Anda semua pasti telah tau dengan dropdown,tapi kalau belum tau,mari kita belajar lagi, ada salah satu fasilitas blogger yang menggunakan menu dropdown(Archive),yaitu menu yang berjajar dari atas ke bawah,cara ini tentu lebih menguntungkan,karna seberapa banyakpun link dapat ditampung dalam menu dropdown ini,dan tidak memakan tempat yang besar pada blog anda

Udah, kita tidak usah basa-basi lagi, sekarang bagaimana membuat menu dropdown yang didalamnya terdapat link-link,untuk membuatnya silahkan aja copy code dibawah ini

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu> <option>- Link Friends -</option> <option value="http://blogkomputers.blogspot.com">Blog komputers</option> <option value="http://arif-m.blogspot.com ">Arif</option> <option value="http://blogscommunity.blogspot.com">Handaka</option> <option value="http://andi-arifin.blogspot.com ">andi-arifin</option> <option value="http://minangkabaublogger.blogspot.com ">Romi</option> <option value="http://riska-robianto.blogspot.com ">BBB</option> <option value="http://kolom-tutorial.blogspot.com ">kang rohman</option> <option value="http://trik-tips.blogspot.com ">trik blog</option> <option value="http://seputarinfokomputer.blogspot.com "> blog bang uul</option> </select></form>

OK SELAMAT MENCOBA......