Sabtu, 13 Desember 2008

Blogroll Alternatif

Baiklah para kawan semua, dalam kesempatan ini saya akan membicarakan tentang yang namanya Blogroll.

Apa itu Blogroll?

Blogroll atau di sebut juga Link Exchange atau kata orang2 sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita.

Apa manfaat dari blogroll?

Mungkin kawan bepikir bahwa memasang link orang lain pada blog kawan dapat mempengaruhi pengunjung kawan karena memberikan kesempatan untuk meninggalkan blog kawan, tetapi itu tidak sepenuhnya benar karena blogroll juga memiliki fungsi sebagai penghemat ruang sidebar dan tempat mempererat silaturahmi pada teman peblogger. Itulah salah satu manfaat blogroll.

# Blogroll dengan marquee


yang paling banyak di gunakan oleh para peblogger untuk menghemat space pada blog adalah dengan menggunakan perintah marquee.

Contoh membuat blogroll dengan perintah marquee :

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

<a href="http://corpita95.blogspot.com/" target="_blank">corpi</a>



<a href="http://syarung.webs.com/" target="_blank">Apa Adanya</a>



<a href="http://tutorial95.wordpress.com/" target="_blank">free Blog Template</a>



<a href="http://niki-blog-kulo.blogspot.com/" target="_blank">jawa</a>



<a href="http://niki-blog-kulo2.blogspot.com/" target="_blank">indo</a>




</marquee>



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



corpi



Apa Adanya



free Blog Template



jawa



indo





Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan kawan. 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 pariasi lain, yaitu dengan memakai tabel, contoh :

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

<tbody><tr>

<td align="left">

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

<a href="http://corpita95.blogspot.com/" target="_blank">Opty</a>



<a href="http://corpita95.blogspot.com/search/label/Menghiasi%20Blog" target="_blank">Menghiasi Blog</a>



<a href="http://tutorial95.wordpress.com/" target="_blank">Tutorial WordPress</a>



<a href="http://corpita95.blogspot.com/2008/12/bagi-para-kawan-yang-baru-membuat-blog.html" target="_blank">Daftar MyBlogLog</a>



<a href="http://syarung.webs.com/" target="_blank">Islamic</a>




</marquee>

</td>

</tr>

</tbody></table>







Maka hasilnya akan seperti di bawah ini :














Opty



Menghiasi Blog



Tutorial WordPress



Daftar MyBlogLog



Islamic













# 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://corpita95.blogspot.com">Opty</option>

<option value="http://syarung.webs.com">Me</option>

<option value="http://niki-blog-kulo.blogspot.com">Sugeng Rawuh</option>

<option value="http://tutorial95.wordpress.com">WordPress</option>

<option value="http://blogger.com/">Blogger</option>

</select>

</form>


Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :













Contoh pariasi 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://corpita95.blogspot.com">Corpi</option>

<option value="http://tutorial95.wordpress.com">WordPress</option>

<option value="http://syarung.webs.com">Webs</option>

<option value="http://info-rizki.blogspot.com">Info</option>

<option value="http://niki-blog-kulo.blogspot.com/" target="_blank">Jawa</option>

</select>

</form> </div>



Hasilnya akan seperti ini :



Blogroll













Sedikit tambahan, kata left yang berada pada kode
menunjukan bahwa menu ini akan di simpan di sebelah kiri, jika mau di ubah tinggal ganti saja dengan kata "center" atau "right".


Memasukkan kode tersebut cukup dimasukkan ke kode html javascript.

Sekian tutorial ini babaida...dah......sengihnampakgigi:ngacir:

Tidak ada komentar:

Posting Komentar

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger