03‏/10‏/2014

معكم من جديد إخواني اخواتي الأعزاء موضوع اليوم يقتصر على قائمتيين جانبيتين خفيفتين وبمميزات خفيفة أيضا كلها بتصميم Css لن تضر بمدونتك ستنفعك إذا كنت تتوفر على أقسام كثيرة بموقعك مع هاته القوائم ستحل المشكلة أيضا لن تأخذ مكان واسع ولن تشوه منظر الموقع على العكس وكل هذا ستراه بنفسك في المعاينة أما فيما يخص التركيب فلقد سهلت لكم طريقة تركيبها ندخل للمعاينة أولا
شرح طريقة التركيب
1. الكود التالي خاص بالأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته ضعه فوق </head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2. بإمكانك وضع القائمة بداخل أداة Html/Javascript أو بداخل القالب فوق </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='http://2.bp.blogspot.com/-6DhIhl_df80/VC6PTqe90yI/AAAAAAAAGOw/Cfx8fQm-IcM/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='#'>
     الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
     من أنا <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='#'>
     سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='#'>
     المتجر <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='#'>
     أخبار التكنلوجيا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='#'>
     خدماتي <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='#'>
     المدونة <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
     فريق العمل <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='#'>
     مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='#'>
     راسلني<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='#'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>
* المحدد باللون البرتقالي غيره برابط صورة اللوجو
* المحدد باللون الأحمر ضع بدله الروابط

القائمة الثانية
<style>
/*
 * ----------- www.ar1web.com -------------- *
 */
        .menu-btn {background: #0AF url(http://3.bp.blogspot.com/-PnkPIBXqRUc/VC6SAvSFRpI/AAAAAAAAGPA/VNtUpvoS6WY/s1600/icon_slidetoggle-menus.png) no-repeat center center;
                   width: 30px;
                   height: 30px;
                   padding: 4px;
                   position: fixed;
                   top: 25px;
                   right: 25px;
                   z-index: 99999;
                   text-indent: -900px;
                   overflow: hidden;}
    #menu-ar1web a{text-decoration: none;
                   color: #FFF;
                   font-family: ge_ss_threeregular;
                   font-size: 20px;
                   font-weight: bold;}
      #menu-ar1web{position: fixed;
                   top:0;
                   bottom: 0;
                   right:0;
                   background: #444;
                   color:#fff;
                   height: 100%;
                   width:250px;
                   padding: 0 25px 0 25px;
                   z-index: 999;
                   overflow: auto;}
        .ar1web-2 {background: #0AF;
                   width: 30px;
                   height: 30px;
                   padding: 4px;
                   position: fixed;
                   top: 25px;
                   right: 25px;
                   z-index: 99999;
                   overflow: hidden;
                   text-align: center;
                   line-height: 28px;}
    .title-ar1web {color: #888;
                   font: normal 18px ge_ss_threeregular;
                   text-align: right;
                   border-bottom: 1px solid #0AF;
                   float: right;
                   position: relative;
                   top: 26px;
                   right: 38px;
                   line-height: 28px;
                   display: block;
                   padding-bottom: 8px;
                   padding: 0 12px 8px 93px;}
   .menu-a-ar1web {color: #EEE;
                   text-align: right;
                   font: normal 17px ge_ss_threeregular;
                   margin: 13px 0;
                   display: block;
                   transition: all .5s;}
.like-box-ar1web { position: fixed;
                   background: #444;
                   bottom: 0;
                   top: auto;
                   right: 0;
                   left: auto;
                   padding: 0 25px;
                   width: 250px;}
.menu-ul-ar1web {  float:right; width: 100%;}
.menu-li-ar1web {  list-style: none;}
.ar1web-1 , .ar1web-2 {cursor: pointer}
#menu-ar1web , .ar1web-2 {display: none;}
.menu-li-ar1web:hover .menu-a-ar1web {color:#0AF!important;}
</style>
 <a class='menu-btn ar1web-1'></a>
 <div id='menu-ar1web' class='menu-ar1web ar1web.com'>
 <a class="ar1web-2">x</a>
 <h2 class='title-ar1web'>اقسام الموقع</h2>
 <br/><br/><br/>
 <ul class='menu-ul-ar1web ar1web.com'>
 <li class='menu-li-ar1web ar1web.com'><a href='http://www.ar1web.com' class='menu-a-ar1web ar1web.com'>الصفحة الرئيسية</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اعمالنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>عملائنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اتصل بنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على الفيسبوك</a></li> <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على جوجل +</a></li>
 </ul>
 <!-- like box -->
 <div class='like-box-ar1web' id='ar1web.com'>
 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farabe1web &amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
 </div></div>
 <!-- script -->
 <script>
 $(".ar1web-1").click(function(){
 $(".ar1web-2,#menu-ar1web").fadeIn(500)
 $(".ar1web-1").fadeOut(500)
 });
 $(".ar1web-2").click(function(){
 $("#menu-ar1web,.ar1web-2").fadeOut(500)
 $(".ar1web-1").fadeIn(500)
 });
 </script>
* المحدد باللون البرتقالي غيره بإسم صفحتك
* المحدد باللون الأحمر خاص بالروابط
معكم من جديد إخواني اخواتي الأعزاء موضوع اليوم يقتصر على قائمتيين جانبيتين خفيفتين وبمميزات خفيفة أيضا كلها بتصميم Css لن تضر بمدونتك ستنفعك إذا كنت تتوفر على أقسام كثيرة بموقعك مع هاته القوائم ستحل المشكلة أيضا لن تأخذ مكان واسع ولن تشوه منظر الموقع على العكس وكل هذا ستراه بنفسك في المعاينة أما فيما يخص التركيب فلقد سهلت لكم طريقة تركيبها ندخل للمعاينة أولا
شرح طريقة التركيب
1. الكود التالي خاص بالأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته ضعه فوق </head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2. بإمكانك وضع القائمة بداخل أداة Html/Javascript أو بداخل القالب فوق </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='http://2.bp.blogspot.com/-6DhIhl_df80/VC6PTqe90yI/AAAAAAAAGOw/Cfx8fQm-IcM/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='#'>
     الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
     من أنا <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='#'>
     سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='#'>
     المتجر <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='#'>
     أخبار التكنلوجيا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='#'>
     خدماتي <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='#'>
     المدونة <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
     فريق العمل <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='#'>
     مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='#'>
     راسلني<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='#'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>
* المحدد باللون البرتقالي غيره برابط صورة اللوجو
* المحدد باللون الأحمر ضع بدله الروابط

القائمة الثانية
<style>
/*
 * ----------- www.ar1web.com -------------- *
 */
        .menu-btn {background: #0AF url(http://3.bp.blogspot.com/-PnkPIBXqRUc/VC6SAvSFRpI/AAAAAAAAGPA/VNtUpvoS6WY/s1600/icon_slidetoggle-menus.png) no-repeat center center;
                   width: 30px;
                   height: 30px;
                   padding: 4px;
                   position: fixed;
                   top: 25px;
                   right: 25px;
                   z-index: 99999;
                   text-indent: -900px;
                   overflow: hidden;}
    #menu-ar1web a{text-decoration: none;
                   color: #FFF;
                   font-family: ge_ss_threeregular;
                   font-size: 20px;
                   font-weight: bold;}
      #menu-ar1web{position: fixed;
                   top:0;
                   bottom: 0;
                   right:0;
                   background: #444;
                   color:#fff;
                   height: 100%;
                   width:250px;
                   padding: 0 25px 0 25px;
                   z-index: 999;
                   overflow: auto;}
        .ar1web-2 {background: #0AF;
                   width: 30px;
                   height: 30px;
                   padding: 4px;
                   position: fixed;
                   top: 25px;
                   right: 25px;
                   z-index: 99999;
                   overflow: hidden;
                   text-align: center;
                   line-height: 28px;}
    .title-ar1web {color: #888;
                   font: normal 18px ge_ss_threeregular;
                   text-align: right;
                   border-bottom: 1px solid #0AF;
                   float: right;
                   position: relative;
                   top: 26px;
                   right: 38px;
                   line-height: 28px;
                   display: block;
                   padding-bottom: 8px;
                   padding: 0 12px 8px 93px;}
   .menu-a-ar1web {color: #EEE;
                   text-align: right;
                   font: normal 17px ge_ss_threeregular;
                   margin: 13px 0;
                   display: block;
                   transition: all .5s;}
.like-box-ar1web { position: fixed;
                   background: #444;
                   bottom: 0;
                   top: auto;
                   right: 0;
                   left: auto;
                   padding: 0 25px;
                   width: 250px;}
.menu-ul-ar1web {  float:right; width: 100%;}
.menu-li-ar1web {  list-style: none;}
.ar1web-1 , .ar1web-2 {cursor: pointer}
#menu-ar1web , .ar1web-2 {display: none;}
.menu-li-ar1web:hover .menu-a-ar1web {color:#0AF!important;}
</style>
 <a class='menu-btn ar1web-1'></a>
 <div id='menu-ar1web' class='menu-ar1web ar1web.com'>
 <a class="ar1web-2">x</a>
 <h2 class='title-ar1web'>اقسام الموقع</h2>
 <br/><br/><br/>
 <ul class='menu-ul-ar1web ar1web.com'>
 <li class='menu-li-ar1web ar1web.com'><a href='http://www.ar1web.com' class='menu-a-ar1web ar1web.com'>الصفحة الرئيسية</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اعمالنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>عملائنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اتصل بنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على الفيسبوك</a></li> <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على جوجل +</a></li>
 </ul>
 <!-- like box -->
 <div class='like-box-ar1web' id='ar1web.com'>
 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farabe1web &amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
 </div></div>
 <!-- script -->
 <script>
 $(".ar1web-1").click(function(){
 $(".ar1web-2,#menu-ar1web").fadeIn(500)
 $(".ar1web-1").fadeOut(500)
 });
 $(".ar1web-2").click(function(){
 $("#menu-ar1web,.ar1web-2").fadeOut(500)
 $(".ar1web-1").fadeIn(500)
 });
 </script>
* المحدد باللون البرتقالي غيره بإسم صفحتك
* المحدد باللون الأحمر خاص بالروابط
31 Blogger تعليقات
Disqus
31 التعليقات
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

شكرا
ضروري أخي =D

المشرف
avatar
المشرف
avatar

مشكوووووووووور أخي وكل عام وانت بخير

المشرف
avatar

علينا وعليك والأمة الإسلامية بألف خير
أسعدني مرورك .

المشرف
avatar

ينعاد عليك بالف خير

المشرف
avatar

اخي بعد ان جربتها لم تعمل وهذه صورة للتوضيح
http://im78.gulfup.com/6U1NK7.png
عملتها بداخل القالب فوق body

المشرف
avatar

أضف </div> قبل </body>
إذا مازال يظهر بالأحمر أضف مرة أخرى </div>
أو ضع الكود في أداة Html/javascript

المشرف
avatar

جميل اخي قائمة ممتازة و بالنسبة للاخ الذي لم تشتغل معه القائمة حين وضعها في القالب فاليضع هذا الكود عوضا عن الاخير الذي بالتدوينة'الكود هو نفسه لكن ازلت منه بعض الشرطيات التي تمنع حفظ القالب:
<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='http://2.bp.blogspot.com/-6DhIhl_df80/VC6PTqe90yI/AAAAAAAAGOw/Cfx8fQm-IcM/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='#'>
الرئيسية <i class='fa fa-home'>
</i></a>
</li>
<li>
<a href='#'>
من أنا <i class='fa fa-user'>
</i></a>
</li>
<li>
<a href='#'>
سياسة الإستخدام <i class='fa fa-user'>
</i></a>
</li>
<li>
<a href='#'>
المتجر <i class='fa fa-shopping-cart'>
</i></a>
</li>
<li>
<a href='#'>
أخبار التكنلوجيا <i class='fa fa-file'>
</i></a>
</li>
<li>
<a href='#'>
خدماتي <i class='fa fa-laptop'>
</i></a>
</li>
<li>
<a href='#'>
المدونة <i class='fa fa-home'>
</i></a>
</li>
<li>
<a href='#'>
فريق العمل <i class='fa fa-group'>
</i></a>
</li>
<li>
<a href='#'>
مقالات <i class='fa fa-folder'>
</i></a>
</li>
<li>
<a href='#'>
راسلني<i class='fa fa-envelope'>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='#'>
<i class='fa fa-facebook fa-2x'>
</i></a>
<a href='#'>
<i class='fa fa-google-plus fa-2x'>
</i></a>
<a href='#'>
<i class='fa fa-twitter fa-2x'>
</i></a>
<a href='#'>
<i class='fa fa-youtube fa-2x'>
</i></a>
</div>
</div>

المشرف
avatar

تشكر ، أتمنى أن يستفيد منه

المشرف
avatar

اخي ممكن كيف تكتب اكود في التعليقات يكتب لي لايمكن قبول HTML

المشرف
avatar

عليك تحويله بمحول الأكواد اسفل التعليقات ضع الكود وإضغط konversi
http://ask.ar1web.com/2014/09/blog-post_14.html

المشرف
avatar

اريد ان احذفها كيف افعل ذالك

المشرف
avatar

اخي بعد ان وضعت القالب فوق body يظهر خطأ ولا يمكن الحفظ

المشرف
avatar

اضفه الكود في اداة Html/Javascript من التخطيط

المشرف
avatar

انا اريد منك هذه الاضافة التى فى الصورة http://im75.gulfup.com/91QYwX.png

المشرف
avatar

ستجدها هنا : http://www.ar1web.com/2014/09/css-side-menu.html

المشرف
avatar

شكراً لك وكلمة شكراً لا تساوى شئ لما قدمتموه لى وللزوار

المشرف
avatar

هناك طلب اخر
فى مدونة عرب ويب عند مرور الماوس على الشعار يحدث كما فى الصورة http://im75.gulfup.com/0qjl9g.png
كيف اجعلها هكذا فى مدونتى .....
ارجو منك الرد

المشرف
avatar

اضف هذا الكود فوق ]]></b:skin>
img {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
}
img :hover {
-webkit-filter: blur(3px);}

بدل img ضع وسم أو معرف اللوجو لديك
ستجد باقي التأثيرات هنا : http://www.ar1web.com/2014/10/best-hover-effects.html

المشرف
avatar

كيف اعرف الوسم او المعرف + شكل الماوس

المشرف
avatar

رابط مدونتك ..

المشرف
avatar

كيف اقوم بالتعديل على حجم الشعار فى القائمه الاولى

المشرف
avatar

الشعار حجمه طبيعي متوافق مع حجم القائمة إذا تغير الحجم سيتشوه مظهر القائمة ، يمكنك تجربة زيادة في حجم الشعار عبر أي محرر

المشرف
avatar
yasmine Ahmed 12/27/2014
delete

انا محتاجة الإضافة ديه الى هيا فى القايمة الثانية

المشرف
avatar

حمل الملف أنسخِ الكود ثم توجه إلى التخطيط وأضيف اداة HTML/JAVASCRIPT ضع الكود بها وغير الكلمات ... وقومي بالحفظ

المشرف
avatar

السلام عليكم أخي أنا أضفت الشكل الأول ونجحت معي، لكني لا أريدها أن تظهر في الجوال هل ممكن

المشرف
avatar

عليكم السلام يجب أن تضيف كود بين أكواد التجاوب والتي تبدأ هكذا : @media
هذا هو الكود: #RLMenu{display: none!important;}

المشرف
avatar

شكرا أخي الكريم يعني أضيف الكود في أي مكان المهم بين أكواد التجاوب

المشرف
avatar

شكرا لقد نجحت معي دائما مبدع

المشرف
avatar

ممكن أخى تضع قائمة باليمين وقائمة باليسار

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة