ظƒظ„ظ…ط© ط§ظ„ظپط±ظٹظ‚

ظپظٹ ط¹طµط±ظ†ط§ ظٹظˆط¬ط¯ ظ…ط¦ط§طھ ط§ظ„ط¢ظ„ط§ظپ ظ…ظ† ط§ظ„ظ…ط¯ظˆظ†ظٹظ† ظˆط§ظ„ظ…ط¯ظˆظ†ط§طھ ، ط§ظ„ط¨ط¹ط¶ ظٹط¹ظ…ظ„ ط¨ط´ط؛ظپ ظˆط­ط¨ ظˆط§ظ„ط¢ط®ط± ظٹط¹ظ…ظ„ ط¨ط´ظƒظ„ ط¥ظ†طھط§ط¬ظٹ ظ„ظ„ظƒط³ط¨ ظپظ‚ط· ! ط£ظ…ط§ ظ†ط­ظ† .. ظ†ط­ط¨ ظˆظ†ط¹ط´ظ‚ ظˆظ†ط¯ظˆظˆظˆط¨ ظپظٹ ط¯ط¨ط§ط¯ظٹط¨ ط§ظ„طھط¯ظˆظٹظ† ظˆظ†ط¤ظ…ظ† ط£ظ†ظ†ط§ ط³ظ†ظ‚ظˆظ… ط¨ط¥ط¶ط§ظپط© ظƒط¨ظٹط±ط© ظ„ظ„ظ…ط­طھظˆظ‰ ط§ظ„ط¹ط±ط¨ظٹ ظˆظ„ظˆ ط¨ط´ظٹط¦ ط¨ط³ظٹط· ، ظ†طھط¹ظ„ظ… ط¨ط´ظƒظ„ ظ…ط³طھظ…ط± ظ†ط´ط§ط±ظƒظƒظ… ط¨ظƒظ„ ط¬ط¯ظٹط¯ ، ظ†ط­ط§ظˆظ„ ط§ظ„ظ…ط³ط§ط¹ط¯ط© ظ†ط­ط¨ ط£طµط¯ظ‚ط§ط،ظ†ط§ ، ظ†ظ‡طھظ… ط¨ط¥ط³طھظپط³ط§ط±ط§طھظ‡ظ… ظƒظ…ط§ ظ„ظˆ ظƒط§ظ†طھ ظ…ظ„ظƒظ†ط§، ظپط±ظٹظ‚ظ†ط§ ظپط±ظٹظ‚ ظˆط§ط­ط¯ ط±ط؛ظ… ط£ظ†ظ‡ ظ…طھظƒظˆظ† ظ…ظ† ط´ط®طµ ظˆط§ط­ط¯ :) ظ„ظƒظ†ظ‡ ظٹط¹ظ…ظ„ ط¨ط¬ظ†ظˆظ†

✖
»[بلوجر] قائمة جانبية احترافية متجاوبة 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>

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

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

ط¹ظ†ظˆط§ظ† ط§ظ„طھط¯ظˆظٹظ†ط©: [بلوجر] قائمة جانبية احترافية متجاوبة 2014
طھظ‚ظٹظٹظ… : 10 ظ…ظ† 10 ظ…ط±طھظƒط² ط¹ظ„ظ‰ 24 طھظ‚ظٹظٹظ….
ط§ظ„ظƒط§طھط¨ : ط£ط­ظ…ط¯ ط£ط¨ظˆط¹ط¨ظٹظ„ط© ظ…ط¯ظٹط± ظ…ظˆظ‚ط¹ ط§ظ„ظ…ط·ظˆط± .ظ†طھ
ط¹ط¯ط¯ ط§ظ„ظ…ط´ط§ظ‡ط¯ط§طھ :

طµظ†ط¯ظˆظ‚ ط§ظ„طھط¯ظˆظٹظ†ط©

ط±ط§ط¨ط· ظ…ط¨ط§ط´ط± :
ظƒظˆط¯ ظ„ظ„ظ…ظ†طھط¯ظٹط§طھ :
HTML ظƒظˆط¯ :

* ط¨ط¥ظ…ظƒط§ظ†ظƒ ط¥ط¯ط±ط§ط¬ ط§ظ„ط£ظƒظˆط§ط¯ ط§ظ„ط؛ظٹط± ظ‚ط§ط¨ظ„ط© ظ„ظ†ط´ط± ط¨طھط­ظˆظٹظ„ظ‡ ط¹ط¨ط± ظ…ط­ظˆظ„ ط§ظ„ط£ظƒظˆط§ط¯

طھط­ظˆظٹظ„ ط§ظ„ط£ظƒظˆط§ط¯ط¥ط؛ظ„ط§ظ‚ ط§ظ„طھط¹ط¨ظٹط±ط§طھط¥ط®ظپط§ط،

ط´ظƒط±ط§ ظ„طھط¹ظ„ظٹظ‚ظƒ
ظ‚ط§ظ„ط¨ ط¨ط¯ط§ظٹط© .. ظ†ظ‚ط·ط© .

ط§ظ„ظ…ط·ظˆط± .ظ†طھ © 2014, ط¬ظ…ظٹط¹ ط§ظ„ط­ظ‚ظˆظ‚ ظ…ط­ظپظˆط¸ط©