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

السلام عليكم و رحمة الله و بركاته
اخواني زوار مدونتنا Th3GeekTech مرحبا بكم في موضوع اخر من مواضيع المدونة و الذي بعنوان كود اضافة قائمة جانبية كالتي موجودة بالمدونتي.

لتركيب الضافة اليكم الخطوات

1-نذهب الى التخطيط ثم اضافة أداة

2-ثم اضافة اداة HTML/JavaScript

3-ثم نلصق الكود الاضافة

الكوود

<div class="blockcontent">

<div class="widget-content">
<style>#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:1px 5px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar a{text-decoration:none;color:#2D2D2D;}#vbar a:hover{text-decoration:none;color:#037DFF;}#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:&#39;alweeam&#39;, &#39;Droid Arabic Kufi&#39;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a {color:#000;font-size:11px;font-family: DroidKufi-regular, Arial;font-weight: bold;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar .widget {   border: 1px solid #ddd;  background-color: #fff;  margin-bottom: 10px;  box-shadow:inset 0 0 4px #eee; }.menu a img {float:right;padding-left:10px;}</style>
<div id="vbar"><ul><li class="menu">
<p align="right"><a href="/">
<img src="http://im31.gulfup.com/g5esQ.png" width="18" height="18" /><span lang="ar-eg">الرئيسية</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im41.gulfup.com/ohqjE.png" width="18" height="18" /><span lang="ar-eg">نبذة عنا</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im33.gulfup.com/vSAod.png" width="18" height="18" /><span lang="ar-eg">التسجيل</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im37.gulfup.com/M0iF8.png" width="18" height="18" /><span lang="ar-eg">المنتديات</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im37.gulfup.com/7WNJb.png" width="18" height="18" /><span lang="ar-eg">مسابقات </span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im38.gulfup.com/btX7Q.png" width="18" height="18" /><span lang="ar-eg">تبادل اعلاني </span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im41.gulfup.com/lu1L4.png" width="18" height="18" /><span lang="ar-eg">اكواد الالوان</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im35.gulfup.com/wKgSA.png" width="18" height="18" /><span lang="ar-eg">محول الاكواد</span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im35.gulfup.com/qKqcB.png" width="18" height="18" /><span lang="ar-eg">فوتوشوب اونلاين </span></a></p></li>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im33.gulfup.com/LILmP.png" width="16" height="16" /><span lang="ar-eg">صفحتنا على الفيس بوك</span></a>
<li class="menu">
<p align="right"><a href="/">
<img src="http://im39.gulfup.com/hMoib.png" width="18" height="18" /><span lang="ar-eg">اتصل بنا</span></a></p></li></p></li>
</ul></div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=2231716838943802810&amp;widgetType=HTML&amp;widgetId=HTML13&amp;action=editWidget&amp;sectionId=sidebar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML13&quot;));" target="configHTML13" title="تحرير">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>

ومبرووك الاضافة