طريقة انشاء قائمة جانبية في مدونات بلوجر بكل سهولة

قائمة جانبيه أحترافيه بخصائص CSS3 – ستعجبك

اليوم كالعادة درس جديد وإضافة جميلة ولا أروع , الأضافة من تعديلي وتطويري وقمت بدعمها بأفضل خصائص الـ CSS3 لمتابعين مدونتي فقط

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

على العموم لن اطيل وللنبداء :

نأخذ اولاَ صورة :

طريقة التركيب : 

ادخل مدونتك .

ثم التخطيط .

أضف اداة عبارة عن HTML.

انسخ والصق هذا الكود بها مع تعديل ما سأذكره :

<div class=’menu-by-7lolblogger’>
<ul>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/“>أخبار تقنية</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>أيقونات</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>إضافات بلوجر</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>إضافات للمتصفحات</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>قائمة احترافيه</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>مدونة حلول بلوجر</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>حلول بلوجر</a>
</li>
<li>
<a dir=”rtl” href=”http://www.7lolblogger.com/”>حلول بلوجر</a>
</li>
</ul>
</div>
<style>
/* this is menu by : http://www.7lolblogger.com — */
.menu-by-7lolblogger ul{width:300px;float:right;display:block;}.menu-by-7lolblogger li{margin: 0;text-align: right;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-7lolblogger li a{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.1em 0 .1em 2.5em;background:#F1F1F1;border:1px solid #DDD;border-radius:3px;color:#444;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.48);}.menu-by-7lolblogger li a:before{content:’#’;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#39C4FF;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.menu-by-7lolblogger li a:after{position:absolute;content:”;border:.5em solid rgba(0, 0, 0, 0);left:-1em;top:50%;margin-top:-.5em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.53);}.menu-by-7lolblogger li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style>

         استبدله بالرابط .
         استبدله بأسم الرابط .