المشاركات
كيفية إضافة ثلاثة أعمدة تذييل القطعة في مدون
مقالة مترجمة - Heikal Group
ربما تكون قد شاهدت تذييلاً ذا ثلاثة أعمدة في العديد من المدونات المهنية أو التجارية. حيث يمكنك إضافة المواد. خذ تذييل العمود الثالث الخاص بي كمثال. تذييل الصفحة يجعل الزوار مشغولين ويعطونه انطباعًا جيدًا في نهاية مدونتك. يحتوي على 3 أعمدة من الأعمدة حيث يمكنك إضافة اختيارك للأدوات. يمكنك بسهولة ثلاثة القطعة تذييل العمود وتخصيصها كما تريد. إذا كنت تستخدم موضوع WordPress Thesis من التحقق من هذا البرنامج التعليمي لإضافة Footer Widget في الأطروحة. شاهد لقطة شاشة.
كيفية إضافة ثلاثة أعمدة تذييل الصفحة في Blogger (محدث)
اتبع هذه الخطوات ، لإضافة ثلاثة أعمدة تذييل القطعة
الخطوة 1:
انتقل إلى لوحة تحكم Blogger> تصميم> تحرير Html
الخطوة 2:
النسخ الاحتياطي القالب الخاص بك
الخطوه 3:
البحث عن ]]> </ b: skin> n ow الصق شفرة CSS التالية فقط فوق ]]> </ b: skin>
#lower {
border-top: # 737373 6px solid؛
هامش: السيارات؛
font-family: Georgia؛
العرض: 960 بكسل ؛
مساحة الحبر: 0px 0px 10px 0px؛
خلفية: # 1f1f1f.
}
#lower a {
اللون: #DBDBDB؛
font-family: Georgia؛
}
# lower-wrapper {
هامش: السيارات؛
font-family: Georgia؛
المساحة المتروحة: 20 بكسل xx 0 بكسل × 20 بكسل
العرض: 960 بكسل ؛
}
# lowerbar-wrapper {
خلفية: # 1f1f1f.
تعويم: اليسار؛
اللون: #ebedee؛
font-family: Georgia؛
الهامش: 0px 5px auto؛
الحشو السفلي: 20 بكسل.
العرض: 32 ٪.
محاذاة النص: تبرير ؛
FONT-SIZE: 100٪؛
خط الطول: 1.6em؛
word-wrap: break-word؛
إخفاء الفائض؛
}
.lowerbar {margin: 0؛ الحشو: 0 ؛}
.lowerbar .widget {margin: 0؛ الحشوة: 10 بكسل 20 بكسل × 0 بكسل × 20 بكسل ؛}
.lowerbar h2 {
الهامش: 0px 0px 10px 0px؛
المساحة المحجوزة: 3px 0px 3px 0px؛
محاذاة النص: left؛
اللون: # الاتحاد الفرنسي.
النص تحويل: الأحرف الكبيرة.
font: bold 16px Arial، Tahoma، Verdana؛
border-bottom: 3px solid # 666666؛
}
.lowerbar ul {{
على غرار القائمة: لا شيء؛
الهامش: 0؛
الحشو: 0؛
} .lowerbar li a {
العرض: 265 بكسل ؛
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش السفلي: 11 بكسل ؛
الهامش الأيمن: 3 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar li a: visited {
العرض: 265 بكسل ؛
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش السفلي: 11 بكسل ؛
الهامش الأيمن: 3 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar li a: hover {
الخلفية: # 4f4f4f؛
border: 1px solid # 7a7a7a؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5 -webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar a {
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
تعويم: اليسار؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش الأيمن: 3 بكسل ؛
الهامش السفلي: 11 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar a: hover {
الخلفية: # 4f4f4f؛
border: 1px solid # 7a7a7a؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5 -webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
}
border-top: # 737373 6px solid؛
هامش: السيارات؛
font-family: Georgia؛
العرض: 960 بكسل ؛
مساحة الحبر: 0px 0px 10px 0px؛
خلفية: # 1f1f1f.
}
#lower a {
اللون: #DBDBDB؛
font-family: Georgia؛
}
# lower-wrapper {
هامش: السيارات؛
font-family: Georgia؛
المساحة المتروحة: 20 بكسل xx 0 بكسل × 20 بكسل
العرض: 960 بكسل ؛
}
# lowerbar-wrapper {
خلفية: # 1f1f1f.
تعويم: اليسار؛
اللون: #ebedee؛
font-family: Georgia؛
الهامش: 0px 5px auto؛
الحشو السفلي: 20 بكسل.
العرض: 32 ٪.
محاذاة النص: تبرير ؛
FONT-SIZE: 100٪؛
خط الطول: 1.6em؛
word-wrap: break-word؛
إخفاء الفائض؛
}
.lowerbar {margin: 0؛ الحشو: 0 ؛}
.lowerbar .widget {margin: 0؛ الحشوة: 10 بكسل 20 بكسل × 0 بكسل × 20 بكسل ؛}
.lowerbar h2 {
الهامش: 0px 0px 10px 0px؛
المساحة المحجوزة: 3px 0px 3px 0px؛
محاذاة النص: left؛
اللون: # الاتحاد الفرنسي.
النص تحويل: الأحرف الكبيرة.
font: bold 16px Arial، Tahoma، Verdana؛
border-bottom: 3px solid # 666666؛
}
.lowerbar ul {{
على غرار القائمة: لا شيء؛
الهامش: 0؛
الحشو: 0؛
} .lowerbar li a {
العرض: 265 بكسل ؛
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش السفلي: 11 بكسل ؛
الهامش الأيمن: 3 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar li a: visited {
العرض: 265 بكسل ؛
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش السفلي: 11 بكسل ؛
الهامش الأيمن: 3 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar li a: hover {
الخلفية: # 4f4f4f؛
border: 1px solid # 7a7a7a؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5 -webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar a {
font-family: Georgia؛
الخلفية: # 3f3f3f؛
border: 1px solid # 111؛
خط الطول: 1.4em؛
تعويم: اليسار؛
-moz-border-radius: 5px؛
الحشو: 0.5
الهامش الأيمن: 3 بكسل ؛
الهامش السفلي: 11 بكسل ؛
-webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
} .lowerbar a: hover {
الخلفية: # 4f4f4f؛
border: 1px solid # 7a7a7a؛
خط الطول: 1.4em؛
-moz-border-radius: 5px؛
الحشو: 0.5 -webkit-border-radius: 5px؛
إخفاء الفائض؛
اللون: # 000000؛
}
الخطوة الرابعة:
الآن ابحث عن </ body> ثم الصق الرمز التالي أعلى </ body>
<div id = 'lower'> <div id = 'lower-wrapper'> <div id = 'lowerbar-wrapper'> <b: section class = 'lowerbar' id = 'lowerbar1' preferred = 'yes'> <b: widget id = 'HTML12' locked = 'false' title = 'Testing' type = 'HTML' /> </ ب: القسم> </ div> <div id = 'lowerbar-wrapper'> <b: section class = 'lowerbar' id = 'lowerbar2' preferred = 'yes'> <b: widget id = 'Profile1' locked = 'false' title = 'About Me' type = 'Profile' /> <b: idget id = 'HTML5' locked = 'false' title = 'Recent Recent' type = 'HTML' /> </ ب: القسم> </ div> <div id = 'lowerbar-wrapper'> <b: section class = 'lowerbar' id = 'lowerbar3' preferred = 'yes'> <b: widget id = 'HTML3' locked = 'false' title = 'Top Commentators @ AmmarWeb.Tk' type = 'HTML' /> <b: widget id = 'HTML9' locked = 'false' title = 'Our Partners' type = 'HTML' /> </ ب: القسم> </ div> <div style = 'clear: both؛ / /> </ div> </ div>
الخطوة الخامسة:
احفظ القالب الخاص بك. الآن قم بزيارة الصفحة تخطيط> عناصر الصفحة وابدأ في إضافة الأدوات! : >>
التخصيص
يمكنك بسهولة تخصيص مظهر وألوان أداة تذييل الصفحة هذه. لقد كتبت بالخط العريض الأجزاء المهمة في شفرة CSS أعلاه. اقرأ الأوصاف أدناه بعناية لتحسين أسلوبك في تطبيق Three Column Footer Widget.
- خلفية: # 1f1f1f. سيغير تغيير رمز اللون المكون من ستة أرقام لون خلفية هذه القطعة.
- العرض: 960 بكسل ؛ هذا هو عرض القطعة. إذا كنت ترغب في ضبط قيمة العرض هذه وفقًا لعرض مدونتك.
- خلفية: # الاتحاد الفرنسي. والعرض: 32 ٪. هو لون الخلفية وعرض ثلاثة أعمدة حيث تتم إضافة الحاجيات.
- اللون: # 0084ce. هذا هو لون عنوان العناوين
- font: bold 14px Arial، Tahoma، Verdana؛ تحرير هذا لتغيير حجم الخط والأسرة.
- border-bottom: 3px solid # 0084ce؛ قم بتحرير هذا لتغيير سماكة وأسلوب ولون الحد الذي يظهر في أسفل عنوان العنوان
هذا كل شئ
سيتم نشر برنامج تعليمي جديد على أربعة أعمدة تذييل قريبا حتى من التمتع بهذا. الآن تتم إضافة ثلاثة أعمدة تذييل القطعة
How to Add Three Column Footer Widget in Blogger
You might have seen a three column footer at many professional or commercial blogs. Where you can add stuffs. Take my three column footer as example. Footer make visitors busy and give him a good impression at End of your blog. It contains 3 columns widgets where you can add your own choice of widgets. You can easily Three Column Footer Widget and customize it as you want. If you are using WordPress Thesis Theme than check out this tutorial to add Footer Widget in Thesis. See a screenshot.
How to Add Three Column Footer Widget in Blogger (updated)
Follow these steps, to add Three Column Footer Widget
Step 1:
Go to Blogger Dashboard > Design > Edit Html
Step 2:
Backup Your Template
Step 3:
Search for ]]></b:skin> n ow paste the following CSS code just above ]]></b:skin>
#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
Step 4:
Now search for </body> and paste following code just above </body>
<div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar1' preferred='yes'> <b:widget id='HTML12' locked='false' title='Testing' type='HTML'/> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar2' preferred='yes'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='HTML5' locked='false' title='Recent Comments' type='HTML'/> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar3' preferred='yes'> <b:widget id='HTML3' locked='false' title='Top Commentators @ AmmarWeb.Tk' type='HTML'/> <b:widget id='HTML9' locked='false' title='Our Partners' type='HTML'/> </b:section> </div> <div style='clear: both;'/></div></div>
Step 5:
Save your template . Now visit the page Layout > Page Elements and start adding widgets! :>>
Customization
You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your Three Column Footer Widget.
- background:#1f1f1f; Changing the six digit colour code will change the background colour of this widget.
- width: 960px; This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
- background:#fff; and width: 32%; is the background colour and width of the three columns where the widgets are added.
- color:#0084ce; This is the Colour of Title Headings
- font: bold 14px Arial, Tahoma, Verdana; Edit this to change the font size and family.
- border-bottom:3px solid #0084ce; Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
That's All
A new tutorial on four column footer will be soon posted till than enjoy this one. Now Three Column Footer Widget is added!
شارك
" كيفية إضافة ثلاثة أعمدة تذييل القطعة في مدون "