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

بسم الله الرحمان الرحيم

اما بعد متتبعي ومتتبعات مدونة حاسوبي Astuce

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

لنيدأ الشرح باذن الله

معاينة

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

ما عليك سوى اضافة اداة HTML/JavaScript و عدم اعطائها اي اسم ان اردت والصق فيها الكود التالي

<style type="text/css">
.button_hassoubi {
border:2px solid #000;
-webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  background: #000000;
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -ms-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(to bottom, #000000, #000000);
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button_hassoubi:hover {
  background: #3d3c3d;
  background-image: -webkit-linear-gradient(top, #3d3c3d, #444445);
  background-image: -moz-linear-gradient(top, #3d3c3d, #444445);
  background-image: -ms-linear-gradient(top, #3d3c3d, #444445);
  background-image: -o-linear-gradient(top, #3d3c3d, #444445);
  background-image: linear-gradient(to bottom, #3d3c3d, #444445);
  text-decoration: none;
}


    .form-wrapper {
    width: 270px;
    padding: 8px;
    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: 180px;
    height: 20px;
    padding: 10px 5px;
    float: right;
    font: bold 14px 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:active {
    outline: 0;
    }
    .form-wrapper #submit::-moz-focus-inner {
    border: 0;
    }
    </style>
    <div class="rss">
<form class="form-wrapper" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="اكتب ما تريد ان تبحث عنه" />
        <input id="submit" type="submit" class="button_hassoubi" value="بحث" />
    </form>
</div>
<div class='clear'>
</div>
<a href="http://astuce-hassoubi.blogspot.com/" style="display:none" alt="حاسوبي Astuce">حاسوبي Astuce</a>

تحديد الكل

ثم احفظ التغييرات

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

• غرّد
• شارك
• شارك
• شارك
• شارك