المايسترو بلوجر: تست

‏إظهار الرسائل ذات التسميات تست. إظهار كافة الرسائل

نموذج اتصل بنا المطور لمدونات البلوجر

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

معاينه نموذج اتصل بنا المطور من هنا

اولا المقارنة

البنود	نموذج بلوجر	foxyform
دعم اللغة
سهولة التركيب
امكانية تنسق الشكل
تنسيق الرسالة المرسلة
الحماية من السبام عبر كلمة التحقق

ثانيا طريقة التركيب

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

نموذج اتصل بنا الجديد لمدونات بلوجر

بعد ذلك قم بالدخول لصفحة تحرير القالب ثم اختار الآداة بالشكل التالي

نموذج اتصل بنا الجديد

ثم اضغط على أسهم توسعة الآداة واحذف كل ما هو موجود بين هذين الكودين

 

 

وهذه صورة توضيحية لما تم حذفه

نموذج اتصل بنا الجديد المطور

ملحوظة في حالة أن الآداة تحمل رقم آخر غير الرقم واحد أي مثلاً ContactForm2 قم بتغييره الى واحد هكذا ContactForm1

واخيرا

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

<style>
.cnmufourm {
  background: #ddd;background: -moz-linear-gradient(top,#ddd,#fff);background: -webkit-linear-gradient(top,#ddd,#fff);
  border-radius: 10px;
  box-shadow: 0 0 9px 2px #777777;
  margin: 10px auto;
  padding: 20px 20px 20px 30px;
  text-align: center;
  width: 300px;
-webkit-padding-end:20px;
border:2px solid #777;
}

.contact-form-widget {
  max-width: 100%;
  width: 100%;
  height:100%;
}

.contact-form-name,.contact-form-email,.contact-form-email-message {
  border: 1px solid #BBBBBB;
  color: #605F5F;
  max-width: 100%;
  padding: 0px 5px 5px;
  width: 100%;
  font-size:14px;
  font-family: Palatino Sans W23 Bold,Droid Arabic Kufi,Verdana,Geneva,sans-serif;
text-align:right;
}

.contact-form-email-message {
margin-bottom:15px;
min-height:150px
}

.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
  border: 1px solid #8F8F8F;
  color:#000;
}

.contact-form-button-submit {
background: #BE001B;background: -moz-linear-gradient(top,#BE001B,#BE001B);background: -webkit-linear-gradient(top,#BE001B,#BE001B);
border:0;
color:#fff;
font-size:16px;
padding:0 30px 30px;
font-family: Palatino Sans W23 Bold,Droid Arabic Kufi,Verdana,Geneva,sans-serif;
box-shadow: 0 0 1px 0 #F86401;
border-radius:5px;
}

.contact-form-button-submit:hover {
background:#BE001B;
border:0;
color:#fff;
box-shadow: 0 0 1px 0 #F86401;
border-radius:5px;
}

#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#6F6F6E,#000);background: -webkit-linear-gradient(top,#6F6F6E,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 30px 30px;
font-family: Palatino Sans W23 Bold,Droid Arabic Kufi,Verdana,Geneva,sans-serif;
border:0;
border-radius:5px;
}

#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
border-radius:5px;
}

</style>

<br />
<div class="cnmufourm">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;الإسم&quot;;}" onfocus="if (this.value == &quot;الإسم&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="الإسم" />
    <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;البريد الإلكتروني&quot;;}" onfocus="if (this.value == &quot;البريد الإلكتروني&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="البريد الإلكتروني" />
    <br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;اكتب رسالتك هنا&quot;;}" onfocus="if (this.value == &quot;اكتب رسالتك هنا&quot;) {this.value = &quot;&quot;;}" value="اكتب رسالتك هنا"></textarea>
    <br />
<input class="contact-form-button contact-form-button-submit CNMU-button-color" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
    <input class="contact-form-button contact-form-button-submit CNMU-button-color" id="ContactForm1_contact-form-submit2" type="reset" value="مسح" />
    <br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>

بعض التنسيقات
الرقم 300 هو عرض الإضافة قم بزيادته ان اردت
اللونين #ddd,#fff هما الوان تدرج الخلفية
الرقم 777 هو لون الظل ولون الإطار الخارجي
الكودين الأخضر والازرق هما الوان تدرجات الأزرار يمكنك تغيرهما
وطبعا مع قليل من الخبرة في CSS ستستطيع تنسيقها بشكل أفضل
وبالتوفيق

0 التسميات: تست

قائمة بالوان احترافيه CSS3 لمدونات بلوجر

طريقة التركيب

1- التخطيط
2- اختر المكان الذي تريد اضافة الاداة فيه
3- اختر اداة عباره عن HTML/JAVASCRIPT
4- الصق الكود التالي بها

<blockquote><pre class="brush:xml"><ul class="big_nav">
<li><a class="hdr_navi" href="#" id="home">الرئيسية</a></li>
<li><a class="hdr_navi" href="#" id="twitr">تويتر</a></li>
<li><a class="hdr_navi" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="hdr_navi" href="#" id="face" rel="nofollow">فيس بوك</a></li>
</ul>
<style>
.big_nav {
float: right;
width: 303px;
}
ol, ul {
list-style: none;
}
.big_nav li {
float: right;
margin-left: 7px;
margin-bottom: 7px;
}
a#home {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -322px #df517f;
}
a#home:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -64px -322px #ffffff;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #973b86;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ed8629;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -151px #df517f;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
.big_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.big_nav li .hdr_navi {
display: block;
height: 27px;
width: 74px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}

</style></pre></blockquote>

يمكنك اضافت القائمه فى اى مكان ويمكنك التعديل على الروابط بتغيير # الى الرابط الذى تريده

1 التسميات: تست

شرح عمل الاضافه اللاصقه لمدونات بلوجر

الإضافات اللاصقة أو مايسمى بـ Sticky Widget هي تلك الإضافات التي تظل ظاهرة مع تمرير الشاشة طبعا رؤية مثال يكون أفضل اضغط على الرابط بالاسفل وشاهد اضافة حديث صحيح

معاينه الاضافه اللاصقه من هنا

لو لاحظت في مثال المعاينة إضافة حديث صحيح تظل ملتصقة مع تمرير الشاشة هذا هو المقصود

أولا ما الهدف من هذه الخاصية

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

ثانياً كيفية التركيب

1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</body>

وأضف فوقه الكود التالي

<script>
//<![CDATA[
maestro_makeSticky("th3maestro");
function maestro_makeSticky(elem) {
    var maestro_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    maestro_sticky.parentNode.insertBefore(scrollee, maestro_sticky);
    var width = maestro_sticky.offsetWidth;
    var iniClass = maestro_sticky.className + ' maestro_sticky';
    window.addEventListener('scroll', maestro_sticking, false);
    function maestro_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            maestro_sticky.className = iniClass + ' maestro_sticking';
            maestro_sticky.style.width = width + "px";
        } else {
            maestro_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.maestro_sticking {position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;}
.widget.maestro_sticky {width: 330px !important;}
</style>

ثم ابحث عن اسم الإضافة التي تريدها ان تكون لاصقه وانسخ المعرف الخاص بها واستبدله بـ th3maestro
مثال

اضافة حديث صحيح

كما نرى اضافة حديث صحيح ظهر ان معرفها هو HTML1

الان استبدل كلمة
th3maestro فى الكود السابق بمعرف الاضافه كما فى المثال والذى هو HTML1

يمكنك ايضا تغيير عرض الاضافه بالبحث عن هذا الكود وتغييره لما يناسبك
width: 330px

1 التسميات: تست

شرح عمل الاضافه اللاصقه لمدونات بلوجر

معاينه الاضافه اللاصقه من هنا

لو لاحظت في مثال المعاينة إضافة حديث صحيح تظل ملتصقة مع تمرير الشاشة هذا هو المقصود

أولا ما الهدف من هذه الخاصية

ثانياً كيفية التركيب

</body>

وأضف فوقه الكود التالي

<script>
//<![CDATA[
maestro_makeSticky("th3maestro");
function maestro_makeSticky(elem) {
    var maestro_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    maestro_sticky.parentNode.insertBefore(scrollee, maestro_sticky);
    var width = maestro_sticky.offsetWidth;
    var iniClass = maestro_sticky.className + ' maestro_sticky';
    window.addEventListener('scroll', maestro_sticking, false);
    function maestro_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            maestro_sticky.className = iniClass + ' maestro_sticking';
            maestro_sticky.style.width = width + "px";
        } else {
            maestro_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.maestro_sticking {position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;}
.widget.maestro_sticky {width: 330px !important;}
</style>

ثم ابحث عن اسم الإضافة التي تريدها ان تكون لاصقه وانسخ المعرف الخاص بها واستبدله بـ th3maestro
مثال

اضافة حديث صحيح

كما نرى اضافة حديث صحيح ظهر ان معرفها هو HTML1

الان استبدل كلمة
th3maestro فى الكود السابق بمعرف الاضافه كما فى المثال والذى هو HTML1

يمكنك ايضا تغيير عرض الاضافه بالبحث عن هذا الكود وتغييره لما يناسبك
width: 330px

1 التسميات: تست

نموذج اتصل بنا المطور لمدونات البلوجر

اولا المقارنة

ثانيا طريقة التركيب

ملحوظة في حالة أن الآداة تحمل رقم آخر غير الرقم واحد أي مثلاً ContactForm2 قم بتغييره الى واحد هكذا ContactForm1

واخيرا

قائمة بالوان احترافيه CSS3 لمدونات بلوجر

طريقة التركيب

شرح عمل الاضافه اللاصقه لمدونات بلوجر

معاينه الاضافه اللاصقه من هنا

أولا ما الهدف من هذه الخاصية

ثانياً كيفية التركيب

شرح عمل الاضافه اللاصقه لمدونات بلوجر

معاينه الاضافه اللاصقه من هنا

أولا ما الهدف من هذه الخاصية

ثانياً كيفية التركيب

545