تغيير شكل المشاركات الشائعة في مدونة بلوجر شكل جميل

السلام عليكم ورحمة الله وبركاته
إشارك معكم درس جديد من دروس مدونات بلوجر ولدينا اليوم إضافة رائعة للمشاركات الشائعة يمكن أن تجعل مدونتك أكثر جمالاَ.
كما تلاحظون يالصورة أعلاها كيف تبدو اعتقد انك لست بحاجة إلى معاينة الإضافة وإذا كنت بالفعل ترغب بذلك يمكنك النقر على علامة التبويب من الجانب الايسر للمدونة بعنوان (مواضيع مختارة).

والآن نتطرق فوراً إلى كيفية عمل الإضافة على مدونتك!

أولاَ من لوحة تحكم مدونتك إذهب إلى التخطيط ومن ثم أنقر على إضافة أداة حيث تريد ظهور الإضافة في مدونتك ثم أختر من بين الأدوات المشاركات الشائعة:

الآن حدد الإعدادات كما هي بالصورة التالية لكن بالنسبة للوقت لا مشكلة:
(بدون مقتطف)

أما إذا كنت قد أضفتها مسبقاً يمكنك إعدادها كما بالصورة السابقة بعد ذلك توجه إلى القالب ثم أنقر على تحرير Html
الآن قم بالبحث عن الرمز ]]></b:skin> بإستخدام مفتاح الإختصار بلوحة مفاتيح الكمبيوتر CtrlوF بعد أن وجدت الرمز ]]></b:skin> أضف الكود التالي فوقه مباشرةَ:

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

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

    <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 madad2.com
      $('.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>