اضافة صندوق البحث منبثق لمدونات بلوجر

اضافة صندوق البحث منبثق لمدونات بلوجر (إظهار\إخفاء) - فى هذا الموضوع يزال حول تصميم قوالب بلوجر، وهو حول كيفية اضافة اداة صندوق البحث منبثق مع تأثيرات.

هناك العديد من الطلبات بشكل عام حول اضافة هذه الاداة، تم تطبيق واستخدام هذه الاضافة فى قالب موسثيم و موسثيم مينى.

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

بالاضافة الى ذلك، الاداة متجاوبة مع جميع الاجهزة لسهولة تنقل زوارك على مختلف الاجهزة التي يستخدمونها.

لمشاهدة وتجربة الاضافة، الرجاء التوجه الى زر المعاينة بالشريط الجانبي.

اضافة صندوق البحث منبثق لمدونات بلوجر

1. اذهب الى لوحة التحكم > القالب > تحرير HTML

2. ابحث عن ]]></b:skin> او </style>، وضع الكود التالي فوقه

/* CSS Fixed Search Button by rotkx.blogspot.com */
#hide{display:none}
#search_icon{background:#212121;width:99px;height:58px;display:inline-block;float:left;position:absolute;left:0;top:0;bottom:0;z-index:9999}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out}
@keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#search{border-bottom:3px solid rgba(63,63,63,.8)}
#searchform{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.search-button,.search-button:hover{clear:both;background:none;border:none;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;left:10px;font-weight:700}
.search-button:active{border:none;outline:none;background:none;}
#formsearch{background-color:transparent;width:100%;height:57px;line-height:57px;font-family:inherit;padding:0 20px 0 60px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:25px;color:#fff!important}
#formsearch{-webkit-box-sizing:border-box}
#formsearch:focus{border:none;outline:0;color:#fff;}
#searchform:focus{border:none;outline:0;color:#3f3f3f}
#boxsearch{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;right:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}
#hide span.smallbutton{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;border-radius:99em;border:3px solid #fff;float:left;overflow:hidden;display:block}
#hide span.smallbutton:hover{color:#eee;border-color:#eee}
#boxsearch p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.search-icon span{font-weight:normal;width:45px; height:60px;line-height:60px;position:absolute;top:0;left:20px;cursor:pointer;font-size:22px;color:#fff}
@media screen and (max-width:737px){
#boxsearch{padding:25px 0 0;}
#search-wrapper{width:100%;margin:0 auto;padding:0 20px}
#search-wrap{clear:both;width:90%;}
#boxsearch p{font-size:14px;margin:8% auto 50px;}}
@media screen and (max-width:480px){
.search-button,.search-button:hover{width:auto;text-align:left;font-size:20px;left:0;}
.search-button:active{border:none;outline:none;background:none;}
#formsearch{padding:0 0 0 20px;}}

3. ابحث عن </body> وضع الكود التالى فوقه

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div>
<div id='search-wrap'>
<p>ابدأ الكتابة ثم اضغط انتر للبحث</p>
<div id='search'>
<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='formsearch' name='q' placeholder='ابحث هنا....' required='required' type='text'/>
<button class='search-button' title='بحث' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
</div>
</div>
</div>
</div>

3. لعرض زر البحث ضع الكود التالى فى المكان المناسب، على سبيل المثال فى القائمة او رأس القائمة

<div class='search_icon' id='search_icon'>
<div class='search-icon'>
<div id='show'><span class='smallbutton' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></span></div>
</div>
</div>

4. احفظ القالب

يرجى التأكد من عمل الاداة عبر الضغط عرض المدونة ثم على ايقونة زر البحث

اذا لاحظت اختفاء ايقونة البحث، فمدونتك تحتاج الى ايقونات الخطوط الرائعة، يمكنك اضافتها عبر وضع الكود التالى فوق </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

انتهي شرح اضافة صندوق البحث منبثق لمدونات بلوجر (إظهار\إخفاء)، شكرا لكم على الزيارة.

معاينة مباشرة

معاينة صندوق البحث.