[اضافة بلوجر ] لوحة التحكم بشكل قائمة منزلقة بتقنية الـjquery حصريا مدونة علي نائل
السلام عليكم
شرح كيفية تركيب قائمة منزلقة من الاعلى بتقنية جي كويري
تصميم اداة القائمة المنزلقة : مدونة حلول بلوجر
تصميم لوحة التحكم : مدونة علي نائل
صورة نهائية للتركيب الحجم الصغير
صورة نهائية للتركيب بالحجم الكبير
الان شرح التركيب
1- تركيب القائمة المنزلقة
- ادخل مدونتك
- القالب.
- حرر القالب وابحث عن <head>
- ضع هذا الكود اسفله مباشرة :
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
ثم أبحث عن <header
وضع هذا الكود فوقه مباشره
وضع هذا الكود فوقه مباشره
<div class='msgall'>
<div id='msg1' style='display: none;'>
" ضع هنا كود الاداة "
</div>
<div id='msg12'>
<b class='msg3' id='msg3' style='display: block;'><i class='icon-angle-down'/></b>
<b class='msg2' id='msg2' style='display: none;'><i class='icon-angle-up'/></b>
</div>
</div><a style='display: none;' href='http://www.7lolblogger.com/'></a>
<script>$(document).ready(function() {
$("#msg3").click(function(){
$("div#msg1").slideDown("slow");}); $("#msg2").click(function(){
$("div#msg1").slideUp("slow"); }); $("#msg12 b").click(function () {
$("#msg12 b").toggle();
}); });</script>
<style>.msgall{position:fixed;top:0;width:100%;z-index:9999;}.msgall{border-top:3px solid #E9931A;}#msg1{display:none;background:none repeat scroll 0 0 #E9931A;text-align:center;}#msg1{display:none;}.msg3,.msg2{background:none repeat scroll 0 0 #E9931A;cursor:pointer;font-size:30px;padding:8px;position:absolute;right:24px;color:#A14B00;z-index:999999;border-radius:0 0 5px 30px;-webkit-box-shadow:0px -5px 5px #B8761A inset;box-shadow:0px -5px 5px #B8761A inset;}[class^="icon-"],[class*=" icon-"]{font-family:tahoma;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}.icon-angle-down:before{content:"";background:url(https://jetara.googlecode.com/files/9596.png) no-repeat;padding:10px;}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}.icon-angle-up:before{content:"";background:url(https://jetara.googlecode.com/files/2552.png) no-repeat;padding:10px;}</style>
استبدل التي باللون الاحمر الى كود الاداة التي ترغب بتركيبها
2- تركيب لوحة التحكم
- ادخل مدونتك
- القالب.
- حرر القالب وابحث عن <head>
- ضع هذا الكود اسفله مباشرة :
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
ثم أبحث عن <header
وضع هذا الكود فوقه مباشره
وضع هذا الكود فوقه مباشره
1-لوحة التحكم بالحجم الصغير
<div class='msgall'>
<div id='msg1' style='display: none;'>
"<div style="text-align:center; width:640px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201312121129547" src="http://www.image-maps.com/uploaded_files/5201312121129547_aa.png"
usemap="#Image-Maps_5201312121129547" border="0" width="640" height="200" alt="" />
<map id="_Image-Maps_5201312121129547" name="Image-Maps_5201312121129547">
<area shape="rect" coords="389,66,634,104" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#editor/src=sidebar" alt="مشاركة جديدة" title="مشاركة جديدة" />
<area shape="rect" coords="214,66,364,104" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#template" alt="تحرير القالب" title="تحرير القالب" />
<area shape="rect" coords="386,117,509,155" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#pageelements" alt="التخطيط" title="التخطيط" />
<area shape="rect" coords="235,115,358,153" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#basicsettings/src=dashboard" alt="اعدادت" title="اعدادت" />
<area shape="rect" coords="0,157,123,195" href="http://www.alinaeliq.blogspot.com" alt="تصميم وتطوير علي نائل" title="
تصميم وتطوير علي نائل" />
<area shape="rect" coords="638,198,640,200" href="http://www.image-maps.com/index.php?
aff=mapped_users_5201312121129547" alt="Image Map" title="Image Map" />
</map>
</div>
"
</div>
<div id='msg12'>
<b class='msg3' id='msg3' style='display: block;'><i class='icon-angle-down'/></b>
<b class='msg2' id='msg2' style='display: none;'><i class='icon-angle-up'/></b>
</div>
</div><a style='display: none;' href='http://www.7lolblogger.com/'></a>
<script>$(document).ready(function() {
$("#msg3").click(function(){
$("div#msg1").slideDown("slow");}); $("#msg2").click(function(){
$("div#msg1").slideUp("slow"); }); $("#msg12 b").click(function () {
$("#msg12 b").toggle();
}); });</script>
<style>.msgall{position:fixed;top:0;width:100%;z-index:9999;}.msgall{border-top:3px solid #E9931A;}#msg1{display:none;background:none repeat scroll 0 0 #E9931A;text-align:center;}#msg1{display:none;}.msg3,.msg2{background:none repeat scroll 0 0 #E9931A;cursor:pointer;font-size:30px;padding:8px;position:absolute;right:24px;color:#A14B00;z-index:999999;border-radius:0 0 5px 30px;-webkit-box-shadow:0px -5px 5px #B8761A inset;box-shadow:0px -5px 5px #B8761A inset;}[class^="icon-"],[class*=" icon-"]{font-family:tahoma;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}.icon-angle-down:before{content:"";background:url(https://jetara.googlecode.com/files/9596.png) no-repeat;padding:10px;}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}.icon-angle-up:before{content:"";background:url(https://jetara.googlecode.com/files/2552.png) no-repeat;padding:10px;}</style>
<div id='msg1' style='display: none;'>
"<div style="text-align:center; width:640px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201312121129547" src="http://www.image-maps.com/uploaded_files/5201312121129547_aa.png"
usemap="#Image-Maps_5201312121129547" border="0" width="640" height="200" alt="" />
<map id="_Image-Maps_5201312121129547" name="Image-Maps_5201312121129547">
<area shape="rect" coords="389,66,634,104" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#editor/src=sidebar" alt="مشاركة جديدة" title="مشاركة جديدة" />
<area shape="rect" coords="214,66,364,104" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#template" alt="تحرير القالب" title="تحرير القالب" />
<area shape="rect" coords="386,117,509,155" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#pageelements" alt="التخطيط" title="التخطيط" />
<area shape="rect" coords="235,115,358,153" href="http://www.blogger.com/blogger.g?
blogID=6855548149307193330#basicsettings/src=dashboard" alt="اعدادت" title="اعدادت" />
<area shape="rect" coords="0,157,123,195" href="http://www.alinaeliq.blogspot.com" alt="تصميم وتطوير علي نائل" title="
تصميم وتطوير علي نائل" />
<area shape="rect" coords="638,198,640,200" href="http://www.image-maps.com/index.php?
aff=mapped_users_5201312121129547" alt="Image Map" title="Image Map" />
</map>
</div>
"
</div>
<div id='msg12'>
<b class='msg3' id='msg3' style='display: block;'><i class='icon-angle-down'/></b>
<b class='msg2' id='msg2' style='display: none;'><i class='icon-angle-up'/></b>
</div>
</div><a style='display: none;' href='http://www.7lolblogger.com/'></a>
<script>$(document).ready(function() {
$("#msg3").click(function(){
$("div#msg1").slideDown("slow");}); $("#msg2").click(function(){
$("div#msg1").slideUp("slow"); }); $("#msg12 b").click(function () {
$("#msg12 b").toggle();
}); });</script>
<style>.msgall{position:fixed;top:0;width:100%;z-index:9999;}.msgall{border-top:3px solid #E9931A;}#msg1{display:none;background:none repeat scroll 0 0 #E9931A;text-align:center;}#msg1{display:none;}.msg3,.msg2{background:none repeat scroll 0 0 #E9931A;cursor:pointer;font-size:30px;padding:8px;position:absolute;right:24px;color:#A14B00;z-index:999999;border-radius:0 0 5px 30px;-webkit-box-shadow:0px -5px 5px #B8761A inset;box-shadow:0px -5px 5px #B8761A inset;}[class^="icon-"],[class*=" icon-"]{font-family:tahoma;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}.icon-angle-down:before{content:"";background:url(https://jetara.googlecode.com/files/9596.png) no-repeat;padding:10px;}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}.icon-angle-up:before{content:"";background:url(https://jetara.googlecode.com/files/2552.png) no-repeat;padding:10px;}</style>
أو لوحة التحكم بالحجم الكبير
<div class='msgall'>
<div id='msg1' style='display: none;'>
"<div style="text-align:center; width:640px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201312121129547" src="http://www.image-maps.com/uploaded_files/5201312121129547_rr.png"
usemap="#Image-Maps_5201312121129547" border="0" width="640" height="400" alt="" />
<map id="_Image-Maps_5201312121129547" name="Image-Maps_5201312121129547">
<area shape="rect" coords="251,118,609,168" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#editor/src=sidebar" alt="انشاء مشاركة جديده" title="انشاء مشاركة جديده" />
<area shape="rect" coords="299,178,530,228" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#template" alt="تحرير القالب" title="تحرير القالب" />
<area shape="rect" coords="300,239,531,289" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#pageelements" alt="التخطيط" title="التخطيط" />
<area shape="rect" coords="315,294,516,344" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#basicsettings/src=dashboard" alt="اعدادات" title="اعدادات" />
<area shape="rect" coords="7,356,88,391" href="http://alinaeliq.blogspot.com" alt="تصميم وتطوير علي نائل 2013" title="تصميم
وتطوير علي نائل 2013" />
<area shape="rect" coords="288,21,556,71" href="http://www.blogspot.com" alt="لوحة التحكم الرئيسية" title="لوحة التحكم الرئيسية"
/>
<area shape="rect" coords="638,398,640,400" href="http://www.image-maps.com/index.php?
aff=mapped_users_5201312121129547" alt="Image Map" title="Image Map" />
</map>
</div>"
</div>
<div id='msg12'>
<b class='msg3' id='msg3' style='display: block;'><i class='icon-angle-down'/></b>
<b class='msg2' id='msg2' style='display: none;'><i class='icon-angle-up'/></b>
</div>
</div><a style='display: none;' href='http://www.7lolblogger.com/'></a>
<script>$(document).ready(function() {
$("#msg3").click(function(){
$("div#msg1").slideDown("slow");}); $("#msg2").click(function(){
$("div#msg1").slideUp("slow"); }); $("#msg12 b").click(function () {
$("#msg12 b").toggle();
}); });</script>
<style>.msgall{position:fixed;top:0;width:100%;z-index:9999;}.msgall{border-top:3px solid #E9931A;}#msg1{display:none;background:none repeat scroll 0 0 #E9931A;text-align:center;}#msg1{display:none;}.msg3,.msg2{background:none repeat scroll 0 0 #E9931A;cursor:pointer;font-size:30px;padding:8px;position:absolute;right:24px;color:#A14B00;z-index:999999;border-radius:0 0 5px 30px;-webkit-box-shadow:0px -5px 5px #B8761A inset;box-shadow:0px -5px 5px #B8761A inset;}[class^="icon-"],[class*=" icon-"]{font-family:tahoma;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}.icon-angle-down:before{content:"";background:url(https://jetara.googlecode.com/files/9596.png) no-repeat;padding:10px;}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}.icon-angle-up:before{content:"";background:url(https://jetara.googlecode.com/files/2552.png) no-repeat;padding:10px;}</style>
<div id='msg1' style='display: none;'>
"<div style="text-align:center; width:640px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201312121129547" src="http://www.image-maps.com/uploaded_files/5201312121129547_rr.png"
usemap="#Image-Maps_5201312121129547" border="0" width="640" height="400" alt="" />
<map id="_Image-Maps_5201312121129547" name="Image-Maps_5201312121129547">
<area shape="rect" coords="251,118,609,168" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#editor/src=sidebar" alt="انشاء مشاركة جديده" title="انشاء مشاركة جديده" />
<area shape="rect" coords="299,178,530,228" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#template" alt="تحرير القالب" title="تحرير القالب" />
<area shape="rect" coords="300,239,531,289" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#pageelements" alt="التخطيط" title="التخطيط" />
<area shape="rect" coords="315,294,516,344" href="http://www.blogger.com/blogger.g?
blogid=6855548149307193330#basicsettings/src=dashboard" alt="اعدادات" title="اعدادات" />
<area shape="rect" coords="7,356,88,391" href="http://alinaeliq.blogspot.com" alt="تصميم وتطوير علي نائل 2013" title="تصميم
وتطوير علي نائل 2013" />
<area shape="rect" coords="288,21,556,71" href="http://www.blogspot.com" alt="لوحة التحكم الرئيسية" title="لوحة التحكم الرئيسية"
/>
<area shape="rect" coords="638,398,640,400" href="http://www.image-maps.com/index.php?
aff=mapped_users_5201312121129547" alt="Image Map" title="Image Map" />
</map>
</div>"
</div>
<div id='msg12'>
<b class='msg3' id='msg3' style='display: block;'><i class='icon-angle-down'/></b>
<b class='msg2' id='msg2' style='display: none;'><i class='icon-angle-up'/></b>
</div>
</div><a style='display: none;' href='http://www.7lolblogger.com/'></a>
<script>$(document).ready(function() {
$("#msg3").click(function(){
$("div#msg1").slideDown("slow");}); $("#msg2").click(function(){
$("div#msg1").slideUp("slow"); }); $("#msg12 b").click(function () {
$("#msg12 b").toggle();
}); });</script>
<style>.msgall{position:fixed;top:0;width:100%;z-index:9999;}.msgall{border-top:3px solid #E9931A;}#msg1{display:none;background:none repeat scroll 0 0 #E9931A;text-align:center;}#msg1{display:none;}.msg3,.msg2{background:none repeat scroll 0 0 #E9931A;cursor:pointer;font-size:30px;padding:8px;position:absolute;right:24px;color:#A14B00;z-index:999999;border-radius:0 0 5px 30px;-webkit-box-shadow:0px -5px 5px #B8761A inset;box-shadow:0px -5px 5px #B8761A inset;}[class^="icon-"],[class*=" icon-"]{font-family:tahoma;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}[class^="icon-"],[class*=" icon-"]{display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0% 0%;background-repeat:repeat;margin-top:0;}.icon-angle-down:before{content:"";background:url(https://jetara.googlecode.com/files/9596.png) no-repeat;padding:10px;}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none;}.icon-angle-up:before{content:"";background:url(https://jetara.googlecode.com/files/2552.png) no-repeat;padding:10px;}</style>
*******************************************************
يمكنك ايضا التعديل على
انشاء مشاركة جديده استبدل
http://www.blogger.com/blogger.g?blogID=6855548149307193330#editor/src=sidebar
برابطك
التخطيط
http://www.blogger.com/blogger.g?blogID=6855548149307193330#pageelements
تحرير القالب
http://www.blogger.com/blogger.g?blogID=6855548149307193330#template
اعدادت
http://www.blogger.com/blogger.g?blogID=6855548149307193330#basicsettings/src=dashboard
