احضرت لكم اليوم قالب شبيه بمدونة مدون وهو قالب رائع واحترافي بألوان جدابة وهادئة. أعجبني القالب كتيرا وأردت أن أشاركه معكم. للإشارة هذا القالب حاول الكثير من المدونين الحصول عليه. القالب من تصميم مدونة محترف الجزائر، وقد أضفت له بعض التعديلات واصلحت به بعض الأخطاء والمشاكل. قالب مدونة مدون جاهز الأن للتحميل.
نبدأ مع صورة لقالب مدونة مدون:
هذه صورة لشكل القالب. فقط إنتظر إستكمال تحميل الصور لتشاهد شكل القالب.
مميزات القالب الشبيه بمدونة مدون:
قالب مدونة المدون قالب رائع وبه عدد من المميزات منها:
- قائمة منسدلة رائعة واحترافية
- متوافق مع أغلب المتصفحات (كروم - فيرفوكس - سفاري - ...)
- قائمة الأقسام احترافية
- تصميم جميل و هادئ وألوان رائعة
- متوافق مع جميل الشاشات و الحواسيب اللوحية الذكية (يعمل على جميع الاجهزة الذكية)
- سلايد شو عريض واحترافي
- مواضيع ذات صلة مدمجة مع المقال.
- أزرار النشر في المواقع الاجتماعية اسفل كل مقال
- تعريف الكاتب تحت كل تدوينة
- تعليقات والرد عليها مع الابتسامات.
- محسن لمحركات البحث
- العديد من المميزات التي جعلته من أروع القوالب تصميما وشكلا ...
تحميل قالب مدونة مدون:
لتحميل قالب مدونة مدون من هنا:
مشاهدة حية للقالب
تحميل القالب
التعديل على القالب:
التعديل على القائمة العلوية أعلى القالب، كما بالصورة:
إبحث عن الكود التالي:
<div id='navtop'>
ستجد هذا الكود:
<div id='navtop'>
<ul id='menuhlng'>
<li><a href='http://blogger4ar.blogspot.com/'>عن الكاتب</a></li>
<li><a href='http://blogger4ar.com/'>أعلن لدينا</a></li>
<li><a href='http://www.blogger4ar.com/'>للإتصال بنا</a></li>
<li><a href='http://blogger4ar.com/'> للإعلان النصى</a></li>
<li class='dgnsubtop'>
<a href='#'><span>روابط هامة</span></a>
<ul class='sub-menu-top hidden'>
<li><a href='http://blogger4ar.blogspot.com/'>إدعم مدون</a></li>
<li><a href='http://www.blogger4ar.com/'> ألأرشيف</a></li>
<li><a href='http://www.blogger4ar.com/'>صفحة طلبات الزوار</a></li>
<li><a href='http://blogger4ar.com/' title='إنضم لمتابعينا'>التسجيل</a></li>
<li><a href='http://blogger4ar.blogspot.com/'> إتفاقية الإستخدام</a></li>
<li><a href='http://blogger4ar.blogspot.com/'>أبلغ عن رابط لم يعمل</a></li>
<li><a href='http://blogger4ar.com/'>إنضم إلينا</a></li>
</ul>
</li>
<li class='dgnsubtop'>
<a href='#'>خدمات</a>
<ul class='sub-menu-top hidden'>
<li><a href='http://blogger4ar.blogspot.com/'>خدمة اطلب تصميمك</a></li>
<li><a href='http://blogger4ar.com/'>خدمة تعريب القوالب</a></li>
<li><a href='http://www.blogger4ar.com/'> خدمة تعديل القوالب</a>
</li>
</ul>
</li>
</ul>
</div>
قم بتغيير الكلمات بالأزرق الى العناوين التي تريد أن تظهر بالموقع. لا تنسى بأن هناك قائمة منسدلة بالقائمة.
وتستطيع تغيير الروابط بالأحمر لتصل للروابط التي تريد.
التعديل على Logo المدونة مع السلايد شو:
التعديل على Logo المدونة:
إبحث عن الكود التالي:
<div id='header-inner'>
ستجد هذا الكود:
<div id='header-inner'>
<a href='http://www.blogger4ar.com/' style='display: block'>
<img alt='مدونة بلوجر للعرب ' height='110px; ' id='Header1_headerimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrJGBINnBarbRFUK_epMI3YGRHc3bRcIu0UijxlXRTfnZiB206-X5pkQBcf16rYsSH5T_soTgg1KOclIQIBndZO6D84aWL_v3mZMxflo2PaZbjR3LSWZ2hXYoTQkBHaIhYEcTOht2HuE/s1600/%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1-%25D9%2584%25D9%2584%25D8%25B9%25D8%25B1%25D8%25A8-blogger4ar-logo.png' style='display: block' width='330px; '/>
</a>
</div>
للتعديل على صورة اللوغو فقط قم بتغيير رابط الصورة بالأحمر الى رابط صورتك الخاصة وستضهر عوض الرمز الخاص بمدونتي مدونة بلوجر للعرب.
التعديل على سلايد شو :
إبحث عن الكود التالي:
<div id='w2bNivoSlider'>
ستجد هذا الكود:
<div id='w2bNivoSlider'>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_hEsFN_cCTyX8YHBrUap5qO_AwCZPEX8ttUPL9scK5rvdjWrAvNTqpX0Dxex37oLChU8-LuKkIKRkFBRqRoEyuXeAr-AhEkobFgrE6OyGPH-XSBex8IlY8UfGn2UIN_lumVF3mIl1sA/s1600/mdwanblog1.jpg' title='ننصح بـ إستخدام متصفح الفير فوكس'/></a>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrdLfoHZUlOoEfvqheRXtDhVRCTVCV1xI61baDVpR26dqoVKlSU6_2c7Jd9YUj5orhFjbxbvIXqOkCSLyeEeJtF4_drT0Nkr8gNC5UI2Gk5DH_YNov9Ub7RQCrBcla-MAwLakLgO0yOo/s1600/Untitled-1.jpg' title='شكراً لكل من يدعمنا ويشارك الفائدة'/></a>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgntz4OFrC4Q3rM0DFnYx8OGkwWh6ssOLZARXQNQDiwzo3geJJE7yvR70HCfudOdaKg_gfiiYdo5MC-B6LCtwSwMr0TmAotrhTkpzKfBYMStfCbvItG3fr-N0E1wZ7c7F2cZk13PQikoJQ/s1600/Untitled-1.jpg' title='إطرح سؤال فى صفحة سجل الزوار'/></a>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BxTcpieT2np7jcImt4t0bEUFUb_7jbo91-9nM41gwEpvwnUgdGZAgclFEO6_RR_JlFRvSMwja79YdYFTrK7jFscTlt_SSGmfkhq_mBQ2f8r8McdRsiNt2PyTouzPIjBGQFYjrSh98WA/s1600/Mdwan-Blog.jpg' title='إتفاقية الإستخدام لمدونة مدون نرجوا قرائتها لتصفح آمن لك'/></a>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3U_1gBknwgqDVxYkQxQlozHI8LvDJhtsSOr_Z4yIoxvxQlOA0F_Y4ilLOsHXVQiXM1BTxTchKlQZ8f84THTagtSBccUUUTGXP7zRKRRXQUOj6xywMTnfyC1LIf7vOcaCQ-hTQTiKtwY/s1600/2.jpg' title='طرق التواصل مع مدونة مدوّن'/></a>
<a href='http://www.blogger4ar.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRoqFFSfxYhCMiazJVpx7UDbEHOL1Lfe3a0XZFMluWwToFmYhNNcvgkhYr32EPsZ5YuVp-FEwa8NdNZqiax-8E6Recj1sToG3a5tTYqC913krPFfxPJsEBt6WqVqH4I3ZNn2f2_dpgvZw/s1600/Untitled-1.jpg' title='تابع قناة مدوّن على اليوتيوب ودروس حصرية لبلوجر والفوتوشوب'/></a>
</div>
لتعديل على السلايد شو الإحترافي قم بتغيير ما يلي:
------ اللون الأخضر: الصورة التي ستظهر في السلايد شو.
------ اللون الأزرق: العنوان الذي سيظهر أسفل الصورة في السلايد شو.
------ اللون الأحمر: رابط الدي سينتقل إليه الزائر بعد الضغط على الصورة.
لا أنسى أن اذكركم بأنه للتخلص من السلايد شو فقط قم بحدف الكود السابق.
التعديل على القائمة الرئيسية أسفل السلايد شو :
التعديل على القائمة الريئسية الزرقاء بالصورة السابقة:
إبحث عن الكود التالي:
<div id='cssmenu'>
ستجد هذا الكود:
<div id='cssmenu'>
<ul>
<li class='active'><a href='http://blogger4ar.com/'><span> الرئيسية</span></a></li>
<li class='has-sub'><a href='#'><span> تابعنا على</span></a>
<ul>
<li><a href='http://www.blogger4ar.com/'><span> فيس بوك </span></a></li>
<li class='last'><a href='http://blogger4ar.com/'><span> تويتر</span></a></li>
<li class='last'><a href='http://www.blogger4ar.com/'><span> يوتيوب</span></a></li>
<li class='last'><a href='http://blogger4ar.blogspot.com/'><span> جوجل بلس </span></a></li>
</ul>
</li>
<li><a href='http://blogger4ar.blogspot.com/'><span>قوالب بلوجر</span></a></li>
<li class='last'><a href='http://blogger4ar.com/'><span> أكواد الألوان</span></a></li>
<li class='last'><a href='http://www.blogger4ar.com/'><span> ملفات فوتوشوب</span></a></li>
<li class='last'><a href='http://www.blogger4ar.com/'><span> خط عربى</span></a></li>
<li class='last'><a href='http://blogger4ar.com/'><span> بلغ عن رابط </span></a></li>
<ul>
</ul>
</ul>
</div>
تستطيع تغييرالكلمات بالأزرق الى ما تريد من العناوين، وتغيير معها الرابط بالأحمر الى ما تريد من الروابط.
التعديل على الملاحظة بالصورة بالأعلى:
إبحث عن الكود التالي:
<div class='alert-box warning'>
ستجد هذا الكود:
<div class='alert-box warning'>
<span>ملحوظة: </span>لقد تم إغلاق باب التبادل الإعلانى البنرى حتى إشعار آخر .
</div>
للتعديل على الملحوظة فقط غير النص الازرق تم حفظ.
التعديل على تنبيه هام بالصورة السابقة:
إبحث عن الكود التالي:
<div class='alert-box eroor'>
ستجد هذا الكود:
<div class='alert-box eroor'><span>تنبيه هام :</span> يمكنك تحميل القالب من مدونة <a href='http://www.blogger4ar.com'> بلوجر للعرب </a> كما يمكنك متابعتي على <a href='https://www.facebook.com/blogger4arcom'> الفيسبوك </a> و<a href='https://twitter.com/blogger4arcom'> تويتر </a> و<a href='https://plus.google.com/+blogger4arcom'> جوجل بلس </a> و<a href='https://www.youtube.com/blogger4arcom'>
اليوتيوب </a> </div>
للتعديل على التنبيه العام بالصورة بالأعلى فقط إحذف الكود بالزرق وغيره بالنص الذي تريد.
التعديل على صورة الاعلان أعلى المواضيع 60×468 :
إبحث عن الكود التالي:
<div class='drmanamana'>
ستجد هذا الكود:
<div align='center'>
<a href='http://www.facebook.com/blogger4arcom'><img alt='مدونة بلوجر للعرب' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyewXRXi4vTvG94VDhRRWNhk_rdSLqtUi8LCekT7-ALHwMRjGRX-34UFkBtBOhqz7EVwyg_ZuIh1S7YsFi1JDUEygJAI9mSeoPVvvVE-a-Rut1c7WaUttKWOgvKBbPAjKGRAsvwTKB2qk/s1600/cccccc%5B1%5D.png'/></a>
</div>
للتعديل ووضع الإعلان مكان الصورة التالية :
فقط غير الرابط بالاحمر وغير رابط الصورة بالاخضر. لا تنسى ان تضع الصورة بأبعاد التي بالصورة ليضهر الاعلان بشكل منسق.
التعديل على رابط المواقع الاجتماعية:
إبحث عن الكود التالي:
<div id='content-social'>
ستجد هذا الكود:
<div id='content-social'>
<ul>
<li><a alt='Facebook' class='fb-but' href='http://www.facebook.com/blogger4arcom' target='_blank'/></li>
<li><a alt='Twitter' class='twitter-but' href='https://twitter.com/blogger4arcom' target='_blank'/></li>
<li><a alt='Google Plus' class='google-but' href='https://plus.google.com/+blogger4arcom' target='_blank'/></li>
<li><a alt='YouTube' class='youtube-but' href='http://www.youtube.com/blogger4arcom' target='_blank'/></li>
<li><a alt='RSS Feed' class='rss-but' href='http://feedburner.google.com/fb/a/dashboard?id=blogger4arcom'/></li>
</ul>
</div>
للتعديل على المواقع الجتماعية قم بتغيير الروابط بالاحمر لروابطك على المواقع الاجتماعية.
التعديل على القائمة البريدية:
بالنسبة للقائمة الجانبية لن تظهر لك عند تنصيب القالب، كل ماعليك فعله لإضافتها هو مايلي:
1. إنتقل الى المسار التالي: لوحة تحكم > تخطيط > القائمة الجانبية > اضافة أداة > خيار أداة HTML/JavaScript
2. أنسخ الكود التالي:
<style type="text/css">
#cat{background:#fff;width:220px;color:#222;font-family: "DroidKufi-regular";display:inline;margin:3px;padding:3px 2px 2px;}
#subscribe{overflow:hidden;margin:0;padding:0 0 5px}
#subbox{-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIBlpoAxZjgybtjvPeRkxRneU05c15Ufl2haREB4_Be4wn9S9oX4migyE8Qgvjpd6rHvh1fNhljR_le8Unrb_jTVgfnj0HxTXjEqfFdw6fugPK1TI2pFe6L_FYHrNtMQ1NTsFeCUjJ2Ww/s1600/email-icon.png) no-repeat scroll 4px center;font-family: "DroidKufi-regular";color:#666;text-align:right;padding-right:6px;text-decoration:none;border:1px solid #aaa;height:36px;width:215px;margin:0;}
#subbutton{cursor: pointer;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;background:#999;color:#FFF;font-family: "DroidKufi-regular";font-weight:700;text-decoration:none;border:1px solid #666;margin-left:5px;padding:3px 5px;float:right;}
</style>
<div id='searchbarleft'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogger4arcom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'أدخل بريدك';}' onfocus='if (this.value == 'أدخل بريدك') {this.value = '';}' type='text' value='أدخل بريدك'/><input name='uri' type='hidden' value='blogger4arcom'/><input name='loc' type='hidden' value='ar-eg'/><input id='subbutton' type='submit' value='سجل'/></form></div>
3. الصق الكود بالمكان المخصص له مع تغيير ما باللون الأحمر لما يناسب حسابك.
الختام:
أتمنى أن يعجبكم القالب وأن يضيف إضافة الى مدوناتكم. لا تنسى أن تضيف لنا تعليق أو رابط مدونتك لنشاهد معا التعديلات التي قمت بها.
أضف لي تعليقا أو ملاحظة أو تشجيع . التشجيع = قوالب احترافية جديدة
إشترك و توصل بآخرالاخبارOriginal Article