تنسيق آداة قائمة الروابط وفتح روابطها في نافذة جديدة

قد تكون إضافة قائمة الروابط مهملة من كثير من المدونين بل البعض لم يستخدمها من قبل لذلك من المهم ان نتعرف عليها في هذا الموضوع 

إضافة قائمة الروابط : هي إضافة تمكنك من وضع روابط منسقة لمواقعك او روابطك المفضلة ومن خلالها تستطيع التعديل والحذف بسهولة دون داعي لتحرير أكواد HTML أو وجود أخطاء 

ما إستخدامات تلك الإضافة ؟

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

كيفية تركيب الإضافة ؟

1. من صفحة التخطيط
2. إضافة آداة
3. ثم اختار آداة قائمة الروابط

تنسيق الإضافة بإستخدام الكود التالي

.LinkList ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.LinkList ul li {
  margin: 0;
  padding: 0;
}
.LinkList li a {
  background-color: #444444;
  box-shadow: 0 1px 0 4px #fff;
  color: #fff;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
.LinkList li a:hover {background-color: #fc5400;}
هذا اللون #444444 هو لون خلفية الروابط
وهذا #fc5400 هو اللون عند تمرير المؤشر
*هذا التنسيق سيعمل على أى إضافة قائمة روابط موجوده في قالبك
بعض القوالب تكون الآداة مستخدمه في القائمة العلوية بالتالي سيحدث تشويه
فيمكنك ان تجعل هذا التنسيق فقط على الىداة التي ستضيفها
بإستبدال الكود الأحمر بمعرف الآداة . كيف؟
ابحث عن الآداة في القالب والمعرف هو الكلمة التي بعد id مثال

كما تلاحظ هنا المعرف هو LinkList1 وتكتب قبله فقط # ليكون #LinkList1
وطبعا الفتح في نافذة جديدة كما هو موضح في الصورة السابقة
أضف الكود target='_blank' في المكان الموضح في الصورة

شرح مبسط للإستخدام

وتجربة موفقة

تنسيق التعداد الرقمي في بلوجر

من أهم تنسيقات صندوق كتابة المواضيع في بلوجر هو خيار التعداد الرقمي فهو يميز النقاط الهامة ويرتبها لكن هذا الخيار بدون تنسيق مميز في بلوجر لكن يمكن اعطائه تنسيق مميز يحسن من مظهره ويزيد من جذبه لإنتباه القارئ سيتم طرح تنسيقين اساسيين وطريقة تلوينهما بحسب رغبتك اكواد التنسيقات تضاف فوق الوسم ]]>

نبدأ مع التنسيق الأول

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-right:0;
padding-right:0
}
.post ol li{
position:relative;
margin:0 15px 20px 0 !important;
padding:4px 10px 4px 5px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2;
background:#f2f2f2;
text-indent:14px;
}
.post ol li:before {
  background:#0062c4;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font: bold 14px serif;
  margin: 0 0 10px;
  padding: 5px 3px !important;
  position: absolute;
  right: -9px;
  text-align: right;
  text-indent: 6px;
  top: -5px;
  width: 20px;
}
.post ol li:after {
  border-color: transparent #0062c4 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0 0;
  content: "";
  height: 0;
  position: absolute;
  right: 17px;
  top: -5px;
  width: 0;
}

هذا #0062c4 هو اللون الأزرق عدله باللون المناسب

التنسيق الثاني

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-right:0;
padding-right:0
}
.post ol li {
  list-style: none outside none;
  margin: 0 15px 10px 0 !important;
  padding: 4px 10px 4px 5px !important;
  position: relative;
  text-indent: 14px;
}
.post ol li:before {
  background:#0062c4;
  border-radius: 2px;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font: bold 14px serif;
  margin: 0 0 10px;
  padding: 4px 4px 5px 3px !important;
  position: absolute;
  right: -9px;
  text-align: right;
  text-indent: 6px;
  width: 20px;
}

نفس الشئ هذا #0062c4 هو اللون الازرق استبدله
أما هذا الرقم 2 هو درجة الإستدارة زده بقدر ما تشاء ويمكنك بجعله 50 ان يصبح مستديراً تماماً
بالتوفيق

كود المشاركات الشائعة بتاثير مميز وتنسيقك الخاص

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

.popular-posts li {
  list-style:none;
  margin:-7px -30px -5px 5px;
  text-align: right;
}
.PopularPosts .item-thumbnail {
  background:#D40147;
  border-radius: 0 8px 8px 0;
  float: right;
  margin: 0 0 0 8px;
  padding: 8px 8px 0;
}
.item-thumbnail img {
  background:#F1F1F1;
  border: 2px solid #777;
  border-radius: 50%;
  height: 58px;
  padding: 0;
  transition: all 1.5s ease 0s;
  width: 60px;
}
.item-thumbnail img:hover {transform: rotate(1440deg); -webkit-transform: rotate(1440deg);}
.PopularPosts .item-title {
  background:#ddd;
  border-radius: 8px 0 0 8px;
  height: 76px;
  margin: 0 5px;
  padding-bottom: 0.2em;
}
.popular-posts .item-title a {color: #222;}
.popular-posts .item-title a:hover {color: #D40147;}

شرح التنسيق

هذا #D40147 هو لون خلفية الصور
وهذا #F1F1F1 هو لون خلفية الحدود حول الصورة
وهذا #ddd هو لون خلفية الرابط
هذا #222 لون الرابط
وهذا #D40147 لونه عند التمرير 
ملاحظات بسيطة
يجب ان تلغي تفعيل المقتطف من بتحرير آداة المشاركات الشائعة وازالة التأشير من جوار كلمة مقتطف
ايضاً لو لديك تنسيق داخل القالب للمشاركات الشائعة قد يتعارض مع هذا التنسيق فيجب حذف القديم اولا
يمكنك المحاولة بتحديد اكواد القديم ستجدها تحمل نفس معرف التنسيق
PopularPosts
وبالتوفيق

المشاركات الشائعة بالترقيم بنسختين بسيطة ومتعددة الألوان

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

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

كل ما عليك فعله هو اضافة كود الآداة التي تعجبك فوق وسم الستايل قم بتوسعة العنصر واضف الكود فوق الوسم التالي ]]>

 

الإضافة الملونة

الكود

/* ==========================
POPULAR POST - cnmu colored
========================== */
#PopularPosts1 ul li a:hover{color:#fff; text-decoration: none !important; margin-bottom:0 !important;}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:200px;
max-width:60px;
max-height:60px;
margin-left:4px;
}

الإضافة البسيطة

الكود

/* ==========================
POPULAR POST - cnmu simple
========================== */
#PopularPosts1 ul li a:hover{color:#000; text-decoration: none !important; margin-bottom:0 !important;}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {width:90%}
#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{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li {
  background:#FFFFFF;
  border: 2px solid #777777;
  border-radius: 25px 0;
  margin: 6px 0;
  padding: 10px;
  position: relative;
}
#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid #06BBFD;}
#PopularPosts1 img {
border-radius:200px;
max-width:60px;
max-height:60px;
margin-left:4px;
}

الكودين المعلمان بالأحمر هما لون خلفية المشاركات الشائعة والثاني هو لون الإطار

الكودين المعلمان بالأزرق هما نفس الشئ ولكن عند مرور الماوس
ملحوظة بعض القوالب قد تكون بها كود بالفعل لتنسيق المشاركات الشائعة وهذا قد يسبب تعارض
لذا يجب حذفه أولا ولتحديد هذا الكود ستجده مشابه لتلك الأكواد يحمل معرف
PopularPosts1
يعني مثلا

 #PopularPosts1 { 

background:#fff;
}

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

وبالتوفيق

تنسيق آداة شريط الفديو في بلوجر

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

معاينة

أولا نقوم بتركيف الإضافة والدخول لصفحة الإضافات وإختيارها ويمكن تنسيقها بإضافة أسم قناتك او كلمات دلائلية كما تحب

والآن مع طريقة التنسيق

ندخل الى تحرير القالب نقوم بتوسيع عناصر الستايل بالضغط على السهم المخصص لذلك

ثم فوق الوسم ]]> نضيف الكود التالي

.videoBar-container {float:right;}
div.resultDiv_gsvb {
  background:transparent;
  border:0;
  height: 100px;
  margin-bottom: 5px;
  text-align: center;
  width: 130px;
margin-right:10px;
}

div.resultDiv_gsvb img {
  cursor: pointer;
  display: inline;
  height: 90px;
  width: 120px;
border:3px solid #fff;
outline:1px solid #000;
}

div.resultDiv_gsvb img:hover {
border: 3px solid #C53E08;
outline: 1px solid #F90004;
transition: all 0.9s ease 0s;}

table.resultTable_gsvb {width:300px;}
table.gsc-branding, table.gcsc-branding{display:none}

.videoBar-container {float:right;}
table.resultTable_gsvb td {float:right; padding:0;}

الأرقام المعلمة باللون الأزرق هي عرض صورة الفديو ويجب ان يتم تغييرها بنفس القيم يعني ان زدت الأول 5 تزيد الآخر 5

والأرقام المعلمة بالأحمر هي طول صورة الفديو وتعامل بنفس الطريقة

هاذين اللونين هما الوان حدود والإطار الخارجي للصورة

#fff

 #000

اما هاذين فهما نفس الشئ الحدود والإطار الخارجي ولكن عند تمرير الماوس

#C53E08

#F90004

أما الرقم 300 هو حجم الإضافة بمعني كلما كبر الحجم ستجد الفديوهات في خط واحد اما لو اصبح الحجم أقل من الصور ستنزل ستصبح صفوف توضيح أكثر

لو حجم الصورة 100 أى الأربع صور الخاصة بالفديو حجمهم يساوي أكثر من 300 وبالتالي ستظهر صورتين ثم ستصبح الصورتين الثانيتين في صف ثاني لكن ماذا لو جعلنا مثلا حجم الصورة 300 ستجد أن الأربع صور اصبحوا تحت بعضهم في صفوف أو لو جعلنا الصور صغيره مثلا 48 سنجدهم كلهم في صف واحد عموما جرب تعدي الرقم وستفهم أو اجعله كما هو ان لم تريد تعديل في الشكل وتجربه موفقة بإذن الله

طريقة تنسيق قائمة وسحابة التسميات

من الإضافات الأساسية في مدونات بلوجر آداة التسميات هذه الآداة التي تعرض الأقسام الخاصة بالمدونات والتي تسهل عملية الوصول لكل قسم لكن الشكل الأساسي للآداة ليس جيدا وفي الغالب يكون شكله مشوه للقوالب نظرا لان القوالب كل يوم في تحسن والشكل الثابت لتلك الآداة لا يجاري هذا التحسن وبالتالي تكون الإضافة شكلها شاذ عن الشكل العام للقالب ولهذا في موضوعنا سنتعلم طريقة تنسيقها والآداة يتم عرضها بشكلين مختلفين الأول القائمة والثاني السحابة Cloud ولكل منهما تنسيق خاص لهذا سنشرح كل تنسيق بشكل منفرد لكن أولا هذه طريقة التبديل بين التنسيقين , قم بالدخول الى لوحة التخطيط في مدونتك ثم قم بعمل تحرير لآداة التسميات ثم اختر التنسيق الذي يعجبك كالتالي

أولا تنسيق القائمة 

هذا هو الشكل بعد التنسيق

كل ما عليك فعله أن تدخل الى تحرير قالبك ثم تضغط على توسيع عناصر الستايل بالضغط على السهم المخصص لذلك 

ثم فوق الوسم ]]> أضف الكود التالي

#Label1 li {
float: right;
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqRnOCZN1S5hKzU8lXYS37IE80eMxMPqS-N5Fo3F7kksNW0NpT00EQDmWgnyCjrMyyRu3AhLspVXAereCu8rZ-vCblbRCELmC94XzuOnfA_CU9aejyeQzqB1ohvwKQvwJPBrUsE0wJNnr/s16/folder.png)no-repeat scroll 121px 9px;
padding: 5px 25px 7px 9px;
font-size: 12px;
margin: 0 4px 10px 0;
display: inline-block;
border: 1px solid #d7d7d7;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color:#aeaeae;
width:108px;
}
#Label1 li a{color:#000;}
#Label1 li:hover { background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqRnOCZN1S5hKzU8lXYS37IE80eMxMPqS-N5Fo3F7kksNW0NpT00EQDmWgnyCjrMyyRu3AhLspVXAereCu8rZ-vCblbRCELmC94XzuOnfA_CU9aejyeQzqB1ohvwKQvwJPBrUsE0wJNnr/s16/folder.png)no-repeat scroll 121px 9px;}

ولتنسيق الشكل غير التالي

هذا اللون هو لون الأزرار #fafafa
وهذا اللون هو لون الأزرار عند تمرير الماوس #ffffff
وهذا هو لون الإطار #d7d7d7
وهذا لون الخط  #aeaeae
 وهذا لون الخط عند تمرير الماوس #000
والرقم 5 هو درجة استدارة الزر قم بالزيادة أو الإنقاص حتى تصل للنتيجة التي ترضيك
الرابط المعلم بالأحمر هو رابط الأيقونة الصغيرة على الأزرار قم بتغيرها بأى رابط أيقونة أخرى تنسابك مع مراعاة أن يكون المقاس 16x16
في حالة أردت تعديل حجم الأزرار قم بزيادة الأرقام المعلمة بالأزرق بنفس النسبة ان زدت أحدها 10 زد الآخرين كذلك

ثانيا تنسيق السحابة 

ونفس الطريقة ستضيف الكود التالي كما أضفت الأول او أضفه تحته إن كنت تريد استخدامهما مع بعض 

هذا معاينة للنتيجة اولا

 وهذا هو الكود

.label-size{
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
margin:0 4px 7px 0;
padding: 2px 7px 2px 7px;
text-transform: uppercase;
border: solid 1px #777;
float:right;
text-decoration:none;
font-size:14px;
font-weight:bold;
box-shadow: 0 1px 2px #999;
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
text-align:center;
}
.label-size:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
}

طرقة تنسيق السحابة

هاذين اللونين هما الوان التدرج الخاص بأزرار التسميات #F0F0F0 , #DAD8D9
قم بتبديل كل لون بالمرات المتكرر بها
أما هاذين اللونين هما اوان التدرج عند مرور الماوس  #EEF3F6,#D1E0E5
 غيرها بنفس الطريقة
هذا اللون هو لون الإطار #777
والرقم 20 هو درجة استدارة الزر

تنسيق موفق والى اللقاء في دروس اخرى 

تحياتي

تنسيق شكل عناوين بلوجر

عناوين بلوجر إضافات أساسية في صندوق كتابة المواضيع ولكن كثير من المدونين لا يستخدمونها ولم يفكر حتى في تجربتها أو قد يكون جربها لكن لم يرى نتيجة مرضية والسبب انها ليست منسقة ويجب تنسيقها يدوياً لذا سنقوم بعمل تنسيقات مميزة عليها وعندما تعتاد على  إستخدامها ستشعر بالفرق في شكل وجودة مواضيعك وسنذكر في البداية معلومات بسيطة كتعريف بتلك العناوين
الوسوم الخاصة بالعناوين
h2 وهو العنوان الرئيسي
h3 وهو العنوان الفرعي واغلب قوالب بلوجر يتم إستخدام هذا العنوان في تنسيق عنوان التدوينات
h4 وهو العنوان الثانوي
سنقوم بعمل تعديل على إثنين من تلك العناوين لان الثالث خاص بشكل عنوان التدوينة فلا نريد إفساده
وعند كتابة موضوع وتحديد جزء ثم إختيار العنوان ستجد الشكل أصبح أفضل وهذا مثال لمدونتي

عنوان فرعي

عنوان ثانوي

ما رأيك هل اعجبك ^_^

لا تقلق ستحصل على شكل عنوان يتناسب مع مدونتك 

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

واذهب للوسم ]]> وضع الكود التالي فوقه 

.post h2 {
background: #0085FA;background: -moz-linear-gradient(top,#46B3F9 ,#0085FA);background: -webkit-linear-gradient(top,#46B3F9,#0085FA);
    color: #ffffff;
    font-size: 19px;
    font-weight: bold;
    padding:4px;
    border-right:5px solid #035FAF;
    border-left:5px solid #035FAF;
border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;
box-shadow: 0 1px 3px #999;
}

.post h4 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrbmQwp61I0sDXB9DGW9LWb0XDc03vH7pC0pNstLZameCnXEZmFBaMmaLTOfmvCe66NFT-oxEvOvWqsRFT2fxO2tNmxLFX7oK8wKhn1dmRIAHYkpRjxb80XniGdagm_UKyPiW9E5HFWz9/s16/sah-icon.png") no-repeat scroll right center transparent;
    color: #000;
    font-size: 17px;
    font-weight: bold;
    padding-right:25px;
text-shadow: 0 2px 2px #000;
}

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

ملاحظة أخرى هناك بعض القوالب يكون الأمر بها متغير ويتم إستخدام العنوان الرئيسي كعنوان للتدوينة

هنا ستقوم بتغيير h2 الى h3

هذا هو الشكل الناتج من الكود

 إن كان لا يتناسب مع اللوان مدونتك يمكنك تنسيقه كالتالي

هاذين اللونين #0085FA ,#46B3F9 هما تدرج لوني الخاص بالعنوان قم بإستبدالهم 

هذا اللون     color: #ffffff; خاص بلون الخط 

والرقم 19 هو حجم الخط

أما هذا اللون #035FAF  والمتكرر لمرتين هو لون الجزئين الجانبيين في العنوان

الرابط الذي باللون الأحمر هو رابط صورة علامة صح في العنوان الثانوي

ونفس الشئ في حجم الخط 17 ولون الخط #000

ولو لديك خبره أكبر في أكواد CSS ستستطيع تنسيقة بشكل أفضل 

بالتوفيق بإذن الله

إستبدال رسائل أقدم ورسائل أحدث بصور أو أزرار CSS

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

الطريقة الأولى الإستبدال بالصور

قم بالدخول لتحرير القالب  ولا تنسى أخذ نسخة إحتياطية 

ثم إبحث عنـــ وإستبدله بالتالي 

وإبحث عنــ وإستبدله بالتالي 

ثم إبحث عنــ وإستبدله بالتالي 

الطريقة الثانية الإستبدال بأزرار CSS

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

سنطبق نفس ما سبق ولكن مع تعديل بسيط أننا بدلا من أن نستبدل الأكواد بأكواد أخرى سنستبدلها بكلمات مثل السابق التالي الرئيسية 

أو أي كلمات تحبها

ثم سنغير بعض الأشياء

قم بالبحث في قالبك عن #blog-pager-newer-link

ثم حدده حتى تصل لقوس الإغلاق } فكل كود ستجده يبدأ بقوس { ثم ستجد أكواد ثم ينتهي بقوس } نحن نريد تحديد الكود من بدايته حتى نهايته ثم نستبدله بالتالي

#blog-pager-newer-link {
float:right;
line-height:1.8em;
}

نفس الشئ ولكن مع هذا الكود #blog-pager-older-link 

ونستبدله بالتالي

#blog-pager-older-link {
float:left;
margin-left:8px;
line-height:1.8em;
}

وآخيراً وليس أخراً مع هذا الكود #blog-pager 

ونستبدله بالتالي

#blog-pager {
float:center;
height:40px;
line-height:1.8em;
text-align:center;
padding-top:15px
}

ثم سنضع أكواد الــ CSS التالية فوق الوسم ]]>

.home-link,.blog-pager-newer-link,.blog-pager-older-link {
background: #000;background: -moz-linear-gradient(top,#888886,#000);background: -webkit-linear-gradient(top,#888886,#000);
color:#fff;
font-size:17px;
font-weight:bold;
line-height:16px;
text-decoration:none;
border:1px solid #000;
padding:5px 15px;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}

.home-link:hover,.blog-pager-newer-link:hover,.blog-pager-older-link:hover {
background: #888886;background: -moz-linear-gradient(top,#000,#888886);background: -webkit-linear-gradient(top,#000,#888886);
color:#fff;
text-decoration:none;
border:1px solid #000;
border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
}

اللون #000 واللون #888886 الأوائل هما لوني خلفية الزر 

وال#fff هو لون الخط 

وهذا الكود border:1px solid #000; يخص حجم ولون الإطار حول الزر

أما border-radius:2px فكلما زدت في الرقم 2 سيصب الزر أكثر إستدارة

اللون #888886 واللون #000 الثانيين  هما لوني خلفية الزر عند مرور الماوس

وال#fff هو لون الخط 

قم بتغيير ما يعجبك وموفقين بإذن الله

خمس نماذج لصندوق الإقتباس إختر ما يناسبك

صندوق الإقتباس أو Blockquote أحد أهم أدوات كتابة وتنسيق المواضيع في منصة بلوجر خصوصا للمدونات التي تطرح أكواد أو شروحات تحتاج تمييز أجزاء معينة منها

 وهذا شكل زر الإقتباس في بلوجر

 لذا ليتم إعطاء شكل مميز يجب ان يتم تنسيق شكل صندوق اللإقتباس وهذه خمس نماذج لتختار منها ما يناسب مدونتك 

 طريقة الإضافة قم بالدخول لتحرير القالب وإبحث عن .post blockquote وإحذف الكود الخاص به باكمله ملوحظة لتحديد الكود بأكمله بداية الكود يحتوي قوس ونهايته يحتوي قوس مثال

.post blockquote {
overflow:auto;

}

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

ثم أضف مكان ما حذفته كود النموذج الذي يعجبك

أما إن لم تجد أساسا الكود في قالبك فقم بإضافة كود النموذج فوق الوسم ]]>

الشكل الأول

 .post blockquote {
background: #F2F2F2;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

الشكل الثاني

.post blockquote {
overflow:auto;
max-height:250px;
border: 1px dashed #FFC600;
margin: 10px;
padding: 10px 10px 10px 60px;
background: #FFF8DD url(https://lh6.googleusercontent.com/-Ny881sz3L-o/UQ8ZYYtFzxI/AAAAAAAAAeQ/xrpyI6ekH88/s71/bq2.png) no-repeat;
background-position:20px 10px;}

ولتنسيقه #FFC600 هذا لون الإطار

#FFF8DD هذا لون الخلفية

وغير رابط الصورة بصورة بنفس المقاس وباللون الذي تختاره للخلفية

الشكل الثالث

.post blockquote {
position: relative;
z-index: 50;
background:#fff url(https://lh4.googleusercontent.com/-AZ3EY_MY_QU/UQ8ZYU-_hXI/AAAAAAAAAeM/iHwn4pfuEJ4/s36/bq3.gif) top left repeat;
border:1px solid #999;color:#000;
display:block;
font-family:"Courier New", Courier, monospace;font-size:13px;
line-height:18px;
margin:10px 0 10px;
padding:18px 10px 17px;
overflow:auto;
max-height:250px;
}

الشكل الرابع

.post blockquote {
    margin : 0 20px;
    padding: 10px 20px 25px 20px;
    background : #9FCFFF;
    color : #484848;
    border: 5px dashed #fff;
    }

#9FCFFF لون الخلفية

الشكل الخامس

.post blockquote {
overflow:auto;
max-height:250px;
background:#000;
color:#fff;
border-left:20px solid #969695;
border-radius:20px;
margin:10px;
padding:10px;
}

#000 لون الخلفية

#fff لون الخط

#969695 لو الإطار على اليسار

ملحوظة أخيرة بخصوص الكود المكرر في معظم الأكواد باللون الأحمر هذا الكود خاص بإرتفاع الإقتباس

وهو 250 إن زادت الكلمات عن هذا الإرتفاع يظل الكود بهذا الإرتفاع ويظهر شريط التمرير يمكنك زيادة الإرتفاع بزيادة الرقم

أما إن أردت ان يظهر الكود بدون شريط تمرير فإحذف الكود ذو اللون الأحمر من النموذج الذي تستخدمه

دمتم بكل ود