Showing posts with label شروحات بلوجر. Show all posts
Showing posts with label شروحات بلوجر. Show all posts

Thursday, 5 December 2013

شرح بالتفصيل إضافة صندوق تعليقات الفيس بوك لمدونتك

السلام عليكم ورحمة الله وبركاتة 
يوجد الكثير يريد تركيب صندوق تعليقات (الفيس بوك) ولكن بعض الشرح الذى يتوفر على الإنترنت يظهر بعض الأخطاء فى أو يتم تركيب الصندوق وتظهر أخطاء ما لان إدارة (الفيس بوك) قامت بتطوير صندوق التعليقات لذلك أتيت لكم بشرح على النظام الجديد ولن تظهر أى أخطاء بإذن الله شرح وافى خطوة بخطوة .
أول خطوة وهى إنشاء تطبيق على الفيس بوك يتيح لك التحكم بـ التعليقات أنا أنشأت واحداً سابقاً ولكن قمت بعمل تطبيق جديد لكى أشرح لكم والآن إفتح هذا الرابط 
https://developers.facebook.com/apps
بعد الدخول إلى هذا الرابط ستجد مثل الصورة التالية 
ستقوم بإنشاء تطبيق جديد مع كتابة المعلومات المطلوبة بسيطة جداً مثل الآتى 
ستكتب معلومات مثل ما هو موضح ولكن طبعا معلومات تناسبك أنت أم الإسم باللغه (الإنجليزية) فلازم يكون هكذا لانه لن يقبل (عربى) وستختار مجال مدونتك إختار أى شئ ليس (هام جداً)
بعد ذلك والضغط على متابعه تابع معى الآن 
ستقوم بكتابة الكلام الخاص بالإختبار الأمنى مثل ما هو موضح بالصورة أعلاه 
وفى هذة الصورة أعلاه تقوم بالتأكيد على المعلومات وإختيار الدومين الخاص بموقعك مثل ما هو موضح 
تابع معى الخطوة التاليه 
ستقوم بكتابة رابط مدونتك / موقعك بنفس الشكل 
والآن إذهب إلى تحرير القالب الخاص بك وإبحث عن هذا الكود <html
ستجده أول القالب ضع بجانبة هذا الكود 
xmlns:fb='http://www.facebook.com/2008/fbml'
بحيث يكون بهذا الشكل 
الآن نبحث عن هذا الكود <body> وبعد مباشرة ذع الكود التالى
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'معرف الـ id ',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
- ستجد هذا الكود فى تطبيقك الذى قمت بإنشاءه سنجده بنفس الشكل التالى 
الآن إفتح المفكرة من جهازك وضع بها الكود التالى مع تغير ما يناسبك لاننا سنحتاجها ولكن ليس الآن قم بحفظ الكود التالى على المفكرة .
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <meta   expr:content='data:blog.pageTitle' property='og:title'/>
        <meta   expr:content='data:blog.url' property='og:url'/>
        <b:else/>
        <meta   expr:content='data:blog.title' property='og:title'/>
        <meta   expr:content='data:blog.homepageUrl' property='og:url'/>
        </b:if>
        <meta   content='اسم مدونتك' property='og:site_name'/>
        <meta   content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipwS9p73X4dc6ZOeCeY8ziqns2HLURcFpcX_6YFRoYEN5RPLk4v-A8uijykx6zzy3e56rxFV5bF9LPF6OSAAIC0oheR1ewnW-McW_Uk26FKn2eE5RYm96ft2O0JbTPTv3g3yWTd0x6XnY/s1600/%D8%A8%D9%86%D8%B1-%D8%AE%D8%A7%D8%B5-%D8%A8%D9%89-125.png'   property='og:image'/>
        <meta content='اكتب الـID الذي نسخته سابقا هنا'   property='fb:app_id'/>
        <meta content='انسخ المعرّف (ID) الخاص ببروفايلك في الفيسبوك'   property='fb:admins'/>
        <meta content='article'   property='og:type'/>
كيف أجد معرف الـ id  الخاص بحسابى ؟ بسيطة جداً إفتح الرابط الاتى لايجاده
https://graph.facebook.com/hady.mana 
مع تغير إسمى بإسمك ستجد المعلومات عن حسابك بما فيها الـ id مثل الصورة التاليه 
- الكود السابق الذى تم حفظة فى المفكرة ضعه قبلة هذا الكود مباشرة </head>  
- والآن إبحث عن الكود التالى 
<data:post.body/>
- ضع الكود التالى بعده مباشرة 
   <b:if cond='data:blog.pageType == &quot;item&quot;'>  <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>  <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments migrated='1' expr:href='data:post.url'  expr:title='data:post.title' expr:xid='data:post.id' width='450'/>  </div> </b:if>
يمكنك تغيير هذة القيمة بحسب العرض الذى يناسبك width='450'
- ملحوظة : من الممكن أن تجد أكثر من كود مثل هذا <data:post.body/> قد يكون الأول او الثانى هى نختلف فى بعض القوالب
والآن قم بحفظ القالب وأعذرونى إن قصرت فى شرحى

Wednesday, 27 November 2013

اضافة شريط متحرك يضم اخر اخبار المدونه بالوان احترافيه

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

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

1- من لوحة التحكم --قالب --تحرير html
2-البحث عن الكود التالى 

  <head/>

واضافة هذا الكود قبله 

كود اللون الازرق

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاخضر

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px;
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاحمر

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>
الان بعد ان ضفت احد الاكواد السابقة تبقت لنا خطوة واحدة وهى اضافة الاضافة تحت الهيدر
ملاحظة - ان كود الهيدر يختلف من قالب لاخر ولكن انا ساعطيك الكود الشهير
سنقوم بالبحث عن الكود التالى

          <div class='main-outer'>

ونلصق قبله تماما هذا الكود
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mdwanblog.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }            
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); });
//]]>
</script>
</b:if></b:if>

الان قم باستبدال الرابط التالى http://mdwanblog.blogspot.com/ برابط مدونتك

ستجده باللون الاحمر 

واذا كان لديك اى استفسار لا تترد فى طرحه

صفحتى على الفيس بوك


Saturday, 23 November 2013

كيفية اضافة اداة الملفات المرفقة الى مدونات بلوجر فقط من مدونة مدون


بسم الله الرحمن الرحيم
وبة نستعين
والصلات والسلام على اشرف المرسلين
سيدنا محمد الهادى الامين
اليوم موضوع لم يوجد فى موقع او مدونة فى العالم
وهو كيفية اضافة الملفات المرفقة الى مدونة بلوجر

مميزات الاضافة


 تسهيل التحميل لزائرى المدونة
تسريع المدونة
تناسبه مع جميع المدونات وجميع المتصفحات
لابمكن استخدام هذا الكود الا فى مدونات بلوجر
 الدخول الى لوحة تحكم الرسالة

اختيار وضع HTMl
ثم ضع الكود التالى فى المكان الذى تريد
<div trbidi="on" style="text-align: right;" dir="rtl">
<div style="text-align: center;">
</div>
<div style="color: red; text-align: center;">
<style type="text/css">
div.background
  {
  width:585px;
  height:60px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijz8wQvu1Ny8wJrUXuaPvKQAkli4mnVDPsMTMV0lY1C9WFaOldjchzWwIZv-SNgu4evm9SLSI7MXwrvJogkoYJ3z9cOIu7hmAd-VtLhuFDINYqphn3ZNBLcKLkdJHWlJ6gqgjLRBizhSiy/s1600/%D8%A7%D9%84%D9%85%D8%B1%D9%81%D9%82%D8%A7%D8%AA.png) repeat;
  border:2px solid white;
  }
div.transbox
  {
  width:566px;
  height:26px;
  margin:26px 9px;

  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style></div>
<div style="color: red; text-align: center;">
</div>
<div style="color: red; text-align: right;" class="background">
<div class="transbox">
<a href="https://sites.google.com/site/morfkatmdontkblog/%D9%83%D9%8A%D9%81%D9%8A%D8%A9%20%D8%A7%D8%B6%D8%A7%D9%81%D8%A9%20%D8%A7%D8%AF%D8%A7%D8%A9%20%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D8%B1%D9%81%D9%82%D8%A9%20%D8%A7%D9%84%D9%89%20%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20%D9%81%D9%82%D8%B7%20%D9%85%D9%86%20%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%85%D8%AF%D9%88%D9%86%D8%AA%D9%83.docx">كيفية اضافة المرفقات.docx</a> (91 KB)</div>
</div>
</div>
البرتقالية برابط التحميل
والزرقاء باسم الشئ المحمل
الخضراء بامتداد التحميل
والاحمر بحجم التحميل
والاصفر بنوع الحجم    : اذاكان جيجا بايت ، ميجا بايت ،كيلو بايت،بايت


معاينة وتحميل الشرح



Monday, 11 November 2013

تنسيق المدونة تمثل 30% من النجاح (هام جداً جداً)

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

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

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

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

إلى هنا نكون وصلنا لنهاية المقال أرجو إنه يفيدكم وأتمنى التوفيق للجميع

Friday, 18 October 2013

تخصيص نموذج إتصل بنا بشكل جديد لبلوجر

بسم الله الرحمن الرحيم 
زوار وأعضاء مدونة مدون الكرام لقد شرحت سابقاً فى تدوينة كيف تخصص نموذج إتصال بشكل إحترافى معتمد من بلوجر ولكن وصلتنى تعليقات عديدة عن أن الإضافة لم تعمل بشكل جيد أو بها أخطاء ما مع العلم انها مجربة 100% وانا شخصياً أستخدمها بمدونة مدون لذلك قررت أن آتى لكم بشكل جديد آخر مع شرح التركيب سهل جداً .
1 - علينا أولاً تركيب الاضافة بصورة الاعتيادية نتوجه الى تخطيط ثم أضافة أداة جديدة وختر أضافة أتصل بنا
2 - إختر صفحات / صفحة جديدة فارغة / ثم ضع الماوس على HTML وضع الكود التالى
<form name="contact-form">
الاسم
<input id="ContactForm1_contact-form-name" name="name" size="30"
type="text" value=""
/>
البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30"
type="text" value="
" />
الرسالة <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email
-message" name="email-message" 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 type="text/css">
/* mdwanblog */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
ملحوظة هامة يجب التأكد من إختيار هذة الأسطر أثناء إنشاء الصفحة مثل الصورة التالية
3 - الآن مع إضافة كود الـ css نبحث عن الكود ]]></b:skin> ونضيف الكود التالى قبلة 
/* mdwanblog */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: right;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message
{
width: 450px;
margin-top:35px;
}
والآن أصبح النموذج مكتمل 
تنبيه | لا تقوم بحزف الأداة من العمود الجانبى هى ستختفى

Sunday, 6 October 2013

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

بسم الله الرحمن الرحيم 
فى البداية أتمنى أن تكونوا بأفضل حال جميعاً اقدم لكم فى هذة التدوينة البسيطة كود إضافة لأزرار المشاركة بشكل إحترافى وجزاب بتقنية الـ css3 وبتقنية الجى كويرى .
والآن مع شرح التركيب وهى سهلة جداً
لتركيب الجزء الخاص بالـ css إبحث عن الكود التالى 
]]></b:skin>
وضع قبلة مباشرة الكود التالى 
div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
ثم إبحث عن هذا الكود 
<div class='post-footer'>
ملحوظة : إن لم يعمل معك الكود الأول جرب الثانى لانها تختلف فى بعض القوالب 
ضع الكود التالى بعدة مباشرة  
        <!--Start Ssocial Bookmarks fromhttp://mdwanblog.blogspot.com -->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='shr_class shareaholic-show-on-load'>
        </div>
        <script type='text/javascript'>
        var SHRSB_Settings = {&quot;shr_class&quot;
        :{&quot;src&quot;:&quot;http://www.shareaholic.com/media/
        css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;
        ,&88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf1
        quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,
        42c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;
        :true,&quot;shortener&quot;:&quot;google&quot;,&quot;;
        ,&quot;designer_toolTips&quot;
        :true,&quot;twitter_template&quot;:&quot;Some fancy post title
        - http://goo.gl/dbqlx via @mdwan-blogger&quot;}};
        </script>
        <script type='text/javascript'>
        (function() {
        var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
        sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot;
         : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
        var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
        <!-- End Social Bookmarks from http://mdwanblog.blogspot.com -->
 ملاحظات هامة 
الإسم المحدد باللون الأحمر هو إسم الحساب على تويتر غيرة بإسم حسابك إذا كان ليس لديك حساب اتركة فارغاً

Saturday, 14 September 2013

شرح تخصيص نموذج التصويت المعتمد من بلوجر

بسم الله الرحمن الرحيم 
الجميع يعلم نموذج التصويت المعتمد من بلوجر ولكن أيضا يوجد الكثير من الإعضاء لا يرضيهم الشكل لانه لا يعتمد على لغة الـ css وهو ما يتيح لك أن تظبط شكلها أكثر على مزاجك أنت مع هذا الشرح المقدم من مدونة مدون سوف تستطيع التعديل على الكود من خلال الـ css مما يتيح لك أن تتحكم به وكيف ما تحب .
أولاً سيتم وضع الأكواد الخاصة بالـ css فى القالب الخاص بك قبل هذا الوسم ]]></b:skin>
الكود الأول 
/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}
لمن لا يعلم عن الـ css إليك بعض الملاحظات الأتية :
  1. عندما تقوم بعمل تصويت ستقوم بلوجر بتسمية المعرف بـ Poll1 إذا كان لديك إثنان فسيكون رقم الأول والآخر Poll2 فلا بد أن تحدد تريد تغيير أى نموذج 
  2. لقد تم منحها لون الخلفية الصفرء  ذلك عن طريق تغير هذا الكود (#FFFF00) يمكنك تغييرة إلى لون تريدة عن طريق كود اللون لمعرفتة يمكنك زياة هذة الصفحة أكواد الألوان
  3. وهو حدود الإطار وذلك لونة سيكون #736AFF  أم الـ 3px ذلك هو سمك الإطار كلما زاد زاد السمك 
  4. وهو إعطاء مساحة 10px للجوانب اليسار واليمين 
 بهذة الإعدادات فسيكون الشكل فى النهاية هكذا 
التعديل الثانى سيكون على الخط بهذة الأكواد يمكنك التلاعب بالإعدادات لكى تناسبك
/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}
#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}
الجزء باللوان الأحمر هو الخاص بالتعديل على حجم ولون الخط 

    Saturday, 24 August 2013

    كيف تحفظ نسخة إحتياطية كاملة لمدونتك

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

    Wednesday, 31 July 2013

    أضف نموذج راسلنى بشكل مطور وأكثر إحترافية

    بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة 
    طبعا كلنا عارفين إن بلوجر عملت إضافة جديدة وهى راسلنى أو نموذج المراسلة بيتم إضافتها عن طريق التخطيط من مدونتك ولكن إحنا جبنالك أزاى تخصص الإضافة دى على مزاجك إنت مش على مزاج بلوجر يعنى ببساطة بدل ما تستخدمها فى السيد بار أو شئ هكذا لا إنت إستخدمها فى صفحة وتبقى كانها نموذج مراسلة مستقل بيك إنت زى المواقع ولو تعرف بسيط عن الـ css يبقى تقدر تغير الالوان وبراحتك تابع الشرح.
    إذهب إلى تخطيط وقم بإضافة اداة النموذج مثل الصورة التالية
    بعد إضافة الأداة نذهب إلى تحرير القالب ونبحث عن هذا ]]></b:skin> ونضع الكود التالى فوقة
    /* Contact Form Container */
    .contact-form-widget {
    width: 500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    background: #F8F8F8;
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    }
    /* Fields and submit button */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 10px;
    }
    /* Submit button style */
    .contact-form-button-submit {
    border-color: #C1C1C1;
    background: #E3E3E3;
    color: #585858;
    width: 20%;
    max-width: 20%;
    margin-bottom: 10px;
    }
    /* Submit button on mouseover */
    .contact-form-button-submit:hover{
    background: #4C8EF9;
    color: #ffffff;
    border: 1px solid #FAFAFA;
    }
    بعد إضافة هذا الكود إبحث عن هذا ContactForm ستجدها مثل الصورة التالية
    الجزء المظلل باللون الأصفر ستقوم بحزفة ثم إحفظ قالبك وإتجة إلى صفحات وقم بإنشاء صفحة جديدة وإختار بدلاً من تاليف إختر html وضع بها الكود التالى وقم بحفظها 
     <div class='widget ContactForm' id='ContactForm1'>
      <div class='contact-form-widget'>
        <div class='form'>
          <form name='contact-form'>
            <p>الإسم<p>
            <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
            <p>البريد الإلكتروني *</p>
            <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
            <p>الرسالة *</p>
            <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
            <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='أرسل'/>
            <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
            <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
          </form>
        </div>
      </div>
    </div>
    الآن إنتهينا من هذة الإضافة وأصبح لديك صفحة مراسلة خاصة بك وستتلقى الوارد عن طريق بريد حسابك فى جوجل

    شرح إزالة كلمة لا يوجد مشاركات نهائياً

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

    إبحث عن هذا الوسم ]]></b:skin> وضع قبلة مباشرة الكود التالى 
    .status-msg-wrap

    {

    display: none;

     }
    مبروك الآن تم إزالة الجملة بنجاح وتقدر تعاين مدونتك

    Tuesday, 30 July 2013

    طريقة إضافة قطعتين (إضافة أدة) بجانب بعضهما لمدونات بلوجر

    بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة
    اهلاً بكم فى مدونتكم المتواضعة اليوم سأشرح لكم طريقة إضافة قطعتين بجانب بعضهما يتم وضعهم فى اى مكان تريده عن طريقة إضافة أداة ولكن أنت ستوضع رابط الخاص بالإضافة الذى تريد إظهارها فى الجهة اليمنى أو اليسرى طريقة يبحث عنها الكثير على الإنترنت مدونة مدون تقدمها لك بـ أبسط الطرق لتزيين مدونتك وجعلها أكثر جمالاً وأناقة .
    1- لوحة التحكم الرئيسية
    2 - إذهب إلى التخطيط
    .3 - إختار إضافة أداة (جافاسكريبت)
    وضع بها الكود التالى
    <div style="width: 45%; float: left;"> ضع هنا الكود الذي تريد - الجهة اليسرى </div>
    <div style="width: 45%; float: right;"> ضع هنا الكود الذي تريد - الجهة اليمنى </div>
    <div style="clear: both;"></div>