Friend Blog List Like Facebook Friend-Suggestion

Huh, udah lama ga posting.. sekarang posting lagi . Temen udah tau kan gimana friend suggestion di beranda facebook kita ? Kalo ga tau ? cape deh... nih liat demonya disini

Demo

Cekuik cekuik cekuik.... mirip kan sama freind suggestion di facebook ? coba langsung klik "Lihat Semua" di demonya.. ane bikin langsung buka pake facebox biar tambah mirip.. Sekarang langsung ajah aku share cara buat friend suggestionnya, untuk cara buat facebox nya bisa liat disini

1. Pertama, masukin script jQuery ini..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>


Nb: kalo udah ada di blog sobat lewat ajah..

2. Ini css nya..

#facebook{
height:60px;
width:215px;
overflow:hidden;


padding:6px 10px 14px 10px;;
}
#facebook li{
border:0; margin:0; padding:0; list-style:none;
}

#facebook li{
height:60px;
padding:5px;
list-style:none;

}
#facebook a{
color:#000000;
text-decoration:none;

}
#facebook .nama-teman{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
color:#36538D;
}
#facebook .addas{
display:block;
font-size:11px;
color:#666666;
}
#facebook img{
float:left;
margin-right:14px;
padding:4px;

}
#facebook .del
{
float:right; font-weight:bold; color:#666666
}
#facebook .del a
{
color:#000000;


}
#facebook .del a:hover
{
background-color:#36538D;
padding-left:1px;
padding-right:1px;
color:#ffffff;
}


3. Ini javascriptnya sob..


<script type='text/javascript'>
$(function()
{
$(".delete").click(function(){
var element = $(this);
var I = element.attr("id");
$('li#list'+I).fadeOut('slow', function() {$(this).remove();});
return false;
});
});
</script>


4.Udah bro.. ini HTML nya..



<span style=" padding-left:20px; font-weight:bold;">Suggestions</span> <a style=" float: right; font-weight:bold;" href="#teman" rel="facebox">Lihat Semua</a>
<ul id="facebook">
<li id="list1">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="1" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">v</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list2">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="2" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list3">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="3" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>
<li id="list4">
<img src="http://i38.tinypic.com/2hqufbc.jpg
"/> <span class="del"><a id="4" href="#" class="delete"><img src="http://i34.tinypic.com/fa3fdi.jpg"/></a></span>
<a href="Link Teman" class="nama-teman">Link Teman</a>
<span class="addas">Add as Friend</span>
</li>


</ul>



Nb:

>> untuk link lihat semua menggunakan Rel='facebox' jika ingin menggunakan facebox .
>> http://i38.tinypic.com/2hqufbc.jpg ini adalah gambar blogger, sebagai pengganti foto profil.

Nah selesai kan ?? gampang kan ? mungkin not usefull... but fun ! =D
trick ini bukan cuma buat friend blog ajah.. bisa di pake buat yg lain kok, dlu c maunya saya buat pake post suggestion, tp susah juga implementasikan script post ke friend list satu ini =D