اضافة نموذج الاتصال لمدونات بلوجر

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

شكل نموذج الاتصال بعد الاضافة 

طريقة اضافة نموذج الاتصال أو المراسلة الى مدونة بلوجر 

اضافة نموذج الاتصال كاداة في جانب او اسفل المدونة ::

*- من لوحة التحكم   >>>   تخطيط    >>>   المزيد من الادوات    >>>   نموذج الاتصال

اضافة نموذج الاتصال في صفحة او مشاركة مستقلة كصفحة اتصل بنا ::

*- نقوم باضافة الكود التالى فى احدي المشاركات او الصفحات وعدم تغير اي شئ بالكود


<!-- نموذج الاتصال -->
<div style="background: #F3F3F3; border: 0px solid #C3C3C3; float: left; height: 100%; padding-top: 0px; width: 99%;">
<div class="form">
<form name="contact-form">
<p></p>
الاسم
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
بريد إلكتروني
<span style="font-weight: bolder;">*</span>
<br>
<input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
<p></p>
رسالة
<span style="font-weight: bolder;">*</span>
<br>
<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
<p></p>
<input type="button" value="إرسال" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
<br><center><font face="Arial, Helvetica" size="1"><b>
<a href="https://rydnet.blogspot.com/">رياض بلوجر</a>
</b></font></center>
<!-- نموذج الاتصال -->

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

طريقة اخفاء نموذج الاتصال المضاف في الاداة عند فتح صفحة اتصل بنا ::

1- من لوحة التحكم    >>>  قالب  (احفظ نسخة من القالب من باب الاحتياط)

2- ابحث بواسطة  ctrl+f  عن الكود التالي :

]]></b:skin>

3- نضيف الكود التالي فوقه مباشرة :

#ContactForm1 {display:none;}

ملحوظة مهمة جداً ::  لا يعمل الكود الذى سوف نضيفة فى الصفحات والمشاركات الا بتركيب نموذج الاتصال الاصلى لبلوجر ثم اخفائه او تركة ظاهرا .

تعديل خصائص نموذج الاتصال ::

اللون الازرق:  لو ن خلفية نموذج الاتصال 

اللون الأخضر: لون اطار نموذج الاتصال

اللون الأحمر:  ازاحة نموذج الاتصال الى اليسار  - يمكنك جعله في الوسط (center) او في اليمين (right)-

طريقة أخرى لاضافة صفحة اتصل بنا لمدونة بلوجر

 اضافة صفحة اتصل بنا من موقع آخر غير موقع بلوجر                                    

هذه الاضافة لا تحتاج الى التسجيل بالموقع                                            

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

 بالاضافة الى الألوان و الخطوط التي تريدها للصفحة                                     

الاضافة مجانية                                                               

احصل على صفحة اتصل بنا مجانا                                  

اقرء المزيد

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

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

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

1 - من لوحة التحكم   >>>   google+

2- أزل علامة الصح من المربع الأخير المتعلق باستخدام تعليقات google+ على المدونة.

بعد الغاء استخدام تعليقات google+ على المدونة ستظهر التعليقات أسفل كل تدوينة بشكل طبيعي وبذلك نكون قد انتهينا من حل مشكلة عدم ظهور التعليقات على التدوينات في بلوجر.

لمعرفة المزيد عن تعليقات google+           ==>> من هنا  <<===

مع تحيات حمزة رمزي....

اقرء المزيد

اضافة اداة البحث في المدونة بخاصية الاجاكس

اضافة اداة البحث في المدونة بخاصية الاجاكس

معاينــة  | تحميل الكود

لاضافة الاداة اذهب الى التخطيط-اضافة اداة واضف الكود التالي

<style>

#search-result-container h4 {

margin: 0 0 10px;

font: normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;

color: black;

}

.closebtn {

font-size: 18px;

}

#search-result-container li{margin:0 0 5px;padding:0;list-style:none;overflow:hidden;word-wrap:break-word;font:normal normal 10px Verdana,Geneva,sans-serif;color:#141414;background-color:white;text-transform:none}

#search-result-container li a{text-decoration:none;font-weight:bold;font-size:11px;display:block;line-height:14px;padding:0;font-weight:bold}

#search-result-container mark{background-color:yellow;color:black}

#search-result-container h4{margin:0 0 10px;font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;color:black}

#search-result-container ol{margin:0 0 10px;padding:0 0;overflow:hidden;height:450px}

#search-result-container:hover ol{overflow:auto}

#search-result-container li img{display:block;float:right;margin:0 5px 1px 0;padding:2px;border:1px solid #D1D1D1}

#search-result-loader{top:100%;position:absolute;z-index:999;width:100%;line-height:30px;color:#2E2E2E;padding:0 10px;background-color:white;border:1px solid #DBDBDB;margin:0;overflow:hidden;display:none;text-transform:capitalize}

#search-result-container p{margin:5px 0}

#search-result-container .close{position:absolute;right:8px;top:8px;font-size:12px;color:white;text-decoration:none;border-radius:9999px;width:13px;height:13px;text-indent:1px;background-color:#1295C9;line-height:12px}

.bwh-title .d-header abbr{border-bottom:0}

  #search-result-container{width:100%}

</style>

<div id="search-form-feed">

    <form action="/search" onsubmit="return updateScript();">

        <input id="feed-q-input" name="q" type="text" placeholder="ادخل كلمة للبحث" x-webkit-speech="undefined" />

<input onkeyup="resetField();" type="submit" value="بحث" />

    </form>

    <div id="search-result-container"></div>

    <div id="search-result-loader">جار البحث...</div>

</div>

<script type="text/javascript">

//<![CDATA[

var searchFormConfig = {

    url: "http://ahmed-iq.blogspot.com", 

    numPost: 9999, 

    summaryPost: true, 

    summaryLength: 100, 

    resultTitle: "بحث عن",

    noResult: "لاتوجد ناتج", 

    resultThumbnail: true, 

    thumbSize: 70, 

    fallbackThumb: "http://softglad.at.ua/images/no-img.jpg"

};

//]]>

</script>

<script type="text/javascript" src="http://softglad.at.ua/widgets/blogger-search.js"></script>

<style>

#search-form-feed {

 width:100%;

 position:relative;

 margin:0 0 10px;

 padding:0 0;

 font:normal normal 11px Arial,Sans-Serif;

 color:#333;

}

#feed-q-input {

 display:block;

 width:85%;

 border:1px solid #bbb;

 background-color:white;

 padding:5px 5px;

 font:normal bold 13px Tahoma,Arial,Sans-Serif;

 color:#ccc;

 margin:0 0;

 -webkit-border-radius:4px;

 -moz-border-radius:4px;

 border-radius:4px;

 float: left;

 -webkit-box-sizing:border-box;

 -moz-box-sizing:border-box;

 box-sizing:border-box;

float: right;

}

#search-form-feed input[type="submit"] {

    background: #fff;

    border: 1px solid #ccc;

    padding: 5px 5px;

    cursor: pointer;

    margin: 0;

float: left;

}

#feed-q-input:focus {

 color:#333;

 outline:none;

}

</style>

مع تغيير http://ahmed-iq.blogspot.com برابط مدونتك

اقرء المزيد

قائمة منسدلة - 6

لقد قمت في السابق بتقديم قائمة منسدلة بأشكال متعددة و ألوان رائعة...اليوم أقدم لكم قائمة منسدلة جديدة جميلة جدا...

                  تركيب قائمة منسدلة :                       

1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript

2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<style>

    /*------ CSS3 Drop Down Menu By JEHHAD (www.rydnet.blogspot.com)---------*/

    #mbt-menu, #mbt-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #mbt-menu {

    width: 560px;

    margin: 60px auto;

    border: 1px solid #000;

    background-color: #333;

    background-image: -moz-linear-gradient(#800000, #333);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000));

    background-image: -webkit-linear-gradient(#333, #800000);

    background-image: -o-linear-gradient(#800000, #999);

    background-image: -ms-linear-gradient(#333, #800000);

    background-image: linear-gradient(#800000, #333);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #mbt-menu:before,

    #mbt-menu:after {

    content: "";

    display: table;

    }

    #mbt-menu:after {

    clear: both;

    }

    #mbt-menu {

    zoom:1;

    }

    #mbt-menu li {

    float: right;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #mbt-menu a {

    float: right;

    padding: 12px 30px;

    color: #FFFF00;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #mbt-menu li:hover > a {

    color: #fff;

    }

    *html #mbt-menu li a:hover { /* IE6 only */

    color: #000;

    }

    #mbt-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#800000, #999);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#333, #800000);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #mbt-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #mbt-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #mbt-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #mbt-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #mbt-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #mbt-menu ul a:hover {

    background-color: #fff;

    background-image: -moz-linear-gradient(#800000, #000);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #mbt-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #mbt-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #mbt-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #mbt-menu ul li:first-child a:hover:after {

    border-bottom-color: #fff;

    }

    #mbt-menu ul ul li:first-child a:hover:after {

    border-right-color: #fff;

    border-bottom-color: transparent;

    }

    #mbt-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }

    </style>

    <ul id="mbt-menu">

    <li><a href="#">الرئيسية</a></li>

    <li>

    <a href="#">الاقسام</a>

    <ul>

    <li><a href="#">قائمة منسدلة</a></li>

    <li><a href="#">سحابة التسميات</a></li>

    <li><a href="#">اضافات التواصل الاجتماعي</a></li>

    <li><a href="#">خدمات RYDNET المجانية</a></li>

    </ul>

    </li>

    <li><a href="#">دورة بلوجر</a></li>

    <li><a href="#">عن الموقع</a></li>

    <li><a href="#">اتصل بنا</a></li>

    </ul>                    

طريقة تعديل القائمة المنسدلة :

* اللون الاخضر : عناوين الاقسام الافقية .
* اللون الاحمر :  عناوين الاقسام العمودية .
* اللون الازرق :  روابط الاقسام كل قسم له رابطه الخاص .
*اللون البرتقالي  (650) طول القائمة حتى تتوافق مع مدونتك

انتهينا من الاضافة........

مع تحيات حمزة رمزي.........

قائمة منسدلة-1   - جديد !

قائمة منسدلة-2   - جديد !

قائمة منسدلة-3   - جديد !

قائمة منسدلة-4   - جديد !

قائمة منسدلة-5    - جديد !

قائمة منسدلة-6    - جديد !

اقرء المزيد

قائمة منسدلة - 5

لقد قمت في السابق بتقديم قائمة منسدلة بأشكال متعددة و ألوان رائعة...اليوم أقدم لكم قائمة منسدلة جديدة جميلة جدا...

                 طريقة تركيب قائمة منسدلة :                       

1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<div class="menubar">
  <ul>
   <li><a href="#" >الرئيسية</a></li>
   <li><a href="#" id="current">اضافات بلوجر</a>
    <ul>
     <li><a href="#">قائمة منسدلة</a></li>
     <li><a href="#">التواصل الاجتماعي</a></li>
     <li><a href="#">سحابة التسميات</a></li>
     <li><a href="#">المزيد...</a></li>
      </ul>
    </li>
   <li><a href="/about.html">خدمات rydnet</a>
                <ul>
                <li><a href="#">فوتوشوب اون لاين</a></li>
                <li><a href="#">meta tag</a></li>
                <li><a href="#">code converter</a></li>
                </ul>
          </li>
   <li><a href="#">اتصل بنا</a></li>
  </ul>
 </div>
<style>
.menubar{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;}
.menubar ul{
 background-color: #ddd; 
 height:50px;
 list-style:none;
 margin:0;
 padding:0;}
 .menubar li{
  float:right;
  padding:0px;}
 .menubar li a{
  background-color: #ddd; 
  color:#000;
  display:block;
  font-weight:normal;
  line-height:50px;
  margin:0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  font-family: arial;
  font-size: 17px;
  font-weight: bold;}
 .menubar li a:hover, .menubar ul li:hover a{
   background-color: #000;
   color:#FFFFFF;
   text-decoration:none;}
 .menubar li ul{
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;}
 .menubar li:hover ul{
  display:block;}
 .menubar li li {
  background-color: #000;
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;}
 .menubar li:hover li a{
  background:none;}
 .menubar li ul a{
  display:block;
  height:50px;
  font-size:12px;
  font-style:normal;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:right;
  font-family: tahoma;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 1px solid #252525;}
 .menubar li ul a:hover, .menubar li ul li:hover a{
   background-color: #FF0098;
   border:0px;
   color:#ffffff;
   text-decoration:none;}
</style>

                   طريقة تعديل القائمة :                    

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

انتهينا من الاضافة........

مع تحيات حمزة رمزي.........

أشكال أخرى لقائمة منسدلة بألوان رائعة جدا

قائمة منسدلة-1   - جديد !

قائمة منسدلة-2   - جديد !

قائمة منسدلة-3   - جديد !

قائمة منسدلة-4   - جديد !

   

اقرء المزيد