الاثنين، 19 أغسطس 2013

إضافة اخر المشاركات بشكل أكثر إحترافية مثل ديزاد سيت

اليوم كنت ابحث في بعض موقع اجنبية فوجد مدونة بلوجر اجنبية تحتوي 
على اضافة رائعة خاصة بالووردبيس فرر تحويلها الى بلوجر وهي خاص باخر
المشاركات تحتوى على 12 موضوع
صورة اضافة


الاضافة مثل صورة لان اضافة خاص بمدونة ديزاد سيت سوف يتم تعديل عليها كي تتناسب مع مدونة
 وتغير لونها
 إلى تخطيط  >> ثم إضافة أداة HTML/JavaScript
وضع بها الكود التالى 


<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#00a7f8;
  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://im39.gulfup.com/CoAxU.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      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2E73RpmfM-I5gJnv668-Z1CMJ6OalyMk_7ZZeN6IWcRzsqmJxLC-Quvh2vhcO127nBDcakSbA4l5UiWtfqfistBz5jDqiwx4cGERR1uy4rKQw-lVFANZj4_zWbljetIVsn7_RMCJs4o/s1600/zd.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://dz-site.blogspot.com/";       // ربط مدونتك
</script>
<script src="https://dz-site.googlecode.com/files/Add-Recent-posts-more-professionally.js" type="text/javascript"></script>

فقط ضع ربط مدونتك بدل مدونة ديزاد سيت

ومبروك اضافة ولا نسى انضمام الى متابعين مدونة

ليست هناك تعليقات:

إرسال تعليق

ضع هنا تعليق يثبت انك موجود في هذا عالم ولست انسان عديم شخصية