كثيرا ما يجذب زوار صحفة البحث جوجل شريط البحث الجديد ذو خاصية jquery حيث يتمتع بالعديد من التاثيرات
والاضافات المثيرة واللون الازرق الفاتح المميز
الان يمكنك اضافة هذا الشريط فى مدونتك لتضيف لمسة جميلة من جوجل فى مدونتك
* شريط بحث جوجل الجديد ..
* سيظهر الشريط الجديد فى مدونتك بهذا الشكل ..
ناتى لاضافة شريط بحث جوجل فى مدونتنا ..
1- قالب .
2- نختار HTML .
3- نختار توسيع قوالب .. .
4- نبحث عن وسوم
]]></b:skin>
نضع هذا الكود فوق الوسوم السابق
تاكد من نسخ كامل الكود
/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPtyNxND2eQT8SDXzxH7lwlvTvczypVU7Y6OrRJ3IFdGFYzBVbbhotFy02dZffQp3hzZVMkNm9_NYcSc43REwJYbjFLTpF3lNqVTw4MXP0OrutjSBqkl3L2_Oqs748EbQWPvO8xh74QXw/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPtyNxND2eQT8SDXzxH7lwlvTvczypVU7Y6OrRJ3IFdGFYzBVbbhotFy02dZffQp3hzZVMkNm9_NYcSc43REwJYbjFLTpF3lNqVTw4MXP0OrutjSBqkl3L2_Oqs748EbQWPvO8xh74QXw/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar - Info @ http://www.livegy,blogpsot.com*/
5- نبحث عن وسوم </head>
انسخ الكود التانى فوق الوسوم السابق
* اذا كان لديك خاصية jquery فى مدونتك احذف اول سطر
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>
نقوم بحفظ القالب
اصبح الان القالب مهيأ لشريط البحث الجديد
6- لاضافة الشريط فى المدونة .. نختار
7- نختار اضافة كود فى المكان الذى سيظهر فية الشريط الجديد
8- نقوم باضافة فية هذا الوسوم
<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>
نقوم بعمل حفظ
وبهذا يكون تم اضافة الشريط الجديد لمحرك البحث جوجل فى مدونتك .
No comments:
Post a Comment