11 يونيو، 2014

مدون محترف اضافات بلوجر CSS إضافة أداة المشاركات الشائعة الاحترافية على بلوجر

إضافة أداة المشاركات الشائعة الاحترافية على بلوجر

إضافة المشاركات الشائعة الاكثر احترافية في بلوجر مدونة مدون محترف ,قوالب بلوجر ,دروس بلوجر

تعديل جميل على إضافة المشاركات الشائعة الخاصة بمنصة بلوجر Blogger سنعطيها شكل مميز ونجعلها عبارة عن صور مع تلميحات عليها و تأثيرات الحركة Elegant Popular Posts Widget for Blogger Tweak وهذا الشكل يتناسب مع اكثر المدونات التي تهتم باعطاء اجمل شكل لمدوناتهم للزائر

شرح التركيب


  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML

إضافة اكود الـ CSS

وفوق الوسم ]]></b:skin> أضف الكود التالي
/* Popular Posts Widget customized by mudwnp.blogspot.com/*/
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }

.item-content { position: relative; }

 إضافة اكود JS

الان ابحث عن </body> واضف فوقه الكود التالي
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by mudwnp.blogspot.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

ملاحظة : احذف الكود الذي باللون الاحمر إذا كان موجود في مدونتك اي سؤال او استفسار حول الموضوع يمكنك كتابته في تعليق


في امان الله
مدونة مدون محترف

مواضيع ذات صلة
إضافة أداة المشاركات الشائعة الاحترافية على بلوجر
4 / 5
بواسطة

0 التعليقات :

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r