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, mampus deh, 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 terdapat 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
Aku sih 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://www.blogkomputers.blogspot.com/" title="Kursus-Komputers">[ Administrator ]</a><br/><div/>
<div
align="left"><span style="font-weight: bold; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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; ">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/>
Keterangan:
- Tulisan berwarna merah merupakan informasi mengenai blog mu right - Tulisan Weight dan height merupakan tinggi kotak bloggoll mu
- Tulisan Link1,Link2,Link3 merupakan URL yang akan dituju
- Tulisan Link#1,Link#2,Link#3 merupakan tampilan pada kotak blogroll
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......
Rabu, 16 September 2009
Membuat Kotak Blogroll
0 komentar:
Posting Komentar