تعديل جميل على إضافة المشاركات الشائعة الخاصة بمنصة بلوجر Blogger سنعطيها شكل مميز ونجعلها عبارة عن صور مع تلميحات عليها و تأثيرات الحركة Elegant Popular Posts Widget for Blogger Tweak وهذا الشكل يتناسب مع اكثر المدونات التي تهتم باعطاء اجمل شكل لمدوناتهم للزائر
شرح التركيب
- الان قم بالدخول إلى لوحة تحكم المدونة
- اختر قالب
- ثم انقر فوق تحرير 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() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</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