How to add expandable search box with or without hover effect. these search boxes are very beautiful and cool to use . These search boxes are made for wordpress site i,m sure you seen them on one of the wordpress blog but you can add them to blogger . It makes your blog more beautiful and creative it is user friendly and it does not have any effect on your blogs speed.
STEPS
- Goto your blogger account.
- Goto page elements and add a gadget.
- Select html/JavaScript and paste below code in it .
For Search Box With Hover Effect
<style>
#apple #search {
}
#apple #search input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Vo734mOtnC7Dms6QQorZxi3bNirOYjykUF66NxWa3MNfZRzwzA6NYG-bdUl6yjra6PoUTvKa_wpqNiRY0aV8_LJsY8QEzWG-LsDRHso4S1UexhitgfMHWG-0aMTq58Fgc4QakozfzRw/s1600/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-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;
}
#apple #search input[type="text"]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibcfK0mwiynFavey0SlYl8sqpYAmzHrwc-5BdUho0ZMfH9ernuIJ1rNr9MCRfHg9vX1thyphenhyphen0elP7loqi45fx7atLlPg5va-MuTEZ017Eq1NstK9eh9O_3HmDLdYZ112kuMFfd6qMeUBcIg/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
</style>
<div id="apple">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>
For Search box without hover effect (white)
<style>#white #search {
}
#white #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Vo734mOtnC7Dms6QQorZxi3bNirOYjykUF66NxWa3MNfZRzwzA6NYG-bdUl6yjra6PoUTvKa_wpqNiRY0aV8_LJsY8QEzWG-LsDRHso4S1UexhitgfMHWG-0aMTq58Fgc4QakozfzRw/s1600/search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -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; }
#white #search input[type="text"]:focus { width: 200px; }</style> <div id="white"><form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /></form></div>
For Search Box Without Hover Effect(Dark)
<style>#dark #search {
}
#dark #search input[type="text"] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibcfK0mwiynFavey0SlYl8sqpYAmzHrwc-5BdUho0ZMfH9ernuIJ1rNr9MCRfHg9vX1thyphenhyphen0elP7loqi45fx7atLlPg5va-MuTEZ017Eq1NstK9eh9O_3HmDLdYZ112kuMFfd6qMeUBcIg/s1600/search-dark.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #777; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -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; }
#dark #search input[type="text"]:focus { width: 200px; }</style> <div id="dark"><form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /></form></div>
Now Save It and its Done
Thank You
- روابط التحميل والمشاهدة، الروابط المباشرة للتحميل من هنا
---------------------------------------------------------------
شاهد هذا الفيديو القصير لطريقة التحميل البسيطة من هنا
كيف تحصل على مدونة جاهزة بآلاف المواضيع والمشاركات من هنا شاهد قناة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على اليوتيوب لمزيد من الشرح من هنا رابط مدونة منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات في أي وقت حــــتى لو تم حذفها من هنا شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا تعرف على ترتيب مواضيع منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات (حتى لا تختلط عليك الامور) من هنا
ملاحظة هامة: كل عمليات تنزيل، رفع، وتعديل المواضيع الجاهزة تتم بطريقة آلية، ونعتذر عن اي موضوع مخالف او مخل بالحياء مرفوع بالمدونات الجاهزة بآلاف المواضيع والمشاركات، ولكم ان تقوموا بحذف هذه المواضيع والمشاركات والطريقة بسيطة وسهلة. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــسلامـ.
إرسال تعليق