مربع بحث باللون الاخضر خاص بمدونة بلوجر بتقنية ال css

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

فقط قم باتباع الخطوات التاليه ---->>>>

* سجل الدخول الي لوحة تحكم مدونتك.

* اذهب الي تصميم ومن ثم الي تحرير HTML.

* قم بالضغط على علامة توسيع قوالب واجهة المستخدم.

* ابحث عن هذا الكود ]]</b:skin> بواسطة استخدام هاذين المفتاحينCTRL+F.

* انسخ الكود الموجود بالاسفل وضعه مباشرة قبل الكود التالي ]]</b:skin>

 #search input,#searchform input{}
#search label,#searchform label{margin:5px 0 5px 0;padding:4px 0 4px 0;font:bold 13px Verdana;text-transform:uppercase;color:#023263;display:block}
#s{width:220px;padding:6px;}
#searchsubmit{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_jhyphenhyphenWlqiD9-5S_icNumbupopCt0OaA6SSxYE-UQePoNdY3-4qQxaTLsMveeSLwFwOzRD9SShpTU2vXRiTuL98-be7saMRbOVRXQLJo4ydfcvye4_bV7GvAIfu-G7202iEIp27DBneio2n/s1600/search_button_green.png") no-repeat scroll 0 0 transparent;height:32px;
border:0 none;cursor:pointer;width:32px;margin-left:5px;
margin-top:0px;}
#topsearch{background:#009629;padding:5px;overflow:hidden;margin:6px 0px }
#topsearch input{}
#topsearch label{display:none}
#topsearch #s{width:226px;padding:4px}

* قم الان بحفظ قالب مدونتك.

* قم بالذهاب الى تصميم.

* تذكر انك الان في --->>> عناصر تصميم الصفحه.

* قم بانشاء اداه جديده.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

*انسخ الكود الموجود بالاسفل وضعه فيها وقم بالحفظ.

<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>
</div> 

قم بالحفظ ثم ضع الاداه في العامود الجانبي.
انتهى الدرس اي استفسار يرجا ترك تعليق بالاسفل.

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : مربع بحث باللون الاخضر خاص بمدونة بلوجر بتقنية ال css | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات css