09‏/04‏/2014

2014-04-09T22:57:00+03:00
09‏/04‏/2014

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

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

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
مساء الخير او صباح الخير على الكل .

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

الواجهة شيء جميل في الموقع صراحه وهي ميزه جداَ جميلة وخرافيه تعطي الموقع منظراَ حقاَ مميز , ايضاَ تعطي الزائر انطباع ان هذا الموقع احترافي .
طبعاَ الواجهة في مدونة بلوجر بالأساس لم تكن موجوده لا في العالم العربي ولا الغربي , بل كان هناك واجهات ولاكنها ليست كهذه , حيث ان الواجهات الاخرى التي صنعها بعض المحترفين العرب كانت فكرتها ( صفحة html عبارة عن واجهه ) ويتم ربطها بدومين اخر غير دومين المدونة الاساسي وهذه هي المشكلة, وقد وجدت بالفعل ان كثير من المدونين يبحثون عن طريقة تركيب واجهة لمدونة بلوجر.



ولاكن في موضوعنا اليوم , سنتكلم عن واجهه حقيقية مرتبطه بدومين المدونة الاساسي , وفكرتها بسيطه :)
طبعاَ حقوق الفكره لي, اول من اخترعها واول من ركبها على مدونة بلوجر هو انا واتمنى لكم التوفيق في تركيبها .

على العموم نبداء :

  • اولا: يجب ان تكون قد جهزت واجهه لمدونتك عبارة عن html + css المهم انها صفحة وعبارة عن واجهه , وبالمناسبة انا قد جهزت لكم واجهه لمن اراد تركيبها فهي له .
  • ثانياَ : نأخذ مثال للواجهه التجريبيه التي اعددتها لكم : من هنا
  • ثالثاَ : كود الواجهه التجريبيه لمن اراد تجربتها او حتى تركيبها او تعديلها للموضوع القادم : 
<!--design By http://blog.7lolblogger.com -->
<body><div class='wajeha-7lolblogger'>
  <a href='http://blog.7lolblogger.com' style='display:none'></a>
  <div class='wajeha-all'>
   
    <!--  الصورة الاساسيه -->
    <div class='wajeha-7lolblogger-img'><a href='http://blog.7lolblogger.com'><img src='https://lh3.googleusercontent.com/-GlAF2hyXfIg/U0UqIBMhKlI/AAAAAAAAAQU/NaIjvETEYqw/png+t34ow.png'/></a></div>

    <!-- الازرار -->
    <div class='wajeha-7lolblogger-h1'><h11><a href='http://blog.7lolblogger.com/search?max-results=12'>ادخل للمشاركات</a></h11></div>
    <div class='wajeha-7lolblogger-h1'><h11><a href='http://blog.7lolblogger.com/p/my-works.html'>معرض اعمالي</a></h11></div>
   
    <!-- ايقونات التواصل الاجتماعي -->
    <ul class="socialicons">
    <li><a title="twitter" href="https://twitter.com/7lolblogger " target="_blank">
<img src="http://i39.servimg.com/u/f39/16/89/40/74/t10.png"/></a></li>
    <li><a title="facebook" href='https://www.facebook.com/7loll'   target="_blank">
<img src="http://i39.servimg.com/u/f39/16/89/40/74/f10.png"/></a></li>
    <li><a title="Google+" href='https://plus.google.com/u/0/+jetarax/posts'  target="_blank">
      <img src="http://i39.servimg.com/u/f39/16/89/40/74/g10.png"/></a></li>
    </ul>
  </div>
 
<style>
  /* خصائص الواجهه css*/
  @font-face {
 font-family: 'goth';
 src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

body {
background: #191919;
margin: 10px;
}
a {
text-decoration: none;
color: #666;
}
.wajeha-7lolblogger-img {
margin: 10px auto;
display: block;
width: 100%;
float: right;
text-align: center;
background: #111;
margin-top: -5px;
height: 230px;
}
.wajeha-all {
background: #eee;
width: 500px;
margin: 0 auto;
height: 100%;
min-height: 500px;
}
.wajeha-7lolblogger-h1 h11 {
text-align: center;
margin: 5px auto;
display: block;
font: 700 20px goth,tahoma;
color: #555;
text-shadow: 1px 1px #fff;
background: #ddd;
padding: 10px;
clear: both;
border: 1px solid #ccc;
box-shadow: 1px 1px #fff;
border-radius: 4px;
width: 260px;
}
.socialicons {
width: 100%;
float: right;
text-align: center;
padding: 0;
margin: 20px auto;
list-style: none;
}
.socialicons li {
margin: 0 auto;
text-align: center;
display: inline-block;
list-style: none;
padding: 0;
}


  </style>
</div></body>
<!--design By http://blog.7lolblogger.com -->


التعديلات : 

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

تبقى الان الجزء الثاني نستكمله في الموضوع القادم انشاءالله .






عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة
صورة التدوينة
ملخص التدوينة:

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

الساعه : 2014-04-09T22:57:00+03:00
تاريخ : 09‏/04‏/2014
التعليقات : 15
    انشرها :

هناك 15 تعليقًا:

  1. شكرا اخى الكريم موضوع رائع , وشرح وافى

    ردحذف
    الردود
    1. حياك الله

      حذف
    2. لهذا اتابع مدونتك باستمرار لانك ببساطه مبدع بحق
      تسلم ايدك اخي عبد لله عمل رائع وجميل

      مشكلة بسيطة بخصوص كود تصميم الواجه
      بعد تطبيق العملية يظهر خطأ في

      < i m g src="http://i39.servimg.com/u/f39/16/89/40/74/g10.png/">

      الوسم img غير مغلق يجب اضافة / بين <" ليصبح

      < i m g src="http://i39.servimg.com/u/f39/16/89/40/74/g10.png"/>< /li>

      شكرا لك اخي دائما مميز

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

      حذف
  2. اووو غاب العملاق ثم رجع بمواضيع جبااارة مشاء الله كالعادة منور .. :)

    ردحذف
  3. شكرا اخى مواضيعك رائعة ممكن سوال انا اضفت هذا الكود لكن يظهر فوق القالب مش عارف اعمل ايه ممكن تقولى اعمل ايه علشان اقدر اعلمه هذه

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

    ردحذف
  5. غير معرف22/4/14 20:40

    شكرا لك أخي على المقالة الرائعة :D

    http://www.ar1web.com

    ردحذف
  6. اين نضع الكود

    ردحذف

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

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :
ت1 ت2 ت3 ت4 ت5 ت6 ت7 ت8 ت9 ج1 ج2 ج3 ج4 ج5 ج6 ج7 ج8 ج9 د1 د2

قالب حلول بلوجر النسخة الثالثه

قالب حلول بلوجر النسخة الثالثه متاح للتحميل , قالب يتميز بالاحترافيه والخفة والسرعه اضافة الى الارشقة الممتازة.

أقرأ الموضوع

الاشتراك في القائمة البريدية

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

الاسم

بريد إلكتروني

رسالة