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

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

يوليو 02, 2017
ميز تلك الإضافة المساحة كونها تعرض عدد كبير من المواضيع في مساحة بسيطة ويمكن أيضاً تنسيقها بما يتناسب مع مدونتك سواء في مقاسات المصغرات او الألوان 

 




شرح التركيب والتنسيق
 
أضف الكود التالي في آداة 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://e10-business.blogspot.com/";
</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2014/cnmu-post-gallery.js" type="text/javascript"></script>
 
 
 
 
 
أول شئ الكود الأخضر احذفه ان كان لديك رابط مكتبة جي كويري على مدونتك
استبدل هذا الرابط http://e10-business.blogspot.com/  برابط مدونتك
هذا 11px Arial,Sans-Serif هو نوع الخط وحجمة في الإضافة
الرقم 16 هو عدد المواضيع اختر العدد الذي يناسبك
اللون #B5DBFC هو لون خلفية الإضافة
هذا 280  الرقم هو مساحة عرض الإضافة
الرقم 66 هو طول وعرض الصور
هذا #0051C3 هو لون الخط العلوي للنافذة التي تظهر عند تمرير الماوس
الرقم  200 هو عدد أحرف الملخص في النافذة
هذا #0A85BE لون عنوان الموضوع في النافذة
 
 
 
 
 
 
الاشتراك في: تعليقات الرسالة (Atom)