اضافات بلوجر

إضافة مربع البحث لبلوجر ب6 أشكال مختلفة إحترافية و رائعة

صورة عياش محمد عياش محمد أرسل بريدا إلكترونيا 27 أغسطس، 2017
0 674 3 دقائق

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة

إضافة مربع البحث لمدونتك تعتبر من الإضافات المهمة جداً حيث تسهل كثيراً على الزائر فى عملية البحث عن شئ ما لذلك في هذة التدوينة خصصنا أكثر من شكل مختلف لكى يناسب ويتناسب مع الجميع 6 اشكال مختلفة إختر ما يناسبك والآن دعنا نعرض عليك الأشكال وطريقة التركيب.
كالعادة تقوم بالدخول إلى الصفحة الرئيسية لبلوجر (لوحة التحكم)
إختر التخطيط ثم إضافة اداة جافاسكريبت HTML/JavaScript وتضع بها الكود الخاص بالشكل الذى تريدة . مع بعض التعديلات .

الشكل الأول

الكود – Code

<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(https://1.bp.blogspot.com/-XQiH-k0K_WQ/WaKHxETv3wI/AAAAAAAAA_I/MC180QFzLQEmTcNNMpDPkzoBjEWMq9yqgCLcBGAs/s1600/search.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: #4d76f9;
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="كلمة البحث..." />
<input id="button-submit" type="submit" value="البحث" />
</form>

الشكل الثاني

الكود – Code

<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(https://1.bp.blogspot.com/-XQiH-k0K_WQ/WaKHxETv3wI/AAAAAAAAA_I/MC180QFzLQEmTcNNMpDPkzoBjEWMq9yqgCLcBGAs/s1600/search.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #f9764d;
    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="ادخل الكلمة المراد البحث عنها..." />
<input id="button-submit" type="submit" value=" "/>
</form>

الشكل الثالث

الكود – Code

<style>
#searchbox {
    background: url(https://3.bp.blogspot.com/-nK_wGB9ulBY/WaKOxtkj45I/AAAAAAAAA_s/JTtzKFy_OQcEs1kqziHok0MMR6qf2I4eQCLcBGAs/s1600/searchbar%2B%25281%2529.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(https://4.bp.blogspot.com/-teSk7liKc9w/WaKPNxtTksI/AAAAAAAAA_4/kX0wCWWfTJMoAGsmye3T7Sd1NGQ0pZq0ACLcBGAs/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(https://3.bp.blogspot.com/-f3jmfD3dDGY/WaKPKNDqtoI/AAAAAAAAA_0/0He95chF9BokDnmHpavSWQhK454mztUEwCLcBGAs/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="  بحث..." />
    <input id="button-submit" type="submit" value="" />
</form>

الشكل الرابع

الكود – Code

<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(https://4.bp.blogspot.com/-nFL3QBDyFfs/WaKReIKulNI/AAAAAAAABAQ/6fpCd5yR3xAz30yq8g2EdAFzmWTtWI0XQCLcBGAs/s1600/search-button-hover.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}
#button-submit:hover {
    background: url(https://4.bp.blogspot.com/-nFL3QBDyFfs/WaKReIKulNI/AAAAAAAABAQ/6fpCd5yR3xAz30yq8g2EdAFzmWTtWI0XQCLcBGAs/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="    البحث..." />
<input id="button-submit" type="submit" value="" />
</form>

الشكل الخامس

الكود – Code

<div id='search-wrapper'><style type='text/css'> .form-wrapper { width: 290px; padding: 5px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; } .form-wrapper #search { width: 210px; height: 12px; padding: 10px 5px; float: right; font: bold 18px 'Arial', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus
 { outline: 0; border-color: #aaa; 
}
 .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; }
 .form-wrapper #search:-ms-input-placeholder 
{ color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px;}
 .form-wrapper #submit { float: left; border: 1px solid #00748f; height: 32px; width: 60px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
 .form-wrapper #submit:hover, .form-wrapper #submit:focus {
 background-color: #91bc1e; } .form-wrapper #submit:active { outline: 0; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <div class='rss'> <form action='/search' class='form-wrapper' method='get'> <input id='search' name='q' placeholder='' type='text'/> <input id='submit' type='submit' value='بحث'/> </form></div></div>

الشكل السادس و الاخير

الكود – Code

<style type="text/css"> #w2b-searchbox{
background:url(https://3.bp.blogspot.com/-TpG_HgAl_SE/WaKVRJXe5GI/AAAAAAAABAs/t8gmx9fip78XQ9l1-szq6imTYyz3uKVnACLcBGAs/s1600/way2blogging_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;
}
 form#w2b-searchform{
display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 40px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;
}
 form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;
}
 </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>
الوسوم
صورة عياش محمد عياش محمد أرسل بريدا إلكترونيا 27 أغسطس، 2017
0 674 3 دقائق
صورة عياش محمد

عياش محمد

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى