اضافة آخر المواضيع بتقنية جي كويري

إضافة آخر المواضيع بتاثيرات مميزة بتقنية جي كويري JQuery يميز تلك الإضافة المساحة كونها تعرض عدد كبير من المواضيع في مساحة بسيطة ويمكن أيضاً تنسيقها بما يتناسب مع مدونتك سواء في مقاسات المصغرات او الألوان وهو ما سنتطرق اليه في شرح الإضافة ويمكنك في البداية الإطلاع على الإضافة ومعاينتها من الرابط التالي

معاينة

شرح التركيب والتنسيق

أضف الكود التالي في آداة HTML/JavaScript

<style type="text/css">
#cnmu-post-gallery {
  background:#B5DBFC;
  border-radius: 4px;
  box-shadow: 0 0 2px #222222;
  color: #494848;
  font: 11px Arial,Sans-Serif;
  margin: 0 auto;
  padding: 6px;
  width: 280px;
}
#cnmu-post-gallery h2 {display: none;}
#cnmu-post-gallery .rp-item {
  float:right;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://lh5.googleusercontent.com/-6OPTGhq4gsI/U8ab6RQ1VvI/AAAAAAAAEa4/9Zkct-uLrbc/s48/loading-cnmu.gif') no-repeat 50% 50%;
  width:66px;
  height:66px;
}
#cnmu-post-gallery .rp-item img {
  width:100%;
  height:100%;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#cnmu-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 #0051C3;
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}
#cnmu-post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#0A85BE;
}
#cnmu-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     = "آخر المواضيع",
    numposts    = 16,
    numchar     = 200,
    rcFadeSpeed = 600,
    pBlank      = "https://lh5.googleusercontent.com/-AxoiXceVZf0/U8abnLie-iI/AAAAAAAAEaw/wbj4-uvjFUM/s100/no-img.png",
    blogURL     = "http://cnmu.blogspot.com";
</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2014/cnmu-post-gallery.js" type="text/javascript"></script>

أول شئ الكود الأخضر احذفه ان كان لديك رابط مكتبة جي كويري على مدونتك
استبدل هذا الرابط http://cnmu.blogspot.com  برابط مدونتك
هذا 11px Arial,Sans-Serif هو نوع الخط وحجمة في الإضافة
الرقم 16 هو عدد المواضيع اختر العدد الذي يناسبك
اللون #B5DBFC هو لون خلفية الإضافة
هذا 280  الرقم هو مساحة عرض الإضافة
الرقم 66 هو طول وعرض الصور
هذا #0051C3 هو لون الخط العلوي للنافذة التي تظهر عند تمرير الماوس
الرقم  200 هو عدد أحرف الملخص في النافذة
هذا #0A85BE لون عنوان الموضوع في النافذة
تم بحمد الله