Subcribe to our RSS feeds Join Us on Facebook Join Us on Facebook Join Us on Facebook Follow us on Twitter Add to Circles

الأحد، 25 يونيو، 2017

جعل صور المشاركات الشائعة فى مدونة بلوجر تظهر باللون الابيض والاسود

كيفية تحويل صور المشاركات الشائعة الى اللون الابيض والاسود فى مدونة بلوجر بشكل كلاسيكى بسيط وجميل .

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

اليوم ساضع لكم هذه الاضافة لعل تعجبكم تابع معى طريقة التركيب .


جعل صور المشاركات الشائعة تظهر باللون الابيض والاسود
اولا عليك باضافة المشاركات الشائعة من خلال التخطيط واضافة اداء جديدة واختيار المشاركات الشائعة :
بعد الانتهاء من اضافة الاضافة عليك بالتوجهة الى المظهر ثم الضغط على تحرير HTML ومنها قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
.PopularPosts img{padding:0px;border-radius: 5px;-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.PopularPosts img:hover {-webkit-filter: saturate(1.1);
-moz-filter: saturate(1.1);}
.PopularPosts .item-thumbnail {
float: left;
margin: 0 5px 5px 0;
height: 72px;
padding: 5px;
بالأخير اضغط على حفظ واذهب الى صفحة المدونة لتشاهد النتيجة 
ستجد الصور اخذت اللون الابيض والاسود فعند وضع مؤشر الماوس تأخذ لونها الطبيعى .
اتمنى بأن هذه الاضافة نالت على اعجابكم 



الكود المسؤول عن توسيط عناوين مدونة بلوجر text-align-center

هل اعجبك قالب ما وعند رفعة الى مدونتك لاحظت بأن بعض عناوين مدونة بلوجر محاذاة الى الوسط مثل عناوين المشاركات وعناوين اضافات بلوجر وحتى عنوان المدونة نفسة وتريد ان تجعلها افتراضية بمعنى ان تجعل عناوين المشاركات وغيرها محاذاة الى الجهة اليمنى .

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


اليك بعض الصور لكى نتعرف اكثر على مضمون هذا الدرس :
الصور التالية توضح لنا بأن عناوين المدونة تظهر بالوسط :

  كما تلاحظون بالصور السابقة عناوين المشاركات تظهر لنا بالوسط وايضا عناوين القطع الاضافات .

الصور التالية توضح لنا بأن العناوين تظهر لنا بالجهة اليمنى وهذا هو المظهر الافتراضى :

اعتقد بعد ما تم وضع الصور اصبح الدرس واضح للجميع تابع معى .

ما هو الكود المسؤول عن توسيط عناوين مدونة بلوجر 
الكود التالى هو المسؤول عن ذلك :
text-align: center;
اذا تم ايجاد عناوين محاذاة الى الوسط فى مدونتك اكيد وبدون نقاش ستجد هذا الكود متواجد فى قالبك لانة يأخذ امر Center الوسط فأذا كنت تريد الغاء هذه الخاصية فعليك بعمل عملية البحث فى قالبك عن هذا الكود لتقوم بحذفة لكى يتم الرجوع الى الوضع الأفتراضى اى الجهة اليمنى اما اذا كنت تريد ان تجعل العناوين فى الوسط فعليك بزرع هذا الكود فى قالبك لكن لا تقلق ساشرح لك كيف تتعامل مع هذا الكود بكل سهولة .

العناوين تظهربالوسط فى راس المدونة :
 بالطبع ستجدة فى قسم Header الخاص باسم المدونة والوصف وخلفية الراس وغيرها ودائما يظهر هكذا :
/* Header

---------------------------------- */
وطبعا كل مصمم ولة تصميمة الخاص قد تجدة بهذا الشكل :
/* Header Wrapper
---------------------------------- */
الوصول الى هذا القسم سهل للغاية مجرد البحث عن كلمة Header ستتمكن من الوصول الية بكل سهولة الأن عليك بالبحث عن هذا الكود الاسبق المسؤول عن عملية التوسيط لكى تتمكن من حذفة .

العناوين تظهربالوسط فى المشاركات :
اذان القسم المسؤول عن المشاركات هو Posts الخاص بالمواضيع وهو يظهر هكذا :
/* Posts
-------------------------------- */
بداخلة ستجد الكود الاسبق اذا كنت تريد ان تجعل عناوين المشاركات فى الوضع الأفتراضى فعليك بحذفة .

العناوين تظهر بالوسط فى الاضافات السيدبار :
/* Sidebar Wrapper
-------------------------------- */
هذا القسم المسؤول عن اضافات مدونتك اذا تم ايجاد عناوين اضافات مدونتك بالوسط قم بحذف الكود الاسبق .

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

اتمنى بأن تدوينة الكود المسؤول عن توسيط عناوين مدونة بلوجر text-align-center افاد الجميع واى استفساربخصوص هذا الدرس اترد تعليق .

موقع seositecheckup لتصحيح اخطاء السيو و تحليل اخطاء مدونة بلوجر

موقع seositecheckup لتحسين مدونتك او موقعك الى محركات البحث واكتشاف الاخطاء المتواجدة فى قالب بلوجر .

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



كيفية استخدام موقع seositecheckup

فى البداية اذهب الى الموقع من خلال هذا الرابط :

SeoSiteCheckup


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

ملحوظة هامة : الموقع مجانى بدون عملية تسجيل عضوية اذا قمت بعملية التسجيل سيعطيك الموقع 14 يوم مجانا ومن بعدها يجب عليك بالترقية وطبعا تسجيل العضوية افضل بكثير لانة يعطيك خاصية الاصلاح بكل سهولة عن طريق المساعدة الكاملة .

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

الثلاثاء، 13 يونيو، 2017

المشاركات الشائعة مع الترقيم داخل مدونة بلوجر Popular Posts Css

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

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

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

كيفية تركيب المشاركات الشائعة مع الترقيم :
اولا قم بالبحث عن هذا الكود :
]]:</b:skin>
اضف قبلة مباشرة هذا الكود :
.widget .widget-item-control a img {
  border: none;
  width: 20px !important;
  height: 20px !important;
  padding: none;
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ie-box-shadow: none;
  box-shadow: none;
}
.sidebar .PopularPosts .widget-content ul li {
  padding: 0px 0px 0px;
  height: 73px !important;
  overflow: hidden !important;
  list-style-type: none !important;
  list-style: none;
}
.sidebar .popular-posts ul {
  padding-left:0px !important;
  list-style-type: none !important;
}
.sidebar .popular-posts ul {
  counter-reset: popcount;
  margin: 0; padding: 0;
}
.sidebar .popular-posts ul li:before {
  background: rgba(247, 247, 247, 1);
  color: #000000;
  content: counter(popcount,decimal);
  counter-increment: popcount;
  float: right;
  font-size: 15px;
  line-height: 20px;
  list-style-type: none;
  padding: 0px 6px 1px 5px;
  border-radius: 0px 0px 7px 7px;
  position: relative;
  display: inline-block;
  box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);
  font-weight: normal;
  top: 0px;
  right: 1px;
  z-index: 999999999999;
  border: solid #B5B5B5;
  border-width: 0px 1px 1px 1px;
}
.sidebar .PopularPosts .item-thumbnail {
  float: left;
  margin: 0px!important;
}
.sidebar .PopularPosts img {
  padding-right: 0px !important;
  width: 72px;
  height: 72px;
  overflow: hidden !important;
  margin-right: 0px;
}
.sidebar .PopularPosts .item-title a:hover {
  background: #f6f6f6;
  color: #000;
}
.sidebar .PopularPosts .item-title a {
  background: #EAEAEA;
  color: #6E6E6E;
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  font-family: "Oswald",sans-serif;     
  padding: 10px 30px 0px 78px;
  transition: all .4s ease-in-out;
  height: 62px;
  text-decoration: none;
  border-bottom: 1px solid #cccccc;
}

بالاخير اضغط على حفظ 
اى استفسار او اى مشكلة اترك تعليق .
اتمنى بأن اضافة المشاركات الشائعة مع الترقيم  داخل مدونة بلوجر Popular Posts Css نالت على اعجابكم وانتظرونى بأضافة جديدة واهم دروس بلوجر عبر مدونة كينج نت .
(( لا خير فى كاتم العلم ))

الاثنين، 12 يونيو، 2017

جعل اقسام مدونة بلوجر التسميات تظهر بشكل متناسق ومميز label css

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

هذه الاضافة الأضافة من اهم اضافات بلوجر فهى من وجهة نظرى خريطة المدونة فلابد من وجودها .

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


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

كيفية تنسيق اضافة التسميات اقسام المدونة فى بلوجر :
قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #FF0000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #FF0000;
    text-decoration: none;
}
بالاخير اضغط على حفظ 
توجهة الان الى مدونتك لكى تشاهد هذه الاضافة 
اذا كنت تريد تغيير الالوان عليك بتغيير الالوان المحددة :
1- الون المحدد باللون الاحمر خاص بالمربعات
2- الون المحدد باللون الازرق خاص بالخط 

اتمنى بأن اضافة جعل اقسام مدونة بلوجر التسميات تظهر بشكل متناسق ومميز label css نالت على اعجابكم واى استفسار او مشكلة فقط ضع تعليق .
(( لا خير فى كاتم العلم ))

الأحد، 11 يونيو، 2017

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

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

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

بعد التجربة وتركيبها الاضافة تعمل بشكل سليم فالاضافة تحتوى على اهم مواقع التواصل الاجتماعى : facebook - twitter - pinterest - linkedin - plus.google الاضافة لا تحتوى على اى صور ولا ايقونات حتى يتم فتح المواضيع من قبل الزوار بشكل اسرع وبدون انتظار عملية التحميل لكونها تحتوى على خاصية CSS .

صورة توضح لنا شكل الاضافة بعد التركيب :
كما تلاحظون شكل الاضافة اذا اعجبتك وتريد وضعها فى مدونتك فعليك بمتابعة هذا الدرس

كيفية تركيب اضافة المشاركات الاجتماعية اسفل المشاركات :
 قم بالبحث عن هذا الكود :
]]></b:skin>
ضع فى اعلاه هذا الكود :
.share-box{position:relative;padding:10px}.share-title{border-bottom:2px solid #777;color:#010101;display:inline-block;padding-bottom:7px;font-size:30px;font-weight:500;position:relative;top:2px}.share-art{float:none;padding:0;padding-top:0;font-size:15px;font-weight:400;text-transform:capitalize;text-align:center}.share-art a{color:#fff;padding:3px 8px;margin-right:4px;border-radius:2px;display:inline-block;margin-left:0;background:#010101;font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif}
.share-art a:hover{color:#fff}.share-art .fac-art{background:#3b5998}.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}.share-art .twi-art{background:#00acee}.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}.share-art .goo-art{background:#db4a39}.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}.share-art .pin-art{background:#CA2127}.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}.share-art .lin-art{background:#0077B5}.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}#related-posts{margin-bottom:10px;padding:10px}

قم بالبحث عن هذا الكود :
<data:post.body/>
ملحوظة : ستجد هذا الكود مكرر المطلوب هو الكود الثانى 
الان بعد ما تم ايجاد الكود المطلوب ضع فى اسفلة هذا الكود :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
               <div class='share-art'> 
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>  
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, right=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
</div>
</b:if>

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

الخميس، 8 يونيو، 2017

المشاركات الشائعة بشكل احترافى مع تاثيرات الصور والوان مختلفة مميزة

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

اضافة اليوم عبارة عن شكل مميز يحتوى على الترقيم مع تعدد الالوان وتأثيرات على الصور اثناء وضع مؤشر الماوس .

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

صورة لشكل الاضافة بعد التركيب :
كيفية تركيب الاضافة على المدونة :
قبل وضع الاكواد يجب عليك الذهاب الى لوحة تحكم المدونة ومن صفحة التخطيط اختار اداة جديدة ومنها اختار المشاركات الشائعة هذه هى اول مرحلة كما واضح لنا بالصورة التالية :
الأن نأتى الى المرحلة الاخيرة وهى اضافة الكود :
قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->
بالأخير اضغط على حفظ 
توجهة الى الصفحة الرئيسية لتشاهد النتيجة 
اتمنى بأن اضافة المشاركات الشائعة بشكل احترافى مع تاثيرات الصور والوان مختلفة مميزة اعجبتكم وانتظرونى فى تدوينة واضافة جديدة ان شاء الله .
(( لا خير فى كاتم العلم ))

الثلاثاء، 6 يونيو، 2017

اضافة المشاركات الشائعة بشكل بسيط وانيق الى مدونة بلوجر popular posts

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

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








صور لشكل الاضافة بعد التركيب :

تركيب اضافة المشاركات الشائعة popular posts
اولا عليك باضافة المشاركات الشائعة من خلال التخطيط واضافة اداء جديدة ومنها قم بازالة صورة مصغرة من الصورة وايضا ازالة خيار مقتطف مثل ما ظاهر لنا بالصورة التالية :

 بعد اتمام هذه العملية عليك بالتوجهة الى القالب الأن اضغط على تحرير HTML
قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }
بالاخير اضغط على حفظ 
اتجهة الى مدونتك لكى تشاهد شكل الاضافة 
مجرد وضع مؤشر الماوس على الاضافة تعطى تاثير متحرك .
(( لا خير فى كاتم العلم ))