samedi 25 octobre 2014

[بلوجر] قائمة جانبية احترافية متجاوبة 2014

السلام عليكم الرحمن الرحيم

[بلوجر] قائمة جانبية احترافية متجاوبة 2014


مرحبا متابعي موقع المطور .نت اليكم اضافة رائعة اجمل قائمة جانبية خفيفة لمدونات البلوجر 2014 , الاضافة يمكنك معاينتها في موقع المطور .نت , بعد طلب من بعض الاخوة قررت عرضها لكم , من مميزات القائمة انها خفيفة ولن تسبب ثقل لمدونتك , فهي ترتكز على لغة css , فهي تظهر اقسام مدونتك  بشكل احترافية وايضاً لا ننسى ازرار مواقع التواصل الاجتماعي اشهرها , في لا تأخد مكان واسع في مدونتك .
 


طريقة التركيب
  • في البداية قم بالذهاب الى لوحة تحكم بلوجر 
  • ثم اظغط على قالب  
  • ثم قم بالبحث عن  </head>
  • وضع الكود الاتي فوقة / قبلة
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

  •  بعد ذلك قم بالبحث عن </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: DroidNaskh-Regular;
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://dl.dropboxusercontent.com/s/6f6otd1eiesydin/%D8%A7%D9%84%D9%85%D8%B7%D9%88%D8%B1.png' idth="70" height="50"/>
</div>
</div>
<nav>
<ul>
<li>
<a href='http://www.almtwr.net/'>
     الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/p/blog-page_6.html'>
     فهرس المدونة <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/p/privacy-policy-ibrachoukrigmail.html'>
     سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/2014/05/support.html'>
     الدعم الفني <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/p/blog-page_29.html'>
     اتصل بنا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>
     بلوجر <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%B3%D9%8A%D9%88'>
     السيو <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9'>
     البرمجة <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA'>
     مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%84%D9%82%D8%A7%D8%AA?max-results=8'>
     الحلقات<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='https://www.facebook.com/mtwernet'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='https://plus.google.com/u/0/100131105852591729801'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='https://twitter.com/i27mad'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='http://www.youtube.com/user/ahmadwaleed4'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>

  • قم بتغير مايلزم وبعد ذلك قم بحفظ القالب 

اتمنى ان تكون الاضافة قد اعجبتك فهي اكثر من رائعة , يمكنك معاينتها في مدونة المطور .نت , لاي استقسار لا تتردد بترك تعليق ولاتحرمنا من التعليقات المشجعة .

schedule