للإستفسار تفضل بمراسلتى عبر هذا البريد:mdwan_blog77@yahoo.com

القالب الإحترافى الثانى من مدونة مدون مجاناً للجميع

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة ... إخوانى واخواتى زوار ومتابعين مدونة مدون الكرام مثل ما وعدتكم من قبل بهذا القالب بعد أن أجريت عليه عدة تطورات بسيطة أتمنى إنها تعجبكم وأتمنى أن القالب بأكملة ينال إعجابكم ويكون مناسب للجميع كما أتمنى أيضاً عدم نزع الحقوق من القالب لانى تعبت فى تصميمة كثيراً فلا تأتى أنت وتقوم بحزف أو تغيير الحقوق أتمنى عدم نزع أو تغيير الحقوق لكى نصمم لكم المزيد ليس من المعقول ابداً أن أرى تعبى يذهب هكذا واصمم مرة ثانية إلا أنه سيكون بمقابل ولكن أنا لا أريد هذا انا أقدم قوالب مجانية لمحبين مدونة مدون فقط ...
للمعاينة المباشرة والحية من - هنا
القالب متاح للجميع ||| عدم نزع الحقوق يعنى المزيد من القوالب الأكثر إحترافية - الحقوق مجرد كلمة ورابط لن تصيب من شكل المدونة!!
crocko

شرح تخصيص مساحة إعلانية داخل الهيدر

بسم الله الرحمن الرحيم
أهلاً بكم إخوانى الكرام العديد يسأل عن طريقة لإضافة أو تخصيص مساحة إعلانية داخل الهيدر لوضع بها بنرإعلانى أو إعلانات أدسنس أو شئ آخر يريده طريقة سهلة جداً كل ما هو نحتاجه الآن هو تقسيم الهيدر إلى جزئين جزء به اللوغو والجزء الآخر به المكان المخصص للمساحة الإعلانية وتكون بمساحة 468x60 وهذة المساحة مميزة جداً بالنسبة لأصحاب إعلانات أدسنس .
أول خطوة هو البحث عن هذا الكود أو شابه ليه 
#header
الآن نستبدل محتويات الكود بهذا المحتوى 
.header-left{ display: inline-block; height: 60px;width: 468px;float: left;} .header-right { display:inline-block; float:right; }
الأزرق هو خاص بعرض وإرتفاع المساحة أم خاصية الـ flaot فهى خاصة بوضع الكود يمين أو شمال 

الخطوة الثانية البحث عن الكود التالى 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
الآن إستبدل الكود أعلاه بهذا الكود 
<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
الخطوة الثالثة والأخيرة إبحث عن هذا
</div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'/>
إذا لم تتمكن من البحث عن الكود أعلاه إبحث عن هذا 
 <b:include name='description'/> </div> </b:if> </b:includable> </b:widget> </b:section>
وقم بلصق الكود التالى أعلاه 
<div style='clear:both;'/>  
ثم إحفظ القالب وإذهب إلى تخطيط سوف تجد أداة داخل الهيدر  

إرسم صورة كرتونية معبرة عن شخصيتك أونلاين

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاتة .. أقدم لكم هذا الموقع الرائع الذى يبحث عنه الكثير لتصميم صور كرتونية بشكل جميل تعبر عن شخصيتة دون العناء فى شئ فهذا الموقع أيضاً به صور مصممة جاهزة يمكنك إختيار المناسبة لك وإذا كنت تريد تصميم صورة جديدة على مزاجك فـ أيضاً يمكنك ذلك والتحكم بالصورة كيف ما تحب  يمكنك أيضا التسجيل بالموقع ويمكنك إنشاء الصور دون التسجيل ولكن أنصحك بالتسجيل أفضل لك  ...... للدخول للموقع هنا

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

بسم الله الرحمن الرحيم
اليوم سنشرح طرقة تركيب ازرار المتابعة بشكل إحترافى ومكان تركيبة سيكون داخل الهيدر وهذا المكان مميز جداً وظاهر للمدونة غير ان الكود لن يأخذ مساحة كبيرة من المدونة هذا بالإضافة أن تركيب الكود سهل للغاية حتى بالنسبة للمبتدئين والآن مع شرح تركيب الإضافة.
أول خطوة وهو الذهاب إلى محرر بلوجر وسنبحث عن هذا الوسم ]]></b:skin> وسنضع الكود التالى قبلة
#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
 الخطوة الثانية - إبحث عن هذا 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
وفوقة مباشرة ضع الكود التالى
<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/mdwanblog'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/mdwan-blogger'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/googleplus/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-rss/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>
 أتمنى الإستفادة للجميع 

إنتظروا تصميم القالب الجديد من مدونة مدون


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

معاينة القالب هنا

عاوزين يقلدو تصميم القالب الحالى للمدونة


بسم الله الرحمن الرحيم
كيفكم متابعين مدونتكم مدونة مدون اليوم وأنا أبحث بالمدونات العربية رأيت شئ أحزنى وهو يريدون تقليد تصميم القالب الحالى للمدونة وهو صاحب مدونة درر الحياة يريد تقليد القالب الذى تعبت فى تطويرة كثيراً وهو ياتى بكل بساطة وكأنة فعل كل شئ وكانة مأخوذ شكل التصميم منه وكأنة مقلد أقول لك لكل من يقلد أى تصميم سواء تصميم قالب - تصميم جرافيكس - تصميم أى شئ  حقيقى إنك فاااااااااشل ولولا تقلدنا ده أكبر دليل على نجاحنا ولكن نصيحة يا أيها الذكى قم بتصميم جديد بفكرة جديدة ولا تسرق أى فكرة اخرى من أى شخص . فى النهاية الحمد لله لانى تأكد تماماً أننى مبدع

كل سنه وأنتم طيبين بمناسبة إقبال شهر رمضان الكريم

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

القالب الإحترافى المصمم والمطوَّر من مدونة مدون حمله مجاناً

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

للمعاينة الحية من هنا

فى النهاية أتمنى القالب يعجبكم ولكن ليس هو النهاية بل إنتظروا المزيد من القوالب الإحترافية

إضافة آخر المشاركات بشكل أكثر إحترافية فقط من مدوّن

بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة 
زوار ومتابعين مدونة مدوّن اليوم جئت لكم بـ إضافة أكثر من رائعه وهو كود لإضافة آخر المشاركات بشكل إحترافى جزاب أنيق ، ويظهر مدونتك بشكل إحترافى ده + إن الكود بيعمل بخاصية الـ Tooltip ، ولمن لا يعرف هذة الخاصية هذة الخاصية هى توفر لك عند وضع المؤشر على الرابط يظهر لك عنوان التدوينة ونبذة عنها بشكل رائع جداً.
للمعاينة المباشرة للكود من | هنا
كل ما عليك هو الذهاب إلى تخطيط  >> ثم إضافة أداة جافاسكريبت وضع بها الكود التالى 
<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#333333;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#999999;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "آخر المشاركات",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://mdwanblog.blogspot.com";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
التعديل فقط هو تغيير الرابط باللون الأحمر برابط مدونتك

صمم شعارك بإحتراف اونلاين مع هذا الموقع الرائع

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

كود الإعلانات النصية الإحترافى مثل المواقع

بسم الله الرحمن الرحيم 
السلام عليكم ورحمة الله وبركاتة ....  كود إعلانات نصية إحترافى مثل المواقع والمنتديات css من تطوير مدونة مدوّن ربما بحثت عليه كثيراً ولن تجده ولكن مدونة مدوّن اليوم تقدمة لك ويحتاج فقط لتعديل الروابط  الخاصه بك .
معاينة الكود بالكامل 
اولاً هذا الكود خاص بجزء الـ html فقط
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'
<div class="simoelmaachi">
<div class="footerbg">
<div class="footerright">
<div class="footerleft">
<div id="textlinks">
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
    <li><a href="/">اعلانك هنا</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
ثانياً الجزء الخاص بـ css
<style type="text/css">
html
{
scrollbar-base-color: #3F93AF;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #DFDEDF;
}

.footerbg {
    height: 147px;
}

#textlinks ul  {
  padding: 0;
  margin: 0;
  direction: rtl;
  list-style-type: none;
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 11px;
}
#textlinks li {
  background-position: bottom;
  text-align: right;

}
#textlinks li a {
  background-position: right;
  display: block;
  text-decoration: none;
  padding-right: 20px;
 font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 15px;
  font-weight: normal;
  color: FFCC00;
  background-image: url('http://img526.imageshack.us/img526/7194/linkie.png');
  background-repeat: no-repeat;
  line-height: 20px;
  height: 20px;
}
#textlinks li a:hover {
  text-decoration: none;

  color: FF9900;
}
#textlinks {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.textcontainer {
  float: right;
  display: inline;
  width: 160px;
  padding-top: 20px;
  margin-left: 20px;
}
#rightspace {
  margin-right: 35px;
}
.texttitle {
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 13px;
  font-weight: bold;
  color: #FF9900;
  padding-right: 20px;
}
</style>
تركيب الكود إختر إضافة اداة جافاسكريبت وضع بها الكود الـ html وأسفلها مباشرة ضع الكود الـ css

5 راندرات بجودة عالية للاعب المعروف Arjen Robben للتحميل

بسم الله الرحمن الرحيم 
السلام عليكم ورحمة الله وبركاتة .... أقدم لكم فى هذة التدوينة من مدونة مدوّن 5 راندرات للاعب المعروف Arjen Robben راندرات بجودة عالية تفيدك فى التصميمات الرياضية إذا كنت من محبين هذا اللاعب فحملهم الآن من مدوّن بروابط مباشرة حجم الرندرات أكثر من 2 ميجا بايت فقط الرندرات مثل ما فى الصورة السابقة ولكن كل راندر لوحده .

ما الذى يجعل بلوجر هو الأفضل (مميزات بلوجر)

بسم الله الرحمن الرحيم 
كيفكم إخوانى الكرام ... فى الحقيقة قررت بكتابة هذة التدوينة لمن لا يعرف مميزات (بلوجر) كثير من الأشخاص لا يفضلون بلوجر ويفضلون (الووردبريس) وهذا فقط بسبب (شكل الوورد البريس المماثل تماماً للمواقع) فى الحقيقة هناك عيب واحد فقط فى كل من (بلوجر - الووردبريس) نبدا فى عيب بلوجر المشكله الوحيدة لدى بلوجر هى لغات تصميم القوالب أو الثيمات الذى تعتمد عليها فـ بلوجر تعتمد على لغات html ، xml ولكن ليست المشكله فقط فى html المشكله الحقيقية هى فى xml | بينما الوورد بريس يعتمد على PHP ، css ولكن البيئة البرمجية للإثنين مختلفة تماماً هذا عيب البلوجر ..... عيب الوورد بريس إذا كنت تمتلك إستضافة لمدونتك فحتماً الوورد بريس أفضل أم إذا كنت تريد مدونتك مجاناً تأكد تماماً أخى - أختى بأن المدونة لن ترى طريق النجاح بعكس بلوجر ثانياً بلوجر تتيح لك التنسيق على القوالب بشكل كامل كس الوورد بريس .
مميزات بلوجر

جديد! تخصيص التصميم

يعرض مصمم نماذج Blogger الكثير من النماذج، مما يُسهل لك إنشاء مظهر احترافي لمدونتك، بالإضافة إلى أنه يتيح لك تخصيص نموذجك. وذلك حيث يمكنك الاختيار من بين المئات من صور الخلفيات وعشرات التنسيقات المرنة فضلاً عن إعادة ترتيب الأدوات من خلال واجهة السحب والإفلات. كما يمكنك إضافة الأدوات مثل عروض الشرائح أو استطلاعات آراء المستخدمين أو حتى إعلانات AdSense. ويعتبر من السهل أيضًا تغيير الخطوط والألوان. وإذا لم يوفر لك ذلك تحكمًا كافيًا، فيمكنك أيضًا تعديل CSS أو HTML للمدونة.

نشر الصوت بسهولة وبدون مقابل

يتم إنشاء المدونة باستخدام Blogger عبر بضع خطوات سهلة. إذ يمكنك في دقائق معدودة أن تبدأ في تدوين نصوص ونشر صور ومقاطع فيديو وغير ذلك في مدونتك. دون كما تشاء؛ فلا يوجد مقابل. الرجاء الاطلاع على هذا المقال من كيفية العمل أو شاهد مقطع الفيديو كيف تنشئ مدونة باستخدام Blogger.

واجهة سهلة الاستخدام

اتبع بضع خطوات أساسية لبدء التدوين في مدونتك. تسمح لك الواجهة سهلة الاستعمال بتغيير الخطوط وجعل خط النص أسود عريضًا أو مائلاً وضبط لون النص ومحاذاته وغير ذلك من الميزات. بينما تقوم بتأليف كل تدوين جديد، يقوم Blogger بحفظه تلقائيًا، دون مقاطعتك أثناء عملية الكتابة. هناك أيضًا ميزة التدقيق الإملائي سهلة الاستخدام، إلى جانب طريقة بسيطة لإضافة تسميات إلى تدويناتك.بالإضافة إلى ذلك، تشتمل خدمة Blogger على محرر HTML الذي يسمح لك بتخصيص شكل ومظهر تدويناتك بالكامل.

موقع الويب المجاني الخاص بك

عند إنشاء مدونتك، يمكن لـ Blog*Spot استضافتها مجانًا. كل ما عليك هو اختيار عنوان URL متوفروستكون مستعدًا للانطلاق. إذا غيرت رأيك وأردت استخدام عنوان URL مختلف فيما بعد، فيمكنك إجراء هذا التغيير بسهولة. تشتمل خدمة Blogger أيضًا على خيار نطاق خاص، والذي يُمكّنك من أن يكون لديك اسم مجال، على سبيل المثال، example.com، وسنستمر في استضافة مدونتك مع توفير جميع ميزات Blogger الرائعة.

إضافة صور ومقاطع فيديو إلى تدويناتك

يمكنك إضافة صورة بسهولة إلى تدوينات المدونة من خلال النقر فوق رمز الصورة في شريط أدوات محرر التدوينات. تتم استضافة صورك بعد ذلك في حسابك صور Google المجاني، حيث يمكنك طباعة الصور وتنظيمها في ألبومات. لا تقل إضافة مقطع فيديو إلى التدوينات سهولة عن ذلك، كل ما يجب عليك فعله هو النقر فوق رمز الشريط السينمائي في شريط أدوات محرر التدوينات للبدء. تمت استضافة مقاطع الفيديو التي تم تحميلها عبر Blogger على Google Video.

جديد! ربح المال

باستخدام Blogger، يمكن أن تربح أموالاً من خلال نشر محتوى أصلي بجودة عالية يتعلق بمواضيعك المفضلة. وقد خصصت خدمة Blogger علامة التبويب تحقيق الدخل والتي تسمح لك بوضع إعلانات AdSense على مدونتك بسهولة.

تطوير المنتدى

اجعل القراء يتابعون مدونتك بواسطة إضافة أداة المتابعون إلى خيارات التنسيق. وباستخدام هذه الأداة، يمكن للقراء النقر على الرابط"متابعة هذه المدونة" لإضافة مدونتك إلى لوحة معلومات Blogger وحساب قارئ Google. كما يمكنهم إضافة صورهم وملفاتهم الشخصية إلى مدونتك بشكلٍ اختياري لإخبار العالم أنهم معجبون بك.

تعليقات من قرائك

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

إخطارات تدوين جديد

يمكن لقرائك اختيار الاشتراك في موجز المدونة، بحيث يتم إخطارهم وقتما تقوم بنشر تدوين جديد في مدونتك. يمكنك أيضًا تخصيص الأمور التي ستتم مشاركتها في موجز المدونة وإعداد المدونة بما يتيح إرسال التدوينات الجديدة في رسالة بريد إلكتروني تلقائيًا إلى عناوين بريد إلكتروني أو قوائم مراسلات محددة.

معرف واحد بسيط

نظرًا لأنه يمكنك تسجيل الدخول إلى Blogger باستخدام حساب Google &mdash، الذي يُمكنك أيضًا من الوصول إلى Gmail وiGoogle وorkut وغيرهم. &mdash، فليس عليك حفظ اسم مستخدم وكلمة مرور إضافية. يمكنك أيضًا استخدام عنوان مدونتك كمعرف OpenID، الأمر الذي يوفر لك هوية رقمية واحدة عبر الويب. ونظرًا لإمكانية قبول مدونتك لتعليقات من مستخدمي OpenID بالإضافة إلى أعضاء Blogger المسجلين، سيكون من الأسهل على جميع قراء مدونتك أن يقلعوا عن التعليق ويشاركوا في المحادثات.

لغات العالم

يتوفر Blogger حاليًا في 41 لغة من بينها الإنجليزية والفرنسية والإيطالية والألمانية والأسبانية والهولندية والبرتغالية والصينية واليابانية والكورية. يمكن للناطقين باللغة العربية والعبرية والفارسية استخدام Blogger بعرض وتنسيق من اليمين إلى اليسار. وتتوفر إمكانية الكتابة بحروف لغة أخرى لخمس لغات هندية.

جديد! صفحات

من خلال ميزة الصفحات في Blogger، يمكنك إنشاء صفحات جديدة لها روابط بمدونتك. على سبيل المثال، يمكنك إنشاء صفحة “حول هذه المدونة” أو صفحة “الاتصال بي” بطريقة مماثلة لكتابة مشاركة جديدة بالمدونة، وكذلك يمكنك عرض الروابط إلى تلك الصفحات كعلامات تبويب أعلى المدونة أو في الشريط الجانبي.

تدوين أثناء التنقل

تشتمل خدمة Blogger على عدة طرق إضافية يمكنك من خلالها النشر في مدونتك. ويمكنك النشر في مدونتك من هاتفك الجوّال أو من خلال عنوان بريد إلكتروني Mail-to-Blogger سري. أصبح من السهل باستخدام هذه الخيارات النشر في مدونتك متى أردت ومن أي مكان توجد فيه.

التدوين الجماعي

يسهل مع Blogger إنشاء مدونة جماعية، مما يسمح للعديد من أصحاب المدونات بالمساهمة في مدونة واحدة. ويمكنك تحديد أي أعضاء الفريق ستكون لهم حقوق إدارية وأيهم سيكون مجرد مؤلف. يمكنك أيضًا اختيار جعل مدونتك خاصة وتحديد من يمكنه عرضها. وبالتالي يمكنك هذا من التحكم تمامًا في مدونتك.

تطبيقات جهة أخرى

يمكنك الاختيار من بين عدة تطبيقات جهة أخرى تتكامل مع Blogger لجعل عملية التدوين أسهل بالنسبة لك. احرص على الرجوع إلى code.blogger.com إذا كنت مطورًا وتريد إنشاء تطبيق متميز خاص بك.

تحميل فرش ريديكل الفيكتورية الإحترافية من مدوّن




بسم الله الرحمن الرحيم 
السلام عليكم وحمة الله وبركاتة.... تحميل فرش فيكتور بجودة وشكل فى غاية الروعة من مدونة مدون ، فرش ريديكل فيكتور من أقوى الفرش الفيكتوريه المبعثرة الملوبة بكثرة لدى المصممين ،
فحاول أن تفوذ بها  وتجعلها على جهازك وحاول أيضاً ، إستخدامها بإحترافية فهى جميلة جداً .

ملف psd يضم أيقونات أشهر متصفحات الويب بشكل لطيف



بسم الله الرحمن الرحيم 
السلام عليكم ورحمة الله وبركاته ... أقدم لكم فى هذة التدوينة المتواضعة من مدونة مدوّن
أيقونات لأشهر المتصفحات فى ملف psd فقط من مدوّن أيقونات بشكل لطيف وجزاب
5 أيقونات فى الملف نفس الشكل الموجود بالصورة بالأعلى حملهم الآن .

تحميل خط خرابيش الرائع




بسم الله الرحمن الرحيم 
تحميل خط خرابيش من أجمل الخطوط العربية ربما بحثت عنه كثيراً ولن تجده ولكن مدونة مدوّن
تقدمة لك الآن لتحميلة وإستخدامة وهو خط شبكه خرابيش المعروفة بالرسوم المتحركة من أجمل



تحميل نموذج متصفح فى ملف psd للتحميل




بسم الله الرحمن الرحيم
تحميل psd لثلاث لمتصفح بجودة رائعة جاهز للتحميل والتعديل عليه بالفوتوشوب 
فقط من مدونة مدوّن الآن حمل الملف وإفتحه عن طريق الفوتوشوب وعدل عليه كما تشاء لكى
يناسبك التحميل على أكثر من سرفر إذا تم مسح الملفات أبلغنا وسيتم رفع الروابط من جديد



أفضل مواقع لتنسيق الالوان لمصممين مواقع الويب




بسم الله الرحمن الرحيم 
اليوم سنعرض عليكم بعض مواقع تنسيق الالوان لصممين مواقع الويب 
إذا كنت تبحث عن موقع مناسب لتنسيق الألوان css فلا تقلق سأعرض عليكم 
أفضل موقع تنسيق الألوان 

الموقع الأول
الموقع الثانى
الموقع الثالث
الموقع الرابع
الموقع الخامس ويقدم فرش وتدريجات
الموقع السادس ويقدم ميزة إختيار الألوان من أى صورة

ملف psd لتلفزيون + زخارف بشكل إحترافى جاهز للتحميل




بسم الله الرحمن الرحيم
تحميل ملف psd tv + زخارف بشكل لطيف ورائع وإحترافى للفوتوشوب
أصبح الآن متوفر للتحميل من مدونة مدوّن فقط حملة وإفتح الملف عن طريق برنامج الفوتوشوب
وعدل عليه كما تشاء - الآن مع تحميل الملف .



أتمنى الملحق يعجبكم

إنشاء زر مشاركة رابط للموقع الشهير linkedin لمدونات بلوجر




بسم الله الرحمن الرحيم 
اليوم سنشرح درس بسيط وهو إنشاء زر نشر لموقع linkedin الشهير وهو سنطبقه على موقع الـ
اولاً إضغط لدخول الموقع من هنا
شاهدة الصورة التالية إعدادات بسيطة جداً وتختلف من شخص لأخر لكى تنسابه 

الجزء المظلل علية باللون الأصفر هو رابط مدونتك 
الجزء التى بداخل المتسطيل الأسود إختار المناسب لك 
واخيراّ إضغط على Get Code لظهور الكود بعد الإنتهاء

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

<data:post.body/>  
ضع الكود أسفله مباشرة

أزرار المتابعة بشكل جديد إحترافى لمدونتك




بسم الله الرحمن الرحيم 
كود إضافة أزرار المتابعة بشكل إحترافى وجديد ولن تجدة إلا هنا فقط فى مدونة مدوّن
أزرار المتابعة لمدونات بلوجر تعطى شكل أنيق لمدونتك وتظهرها إحترافية أكثر الكود يضم
أزرار متابعه المواقع الإجتماعية 5 مواقع فقط والآن مع شرح التركيب.
للمعاينة المباشرة| هنا



لوحة التحكم - القالب - إستخدم f3 وإبحث عن هذا الكود
]]></b:skin>
وضع الكود التالى قبلة مباشرة 
.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}    
الخطوة الثانية والأخيرة
من التخطيط وإختر إضافة اداة جافاسكريبت وضع بها الكود التالى
<!-- http://mdwanblog.blogspot.com/ !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/إسم الحساب" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ إسم الحساب " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ إسم الحساب " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/إسم الحساب" target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ إسم الحساب " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- http://mdwanblog.blogspot.com/ !-->
مع تغيير اللون الأحمر بروابط حساباتك