اخر مواضيع المدونة

اضافة مجموعه ازرار احترافية وحصري | الجزء الاول

Add-a-total-of-buttons-Blogger-Collection
نقدم لكم الجز الأول من مجموعة أزرار المواقع الاحترافية ذات الجود العالية التي تصلح لجميع الإغراض المختلفة فنحن اخترنا لكم بعض الأزرار الاحترافية وقمنا بتقسيمها إلى جزأين لأنها كنيره حيت إننا أساسا لها شكلان ففكرنا بتقسيمها إلى موضوعين.


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

شرح التركيب وطريقة الاستخدام


الأزرار مقسمه إلى أربع أقسام لكل شكل قسم لتركيب أي قسم اذهب إلى قالب تحرير HTML وبحث عن </head> وأضف كود CSS للقسم الذي تريده فوقها مباشرتاً

القسم الأول من الأزرار

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YS0lGclBwbk1sTjQ" rel="stylesheet" />

القسم الثاني من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YN1N6MFlYZ01hMWM" rel="stylesheet" />

القسم الثالث من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YVmlvaXJYa01HTVU" rel="stylesheet" />

القسم الرابع من الأزرار 

Add-a-total-of-buttons-Blogger-Collection
<link href="https://googledrive.com/host/0BypzyVeh7C0YSzFkUk01c0tYOHc" rel="stylesheet" />

تركيب الخط


مجموعه الأزرار تستخدم خط Droid Arabic Kufi لوضع الخط ضمن خطوط مدونتك توجه إلى قالب تحرير HTML تم ابحث عن  ]]></b:skin> وأضف الكود التالي فوقه مباشرتاً
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
آدا قمت بتركيب الخط سابقاً فلا داعي لتضيفه 


شرح التعامل مع الإضافة بتفصيل


بعد تركيب كود CSS نأتي إلى طريقة التعامل معها, هده الإضافة يمكنك تركيبها في اي مكان بمجرد وضع كود الزر والتعديل على الربط
نلاحظ عند الدخول إلى (صفحة المعانية / أكواد مفصله) لأحد الأقسام نجد وجود لكل زر كود خاص به من أكواد الأزرار الموجودة بهده الشكل
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>
التعديلات تكون على التالي
الارتقاء للبلوجر : غيرها بل اسم الذي تريده ان يظهر في الزر
"#" : قم بتغير علامة (#) برابط الصفحة


تركيب الزر داخل الموضوع 

أولان توجه إلى الموضوع الذي تريد وضع الزر فيه تم اكتب نص مثل "معاينة" تم انسخها تم انتقل من تأليف إلى HTML وبحث عن "معاينة" باستخدام Ctrl + F
ستجدها بالشكل التالي
معاينة
قم باستبدال "معاينة" بكود الزر

تغيير اتجاه الزر داخل الموضوع

ملاحظ: آدا أردت جعل اتجاه الزر في الوسط أضف هده الكود
style="float: none;max-width: 127px;margin-left: auto;  margin-right: auto;"
أضف الكود في نهاية كود الدف ضعه بين قبل ناهاية div وعلامة التنصيص( في الوسط )
<div class="-------"هنا > -------- 
مثال هده كود الزر
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"     ><span>الارتقاء للبلوجر</span></div></a>
بعد إضافة الكود أصبح
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: none;max-width: 127px;margin-left: auto;  margin-right: auto;" ><span>الارتقاء للبلوجر</span></div></a>
 لو نريد إضافة زرين, واحد في اليسار والأخر في اليمين تابع ألطريقه التالية
مثال إنا لدي زران واحد بلون الأحمر والأخر بلون بالأخضر
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward"><span>الارتقاء للبلوجر</span></div></a>
لو نريد إضافة واحد في اليمين والأخر في اليسار نستخدم الكود التالي
style="float: right; margin-right: 0;margin:10px;"
هده الكود نضعه في كود الزر بنفس الطريقة السابقة
right : يعني سيتم وضعه الزر في اليمين لو أردنا وضعه في اليسار نضع بدله left
المثال السابق يرجع بهذه الشكل
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: right; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>
<a href="#"><div class="set_2_button color1 set_2_btn-1 icon-forward" style="float: left; margin-right: 0;margin:10px;" ><span>الارتقاء للبلوجر</span></div></a>
نلاحظ الزر الذي بلون الأحمر أضفنا له right يعني سيكون في اليمين بينما الزر الذي بلون الأخضر أضفنا له left يعني سيكون في اليسار

إن شاء الله تكون أعجبتكم الإضافة وفهمت الشرح وطريقه تركيبه انتظرونا في الجزء الثاني من الإضافة, أد كان لديك إي سؤال أو استفسار ضعه في تعليق. وشكراً

تغيير شكل التسميات الى شكل احترافي وحصري

Change-the-format-of-labels-to-professional-and-exclusive-form-in-Blogger

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

شرح التعامل مع الإضافة


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

كيف يمكنك أزلته

نذهب إلى قالب تحرير HTML 
بعد دالك نبحت عن الكود التالي list. او . list-label-widget-content نمسح جميع الاكواد المرفقة معه  حتى  يحذف الشكل يعني نمسح الاكواد كلها التي ظهر هات أتناء البحث وغالب تجد الكود في ]]></b:skin> للبحت نستخدم F +Ctrl   
اكرر امسح css  الخاص به يعني التنسيقات

بعد إن تأكدنا من تصفيه شكل التسميات القديم نذهب إلى ونفعل التسميات من التخطيط  ونتوجه إلى قالب تحرير HTML 
ألان نأتي إلى الخطوة المهمة وهي استبدال كود التسميات القديم بكود جديد حتى يتناسب مع الشكل نبحت عن الكود التالي id='Label1' 
تجده بهده الشكل نقوم بفتحه 
Change-the-format-of-labels-to-professional-and-exclusive-form-in-Blogger

نقوم بفتحه تم قم بتحديد كما في الصورة وضع الكود التالي بدله
Change-the-format-of-labels-to-professional-and-exclusive-form-in-Blogger




<b:widget id='Label1' locked='false' title='' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h3><data:title/></h3>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='rtl'><data:label.count/></span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='rtl'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>
</b:includable>
  </b:widget>

أخر خطوه تركيب الشكل نذهب إلى قالب تحرير  HTML ونبحث عن ]]></b:skin> ونظيف الكود التالي فوق مباشره

/* CSS التسميات */
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:right;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .label-size{position:relative;display:block;float:right;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;left:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;left:-15px}
#sidebar-wrapper .label-size a:hover{color:#444;border-color:#4fafe9}

.list-label-widget-content ul li span {
float: right;
width: 3em;
height: 3em;
text-align: center;
line-height: 35px;
margin: -34.5px -2px 0px 4px;
border-radius: 100%;
color: #FFF;
font-weight: bold;
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
border: 0.3em solid #FFF;
font-family: time;
}
.list-label-widget-content li a {
text-decoration: none;
color: #272B35;
-webkit-transition: all 0.3s ease-in-out;
transition: all 1s;
display: block;
margin: 0 40px 0 0;
padding: 6px 0.4px;
}
.list-label-widget-content li a:hover {
color: #FFFFFF;
transition: all 1s;
}
.list-label-widget-content ul li:hover {
background: #ea0c31;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1),inset 0 0 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.1);
transition: all 1s;
}
.list-label-widget-content ul li {
border: solid 1px #E0E0E0;
background: #F0F0F0;
color: #444;
text-decoration: none;
border-radius: 0.3em 1.3em 1.3em 0.3em;
transition: all 1.0s ease-out 0s;
font-family: droid arabic kufi;
list-style: none;
font-size: 12px;
margin: 5px 3px;
transition: all 1s;
}
/* CSS نهاية التسميات */

اللون الأخطر يعني الخط ونلاحظ الخط المستخدم هو خط droid arabic kufi استبدله بخط مدونتك أو يمكنك تضمين الخط من خلال إضافة الكود التالي فوق  ]]></b:skin>
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);


الكود ما يحتاج شرح ولأكن تبسيط مني الذي بل لوان الأحمر والأزرق هو ألون نفس كود اللون #ea0c31 وهو اللون الأحمر أد حببت تغير اللون غيرهم معاً  الفرق بينهم بسيط الأحمر لون أرقام عدد المواضيع والأزرق هو لون عند التأشير على قسم

أخي الكريم أختي الكريمة مثل هده الاكواد تعتبر معدومة وان وجدث لن تجدها مثل هده الشكل الاحترافي نحنا نعدك بل مزيد من الإضافات الحصريه والقوالب الاحترافية والمزيد المزيد وكل ما نريد منك هو متابعه المدونة من هنا

تحميل قالب بلوجر مايكرو ماج معرب متجاوب مع جميع الاجهزة

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

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


ملاحظ هامه :  قبل تركيب القالب استخدام قالب التنظيف حتى تتمكن من تركيبه بشكل صحيح الكود 
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><b:skin><![CDATA[/*-----------------------------------------------Name : CNMU Cleaning TemplateDesigner URL  : http://cnmu.blogspot.comyear          : 2015----------------------------------------------- */]]></b:skin></head><body><b:section class='main' id='main' showaddelement='yes'><b:widget id="Blog1" locked="true" type="Blog" /></b:section></body></html>




التعديل على القالب

لتعديل على القائمة الأولى التي في الإعلاء أتوجه إلى قالب > تحرير HTML > استخدام  Ctrl + F للبحث عن <ul class='menu' id='menu-top-menu'>
ستجد القائمة كتالي 
<ul class='menu' id='menu-top-menu'>
<li class='menu-item'><a href='#'>الرئيسية</a></li>
<li class='menu-item'><a href='#'>اتصال بنا</a></li>
<li class='menu-item'><a href='#'>من نحن</a></li>
<li class='menu-item'><a href='#'>سياية الخصوصية</a></li>
<li class='menu-item'><a href='#'>كن معناء</a></li>
<li class='menu-item'><a href='#'>تابعوناء</a></li>
</ul>
علامة # ضع الرابط وما في اللون           غيره إلى الاسم الذي تريده

لتعديل القائمة التأني التي في الإعلاء > ابحث عن <nav id='menu'>
ستجدها بهده الشكل
<nav id='menu'> 
<input type='checkbox'/> 
<label>&#8801;<span>Menu</span></label>
<ul> 
<li class='homers'><a href='/'><i class='fa fa-home'/> الرئيسية</a></li> 
<li><a href='#'>فرعي</a></li> 
<li><a href='#'>قائمة منسدلة <i class='fa fa-chevron-down'/></a> 
<ul class='menus'> 
<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> 
<li><a href='#'>فرعي</a></li>
</ul> 
</li> 
<li><a href='#'>فرعي</a></li> 
<li><a href='#'>قائمة منسدلة <i class='fa fa-chevron-down'/></a> 
<ul class='menus'> 
<li><a href='#'>فرع</a></li> 
<li><a href='#'>فرعي</a></li> 
<li><a href='#'>فرعي</a></li> 
</ul> 
</li> 
<li><a href='#'>فرعي</a></li>  
       </ul> 
    </nav>

علامة # ضع الرابط وما في اللون           غيره إلى الاسم الذي تريده



كود اعلانات 728*90
<div class="widget-content">
<a href="#"><img alt="" src="http://1.bp.blogspot.com/-b0ANqtKdb74/VopWzo0Ge-I/AAAAAAAADr0/Nct7lTRjNoY/s1600/1.PNG" /></a>
</div>


كود الاعلان في السيد بار 300*250
<div class="widget-content">
<a href="#"><img src="http://i.imgur.com/EOfXYjI.png" alt="300x250 ad banner" title="source: imgur.com" /></a>
</div>



  1. لتشغيل السلايد شو إضافة كلمة recent في HTML/JavaScript  في التخطيط ستلاحظ وجود العديد من الأدوات الجاهزة أضاف كلمة recent إلى أداة باسم السلايد شو.
  2. لإظهار قسم معين في الصفحة الرئيسية إضافة اسم التسمية في HTML/JavaScript  في التخطيط (برامج) أو (العاب).
  3. لإظهار ( مواضيع جميلة ) أضف اسم التسميات إلى الأداة الموجود في التخطيط باسم (مواضيع جميلة) وهي HTML/JavaScript.  
  4. لإضافة البحث في المدونة أضف كلمة <span style="font-style:italic;"></span> في التخطيط (البحث في المدونة) وهي أداة HTML/JavaScript  .




كود تابعونا عبر موقع التواصل الاجتماعي أضف في التخطيط باسم (تابعونا عبر موقع التواصل الاجتماعي) HTML/JavaScript  
<div class="widget_social_apps">
 <div class="app_social facebook">
 <a href="https://www.facebook.com/" target="_blank">
 <span class="app_icon"><i class="fa fa-facebook"></i></span>
 </a>
 </div>
 <div class="app_social twitter">
 <a href="https://www.twitter.com/" target="_blank">
 <span class="app_icon"><i class="fa fa-twitter"></i></span>
 </a>
 </div>
 <div class="app_social pinterest">
 <a href="https://www.pinterest.com/" target="_blank">
 <span class="app_icon"><i class="fa fa-pinterest"></i></span>
 </a>
 </div>
 <div class="app_social google">
 <a href="https://www.google.com/" target="_blank">
 <span class="app_icon"><i class="fa fa-google-plus"></i></span>
 </a>
 </div>
</div>

قم بتعديل الروابط إلى روابط صفحك في مواقع التواصل الاجتماعي 

وبهده نكون قد انتهينا من تركيب القالب أد كان يوجد إي استفسار أو مشكلة ضعها في تعليق وان شاء الله سنرد عليك في اقرب وقت ممكن

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

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

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


ملاحظه هامه: يجب قبل كل شيء تفعيل اتصال بنا من خلال التخطيط (ولن تظهر في التخطيط بعد تركيب الاكواد) بعد ذالك تابع الطريقة ألتاليه


ابحث عن ]]></b:skin> اضف الكود التالي فوقة مباشره
#ContactForm1{display: none;}
هذا كود نموذج اتصل بنا سوف نستخدمه لاحقاً
<style>
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px;height:auto;margin: 5px auto;padding: 10px 10px 10px 40px;background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px;height: 150px;margin: 5px auto;padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px;height: 30px;float: right;color: #FFF;padding: 0;cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}</style><div id="contact_wrap"><h3>اتصل بنا الان</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الإلكتروني" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="اكتب رسالتك" 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></div><style type="text/css">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>


طريقة تركيبه





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









ألان إنشاء صفحة جديدة وسميها اتصال بنا


قم بتحويل من تأليف إلى HTML حتى يشتغل الكود بشكل الصحيح




قم بحذف جميع الاكواد الموجودة




1- ضع الكواد السابق كواد اتصال بناء
2-اضغط خيارات
3-تعليقات خليها عدم السماح 
4- اعمل العنوان الدي تريده
5- نشر