Membuat Blogroll

Jika para blogger belum mengerti apa itu blogroll, akan saya jelaskan terlebih dahulu. Blogroll ialah tool yang digunakan untuk menyimpan link blog dengan cara menghemat space.
Dalam tutorial blogroll ini, terdapat beberapa cara, yaitu :

Blogroll dengan marquee

Biasanya kebanyakan para blogger membuat blogroll dengan menggunakan perintah marque, karna bentuknya yang bisa membuat blog kita lebih bagus untuk di lihat.

Contoh membuat blogroll dengan perintah marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://learn-website.blogspot.com" target="_blank">Ichinx Warehouse</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/webmaster" target="_blank">Webmaster</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/blogging" target="_blank">Blogging</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/promosi-website" target="_blank">Promosi Website</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/tips-n-trick" target="_blank">Tips & Trick</a>
<br/><br/>

</marquee>



Maka nanti yang akan tampil pada blog kita adalah seperti ini :




Ichinx Warehouse



Webmaster



Blogging



Promosi Website



Tips & Trick







Kode diatas tidak harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .



Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://learn-website.blogspot.com" target="_blank">Ichinx Warehouse</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/webmaster" target="_blank">Webmaster</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/blogging" target="_blank">Blogging</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/promosi-website" target="_blank">Promosi Website</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/tips-n-trick" target="_blank">Tips & Trick</a>
<br/><br/>

</marquee>

</td>

</tr>

</table>


Maka hasilnya akan seperti di bawah ini :

Ichinx Warehouse Webmaster Blogging Promosi Website Tips & Trick

Blogroll dengan menu dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :


<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://learn-website.blogspot.com">Ichinx Warehouse</option>

<option value="http://learn-website.blogspot.com/search/label/webmaster">Webmaster</option>

<option value="http://learn-website.blogspot.com/search/label/blogging">Blogging</option>

<option value="http://learn-website.blogspot.com/search/label/promosi-website">Promosi Website</option>

<option value="http://learn-website.blogspot.com/search/label/tips-n-trick">Tips & Trick</option>

</select>

</form>


Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :

- Blogroll - Ichinx WarehouseWebmasterBloggingPromosi WebsiteTips & Trick

Contoh variasi lainnya :


<h3> Blogroll </h3>

<div align="left">

<select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--Teman-temanku--</option>

<option value="http://learn-website.blogspot.com">Ichinx Warehouse</option>

<option value="http://learn-website.blogspot.com/search/label/webmaster">Webmaster</option>

<option value="http://learn-website.blogspot.com/search/label/blogging">Blogging</option>

<option value="http://learn-website.blogspot.com/search/label/promosi-website">Promosi Website</option>

<option value="http://learn-website.blogspot.com/search/label/tips-n-trick">Tips & Trick</option>

</select>

</form> </div>


Hasilnya akan seperti ini :

Blogroll

--Teman-temanku--Ichinx WarehouseWebmasterBloggingPromosi WebsiteTips & Trick

Kata left yang berada pada kode <div align="left"> menunjukan bahwa menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata "center" atau "right".

Selamat mencoba ! ! !