How to add beautiful simple menu in blogger with a beautiful search box. This menu create a better impression on your reader and it make ease to search any thing in your blog.the menu look very simple and search box is looking very beautiful in it.
Like it, Menu + Search box
STEPS
1. Goto your blogger dashboard
2. Now got Template click on Edit html and Find ]]></b:skin>
3. Now paste the below code just above ]]></b:skin>
#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px} #Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none} #Menu ul{height:30px;list-style:none;margin:0;padding:0} #Menu li{height:30px;float:left;margin:0;padding:0} #MSA{width:960px;margin:0 auto;} #MSD{width:960px;} #Menu{height:30px;width:700px;float:left;} #SearchBox {height:35px;float:right;width:220px;} #SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px} #SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}
4. Now save the template
5. Now goto page layout and add a gadget
6. Select html/javascript and paste below code in it
<div id='MenuBar'> <div id='MSA'> <div id='MSD'> <div id='Menu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#' rel='author'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>Advertise</a></li> <li><a href='#'>Write For Us</a></li> <li><a href='#'>Privacy Policy</a></li> <li><a href='http://www.haseebnet.blogspot.com/'>Add This</a></li> </ul> </div> <div id='SearchBox'> <form action='/search' method='get'> <input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/> <input type='submit' value='Go'/> </form> </div> </div> </div> </div> <!--MenuBar Ends--!>
7. Save it.
- روابط التحميل والمشاهدة، الروابط المباشرة للتحميل من هنا
---------------------------------------------------------------
شاهد هذا الفيديو القصير لطريقة التحميل البسيطة من هنا
كيف تحصل على مدونة جاهزة بآلاف المواضيع والمشاركات من هنا شاهد قناة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على اليوتيوب لمزيد من الشرح من هنا رابط مدونة منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات في أي وقت حــــتى لو تم حذفها من هنا شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا تعرف على ترتيب مواضيع منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات (حتى لا تختلط عليك الامور) من هنا
ملاحظة هامة: كل عمليات تنزيل، رفع، وتعديل المواضيع الجاهزة تتم بطريقة آلية، ونعتذر عن اي موضوع مخالف او مخل بالحياء مرفوع بالمدونات الجاهزة بآلاف المواضيع والمشاركات، ولكم ان تقوموا بحذف هذه المواضيع والمشاركات والطريقة بسيطة وسهلة. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــسلامـ.
Post a Comment