مثال مباشر : من هنا

طريقة التركيب

• ادخل مدونتك البلوجر .
• التخطيط .
• اختر اداة html/javascript .
• انسخ والصق هذا الكود بها :

<style type="text/css">
/*<![CDATA[*/
img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}
img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}
.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}
.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}
#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}
#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}
#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}
#mdjumplink a:hover{color:#888!important;text-decoration:none}
#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}
#mdcomments:hover{background:#F4A557;text-decoration:none}
/*]]>*/
</style>

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1x 1y(F){j.l(\'<T x="1z">\');1a(e i=0;i<1d;i++){e f=F.17.f[i];e X=f.1b.$t;e y;h(i==F.17.f.G)N;1a(e k=0;k<f.r.G;k++){h(f.r[k].14=="1w"&&f.r[k].1v=="1s/1t"){e p=f.r[k].1b;e 18=f.r[k].q}h(f.r[k].14=="1u"){y=f.r[k].q;N}}e w;1A{w=f.1B$1H.19}1I(1r){s=f.I.$t;a=s.E("<K");b=s.E(\'R="\',a);c=s.E(\'"\',b+5);d=s.1F(b+5,c-b-5);h(a!=-1&&b!=-1&&c!=-1&&d!="")w=d;D w="Q://2.1C.1D.Y/1E/1K/1k/1q/1n.1o"}e C=f.1m.$t;e 13=C.z(0,4);e P=C.z(5,7);e O=C.z(8,10);e m=1j 1l;m[1]="1p";m[2]="1h";m[3]="1e";m[4]="1g";m[5]="1f";m[6]="1J";m[7]="26";m[8]="23";m[9]="2d";m[10]="1L";m[11]="2c";m[12]="20";j.l(\'<1c x="21">\');h(1R==v)j.l(\'<a q="\'+y+\'" A ="B"><K x="1P" R="\'+w+\'"/></a>\');j.l(\'<W><a q="\'+y+\'" A ="B">\'+X+"</a></W><M>");h("I"U f)e n=f.I.$t;D h("V"U f)e n=f.V.$t;D e n="";e Z=/<\\S[^>]*>/g;n=n.1S(Z,"");h(1Y==v)h(n.G<L){j.l("");j.l(n);j.l("")}D{j.l("");n=n.z(0,L);e J=n.1X(" ");n=n.z(0,J);j.l(n+"...");j.l("")}e o="";e u=0;j.l("<M>");h(1Q==v){o=o+m[1T(P,10)]+"-"+O+" - "+13;u=1}h(1N==v){h(u==1)o=o+" | ";h(p=="1 H")p="1 1M";h(p=="0 H")p="2b H";o=o+p;u=1}h(28==v){h(u==1)o=o+" | ";o=o+\'<a 16="27" q="\'+y+\'" x="19" A ="B">25 2a \\24</a>\';u=1}j.l(o);j.l("</1c>");h(22==v)h(i!=1d-1)j.l("")}j.l(\'<15 x="1V">1U 1W <a q="Q://1Z.1O.Y">1i 1G</a></15></T>\')};',62,138,'||||||||||||||var|entry||if||document||write|monthnames|postcontent|towrite|commenttext|href|link|||flag|true|thumburl|class|posturl|substring|target|_top|postdate|else|indexOf|json|length|Comments|content|quoteEnd|img|numchars|br|break|cdday|cdmonth|http|src||ul|in|summary|strong|posttitle|com|re||||cdyear|rel|div|id|feed|commenturl|url|for|title|li|numposts|Mar|May|Apr|Feb| |new|AAAAAAAAAHA|Array|published|noimage|jpg|Jan|hAKuT9rJpFU|error|text|html|alternate|type|replies|function|labelthumbs|label_with_thumbs|try|media|bp|blogspot|_IKigl6y9hFA|substr| |thumbnail|catch|Jun|TMdcT1jzo5I|Oct|Comment|showcommentnum| |label_thumb|showpostdate|showpostthumbnails|replace|parseInt| |credits| |lastIndexOf|showpostsummary|www|Dec|clearfix|displayseparator|Aug|u00bb|مزيد من المعلومات|Jul|mdjumplink|displaymore|mdcomments| |No|Nov|Sep'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var numposts = 4;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 80;
//]]>
</script>

<script src='http://www.ahmad-web.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

لتخصيص الاداة 
اللون الأحمر : استبدلة برابط مدونتك
اللون الاصفر : هو عدد التدوينات المراد عرضها