سلام عليكم .. في عالم المواقع والمنتديات لا بد ان تجد صندوق البحث مركب في أغلبية المواقع ، كما أن التركيب يتم بشكل احترافي من جهة التصميم و البرمجة ، لا شك أنك تريد الحصول على صندوق مميز تبهر به زوارك ، صندون يناسب موقعك بلوجر من حيث الألوان وخفة التحميل اذن تفضل واختر ثم ركب .
1 - اختيار صندق البحث : حسب تصميم css hg الذي يعجبك أو يناسب مدونتك .
- الصندوق الأول : صدوق بسيط جدا سهل التحميل .
<style>#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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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: 0px;padding: 9px 0px;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>
- الصندوق الثاني : بلون أسود و أبيض بسيط البرمجة كذلك .

<style>
#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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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 0px 0px 5px;-moz-border-radius: 5px 0px 0px 5px;border-radius: 5px 0px 0px 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(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left: -40px;border-width: 0px;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>
- الصندوق الثالث : بتقنية الأجاكس لون أبيض .
<style>
#searchbox {background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/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 0px 0px 20px;padding: 5px 0px 5px 0px;border-width: 0px;font-family: "Arial Narrow", Arial, sans-serif;font-size: 12px;color: #828282;width: 70%;display: inline-table;vertical-align: top;}#button-submit {background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;border-width: 0px;cursor: pointer;margin-left: 10px;margin-top: 4px;width: 21px;height: 22px;}#button-submit:hover {background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;}#button-submit:active {background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/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>
- الصدوق الرابع : يناسب مدونات ذو تصميم باللون الأسود .
<style>#searchbox {background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/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: 0px 0px 0px 12px;padding: 5px 0px 5px 0px;border-width: 0px;font-family: "Arial Narrow", Arial, sans-serif;font-size: 12px;font-style: italic;width: 77%;color: #828282;display: inline-table;vertical-align: top;}#button-submit {background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;border-width: 0px;cursor: pointer;width: 30px;height: 25px;}#button-submit:hover {background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/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>
- الصندوق الخامس : تصميم أبيض تقنية أجاكس .
<style>
#searchbox {background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;width: 250px;height: 65px;}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;padding: 5px 0px 5px 20px;margin: 10px 15px 0px 0px;border-width: 0px;font-family: "Brush Script MT", cursive;font-size: 12px;color: #595959;width: 65%;font-weight: bold;display: inline-table;vertical-align: top;}#button-submit {background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;border-width: 0px;cursor: pointer;margin-top: 10px;width: 19px;height: 25px;}#button-submit:hover {background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;}#button-submit:active {background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/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 class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>
- الصندوق السادس : بلون أسود بسيط يناسب كذلك المدونات ذو تصميم أسود .
<style>#searchbox {width: 280px;background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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: 0px;font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;font-size: 14px;color: #f2f2f2 !important;padding: 10px 35px 10px 20px;width: 220px;}#searchbox input[type="text"]:focus {color: #fff;}#button-submit{background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;margin-left: -40px;border-width: 0px;width: 40px;height: 50px;}#button-submit:hover {background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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>
2- تركيب كود صندوق البحث على البلوجر :
- اذهب لــ www.blogger.com
- سجل الدخول عن طريق حسابك
- اضغط على المدونة التي تريد التعديل عليها
- أخيرا بعد أن تقوم بالمراحل كما في الصورة أدناه ، الصق أحد الأكواد الموجودة بالأعلى في widget التي قمت باضافتها .
تعليقات
إرسال تعليق