Tips Blog ini saya copy paste dari blog-nya http://kolom-tutorial.blogspot.com untuk belajar sendiri jika suatu hari saya lupa caranya. Makasih Kang Roman...
Apa itu Blogroll?
Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita.
Bagi para sobat yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat.
Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain :
Blogroll dengan marquee
yang paling banyak di gunakan oleh para blogger 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://motorcycle-free.blogspot.com" target="_blank">Motorcycle</a>
<br/><br/>
<a href="http://hardware-free.blogspot.com" target="_blank">Hardware</a>
<br/><br/>
<a href="http://free-beauty-free.blogspot.com" target="_blank">Beauty</a>
<br/><br/>
<a href="http://free-investing.blogspot.com" target="_blank">Investing</a>
<br/><br/>
<a href="http://gift-free.blogspot.com" target="_blank">Gifts</a>
<br/><br/>
</marquee>
Maka nanti yang akan tampil pada blog kita adalah seperti ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >
<a href="http://motorcycle-free.blogspot.com" target="_blank">Motorcycle</a>
<br/><br/>
<a href="http://hardware-free.blogspot.com" target="_blank">Hardware</a>
<br/><br/>
<a href="http://free-beauty-free.blogspot.com" target="_blank">Beauty</a>
<br/><br/>
<a href="http://free-investing.blogspot.com" target="_blank">Investing</a>
<br/><br/>
<a href="http://gift-free.blogspot.com" target="_blank">Gifts</a>
<br/><br/>
</marquee>
Sedikit clue biar agak jelas. 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="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://motorcycle-free.blogspot.com" target="_blank">Motorcycle</a>
<br/><br/>
<a href="http://hardware-free.blogspot.com" target="_blank">Hardware</a>
<br/><br/>
<a href="http://free-beauty-free.blogspot.com" target="_blank">Beauty</a>
<br/><br/>
<a href="http://free-investing.blogspot.com" target="_blank">Investing</a>
<br/><br/>
<a href="http://gift-free.blogspot.com" target="_blank">Gifts</a>
<br/><br/>
</marquee>
</td>
</tr>
</table>
Maka hasilnya akan seperti di bawah ini :
<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://motorcycle-free.blogspot.com target="_blank">Motorcycle</a>
<br/><br/>
<a href="http://hardware-free.blogspot.com target="_blank">Hardware</a>
<br/><br/>
<a href="http://free-beauty-free.blogspot.com” target="_blank">Beauty</a>
<br/><br/>
<a href="http://free-investing.blogspot.com" target="_blank">Investing</a>
<br/><br/>
<a href="http://gift-free.blogspot.com" target="_blank">Gifts</a>
<br/><br/>
</marquee>
</td>
</tr>
</table>
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://motorcycle-free.blogspot.com">Motorcycle</option>
<option value="http://hardware-free.blogspot.com">Hardware</option>
<option value="http://free-beauty-free.blogspot.com">Beauty</option>
<option value="http://free-investing.blogspot.com">Investing</option>
<option value="http://gift-free.blogspot.com">Gifts</option>
</select>
</form>
Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Blogroll - </option>
<option value="http://motorcycle-free.blogspot.com>Motorcycle</option>
<option value="http://hardware-free.blogspot.com>Hardware</option>
<option value="http://free-beauty-free.blogspot.com">Beauty</option>
<option value="http://free-investing.blogspot.com">Investing</option>
<option value="http://gift-free.blogspot.com">Gifts</option>
</select>
</form>
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://motorcycle-free.blogspot.com">Motorcycle</option>
<option value="http://hardware-free.blogspot.com">Hardware</option>
<option value="http://free-beauty-free.blogspot.com">Beauty</option>
<option value="http://free-investing.blogspot.com">Investing</option>
<option value="http://gift-free.blogspot.com" target="_blank">Gifts</option>
</select>
</form> </div>
Hasilnya akan seperti ini :
<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="MotorcycleMotorcyclehttp://motorcycle-free.blogspot.com>Motorcycle</option>
<option value="http://hardware-free.blogspot.com>Hardware</option>
<option value="http://free-beauty-free.blogspot.com">Beauty</option>
<option value="http://free-investing.blogspot.com">Investing</option>
<option value="http://gift-free.blogspot.com" target="_blank">Gifts</option>
</select>
</form> </div>
Sedikit clue, 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".
Semoga Bermanfaat…
Masukkan Nama Dan Email Anda Untuk Mendapatkan Kedua Ebook Super Di Atas:
0 komentar:
Post a Comment