المشاركات الشائعة بشكل أنيق و جديد 2013

                                      السلام عليكم و رحمة الله تعالى و بركاته و هلا بكم

اليوم اضافة جميلة وهي اضافة المشاركات الشائعة بشكل انيق واحترافي

ولمعاينة الاداة

شرح تركيب الاضافة فى مدونتك

اذهب الى لوحه التحكم فى مدونتك

ثم التخطيط

ثم أضافه أداة

اختار 

HTML/JavaScript 

ثم اكتب عنوان

مثل المشاركات الشائعة

وأضف الكود التالى 

<style type="text/css">
#post-gallery {
  width:320px;  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:##000000
;
  padding:8px;
  background-color:#1BA1E2
;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#000000;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDRgKHGS9HEDJj7ScVvmmnPfQQshxZAPgBEgCdQ0ocYogiDBna9UjVKW2VoUdwRcJSKohLnqFjqmjVNHwMYgng9Plt9TJP6VEw_-B-hNy7Utkt08KRokGa69eKMd3i2mT-mRU_XDQu25A/s48/Bloggerheroe.comloading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #1BA1E2;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="https://bilokr.googlecode.com/files/djquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "المشاركات الشائعة",       // Widget Title
    numposts    = 20,      // The number of thumbnails / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgD89pa6vN98htXMKl98vmd6HVFGqHJxCItIZFmGvwsx5pkE8GMCjtHYN2qipTddPiUo6URZFOUuFpnsZb2Ir2p-2lVXkXoKHc3E07VbvIiFNBl6C4LK4gnoBH6rvi2Dn4z-Jp3QygVJL/s100/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "

http://ahmedteka.blogspot.com/

";       // Your Blog Address
</script>
<script src="http://dl.dropbox.com/u/81212926/Recent%20Post%20Thumbnail-blogger-heroe.js" type="text/javascript"></script>

 الاحمر برابط مدونتك http://ahmedteka.blogspot.com/تغير الازرق بعداد اظهر الموضيع 20 الاصفر هو عداد الاحرف الوصف الزى تظهر عن مرور الموس 200الاخضر التحكم فى سرعه الفلاشه 600وهذا الكودالتحكم فى عرض الاضافة  width:320px;متابعة مفيدة ، و لأي استفسار فورم التعليق رهن الإشارة

    وارجو ان اكون قد افدتكم وشكرا لكم