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

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

تعديل جميل على إضافة المشاركات الشائعة الخاصة بمنصة بلوجر 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:hover img {transform: rotate(10deg) scale(1.2);}

.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>

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

معاينة

في امان الله