إضافة مربع البحث منبثق لمدونة بلوجر

إضافة مربع البحث منبثق لمدونة بلوجر

بسم الله الرحمن الرحيم

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


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

صورة الإضافة

كيفية إضافة مربع البحث المنبثق لمدونات بلوجر
1. أدخل لوحة تحكم المدونة --> القالب --> أنقر على تحرير HTML
2. بإستخدام مفتاح الإختصار ctrl+f أبحث عن الرمز ]]></b:skin> ثم ألصق الكود التالي فوقه مباشرةً 


.dialog-box button[type="submit"] {
    margin-top: 20px;
    padding: 0.8em 2em;
    background-color: #10b765;
    color: #fff;
    border: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.dialog-box input[type="text"] {
    padding: 0 20px;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888;
    height: 50px;
    line-height: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.dialog-box h2 {
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    padding: 32px 0 25px;
    text-transform: uppercase;
}
.dialog-box {
    max-width: 520px;
    min-width: 290px;
    background: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 5;
    margin: auto;
}
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(55, 58, 71, 0.9);
 }
.overlay .overlay-close {
    width: 30px;
    height: 29px;
    position: absolute;
    right: 0px;
    top: 0px;
    border: none;
    background: #10B765;
    float: left;
    color: #fff;
    outline: none;
    z-index: 100;
}
.overlay .dialog-inner{
 text-align: center;
 position: relative;
 top: 50%;
 height: 60%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-30%);
}

.overlay-mbl {
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
 transition: opacity 0.5s, visibility 0s 0.5s;
 z-index:100;
}
.overlay-mbl.open {
 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.5s;
 transition: opacity 0.5s;
}
.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover {
    background: #212121;
}

#trigger-overlay {
    cursor: pointer;
    float: left;
}
#trigger-overlay {
    background: #10b765;
    color: #fff;
    padding: 10px;
}
#trigger-overlay a {
    color: #fff;
 text-decoration:none;
}
#trigger-overlay:hover {
    background: #111;
}

3. بإستخدام نفس الطريقة السابقة ابحث عن الرمز <body> أو قد يأتي بهذا الشكل <body متبوعاً برموز اخرى بطبيعة الحال سوف تجده أسفل الرمز </head>  ثم اضف الكود التالي أسفل <body>

<div class='overlay overlay-mbl'>
<div class='dialog-inner'>
<div class='dialog-box'>
<h2>أدخل كلمة للبحث</h2>
<form action='/search' class='search-popup-inner' method='get'>
<input name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;أبحث في الموقع&apos;;}' onfocus='if (this.value == &apos;أبحث في الموقع&apos;) {this.value = &apos;&apos;;}' type='text' value='أبحث في الموقع'/>
<button type='submit'>بحث</button>
</form>
<div><button class='overlay-close' type='button'>X</button></div>
</div>

  4. الخطوة قبل الأخيرة ابحث عن الرمز </body> ثم اضف الكود التالي فوقه مباشرةً

<script type='text/javascript'>
//<![CDATA[
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function q(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?o(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function r(a){a||(a=b);var c=n(a);return s.shivCSS&&!g&&!c.hasCSS&&(c.hasCSS=!!l(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||q(a,c),a}var c="3.7.0",d=a.html5||{},e=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,f=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g,h="_html5shiv",i=0,j={},k;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

(function(window){'use strict';function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)");}var hasClass,addClass,removeClass;if('classList'in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c);};addClass=function(elem,c){elem.classList.add(c);};removeClass=function(elem,c){elem.classList.remove(c);};}else{hasClass=function(elem,c){return classReg(c).test(elem.className);};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+' '+c;}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c),' ');};}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c);}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==='function'&&define.amd){define(classie);}else{window.classie=classie;}})(window);(function(){var triggerBttn=document.getElementById('trigger-overlay'),overlay=document.querySelector('div.overlay'),closeBttn=overlay.querySelector('button.overlay-close');transEndEventNames={'WebkitTransition':'webkitTransitionEnd','MozTransition':'transitionend','OTransition':'oTransitionEnd','msTransition':'MSTransitionEnd','transition':'transitionend'},transEndEventName=transEndEventNames[Modernizr.prefixed('transition')],support={transitions:Modernizr.csstransitions};function toggleOverlay(){if(classie.has(overlay,'open')){classie.remove(overlay,'open');classie.add(overlay,'close');var onEndTransitionFn=function(ev){if(support.transitions){if(ev.propertyName!=='visibility')return;this.removeEventListener(transEndEventName,onEndTransitionFn);}classie.remove(overlay,'close');};if(support.transitions){overlay.addEventListener(transEndEventName,onEndTransitionFn);}else{onEndTransitionFn();}}else if(!classie.has(overlay,'close')){classie.add(overlay,'open');}}triggerBttn.addEventListener('click',toggleOverlay);closeBttn.addEventListener('click',toggleOverlay);})();

//]]>
    </script>

5. أنقر على حفظ القالب ثم أنتقل إلى التخطيط والآن يجب أختيار مكان زر البحث أختر المكان المناسب ثم أنقر على إضافة أداة أختر من بين الأدوات اداة HTML/JavaScript
وأخيراً أضف الكود التالي في الأداة ثم انقر على حفظ.
 
<div id="trigger-overlay" ><a><i class="fa fa-search"></i> بحث</a></div>
 
 
إذا واجهتك اية مشاكل لا تتردد في ترك تعليق :)

مدونة البرمجة والحماية

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