حصرياً كيف تضيف كيف تضيف قائمة متل صندوق منبتقة من الجانب في مدونة لبلوجر بتقنية الجافا سكريبت

السلام عليكم حصرياً كيف تضيف كيف تضيف قائمة متل صندوق منبتقة من الجانب  في مدونة لبلوجر
بتقنية الجافا سكريبت نبدأ على بركة الله:

1-ندهب إلى القالب=> كالعادة نتوجه إلى=> تخطيط إضافة أداة و نختار أداة => html/javascript
2-ننسخ هدا الكود إليها:

<script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIKhFt9w5kIagWxOTcOUK7mgvTmq0QuoFgCYeRUsVs44zQseT-XmWs3liUhW3eQa6mnthW4wxkooYJC4xiNc-8c-YhByrP920bfXyEFUzn9_N9k8Y4R6p1kRKiV53UGybQ9VhnlXw3Xyg/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left <span>Menu</span></h2>
<ul>
<li><a href="#"> LinK one</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li> 
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://www8.0zz0.com/2013/11/09/15/995321752.png" title="sideBar" /></a>
</div>

ملاحظة: يمكنك تغيير الصورة لي مكتوب قائمة جانبية  بتغيير الرابط لي بلون لأخضر إلى  رابط صورتك
أما لي بلون البرتقالي  عنوان القائمة
أما لي بلون الوردي عنوان الموضوع
أما لي بلون لأصفر رابط الموضوع
3-نضغط على حفظ و مبروك عليك
إدا لم تفهم تفضل بزيارة الفيديو إنشاء الله تفهم:

Unknown

مرحباً بكل عربي مسلم في هذه المدونة الذي هي مجانية بخدامتها و دروسها تعطي برامج بجميع أنواعها لجميع لأنظمةوتقدم قوالب وإضافات إحترافية مجاناً فقط هنا فتابعونا ليصلكم كل جديد عن هده المدونة