السلام عليكم ورحمة الله ، أهلا بك فى مدونة قوالب عربى ، معنا قالب جديد اليوم من أحد قوالب بلوجر المعربة المجانية ،سهلة التخصيص ،التركيب و متوافق مع جميع الاجهزة اللوحية.
قالب Focus المعرب ، هو قالب اليوم ، ستميز بلأنه قالب لأصحاب المدونات التقنية ولمحبى البساطة واللون الاصفر 😂. ما عاليا من المزاح ، بـ قالب Focus المعرب مجهز بأماكن للأعلانات لتضمن ربحك بالتأكيد و معه تخصيص لأزرار التحميل والجداول فى شرح اليوم.
 |
| قالب Focus المعرب - قالب تقنى بسيط |
مميزات القالب
| المميزات | الاتاحــة |
|---|---|
| متوافق مع الاجهزة الحديثة | متــاح |
| صديق للهاتف | متــاح |
| سريع على الهاتف و الكمبيوتر | متــاح |
| كود لصفحة (اتصل بنا) | متــاح |
| القائمة العلوية ثابت | متــاح |
| أكواد تخصيص | متــاح |
| أزرار لمشاركة المقالة | متــاح |
| صديق للسيو | متــاح |
| زر العودة الى اعلى | متــاح |
تحميل ومعاينة القالب
تخصيص القالب
أولا: القائمة العلوية (Header)
%20(1).png "التعديل على القائمة العلوية بقالب Focus المعرب"){kind=small}
للتعديل على القائمة العلوية بـ قالب Focus المعرب ، فعليك الذهاب الى تبويت
المظهر
تعديل الـ HTML ، وقم بالبحث عن (من نحن أو الرئيسية التى يتبعها نفس الكلمة السابقة).
كما هو امامك فـ المحدد باللون الازرق هى القوائم المنسدلة بالقالب ، ويمكنك التعديل على اسمائها كما تشاء وازالة الـ # ووضع رابط القسم الذى بمدونتك ، ويكون كما فى الكود التالى :
https://8walb-3rba.blogspot.com/search/label/YOUR-LABAL
يجب تغير YOUR-LABAL باسم قسمك الموجود فى مدونتك ، وتغير https://8walb-3rba.blogspot.com برابط موقعك أنت
.png "التعديل على القائمة العلوية بقالب Focus المعرب")
اضافة اعلانات
للتعديل و اضافة مساحاتك الاعلانية بـ قالب Focus المعرب ، فعليك الذهاب
تبويت
التنسيق ثم الذهاب
تبويت Banner وهو موجود فى اسفل و أعلى المدونة ، يمكنك اضافة 2 من الوحدات الاعلانية بنفس الطريقة.
%20(1).png "اضافة وحدات اعلانية اعلى واسفل المدونة فى قالب Focus المعرب")
اضافة اداة (تابعنا)
للتعديل على أداة (تابعنا) بـ قالب Focus المعرب ، فعليك التوجه
تبويت
التنسيق ثم التوجه
تبويت تابعا ، وكل ما عليك هو تغير الـ # برابط صفحاتك على مواقع التواصل الأجتماعى.
.png "التعديل على اداة تابعنا بقالب Focus المعرب")
التعديل على الفوتر (Footer)
.png "التعديل على الفوتر (Footer) فى قالب Focus المعرب")
للتعديل على الفوتر (Footer) بـ قالب Focus المعرب ، فعليك الذهاب الى تبويت المظهر تعديل الـ HTML ، وقم بالبحث عن (صفحات مهمة).
وقم بالتغير على الكلام بما يناسبك وتغير الـ # بالرابط الذى تريده ، وفى القائمة البريدية قم بتغير mailverify بمعرف الـ feedburner الخاص بك.
.png "التعديل على الفوتر (Footer) فى قالب Focus المعرب")
اضافة صفحة (اتصل بنا)
لاضافة صفحة اتصل بنا فى قالب Focus المعرب ، فعليك التوجه
تبويت الصفحات وقم باضافة صفحة جديدة وسميها contact-us ثم غيرها فيما بعد ، ثم توجه
تبويت الـ HTML و قم بوضع الكود التالى ،بدون اضافة نموذج اتصال بلوجر التقليدى.
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الاسم *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="بريدك الالكترونى *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="محتوى الرسالة *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="ارســال" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out;font-family: 'Readex Pro', sans-serif;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out;font-family: 'Readex Pro', sans-serif;}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease;font-family: 'Readex Pro', sans-serif;}
#ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
اضافة فيديوهات يوتيوب متجاوبة
لاضافة فيديوهات يوتيوب متجاوبة فى قالب Focus المعرب ، من أجل تجاوب أعلى للأجهزة اللوحية المختلفة ، فعليك التوجه
تبويت الصفحات ثم قم بانشاء صفحة جديدة و توجه
تبويت الـ HTML وضع الكود التالى :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/yiv64_QMsd4">
</div>
</div>
</div>
عليك تغير yiv64_QMsd4 بمعرف الفيديو الذى تريد أن تضيفه
اضافة أزرار التحميل و المعاينة
لاضافة أزرار التحميل و المعاينة فى قالب Focus المعرب ، فعليك التوجه تبويت الصفحات ثم قم بانشاء صفحة جديدة و توجه تبويت الـ HTML مع تغير الـ # الى رابط التحميل أو المعاينة وضع الكود التالى :
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="#" target="_blank">معاينة</a></li> <li><a class="download" href=" #" target="_blank">تحميل</a></li> </ul><div style="text-align: right;"><br /></div><h2 style="text-align: right;">جدول</h2><div style="text-align: right;"><br /></div> </div>
اضافة قائمة ترقيم منسدلة
لاضافة قائمة الترقيم المنسدلة فى قالب Focus المعرب ، فعليك التوجه تبويت الصفحات ثم قم بانشاء صفحة جديدة و توجه تبويت الـ HTML مع تغير الكلام بما يناسبك ، وضع الكود التالى :
<h2 style="text-align: right;">قائمة منقطة منسدلة</h2><div><br /></div> <ul> <li>هذه قائمة 1</li> <li>هذه قائمة 2</li> <li>هذه قائمة 3</li> <li>هذه قائمة 4 <ul> <li>هذه قائمة منسدلة 1</li> <li>هذه قائمة منسدلة 2</li> <li>هذه قائمة منسدلة3</li> </ul> </li> <li>هذه قائمة 5</li></ul>
الخاتمة
الى هنا ينتهى شرح تخصيص قالب Focus المعرب بواسطة مدونة قوالب عربى ، واذا واجهت اى مشكلة ، فالتعليقات مفتوحة لك ، و اذا واجهت اى عطل فى الروابط : التحميل أو المعاينة فراسلنا عبر صفحة اتصل بنا.
روابط اضافية
رابط القالب من صفحة المصمم :اضغط هنا
رابط تخصيص القالب من المصمم :اضغط هنا