اضافة مربع البحث لمدونات بلوجر 6 انماط مختلفة لمربع البحث

اضافة مربع البحث لمدونات بلوجر
6 انماط مختلفة لمربع البحث

1- النمط الاول :

اختر اضافة اداة HTML وضع الكود بداخلها

<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yuZ8VGPvAAOQwnGc4JdhxcbokvCJ1Eol4zIkM5bxzpEFbmIZ67ytSAItNe7dM9GUxoOi4bqkDWaz8u9KPIWTvriweG5I5pBIUjTNRXRSbS0HibTCxA3WgiU1z88-305B2MpbiVPK7kwd/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>

2- النمط الثانى :

<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yuZ8VGPvAAOQwnGc4JdhxcbokvCJ1Eol4zIkM5bxzpEFbmIZ67ytSAItNe7dM9GUxoOi4bqkDWaz8u9KPIWTvriweG5I5pBIUjTNRXRSbS0HibTCxA3WgiU1z88-305B2MpbiVPK7kwd/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYdAzyWfM6o1yOQlIP5XHTSX_mKDF1tbskzAmphvNkMjODxMX7kzr_RXOkedMa3cNgdXmkMVHJ8ImsV6zp6DSrHJUlXiymjPqN1HnX84hXO280-fgpq58Lin4hfkU1fleQx7IV5Ifkhdc/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

3- النمط الثالث :

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPH58Ol689khEn9U5YSJOvSIt5JaOUExxsQqz48Y9CnDb7NRwr48Um075WLNRyvugOtVb2Bjn2EvMgzO8yiBmrAYRjy8lPgTxO_w8jYdk5FP9MPeOb5UhnxdOuNQP9Qjm8fFehOSmJVKr/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ml57j3AI5faGpxvGV7jZMNExzIrlg_MgQ5M8XuV-6vkY9NYEgpJVJsn4QflWzeiTv_e85TheA7R5XM6AEXPBAZ8-YPJF0bkrHMHkKu1ub8Eddwld0Ia2onyjCOR4oBsDzRZgOx1pgHKF/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnhjEqhfp6AmmaY3gV3V9hPaNo4A1_AHYes84xr3ND-NxRjc1AyvM7k8i0QHCpA-jMMJjKWy7-gFB299klp7DYCrrjQ89QUuN6feCj-JfX0kXKIQx2ApjeqyqoMpXphVXSF6m_3KZOty4/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnhjEqhfp6AmmaY3gV3V9hPaNo4A1_AHYes84xr3ND-NxRjc1AyvM7k8i0QHCpA-jMMJjKWy7-gFB299klp7DYCrrjQ89QUuN6feCj-JfX0kXKIQx2ApjeqyqoMpXphVXSF6m_3KZOty4/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

4- النمط الرابع :

<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoV8SCDB5nMW1gl2_jtWbYwZ0RSBHV4yURtRLH3fVALMiMPD6t908Oiw7QyYAlbBCJMIvXjXp0ZmS2wroPquN1o0w_zk9zPV-pjgdvrjKmv8Q7_XAXky7fK5bVNv-_ykK7n6Ln_U5G5cg7/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixamloRgmne1i7jaSpM7HK1jmRrBMmNx_6EIBxfdyHQHT66pDdQdrH718-vR8wlfQdD8e2C40U0qvoPJ6pDwAwsNUc2hM2ci_2YBADHeHIc8CyYqNe5ehI3NLS6-le9o3sCozczH6NYlEv/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ2ISSsH0ZQU3XzlFBDOyJzdMAAmOAAe2U5GakSJkuhOoPXeSFTMWv1Fq__YRGi5pnHtErMXZ-A-cxpB8Hul0xgbSywbcSzcmTMBuU6Pt2TL2haVbg_bLeuufil_A9dGthMstUoegATIZ/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

5- النمط الخامس :

<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoDYK2d9B_XFrZC8UP2j3gp4JFw8CSCfIwsGSfPu0CbV1I5ueszCEgGvdTj6ZCoozep7j5LLP8c5GviNZqBi-ViKEtH7WEd4-Xpk2fJT-_2k2xt2zud5pgnfI6j3KS_YqfANFjRkP64xH/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh47QUPutGpajmAxPBkzHlticAjreaX38qOyJiq7VLgpX0m49UxGsdYByeba52aXamVSZhK2rAhT10oq-BaALk5Mn6DIWrAS3CZVYUqbUFQX-3nlyy4ovL9QQQy-HxYfU2ljme01_n_Mgq/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmVTSQCI6vEgUoP7snr-Ut_OJql8XgaqDDK0FH1VuF0-qWEGZVaFduRUX8FzmoeL0K0XETvnG8WZ8lP6fUSxAEO9OGZtnnOLSXMX1NJDk7X9UEUIjN123eisJGcJKoidnA1777mauvh55/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

أدخل عنوان بريدك الإلكتروني للاشتراك في هذه المدونة وتلقي إشعارات بالمشاركات الجديدة عبر البريد الإلكتروني: