الخميس، 11 يونيو 2015
المشاركات
الشائعة من الإضافات الهامة التي ينبغي إضافتها لكل موقع أو مدونة حيث تعرض
التدوينات الأكثر قراءةً و شيوعاً بين الزوار بحيث ينتقي الزائر من بين عناوينها
ما يحب الاطلاع عليه و غالباً ما تكون هذه الإضافة في القائمة الجانبية أو
السايدبار " Sidebar " للمدونة أو الموقع و تكون بأشكال مختلفة
: منها ما يعرض عناوين الموضوعات فقط و منها ما يعرض عنوان الموضوع بجانب صورة
بانر الموضوع و منها ما يعرض عنوان الموضوع مع مقتطف من الموضوع بجانب صورة بانر
الموضوع.
لن يختلف الموضوع كثيراً فكل شكل من الأشكال التي تحدثنا عنها تتناسب مع مواقع دون غيرها من حيث المساحة و الموضوع ..... إلــخ.
لن يختلف الموضوع كثيراً فكل شكل من الأشكال التي تحدثنا عنها تتناسب مع مواقع دون غيرها من حيث المساحة و الموضوع ..... إلــخ.
و سنتناول في تدوينتنا اليوم بإذن الله أبسط
إضافة و هو عرض عناوين الموضوعات فقط دون مقتطف للموضوع أو صورة لبانر الموضوع. و
سنتكلم في تدوينات قادمة بإذن الله عن كيفية إضافة الأشكال الأخرى من المشاركات
الشائعة التي تكلمنا عنها بالأعلى.
لدينا بإذن
الله تعالى أربع استايلات للإضافة اختر منها ما يعجبك.
هيا بنا إلى الجانب العملي :
نستعين
بالله أولاً قبل كل شئ.
1-
أولاً لابد من
إضافة المشاركات الشائعة من داخل صفحة التخطيط إن لم تكن مضافة سلفاً كما يلي :
·
قم بالذهاب
إلى لوحة تحكم بلوجر الخاصة بمدونتك.
·
قم بالذهاب
إلى " التخطيط ".
·
قم بإضافة
أداة المشاركات الشائعة في السايدبار كما بالصورة رقم " 1 ".
 |
| صورة رقم " 1 " |
·
قم باختيار
الإعدادات التي تناسبك - كما بالصورة رقم " 2 "
ثم قم بالحفظ.
 |
| صورة رقم " 2 " |
2-
قم بالذهاب إلى
قالب مدونتك.
3-
قم بالبحث عن
الوسم التالي :
]]></b:skin>
4-
قم بإضافة أحد
أكواد الاستايلات الآتية حسبما يروق لك فوق الوسم السابق ثم قم بالحفظ. مع مراعاة
أن ملاحظات التنسيق موجودة داخل الأكواد.
الاستايل رقم " 1 " :
الكود :
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;font-size:1.3em;text-indent:-12px;font-size:18px; /* حجم خط عنوان الإضافة */text-align:center;color: #fff; /* لون خط عنوان الإضافة */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:8px 0px 1px;right:-7px;width:290px; /* عرض الإضافة */}#PopularPosts1 li{position:relative;margin:0 0 10px 0;padding:3px 17px 0 2px;right:-5px;width:285px;}#PopularPosts1 ul li{background: #ddd; /* لون خلفية عناوين المواضيع */position: relative;display: block;padding:.4em 2em .4em .2em;*padding: .2em;margin: .5em 0;text-decoration: none;border-radius: .3em;transition: all .3s ease-out;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute;top: 50%;margin: -1.2em;height: 2.3em;width: 2.3em;line-height: 2em;font-size: 16px; /* حجم خط الترقيم */color: #fff; /* لون خط الأرقام */background: #FB8835; /* لون خلفية الأرقام */border: .2em solid #fff; /* حجم و لون الإطار حول الأرقام */-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;text-align: center;font-weight: bold;border-radius: 2em;position: absolute;right: 0;transition: all .3s ease-out;}#PopularPosts1 ul li:hover{background: #eee; /* لون خلفية عناوين المواضيع عند المرور بالماوس */}#PopularPosts1 ul li:hover:before{transform: rotate(360deg); /* درجة دوران الأرقام عند المرور على عناوين المواضيع بالماوس */}#PopularPosts1 ul li a{font: 15px Droid Arabic Kufi; /* حجم و نوع خط عناوين المواضيع */text-shadow: 0 -1px 2px #fff;color: #444; /* لون خط عناوين المواضيع */display:block;min-height:25px;text-decoration:none;text-transform: uppercase;}#PopularPosts1 ul li a:hover{color: #3366ff; /* لون خط عناوين المواضيع عند المرور بالماوس */}
الاستايل رقم " 2 " :
الكود :
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;margin-bottom: 5px;font-size:18px; /* حجم خط عنوان الإضافة */color:#fff; /* لون خط عنوان الإضافة */text-align:center;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;right:-8px;width:100%;}#PopularPosts1 li{width:100%;position:relative;right:0;margin:0 12px 1px 0;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute;right: -30px;top: 50%;margin-top: -14px;background: #8E8E8E; /* لون خلفية الأرقام */height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff; /* لون خط الأرقام */font-size: 15px; /* حجم خط الترقيم */}#PopularPosts1 ul li:after{position: absolute;content: '';right: -2px;margin-top: -.7em;top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right:10px solid #8E8E8E;}#PopularPosts1 ul li a{color: #444; /* لون خط عناوين المواضيع */text-decoration: none;font-size:15px Droid Arabic Kufi; /* حجم و نوع خط عناوين المواضيع */}#PopularPosts1 ul li {position: relative;display: block;padding:.4em .8em .4em .4em;*padding: .4em;margin:.5em 0.4em .5em 0;background: #ddd; /* لون خلفية عناوين المواضيع */transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* لون خلفية عناوين المواضيع عند المرور بالماوس */}#PopularPosts1 ul li a:hover{color:#444; /* لون خط عناوين المواضيع عند المرور بالماوس */margin-right:3px;}
الاستايل رقم " 3 " :
الكود :
#PopularPosts1 h2{
position:relative;
padding:8px 17px 6px 63px;
width:100%;margin:0;font-size:18px; /* حجم خط عنوان الإضافة */background:#4F4F4F; /* لون خلفيةعنوان الإضافة */color:#fff; /* لون خط عنوان الإضافة */text-align:center;text-indent:18px;}#PopularPosts1 h2:before{position:absolute;content:"";top:36px;left:0px;width: 0px;height: 0px;margin-top:4px;border-bottom:12px outset transparent;border-right:12px solid #000000;}#PopularPosts1 h2:after{position:absolute;content:"";top:-6px;right:-5px;width: 0px;height: 0px;border-bottom:24px outset transparent;border-top:24px outset transparent;border-right:24px solid #ffffff;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;right:-8px;width:100%;}#PopularPosts1 li{width:100%;position:relative;right:0;margin:7px 12px 16px 0;padding:10px 5px 0 4px;}#PopularPosts1 ul li:before{content:counter(li);counter-increment:li;position:absolute;top:-2px;right:-20px;font-size:25px; /* حجم خط الترقيم */width:20px;color:#000; /* لون خط الأرقام */}#PopularPosts1 ul li a{display:block;font-size:15px Droid Arabic Kufi; /* حجم و نوع خط عناوين المواضيع */color: #666; /* لون خط عناوين المواضيع */text-decoration:none;transition: all .1s ease-in-out;padding-right:5px;}#PopularPosts1 ul li a:hover{color:#3366FF; /* لون خط عناوين المواضيع عند المرور بالماوس */margin-right:3px;}
الاستايل رقم " 4 " :
الكود :
#PopularPosts1 h2{
padding:8px 0 3px 10px;
width:100%;
margin:0;font-size:18px; /* حجم خط عنوان الإضافة */color:#fff; /* لون خط عنوان الإضافة */position:relative;right:-20px;display:block;text-align:center;border-bottom:2px solid #ccc; /* حجم و لون الإطار السفلي لخلفية عنوان الإضافة */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{width:100%;position:relative;right:0;margin:0 10px 6px 0;padding:4px 5px;}#PopularPosts1 ul li:before{ /* تنسيق الأرقام */content:counter(li);counter-increment:li;position:absolute;top:3px;right:-39px;font-size:22px; /* حجم خط الترقيم */width:32px; /* عرض خط الترقيم */height:32px; /* ارتفاع خط الترقيم */border-radius: 50%;color:#777; /* لون خط الأرقام */border: 2px solid #ddd; /* حجم و لون الإطار الدائري للأرقام */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;right:-45px;width:100%;margin:0;min-height:28px;padding:5px 39px 3px 3px;color:#333; /* لون خط عناوين المواضيع */text-decoration:none;font-size:15px Droid Arabic Kufi; /* حجم و نوع خط عناوين المواضيع */}#PopularPosts1 ul li a:hover{color:#3366ff; /* لون خط عناوين المواضيع عند المرور بالماوس */margin-right:3px;}
* يمكنك
معاينة الاستايلات الأربعة مجمعة من هنا :
تم بحمد الله وحده
و انتظرونا في التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
اشترك في خدمة البريد ليصلك جديدنا
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .