كيفية جعل المشاركات الشائعة ذات شكل جميل

بسم الله الرحمن الرحيم اهلا بكم زوار ومتابعي مدونة  عربي ايجي اليوم اقدم لكم اليوم
                                  
جميل جدا وشايق جدا جدا وهو جعل اداه المشاركات الشائعة شكلا جميلا يعطي للمدونتك رونق جميل لن اطيل عليكم كثيرا لنططرق للشرح
1.اذهب لوحة تحكم بلوجر
2.تصميم اضافة اداة اختر html java script
وبعدها ضع هذا الكود

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
 color:#FFF;
}
.lof-slidecontent a.readmore{
 color:#58B1EA;
 font-size:95%;

}
.lof-slidecontent{
 position:relative;
 overflow:hidden;
 border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
 height:100%;
 width:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:100000;
 text-align:center;
 background:#FFF
}
.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:800px;
 z-index:3px;
 overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 bottom:50px;
 left:0px;
 width:350px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
 height:100px;
 /* filter:0.7(opacity:60) */
 padding:10px;
}
.lof-main-item-desc p{
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3{
 padding:0;
 margin:0
}
.lof-main-item-desc h2{
 padding:0;
 margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
 margin:0;
 background:#C01F25;
 font-size:75%;
 padding:2px 3px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
 text-transform:uppercase;
 text-decoration:none
}
.lof-main-item-desc h3 a:hover{

 text-decoration:underline;
}
.lof-main-item-desc h3 i {
 font-size:70%;
}

/* main flash */
ul.lof-main-wapper{
 /* margin-right: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;
 position:absolute;
 overflow:hidden;
}

ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px   !important;
 margin:0px;
 float:left;
 position:relative;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 left:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px  !important;
}

/* item navigator */
.lof-navigator-wapper {
 position:absolute;
 bottom:10px;
 right:10px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
 padding:5px 0px;
}
.lof-navigator-outer{
 position:relative;
 z-index:100;
 height:180px;
 width:310px;
 overflow:hidden;
 color:#FFF;
 float:left
}
ul.lof-navigator{
 top:0;
 padding:0;
 margin:0;
 position:absolute;
 width:100%;
 background:none !important;
 margin-top: 0 !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
ul.lof-navigator li{
 cursor:hand !important;
 cursor:pointer !important;
 list-style:none !important;
 padding:0 !important;
 margin-left:0px !important;
 overflow:hidden !important;
 float:left !important;
 display:block !important;

 text-align:center !important;

}
ul.lof-navigator li img{
 border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
 border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
 display:block;
 width:22px;
 height:30px;
 color:#FFF;
 cursor:pointer;

}
.lof-navigator-wapper .lof-next {
 float:left;
 text-indent:-999px;
 margin-right:5px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
 float:left;
 text-indent:-999px;
 margin-left:5px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}

.lof-main-wapper img {height:340px !important; width:880px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</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/scriptlofblogv2.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
  var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
      next:$('#lofslidecontent45 .lof-next') };

  $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
            direction  : 'opacitys',
             easing   : 'easeOutBounce',
            duration  : 1200,
            auto    : true,
            maxItemDisplay  : 4,
            navPosition     : 'horizontal', // horizontal
            navigatorHeight : 32,
            navigatorWidth  : 80,
            mainWidth:880,
            buttons   : buttons} );
 });
</script>

ثم احفظ وعين الاضافة ومبروك عليك الاضافة