اضافة اخر التدوينات للبلوجر بشكل احترافي

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

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

في مدونة رفع العرب وهي اضافة اخر المشاركات بشكل رائع جدا و احترافي هي عبارة عن صور و بخاصية  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://arb-up.net";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>

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

بضغطة زر تشارك المعلومة و تدعم الموقع !!

فيسبوك تويتر جوجل بلس لينكد إن