اليوم سوف أشرح طريقة إضافة قائمة جانبية إحترافية بخصائص CSS3 وهذه القائمة الجانبية تتميز بخصائص رائعة جداً ومن أفضل المميزات أنها حصرية وخفيفة جداً ومنظرها أنيق لكل المدونات ولكل الأذواق بإذن الله .
طريقة التركيب :
- أدخل مدونتك .
- ثم التخطيط .
- أضف أداة عبارة عن HTML.
- إنسخ والصق هذا الكود بها :
<div align="center"><div class='menu-by-e7tarif'>
<ul>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com//">إضافات وقوالب بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com//">برامج أساسية</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">برامج إنترنت</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">غوغل أدسنس</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/"> برامج ويندوز</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">دروس بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">فيسبوك</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">يوتوب</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">ركن الأندرويد</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">ركن الحماية</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">أخبارالنت</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">الربح من النت</a>
</li>
</ul>
</div>
<style>
/* this is menu by : http://www.e7tarif.com -- */
.menu-by-e7tarif ul{width:350px;float:center;display:block;}.menu-by-e7tarif li{margin: 0;text-align: Center;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-e7tarif 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-e7tarif li a:before{content:'#39;;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-e7tarif 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-e7tarif li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style><span style="float: right; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;">
<ul>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com//">إضافات وقوالب بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com//">برامج أساسية</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">برامج إنترنت</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">غوغل أدسنس</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/"> برامج ويندوز</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">دروس بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">فيسبوك</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">يوتوب</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">ركن الأندرويد</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">ركن الحماية</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">أخبارالنت</a>
</li>
<li>
<a dir="rtl" href="http://3alamalcomputer.blogspot.com/">الربح من النت</a>
</li>
</ul>
</div>
<style>
/* this is menu by : http://www.e7tarif.com -- */
.menu-by-e7tarif ul{width:350px;float:center;display:block;}.menu-by-e7tarif li{margin: 0;text-align: Center;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-e7tarif 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-e7tarif li a:before{content:'#39;;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-e7tarif 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-e7tarif li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style><span style="float: right; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;">
<a href="http://e7tarif.com" style="color: black;"></a></span></div>
غير ما باللون الأزرق بإسم الرابط وغير ما باللون الأخضر برابط الإسم ثم إحفظ القالب، و بهذا تكون قد أنهيت المهمة بنجاح، حيث سيمكنك معاينة عملك عبر التوجه لمدونتك.
هل اعجبك الموضوع ؟
ليست هناك تعليقات :
إرسال تعليق