Content

2011-08-08

حصريا | صمم واجهة احترافية لمدونتك مثل المواقع



_____________( كيف أصمم واجهة احترافية لمدونتي )____________








(  شاهد واجهة مدونتي كمعاينة  )






طريقة عمل واجهة لمدونات بلوجر سهلة جدا

أولا عليك إنشاء مدونة جديدة في بلوجر (حبذا لو كانت بنفس حسابك الذي تستخدمه)







ثم توجه في مدونتك الجديدة إلى:


تصميم > تحرير html > الرجوع إلى النموذج القديم (تجده أسفل الصفحة)






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


سيظهر لك الآن صندوق أكواد شبيه بالصندوق القديم لكنك ستلاحظ غياب بعض العناصر التي تعودنا عليها


مثل ( توسيع القالب - تنزيل نسخة احتياطية - عناصر الصفحة ... )

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







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

 <head>
   <link href='http://2.bp.blogspot.com/-4i_icWA1lVU/TkmKYUzmCBI/AAAAAAAAAso/CFB5BbIs0Cs/s1600/asma-logo2.png' rel='shortcut icon'/>
   <title><$BlogPageTitle$></title>

   <$BlogMetaData$>

   <style type="text/css">
 /*
 -----------------------------------------------
 Blogger Template Style

 By : Asma Om NidaL | Blogger In Arabic

 URL : http://a-omnidal.blogspot.com/
 ----------------------------------------------- */

 #navbar-iframe { display: none !important; }

 body {

 background-image: url(http://3.bp.blogspot.com/-r8mg9OoQGFU/TgONGPU8cuI/AAAAAAAAAaI/UErcFaO6w-o/s1600/bg.jpg);
 margin:0;
 font: 15px bold Arial;
 color:#000000;
 }

 #outer-wrapper {
 margin: 0;
 margin-right: 50px;
 }

 </head>

 <body>

 <div id='outer-wrapper'>
 <div class='main section' id='main'><div class='widget Image' id='Image1'>
 <div class='widget-content'>
<a href='http://a-omnidal.blogspot.com/'</a>
 <img src='http://4.bp.blogspot.com/-qXrrspiDEE0/TgOM3-dzbWI/AAAAAAAAAaE/5FrP8GFod4g/s1600/welcom.jpg'/>
 </a>
 <br/>
 </div>

 </body>

 </html>





قم بتغيير رابط صورة الواجهة التالي برابط صورة الواجهة التي تريد ظهورها

http://4.bp.blogspot.com/-qXrrspiDEE0/TgOM3-dzbWI/AAAAAAAAAaE/5FrP8GFod4g/s1600/welcom.jpg



وغيّر رابط مدونتي برابط مدونتك التي تريد أن يتوجه لها الزائر من الواجهة



<a href='http://a-omnidal.blogspot.com/'</a>



يمكنك تغيير صورة الخلفية 'الباترن' الذي وضعته ليلائم واجهة مدونتي




background-image: url(http://3.bp.blogspot.com/-r8mg9OoQGFU/TgONGPU8cuI/AAAAAAAAAaI/UErcFaO6w-o/s1600/bg.jpg);




استبدل رابط صورة الباترن برابط الصورة التي تود إظهارها بالخلفية



أو يمكنك استبدال الصورة بلون موحد وذلك باستبدال الكود السابق بهذا الكود

 
background: #6699FF;



مع تغيير كود اللون #6699FF بكود اللون الذي يناسبك (يمكنك الاستعانة بهذه الصفحة)












قم بحفظ تغييرات القالب وشاهد واجهة مدونتك الجديدة























لا أبيح ولا أسمح إزالة حقوق تصميم الكود أو نقل الموضوع بدون ذكر المصدر







( طريقة تركيب الكود منقولة من موضوع الأخ مجتبي سامر من منتدى عرب بلوجر )






19 التعليقات:

Ledo قام بالتعليق في : 9/06/2011 يقول...

ممكن قالب مدونتك ياختى

أسماء || أم نضال || قام بالتعليق في : 9/06/2011 يقول...

@Ledo

يمكنك تحميل القالب (من هنا) لكنه غير معرّب وغير معدّل

mustino قام بالتعليق في : 10/26/2011 يقول...

اعجبني موضوعك ..
بقد واجه مشكلة في الكود ..
بعدان نخت الكود اظهر لي هذه الرسالة .
"لا يمكن توزيع القالب الخاص بك لأنه غير منسق بشكل جيد. الرجاء التأكد من إغلاق كافة عناصر XML بشكل صحيح.
رسالة خطأ XML: Reference is not allowed in prolog."

؟؟؟؟؟

أسماء || أم نضال || قام بالتعليق في : 10/26/2011 يقول...

@mustino

أتمنى أن تقوم بصياغة سؤالك مجددا أخي فلم أفهم المشكلة بالضبط لتداخل الحروف ..!!

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

أعد تطبيقها فقط وستفلح معك إن شاء الله ^^

وليد المجدلاوي قام بالتعليق في : 11/08/2011 يقول...

السلام عليكم اختي


اتمنى لك دوام الصحة والعافية

بدي اطلب منك طلب ويا ريت ما تفشليني فيه

انا بدي تصممي وتعملي لي واجهة لمدونتي ويكون لون الواجهة مناسب مع المدونة و اسم وعنوان مدونتي كتالي

مدونة وليد توك
http://waleedtalk.blogspot.com

أسماء || أم نضال || قام بالتعليق في : 11/10/2011 يقول...

@وليد المجدلاوي

وعليكم السلام ورحمة الله وبركاته

أرجو المعذرة أخي ليتعذّر علي تلبية طلبك في الفترة الحالية لظروف شخصية

إن شاء الله في وقت لاحق

1 قام بالتعليق في : 12/18/2011 يقول...

السلام عليكم

اختي لمن افهم الشرح جيدا

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

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

سيظهر لك الآن صندوق أكواد شبيه بالصندوق القديم لكنك ستلاحظ غياب بعض العناصر التي تعودنا عليها

الرجو التوضيح وشكرا

أسماء || أم نضال || قام بالتعليق في : 12/18/2011 يقول...

@1

سأحاول تدعيم الشرح بالصور قريبا بإذن الله لمزيد من التوضيح

1 قام بالتعليق في : 12/18/2011 يقول...

جزاك الله كل خير اختي

شكرا علي ماتقومين به من جهود

أسماء || أم نضال || قام بالتعليق في : 12/19/2011 يقول...

@1

تمت إضافة صور لتوضيح الشرح ،،

1 قام بالتعليق في : 12/19/2011 يقول...

جزاك الله كل خير اختي الشرح واضح تسلمي اختي

انا مشيت مع الخطوات كلها لمن نسخت الكود بدل الي مسحنه

يضهر معي هاكذا

لا تشتمل هذه المدونة الإلكترونية على أية رسائل. الرجاء إضافة رسالة واحدة على الأقل من أجل المعاينة. [إغلاق]

أسماء || أم نضال || قام بالتعليق في : 12/19/2011 يقول...

@1

أجل أخي تظهر هذه الرسالة عندما تقوم بمعاينة القالب
قم بحفظ التغيرات واستعرض المدونة مباشرة بدون معاينة

1 قام بالتعليق في : 12/19/2011 يقول...

مشكوررررررررررررررررررررررررررررررررره اختي

زبطت معي تسلم يدك اختي جزاك الله كل خير

مدونه الحلم الجميل قام بالتعليق في : 9/14/2012 يقول...

مجهود رائع بس لو ممكن طلب انا ابى كود المفضلات الاجتماعيه اللى موجود فى مدونتك ولكى جزيل الشكر

mohamed goda قام بالتعليق في : 9/27/2013 يقول...

الكود لايعمل اختى

x jetara قام بالتعليق في : 4/14/2014 يقول...

تم انشاء موضوعين لانشاء واجهة على نفس النطاق ولم نعد لانشاء نطاق جديد لتنصيب الواجهة عليه :

[ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الاول
[ html+css ] صنع و تركيب واجهة احترافيه لمدونة بلوجر - الجزء الثاني

alaaden azer قام بالتعليق في : 1/13/2015 يقول...

الف شكر اختي .
ممكن تطلبي مني اي مساعدة اذا احتجتي

Mahmoud Saad قام بالتعليق في : 5/28/2015 يقول...

شكرا على مجهودك الجبار تحياتى

Youssef Teqnet02 قام بالتعليق في : 11/16/2015 يقول...

وكيف أركبو على مدونتي

إرسال تعليق

| الرجاء عدم استخدام مرادفات ( يا الغالية، يا العزيزة...) في التعليق بالنسبة للشباب |

لتصلك إشعارات ردود هذا الموضوع انقر على (الاشتراك عن طريق البريد الإلكتروني) أسفل صندوق التعليق