اضافة خاصية اتصل بنا منزلقة


السلام عليكم ورحمة الله تعالى وبركاته 
مع جديد الإضافات الخاصة ببلوجر نقدم لكم الإضافة الخاصة بمدونة تميز ويب وهي نموذج الإتصال بشكل مبهر وإحترافي ، تعتبر خاصية الإتصال بالمواقع أو المدونات حتى في الشبكات الإجتماعية وأيضا في الحياة الإجتماعية ، من أهمها وما يميز الإضافة أنها لا تأخذ مساحة ولا تحتاج صفحة لإضافتها ، فهي مثبتة على المدونة كاملة في النزول أو الصعود وهذا ايضا سيسهل على الزائر التواصل بضغطة زر لكي تظهر وبضغطة زر لكي يرسل الرسالة 😎 جميلة أليست كذلك ولهذا سأترككم لتركبوها لمدونتكم.
شرح  طريقة التركيب
1. داخل القالب ابحث عن  ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 right:15px;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:bold;
 display:inline-block;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.fa-envelope-o:before {
content: "\f003";
margin-left: 5px;
font-weight: bold;
background: rgba(68, 68, 68, 0.27);
padding: 5px;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:400px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:right;margin-right: 15px;}
.floating-ai-body .ContactForm {margin:0;display:block!important;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:droid arabic kufi;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:droid arabic kufi;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move"><i class="fa fa-envelope-o"></i>إتصل بنا</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>
3 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة  نموذج الإتصال
داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contact{position: fixed;bottom: 0;right: 1%;background-color: #434E52;color: #555;width:250px;z-index: 999999;}
#contact h2.title{font-weight: 400;color: #FFF;padding: 8px 15px;font-size: 16px;cursor: pointer;text-align: center;background-color: #2B2B2B;border-bottom: none;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: &quot;\f1d8&quot;; font-family: FontAwesome; float: left; background-color: #434E52; padding: 15px; margin-top: -8px; margin-left: -15px; }
#contact .contact-form-widget{padding: 0px; display: none; padding-right: 10px; width: 240px;}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#DDD;color:#111;border:0;padding:10px 5px;}
.contact-form-widget {margin-right:0;max-width:250px;padding:0;padding-top:0;
width:100%;height:auto;}
.contact-form-email, .contact-form-email-message, .contact-form-name {max-width:100%;
width:100%;}#contact *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.contact-form-email, .contact-form-name {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email-message {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:&#39;Arial&#39;,sans-serif;font-size:13px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email:hover, .contact-form-email:focus, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email-message:hover, .contact-form-email-message:focus {background:#fff;border:none;border-top:none;outline:none;box-shadow:none;transition:.3s linear;}
form {color:#dce1e2;}
.contact-form-button-submit {width:100%;height:30px;background-color:#55849E;background-image:none;border:none;color:#fff;transition:.3s linear;  margin-top: 5px;  font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;}
.contact-form-button-submit:hover,.contact-form-button-submit:focus {background-color:#4DB2EC;background-image:none;;border:none;outline:none;color:#fff;cursor:pointer;transition:.3s linear;}
.contact-form-error-message-with-border {background:#FC4F3F;border:none;
bottom:0;box-shadow:none;color:#fff;font-size:11px;
font-weight:700;line-height:19px;margin-right:0;opacity:1;position:static;
text-align:center;transition:all 0.1s linear;}
.contact-form-success-message {background:#e1dae7;border:none;bottom:0;
box-shadow:none;color:#6a5b7a;font-size:11px;line-height:19px;margin-right:0;


opacity:1;position:static;text-align:center;transition:all 0.1s linear;}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
;$( &quot;#contact h2.title&quot; ).click(function() {$( &quot;#contact .contact-form-widget&quot; ).toggle(&quot;fast&quot;);});
</script>
3. ضع الكود التالي في مكان فوق الفوتر أو </body>
<b:section class='contact section' id='contact' maxwidgets='1' >
  <b:widget id='ContactForm1' locked='false' title='اتصل بنا' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
________________________________________________________________________

هناك تعليقان (2):

إضافة شارك المقال الجزء الأول


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

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




1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي فوقه
 .share_button { 
width: 300px;
height: 50px; 
margin: 10px auto; 
}
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
}
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%;
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
}
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
}
.share_button ul:first-child li:first-child{
text-align: right; 
}
.share_button ul:last-child li:first-child{
text-align: left; 
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
4. ابحث عن  <div class='post-footer'> 
5. ضع الكود الأتي فوقه
* ملاحظة قد تجد الكود متكرر الأخير هو المقصود .. إذا كنت تتوفر على إضافة المشاركات الإجتماعية إستبدلها بالكود الأتي
<div class='share-box'>
<div class='share_button'>
<ul>
<li><h1>
شارك المقال 
</h1></li>
<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1LgnZ6FVl8XfZ4qvvu-WgbCa_lZneQuIQ0kxkbsxUKTCvAh-qxjQHVQVlyVf-oCpx0P5Hncde-AdFeEhIgQWxuYzjJtjfwqlcgfDL916edcpQ5U0Vd1yaVXaacfazUU7XEcY4Ir_gX3hL/s1600/Facebook.png"/></a></h2>
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkvdxBQcUefyfRJ6YpsEaWwWl5vaEig1ZHhJQ3ZofNzhbl77ZiMKXRmD2ngMK5U96BxPhANtoGkFL3-JY5ky9PeWeKKqJshMQy44K-MsvUOdHlTq5tO_9F5vxn_ZJhF1uVmQPy3WgGwGwq/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1></h1></li>
<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCk7MfSkYlJlpYqS4uQrzu9yETCOIeE3ZBiyYeP3DYDN8GizidEZ6z1Ky3NEp6Rm9lONnXBUwDT7ZZbJOWr2oRUwXeVpCK8gedNVGCHaGErglv1C2OOMwBjSOgC9_ORNJZMGeaB7u7XEcy/s1600/Google-plus.png"/></a></h2>
<h2>
<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJRNHFi-WjiHLih5U3Ve-Ked0SsOlRbvezYLxXi_NlpKCaNQ9Au0YqJYGYmD7UpnNDKyjY3vwzB2M9IC4lkJvAjmwRjBDb0m83QjZTEcGW81e_POoxYX5jd1OLIWJ3yqbguUkYjM9oHHca/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
* المحدد باللون الأصفر خاص بصور الشبكات الإجتماعية

ليست هناك تعليقات:

تغيير شكل المشاركات الشائعة الجزء الأول



    نعود من جديد مع الشكل الثالث من ستايلات المشاركات الشائعة الامتناهية والتي تتطور مع الوقت، بخصوص هذه الإضافة فما يميزها عن سابقاتها هو شكلها طبعا وتأثيراتها وتناسقها الجميل ستغير نظرة قالبك بأكمله بمجرد تركيبها وبالحديث عن التركيب فأنصح كل من لديه ستايل آخر فليحذفه لكي لا تتداخل الأكواد في ما بينها 
    شرح  طريقة التركيب
    1. توجه إلى التخطيط ثم حرر أداة المشاركات الشائعة واختر من عرض ما يصل إلى "6"
    2. داخل القالب ابحث عن  ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style>   </style> فوق </head>
    .PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:160%;text-shadow:0 0 5px rgba(0,0,0,0);font-family: &#39;Adobe Arabic&#39;,&#39;serif&#39;;}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:5px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
    3. إبحث عن </body> وضع الكود التالي فوقه
    <script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>
    ليست هناك تعليقات:

    خط اللعبة | Watch Dogs



    بعد صدور اللعبة المنتظرة Watch Dogs بشهرين تقريبا ، تم صدور الأن خط اللعبة بنفس الشكل تماما مميز جدا من مصمم فرنسي هو الذي قام بمحاكاته ، يتوفر الخط على طبقة كبيرة لظهوره بشكل أفضل ولهذا سنترككم لتجربته 



    تحميل من عرب ويب 
    ليست هناك تعليقات:

    خط مغربي الراقي


    المغربي ، خط عربي قديم ، من وزن واحد .
    صممه وأنتجه الأستاذ القدير جادلي زين العابدين من الجزائر وأنتج عام 2009 ، يهديه لكم العزيز جادلي هدية في عيد الأضحى المبارك 5 / 11 / 2011 م في وقفة عرفة التاسع من ذي الحجة لعام 1432 هـ ، الخط مضبوط التشكيل ، هيئة فنية بروح مغربية تهيم بك في عبق من التراث والعراقة ، تنطلق بك على طول الساحل المغربي وتنقلك في عمق الصحراء ورمالها الذهبية لتقول لكم كل عام وأنتم بألف خير



    ليست هناك تعليقات:

    قالب مدونة تميز ويب النسخة الأولى



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


      المميزات / الإضافات

    •  متجاوب
    •  سريع التحميل
    •  صفحة الخطأ
    •  سلايدر ثانوي
    •  سلايدر تلقائي
    •  محرك بحث ajax
    •  مشاركات بشكليين
    •  أخر الأخبار + الأيقونات
    •  مساحات إعلانية
    •  4 بوستات لعرض كل قسم
    •  تعليقات فيسبوك وديسكس وبلوجر
    •  والمزيد...

    الواجهة كاملة


    الإضافات تضاف من التخطيط كأداة Html/JavaScript   




    الإضافة رقم 1 
    <div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>
    الإضافة رقم 2
    * غير أدوات بالتسمية الخاصة بك
    <div id="webdespost"></div>
<script type='text/javascript'>
jQuery("#webdespost").RecentPostbyTag({
postType:"s",
MaxPost:8,
ImageSize:"s200-p",
tagName:"ادوات"
});
</script>
    الإضافة رقم 3
    * غير ثيمات بالتسمية الخاصة بك 
    <div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
postType:"v",
MaxPost:4,
tagName:"ثيمات"
});
</script>
    الإضافة رقم 4
                                                             * غير أمثلة بالتسمية الخاصة بك 
    <div id="combinepost1"></div>
<script type='text/javascript'>
jQuery("#combinepost1").RecentPostbyTag({
postType:"c",
MaxPost:8,
tagName:"امثلة"
});
</script>
    الإضافة رقم 5
                                                            * غير أدوات بالتسمية الخاصة بك 
    <div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
postType:"h",
MaxPost:4,
tagName:"ادوات"
});
</script>
    الإضافة رقم 6
    <div id="rcentcomnets"></div>
<script type='text/javascript'>
jQuery("#rcentcomnets").RecentComments();
</script>
    الإضافة رقم 7
                                                              * غير أمثلة بالتسمية الخاصة بك 

    <div id="gallerypost1"></div>
<script type='text/javascript'>
jQuery("#gallerypost1").RecentPostbyTag({
postType:"g",
MaxPost:7,
tagName:"امثلة"
});
    </script>

    

    معاينة تحميل
    هناك 6 تعليقات:
    الاشتراك في: الرسائل (Atom)

    خبراتي في التصميم

    مقولة الأسبوع

    تابعنا أول بأول