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

شارك مع اصدقائك:

اضافة المشاركات الشائعة على بلوجر هي اضافة مميزة و على كل مدون اضافتها و هذا حتى يبقي الزائر أكبر مدة في مدونته.
و في هذا الدرس ساقدم طريقة اضافة أداة المشاركات الشائعة احترافية و ذات خاصية التعداد التلقائي.
أنصحك بالاطلاع على : اضافة أزرار المشاركة على مواقع التواصل الأجتماعي بشكلين مختلفين على بلوجر.

تعد أداة المشاركات الشائعة في بلوجر الطريقة المثلى لعرض المشاركات الأكثر إثارة للاهتمام والأكثر مشاهدة في مدونتك.

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

و الأن لنُباشِر في اضافة اداة المشاركات الشائعة احترافية ذات خاصية التعداد تلقائي.

المعاينة المعاينة

1# أول شيء نحتاجه هو ضبط اعدادت المشاركات الشائعة و هذا بالذهاب الى بلوجر Blogger و من ثم التخطيط Layout و أخير اضافة أداة المشاركات الشائعة Popular Posts widget و تهيئة المشاركات الشائعة هكذا .

2# و الأن ادخل الى المظهر و اضغط على تحرير HTML و قم بالبحث عن </b:skin>
و اضف الكود التالي فوقه.

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:Right;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;Left:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:Right;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

و أخيرا احفظ القالب و اعط تحميل المدونة لتظهر عندك اضافة المشاركات الشائعة احترافية بتعداد تلقائي.