صورة توضيحية للمرحلتين 1و2

الكود:

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
 position:relative;
 overflow:hidden;
 border:#F4F4F4 solid 1px;
 width:892px;
 height:300px;
}
.lof-slidecontent .preload{
 height:100%;
 width:100%;
 background:#FFF;
 position:absolute;
 top:0;
 right:0;
 z-index:100000;
 color:#FFF;
 text-align:center
}
.lof-slidecontent .preload div{
 height:100%;
 width:100%;


 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
 position:relative;
 height:100%;
 width:600px;
 z-index:3px;
 overflow:hidden;
 float:left;
}


/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 right:50px;
 width:400px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);


 /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3 a{
 color:#FFF  !important;
 margin:0 !important;
 font-size:140% !important;
 padding:20px 8px 2px !important;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}


/* main flash */
ul.lof-main-wapper{
 /* margin-left:auto; */
 overflow:hidden;
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
 padding:0px;
 margin:0  !important;
 height:300px;
 width:600px;
 position:absolute;
 overflow:hidden;
}


ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px  !important;
 margin:0px;
 height:100%;
 width:600px;
 float:right;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 right:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px !important;
 width:600px  !important;
 height:300px  !important;
}


.lof-main-wapper{
  margin-right:auto;
  margin-left:inherit;
  clear:both;
  height:300px;
 }


li-desc{
 z-index:100px;
 position:absolute;
 top:150px;
 right:50px;
 width:400px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);


 /* filter:0.7(opacity:60) */
}
li-desc p{
 color:#FFF;
 margin:0 8px;
 padding:8px 0
}
li-desc h3 a{
 color:#FFF;
 margin:0;
 font-size:140%;
 padding:20px 8px 2px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
 color:#FF6;
 text-decoration:underline;
}


/* item navigator */
ul.lof-navigator{
 top:0  ;
 padding:0  ;
 margin:0 ;
 position:absolute ;
 width:100% ;
 background:none !important;
 margin-top: 0 !important;
 margin-right: 0 !important;
 margin-left: 0 !important;
}
ul.lof-navigator li{
 cursor:hand ;
 cursor:pointer ;
 list-style:none ;
 width:100%  !important;
 padding:0  !important;
 margin:0 !important;
 overflow:hidden !important;
}
.lof-navigator-outer{
 position:absolute !important;
 z-index:100 !important;
 height:300px !important;
 width:310px  !important;
 overflow:hidden  !important;
 color:#FFF !important;
 right:0 !important
 top:0 !important;
 left:inherit !important;
}
.lof-navigator li.active{
 background:url(http://www11.0zz0.com/2012/04/11/11/341841132.png) center left no-repeat;
 color:#FFF
}
.lof-navigator li:hover{


}


.lof-navigator li h3{
 color:#FFF;
 font-size:120%;
 padding:15px 0 0 !important;
 margin:0;


}
.lof-navigator li div{
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
 color:#FFF;
 height:100%;
 position:relative;


 padding-right:15px;
 border-top:1px solid #E1E1E1;
 margin-right:inherit;
 margin-left:18px;
}


.lof-navigator li.active div{
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
 color:#FFF;


 margin-right:inherit;
 margin-left:18px;


}
.lof-navigator li img{
 height:60px;
 width:60px;
 margin:15px 0px 10px 15px;
 float:right;
 padding:3px;
 border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
 border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
 color:#FFF;


.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}


 ul.lof-main-wapper li {
  position:relative;
 }


</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
  $('#lofslidecontent45').lofJSidernews( { interval:2000,
             easing:'easeOutBounce',
            duration:1200,
            auto:true } );
 });


</script>

أهلا و سهلا بكم إخواني أخواتي الكرام ،من منا لا يعرف الفيسبوك و ما مدى أهميته في التواصل الاجتماعي ونشر المدونة وإستقطابه لعدد كبير من الزوار ، ولذلك سوف أقوم بشرح كيف إضافة أداة مهمة جدا ألى و هي "زر أعجبني" حيث يتم إدراج هذه الأداة تحت كل موضوع والتي تتيح للزائر التعبير عن إعجابه بالمقال الذي قرأه في مدونتك ،وبدون إطالة ،لنذهب مباشرة إلى التطبيق.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>