قائمة جانبية منزلقة إحترافية لبلوجر

السلام عليكم :

أهلا بكم زوارنا الكرام .. نعود إليكم من جديد مع إضافات بلوجر .. بعد أن وضعنا قبل قليل قالب بلوجر إحترافي للغاية نأتيكم الآن بإضافة جد مميزة لبلوجر .

هي قائمة جانبية منزلقة بتأتير جميل واحترافي أنيق ...

طبعا القائمة ستزيد من جمالية واحترافية المدونة كما ستظهر قائمة من الروابط للزائر ..

لمعاينة متال حي للقائمة ◄ معاينة القائمة

إضافة القائمة بسيط جدا فقط إتبع ما يلي :

قم بنسخ الكود التالي وأضفه فوق الbody مباشرة (فوق الوسم </body>

أو ببساطة يمكنك وضعه في أداة من التخطيط ..

الكود

<style>
#RLMenu{
width: 240px;
height: 100%;
position: fixed;
}
.RLMenu-left{
right: -180px;
top: 0px;
transition:right 1s;
}
.RLMenu-left:hover{
right:0px;
}
/*################## RIGHT MENU ##############*/
.RLMenu-right{
right: -180px;
top: 0px;
direction: rtl;
transition:right 1s;
}
.RLMenu-right ul>li i,#toggle{
right: 200px;
}
.RLMenu-right:hover{
right:0px;
}
#menuHeader{
width: 100%;
height: 60px;
cursor: pointer;
}
#toggle{
position: absolute;
right: 195px;
top: 10px;
}
#menuLogo{
position: absolute;
top: 10px;
left:70px;
}
#RLMenu ul>li{
position: relative;
height: 45px;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
list-style: none;
}
#RLMenu ul>li a{
color: #fff;
line-height: 48px;
margin: 50px;
font-family: ge_ss_threeregular;
transition: color 0.5s;
text-decoration: none;
}
#RLMenu ul>li i{
position: absolute;
right: 200px;
top:15px;
color: rgba(255, 255, 255, 0.3);
transition: color 0.5s;
}
#social{
width: 85%;
height: 100px;
margin: 20px 23px;
}
#social a{
text-decoration: none;
}
#social i{
width: 36px;
height: 36px;
color: #fff;
text-align: center;
line-height: 37px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: background 0.5s;
}
.define h3:hover{
color#169aff;
border-top:3px solid #169aff;
border-bottom:3px solid #169aff;
}
.define h3{
text-transform: uppercase;
text-align:center;
}
#social .fa-facebook:hover{
background: #305891;
}
#social .fa-twitter:hover{
background: #2CA8D2;
}
#social .fa-youtube:hover{
background: #C82828;
}
#social .fa-google-plus:hover{
background: #CE4D39;
}
#RLMenu{
background: #222222;
z-index:999;
color: #fff;
}
#menuHeader{
background: #24AAE9;
}
#RLMenu ul>li:hover  a{
color: #24AAE9;
}
#RLMenu ul>li:hover  i{
color: #24AAE9;
}
</style>

<div class='RLMenu-left' id='RLMenu'>
<div id='menuHeader'>
<div id='toggle'>
<i class='fa fa-bars fa-2x'/></i></div>
<div id='menuLogo'>
<img alt='RLMenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCYKp_xmtGVRs7tmuWfxp57Uwxv-1-1K-w2dGOsXWmdToB7Y-9A1ZgcHXiBmhqw249dx_7EeUrC3zjKU-iiDpULCNAw3N1Vy2ACw2uZRBlq1j-imEW9ZjarswgO083fzoHjZZYUWEwHA/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='www.bloggxp.com'>
     الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     من أنا <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     المتجر <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     أخبار التكنلوجيا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     خدماتي <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     المدونة <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     فريق العمل <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='www.bloggxp.com'>
     راسلني<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='www.bloggxp.com'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='www.bloggxp.com'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='www.bloggxp.com'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='www.bloggxp.com'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>

◄►

ولا تنسى أن تقوم بتغيير روابط موقعي إلى الروابط المناسبة لك ..

إلى هنا ينتهي الشرح أطيب التحايا لكم ... وعيدكم مبارك سعيد ...

مدونة نجوم الويب

بحث هذه المدونة الإلكترونية

قائمة جانبية منزلقة إحترافية لبلوجر

تعليقات

إرسال تعليق