Bikin Blogroll Sederhana

Biasanya kita saling bertukar link dengan blogger yang lain atau juga dengan web Orang lain. Nah dari pada kita hanya mnampilkan secara amburadul atau model yang terlalu panajang sehingga memenuhi template, uh pastiu dipandang g indah bukan. Nah mungkin tutorial ini dapat membantu, meskipun ini sederhana namun cukup cantik bila dipasanng di blog kita. Manfaatnya juga agar tampilan lebih minimalis. Jadi jika kita memiliki Link yang cukup banyak tak kan jadi masalah.


Yuk kita pelajari :

---

• Blogroll Dengan Marquee
  
  
  <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="200">
<a href="http://blogachmad.blogspot.com" target="_blank">Free tutorial blogger</a>
<br/><br/>
<a href="http://www.blogachmad.co.cc" target="_blank">Catatan Achmad</a>
<br/><br/>
<a href="http://achmadsuryadi.blog2.plasa.com" target="_blank">Achmad's Blog</a>
<br/><br/>

</marquee>
  
  
  Hasilnya gini :
  
  
  Free tutorial blogger
  
  
  
  Catatan Achmad
  
  
  
  Achmad's Blog
  
  
  
  
  
  
  
  scrollamount="2" => angka "2" menunjukkan kecepatan, apabila ingin lebih cepat ganti aja dengan 3 berapapun yang anda suka.
  
  direction="down" => menunjukkan arah gerakannya kebawah, apabila ingin yang lain ganti aja dengan up, left, ataupun right
  
  width="50% => "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, anda bisa menggantinya dengan 30%, 100% atau berapapun yang anda inginkan.
  
  height="200" => "200" menunjukan tinggi dari marquee sebesar 200px, anda juga bisa menggantinya dengan berapapun yang anda inginkan.



• Blogroll dengan Drop down menu
  
  <form>

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

<option> - Blogroll - </option>

<option value="http://blogachmad.blogspot.com">Free tutorial blogger</option>

<option value="http://www.blogachmad.co.cc">Catatan Achmad</option>

<option value="http://achmadsuryadi.blog2.plasa.com">Achmad's Blog</option>

</select>

</form>
  
  Hasilnya begindang :
  
  
  
  
  - Blogroll - Free tutorial bloggerCatatan AchmadAchmad's Blog
  
  




• Blogroll Entah apa namanya :D
  
  <h3><div align="center"> Blogroll </div></h3>

<div align="center">

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

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

<option value="http://blogachmad.blogspot.com"/>Free tutorial blogger

<option value="http://118.98.212.211/forum"/>Forum ICT Purwodadi

<option value="http://www.blogachmad.co.cc"/>Catatan Achmad

<option value="http://118.98.212.211/pustakamaya"/>Pustaka Maya

<option value="http://achmadsuryadi.blog2.plasa.com"/>Achmad's Blog

<option value="http://smkn1-purwodadi.net"/>SMKN1 Purwodadi


</select>



  
  Hasilnya begini :
  
  

  Blogroll

  
  
  
  
  ^=^ Links & Friends ^=^Free tutorial bloggerForum ICT PurwodadiCatatan AchmadPustaka MayaAchmad's BlogSMKN1 Purwodadi
  
  



• Blogroll dengan Fieldset
  
  Sebenarnya yang ini sudah pernah saya post tapi apa salahnya diingatkan lagi hehehe :D yups .. oke.. nih langsung saja codenya :
  
  <div align="center">
<fieldset style="border:2px solid #A64E4E; width:120px; height:155px; -moz-border-radius:5px 5px 5px 5px">
<legend align="center"><font color="#A64E4E" size="3">
<b>Thanks to</b>
</font></legend>
<marquee direction="up" onmouseover="this.stop()" width="110" onmouseout="this.start()" scrollamount="3" height="100%">
<p align="center">


<br/><b> ALLAH SWT </b><br/><br/>
Orang Tua<br/>
Semua Kerabat<br/><br/>
<a href="http://bloggerkebumen.co.cc" target="_blank"><img border="0" width="150" src="http://1.bp.blogspot.com/_rxStNoQSYW0/R_yC-nrsRoI/AAAAAAAAADA/c98NPVYsyqA/s320/bloggerkebumen.gif" height="50"/></a><br/>
<a href="http://www.ripway.com" target="_blank"><img border="0" width="150" src="http://www.ripway.com/images/header_pt2.gif" height="35"/></a><br/>
<a href="http://trik-tips.blogspot.com" target="_blank"><img border="0" alt="Trik-Tips Blog" width="90" src="http://www.geocities.com/kendhin_x/banner-trik.gif" height="17"/></a><br/>
<a href="http://wynwira-tutorial.blogspot.com" target="_blank"><img border="0" src="http://wayanwirata.googlepages.com/MyButton2.gif"/></a><br/><br/>
<a href="http://tukeranlink.dagdigdug.com" target="_blank"><img border="0" alt="Banner Exchange" src="http://tukeranlink.dagdigdug.com/files/2008/03/button-tukeran-link.png" title="link Exchange"/></a><br/>
<a href="http://pernakpernikblog.blogspot.com" target="_blank"><img border="0" alt="Blog Tutorial" src="http://faniez.googlepages.com/blogsharing1.gif"/></a><br/>
<a href="http://thedayat.blogspot.com" target="_blank"><img border="0" alt="thedayat" src="http://de.sleepingchild.googlepages.com/85-21-IJOputihcoklat.gif"/></a><br/>
<a href="http://www.glitter-graphics.com" target="_blank"><img border="0" width="150" src="http://www.glitter-graphics.com/images/header/logo.gif" height="35"/></a><br/>
<a href="http://www.ilmuwebsite.com" target="_blank"><img border="0" src="http://unair.info/img/iweb.jpg"/></a><br/><a href="http://www.ilmuwebsite.com" target="_blank">ilmuwebsite.com</a><br/>
<a href="http://www.taktiku.com" target="_blank"><img border="0" width="150" src="http://4.bp.blogspot.com/_9XcnvRyxRGc/SY8K0OSe_lI/AAAAAAAAAC0/bSA6XuGKo6w/s400/taktiku_head.gif" height="35"/></a><br/>
</p>
</marquee></fieldset>
</div>
  
  
  Nah hasilnya akan seperti ini :
  
  
  
  

  
  

  
  Thanks to
  

  
  
  

  
  
  
  
  ALLAH SWT
  
  
  Orang Tua
  
  Semua Kerabat
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  ilmuwebsite.com
  
  
  
  

  
  

  
  
  
  
  
  

---

Yah itu tadi beberapa blogroll sederhana .. siapa tw berminat .. klo ga yah gpp ...

hehehe :P :D