مساحة إعلانية

الخميس، 17 يوليو، 2014

الخميس، 17 يوليو، 2014

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

JQuery Latest Posts Blogger widget
إضافة آخر المواضيع بتاثيرات مميزة بتقنية جي كويري 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 لون عنوان الموضوع في النافذة
تم بحمد الله

هناك 16 تعليقًا:

  1. الردود
    1. دائما ما تنير المواضيع بمرورك العطر أخي محمد تحياتي لك

      حذف
  2. اضافة رائعة احسنت اخى عمرو ننتظر المزيد من التفوق والتقدم

    ردحذف
    الردود
    1. ربنا يعزك أخي أحمد شكراً يا غالي على مرورك

      حذف
  3. شكرا لك اخي عمرو اضافة رائعة

    ردحذف
    الردود
    1. حياك الله أخي منير سررت بمرورك يا طيب

      حذف
  4. الردود
    1. سرني مرورك أخي على
      ودي وتقديري =r

      حذف
  5. الردود
    1. سلمك الله من كل سوء أخي محمد شكراً على مرورك

      حذف
  6. هل اسستطيع وضها لقسم معين

    واضافة رائعة الله يعطيك عافية

    ردحذف
    الردود
    1. شكراً لمرورك يا طيب
      بالنسبة لآخر المواضيع من قسم معين لا تنفع لهذه الإضافة لكن يمكنك مراجعة الموضوع التالي
      http://cnmu.blogspot.com/2013/06/Recent-Posts.html

      حذف
  7. تدوينات رائعة شكرا لك أخي

    ردحذف
  8. اضافة جميلة جدآ بسيطة واحترافية جدآ بنفس وقت دائمآ مبدع بجديد أو القديم
    هل استطيع تخصيصها لقسم معين ؟

    ردحذف
    الردود
    1. شكراً لمرورك اخي الكريم
      بالنسبة لآخر المواضيع من قسم معين لا تنفع لهذه الإضافة لكن يمكنك مراجعة الموضوع التالي
      http://cnmu.blogspot.com/2013/06/Recent-Posts.html

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©