Salah satu cara alternatif untuk menaruh link yang berjumlah banyak agar tidak terlalu nampak memanjang ke bawah alternatif jalan keluarnya yaitu dengan menggunakan Blogroll. Sebenarnya cara ini sudah umum digunakan,tetapi tidak ada salahnya untuk membantu para sobat yang baru belajar bikin blog untuk sama-sama belajar di sini.
Ada beberapa macam bentuk Blogroll yang digunakan oleh para Blogger diantaranya:
Blogroll dengan marquee biasanya paling banyak di gunakan oleh para blogger untuk menghemat space pada blog.
Contoh membuat blogroll dengan perintah marquee :
Ada beberapa macam bentuk Blogroll yang digunakan oleh para Blogger diantaranya:
- Blogroll dengan marquee
Blogroll dengan marquee biasanya paling banyak di gunakan oleh para blogger untuk menghemat space pada blog.
Contoh membuat blogroll dengan perintah marquee :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >
<a href="http://pribumiblogs.blogspot.com/2010/02/blog-bahasa-inggris-atau-indonesia.html "> Blog B. Inggris Atau B. Indonesia ? </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/panduan-membuat-blog-di-blogspot.html "> Panduan membuat blog di blogspot </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/cara-setting-blog-di-blogspot.html "> Cara setting blog di blogspot </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/cara-posting-artikel.html "> Cara posting artikel </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/menyisipkan-gambar-ke-dalam-posting.html "> sisipkan gambar kedalam posting </a>
<br/>
</marquee> Maka nanti yang akan tampil pada blog kita adalah seperti ini :
Kode diatas tidak baku 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="50%" 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://pribumiblogs.blogspot.com/2010/02/blog-bahasa-inggris-atau-indonesia.html "> Blog B. Inggris Atau B. Indonesia ? </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/panduan-membuat-blog-di-blogspot.html "> Panduan membuat blog di blogspot </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/cara-setting-blog-di-blogspot.html "> Cara setting blog di blogspot </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/cara-posting-artikel.html "> Cara posting artikel </a>
<br/>
<a href="http://pribumiblogs.blogspot.com/2010/02/menyisipkan-gambar-ke-dalam-posting.html "> sisipkan gambar kedalam posting </a>
<br/>
</marquee>
</td>
</tr>
</table> Maka nanti yang akan tampil pada blog kita adalah seperti ini :
- 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://pribumiblogs.blogspot.com/2010/02/blog-bahasa-inggris-atau-indonesia.html "> Blog B. Inggris Atau B. Indonesia ? </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/panduan-membuat-blog-di-blogspot.html "> Panduan membuat blog di blogspot </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/cara-setting-blog-di-blogspot.html "> Cara setting blog di blogspot </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/cara-posting-artikel.html "> Cara posting artikel </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/menyisipkan-gambar-ke-dalam-posting.html "> sisipkan gambar kedalam posting </option>
</select>
</form> Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :
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">--Blog-Tutorial--</option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/blog-bahasa-inggris-atau-indonesia.html "> Blog B. Inggris Atau B. Indonesia ? </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/panduan-membuat-blog-di-blogspot.html "> Panduan membuat blog di blogspot </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/cara-setting-blog-di-blogspot.html "> Cara setting blog di blogspot </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/cara-posting-artikel.html "> Cara posting artikel </option>
<option value=" http://pribumiblogs.blogspot.com/2010/02/menyisipkan-gambar-ke-dalam-posting.html "> sisipkan gambar kedalam posting </option>
</select>
</form> </div> Hasilnya akan seperti ini :
Blogroll
Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian dulu yah, untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara memasukan kode HTML di atas pada blog milik sobat, silahkan Klik di sini. Selamat mencoba !
Komentar :
Post a Comment