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

Readmore

Menampilkan Gambar / Teks dengan Box Style Facebook jQuery

Yuph Brotha.. sekarang saya coba share cara buat modal box dengan style facebook, biasa na banyak digunakan untuk nampilin gambar ato tulisan2 tertentu gitu,

Contoh na klik ajah facebox di atas sob,

ato

untuk contoh nampilin gambar,

Klik Disini Sob

nah begitu lah contoh na..
mau ?

langsung ajah caranya..

1. Masukan script jquery berikut dibawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Masukan Javascript berikut dibawah script jquery tadi,

<script src='http://www.hotlinkfiles.com/files/2644259_k5ca6/facebox.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>

3. Masukan juga css-nya sob..
/*Facebox*/
#facebox .b {
background:url(http://www.hotlinkfiles.com/files/2644245_c74zp/b.png);
}
#facebox .tl {
background:url(http://www.hotlinkfiles.com/files/2644250_gzeak/tl.png);
}
#facebox .tr {
background:url(http://www.hotlinkfiles.com/files/2644244_e9l2g/tr.png);
}
#facebox .bl {
background:url(http://www.hotlinkfiles.com/files/2644246_e5qa5/bl.png);
}
#facebox .br {
background:url(http://www.hotlinkfiles.com/files/2644247_c2fz9/br.png);
}
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
margin: auto;
border-collapse: collapse;
}
#facebox .body {
padding: 10px;
background: #fff;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border: 0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}

4. Sekarang pemanggilannya.. Untuk Facebox Berisi Tulisan, pertama Sobat Masukan script dbwah ini di atas </body>
<div id="info" style="display:none;">
Isi tulisan sobat disini
</div>

Lalu, masukan script dibawah ini dtempat yg sobat mau,

<a href="#info" rel="facebox">Klik Disini Sob</a>


NB: #info adalah tag pemanggil untuk div info .
rel adalah tag yg digunakan untuk memakai facebox .

Untuk Facebox berisi gambar, tanpa memasukan div, langsung memasukan script dibawah ini ditempat yg sobat mau,

<a href="http://i27.tinypic.com/t66skw.jpg" rel="facebox">Klik Disini Sob</a>

NB: http://i27.tinypic.com/t66skw.jpg adalah url gambar, ganti dengan url gambar yg sobat mau .

Selesai... gmnah ? mau coba ??

Readmore

Percepat Facebook Kamu !

Langsung ajah yawh . Gak pake basa basi ..
BT Fb lemot ?? coba nih ..

Boost for Facebook 9.0.18

download trus instal ajah .. di sini

Moga - moga tambah ngebut... fb na..

Readmore

Intip Foto FB

Buat yg suka intip foto FB, skrg kita bisa liat foto target walaupun belum jd temen (blm di add).
caranya sangat mudah tinggal masukin NAMA, ID or PROFIL URL target yang mo kita intip

CODE

http://apps.facebook.com/josh_owns/

screenshot :


ato search "photo stalker" trus pasang aplikasi ini di akun kamu.


semoga membantu.

Readmore