اضافة مربع البحث الي مدونتك بشكل انيق 2016 /2017

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

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

اليك الاضافة #الاولي

طبعا الاضافة تعمل بتقنية CSS والمميز في الاضافة عند مرور الموس عليها تغير لونها كما واضح في الصورة

كود الاضافة

وايضا صورة من الاضافة الثانية

وهذا كود الاضافة

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZbjgXPDIm2N6GcsM7SADTc6hg-k7iixEQJKYjvREDhXF6EFvqt5IN5JsDZZqI9WNcvSlw_Lo2WF2ci4eVloip7YqnHafoPGPaNq8bgfUVw_x0yAe67bI2KU2PP3BprnCgNvf_UoMK4tS/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoflwsxaFV4GondLZj2i_iE5TqB_c_WrIKoF10_phZFntfcBSLkcOT5fiMmJSpaYMN7YhpmZrf-HUC_36Cda46GL1B20jF7hSjlIU1S6IIF9aTWKuxvol7GSBLxTWCjgJyCcfb6XK8HHaE/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

واضافة اخرة لتناسب جميع المدونات

وهذا كود الاضافة

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBjH4amxuM8MlrnfeRCKvvo9hSecVI2uAk2MPSMtVNYZA5JTmzMK46xaEXqO-iT4cEGfGNUrrTzXnPqkOXR8z8j96gW5PmGB0akmKTXGK7VenOtaHbyYAlzxVM4RJ56BH39YfYn47Ebdz/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-q5KcN2hRQcUL-Mfj6TrsOvJHWH0PkqH541YuAGRBqJKrG-c9JicOon1P2LMp6E_kzKxXa1H1Se2GYm-SalE28furrgIpBGLqlgunQOfiZNqqklX0Cos16EZwDzPU-FV3VmwqHPJvUCg/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-q5KcN2hRQcUL-Mfj6TrsOvJHWH0PkqH541YuAGRBqJKrG-c9JicOon1P2LMp6E_kzKxXa1H1Se2GYm-SalE28furrgIpBGLqlgunQOfiZNqqklX0Cos16EZwDzPU-FV3VmwqHPJvUCg/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

واضافة مربع اليحث اخرة ايضا

وهذا كود الاضافة

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/AVvXsEidGFyDddvq6iI06IfiISHf14YNX4p-ZzChGmNufHx7jMJwKaOK7lwOukPisHDPI0qw6HQVjjXZPNRiN0PBve5Fh-rz5k4iOVQXWH9ZxzXVXdLPWX5NDdpfaUfuFZi2qw-kfm_OZk9UGXpt/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>

ولتركيب الاضافة اتبع

الخطوة 1: اذهب إلى لوحة تحكم مدونتك واضغط علي التخطيط
     الخطوة 2: انقر على "إضافة أداة"
     الخطوة 3: من النافذة المنبثقة، اختر JavaScript
     الخطوة 4: نسخ والصق الكود في المربع

ومبروك عليك الاضافة

اذا استفدت من الموضوع اترك تعليق وشجعنا علي الاستمرار