إضافة آخر المشاركات بشكل أكثر إحترافية فقط من مدوّن

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

زوار ومتابعين مدونة مدوّن اليوم جئت لكم بـ إضافة أكثر من رائعه وهو كود لإضافة آخر المشاركات بشكل إحترافى جزاب أنيق ، ويظهر مدونتك بشكل إحترافى ده + إن الكود بيعمل بخاصية الـ Tooltip ، ولمن لا يعرف هذة الخاصية هذة الخاصية هى توفر لك عند وضع المؤشر على الرابط يظهر لك عنوان التدوينة ونبذة عنها بشكل رائع جداً.

للمعاينة المباشرة للكود من | هنا

كل ما عليك هو الذهاب إلى تخطيط  >> ثم إضافة أداة جافاسكريبت وضع بها الكود التالى 

<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#333333;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#999999;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.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 #FA7C19;
  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:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "آخر المشاركات",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://mdwanblog.blogspot.com";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>

التعديل فقط هو تغيير الرابط باللون الأحمر برابط مدونتك

فى قسم: اضافات بلوجر