Topics :
Home » , » Cara Membuat Blogroll Otomatis di Blog

Cara Membuat Blogroll Otomatis di Blog

Ungkit - Cara membuat Blogroll untuk ditampilkan ke dalam Blog. Jenis BloGroll sendiri sangatlah banyak dan bervariasi. Bisa deh dipilih mau jenis Blogroll yang mana seperti cara membuat Blogroll dibawah ini: 

Caranya adalah Copy Paste kode yang telah dipilih dalam contoh Blogroll dibawah kedalam Widget, Tata Letak dan Tambahkan HTML/Java Script. Kemudian simpan dan Lihat hasilnya. Untuk kode scriptnya bisa dilihat dibawah ini:




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://ungkit.blogspot.com" target="_blank">Aneh dan Unik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Fakta Menarik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Tutorial Blog</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Tips dan Trik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com/" target="_blank">Foto Lucu</a> 
<br/><br/> 

</marquee> 

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

Fakta Menarik

Tutorial Blog

Tips dan Trik

Foto Lucu

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" . 

Blogroll 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://ungkit.blogspot.com" target="_blank">Aneh dan Unik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Tips dan Trik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Fakta Menarik</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com" target="_blank">Tutorial Blog</a> 
<br/><br/> 
<a href="http://ungkit.blogspot.com/" target="_blank">Foto Lucu</a> 
<br/><br/> 

</marquee> 

</td> 

</tr> 

</table> 

Maka hasilnya akan seperti di bawah ini : 
Aneh dan Unik

Tips dan Trik

Fakta Menarik

Tutorial Blog

Foto Lucu



Blogroll dengan menu dropdown
Kode di bawah ini : 


<form> 

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

<option> - Blogroll - </option> 

<option value="http://ungkit.blogspot.com">Aneh dan Unik</option> 

<option value="http://ungkit.blogspot.com">Tips dan Trik</option> 

<option value="http://ungkit.blogspot.com">Fakta Menarik</option> 

<option value="http://ungkit.blogspot.com">Tutorial Blog</option> 

<option value="http://ungkit.blogspot.com/">Foto Lucu</option> 

</select> 

</form> 


Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya : 


Blogroll dengan Menu Drop Down lainnya :
Kode dibawah 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="http://ungkit.blogspot.com">Aneh dan Unik</option>

<option value="http://ungkit.blogspot.com">Tips dan Trik</option> 

<option value="http://ungkit.blogspot.com">Fakta Menarik</option> 

<option value="http://ungkit.blogspot.com">Tutorial Blog</option>

<option value="http://ungkit.blogspot.com/" target="_blank">Foto Lucu</option> 

</select> 

</form> </div> 


Hasilnya akan seperti ini : 

Blogroll



NB : 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 dan Semoga Berhasil


(Sumber : http://gariscerdas.com/)

0 komentar :

Posting Komentar