دليل المدون

2011-11-03

أكواد css لأزرار وقوائم رأسية للمواقع ولصفحات ترحيب الفيس بوك css buttons

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين 

سأوضح كيفية تركيبها لصفحات الفيس بوك لمتابعة دورس صمم صفحتك على الفيس بوك بنفسك  

بعد وضع أكواد الخلفية يمكنا إضافة كود الأزرار المناسب لخلفية صفحة الترحيب 
ووضع الروابط لكل زر
    
وإليكم أكواد الأزرار
أزرار بنية تتحول إلى اللون الأزرق بمرور الماوس

أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

أزرار بنية

<CENTER>
<!-- مدونة كن داعيا للخير -->
<style type="text/css">

#fbml_turk11 {
 width: 200px;
 font-family: Verdana, Geneva, sans-serif;
 }
 
#fbml_turk11 li a {
   height: 45px;
 text-decoration: none;
 text-align: center;
 } 
 
#fbml_turk11 li a:link, #fbml_turk11 li a:visited {
 color: #ffffff;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Q1AQoNKfCJwGftR9WI-4hrEie3WGgSzhsQ7xqhDAjLJyzSPS97BheGmp9DC6WpR5s0ZF4Q_YbDunJQzDaKj05N_phlvG6_i327GxM_7uzOFJGBv3nMdODahEkpzbsNQdikFv6Iz2qNGN/s198/56.png);
 padding: 21px 0 0 0px;
 }
 
#fbml_turk11 li a:hover, #fbml_turk11 li a:active {
 color: #000000;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZR3M3n4KQffmuJKlLwcOc1Ld1L0NWjXqHWbFIpmcXOGpJj8Ev14O7pIEya2v0ewTsAaN9_30BXksZg7eH7ptP1T8dA2OmAJ6HXjj59Kqb90_pzW90nKTCgB2LFLUZ0uaxNDXQHms8Gmy/s198/60.png) 0 -75px;
 padding: 21px 0 0 0px;
 }
 
#fbml_turk11 ul li {
 font-family: Verdana, Geneva, sans-serif;
        font-weight: bold;
 font-size: 16px;
}

</style>

<div id="fbml_turk11"><ul>
<table style="width: 100%">
 <tr>
  
<center>
<A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
<center>



<!-- الزر الأول -->
 <tr>
  <td><li><a
 href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
 </tr>
<!-- الزر الثانى --> 
 <tr>
    <td><li><a
 href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
 </tr>
<!-- الزر الثالث --> 
 <tr>
    <td><li><a
 href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
 </tr>
<!-- الزر الرابع --> 
 <tr>
    <td><li><a
 href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
 </tr>
<!-- الزر الخامس --> 
 <tr>
    <td><li><a
 href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
 </tr>
<!-- الزر السادس --> 
 <tr>
    <td><li><a
 href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
</table>
</ul>
</div>

</CENTER>


أزرار برتقالية تتحول إلى اللون الأصفر بمرور الماوس


أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

<CENTER>
<!-- مدونة كن داعيا للخير -->
<style type="text/css">

#fbml_turk12 {
 width: 150px;
 font-family: Verdana, Geneva, sans-serif;
 }
 
#fbml_turk12 li a {
   height: 27px;
 text-decoration: none;
 text-align: center;
 } 
 
#fbml_turk12 li a:link, #fbml_turk12 li a:visited {
 color: #660033;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSEDwmI1M68eb5SEz-EFiadft0ZpJ6tnQ1A1atxgf9bRwquZfQiQU3LbG5NZy4prmTYIfm8eU98H2rGGW-VQ6n2Kud093TlLIFKNJRSKmKLR-WBDRUVjA3RjW5UAgaxgR_D9HqVO81T68/s142/35.png);
 padding: 10px 0 0 0px;
 }
 
#fbml_turk12 li a:hover, #fbml_turk12 li a:active {
 color: #3333CC;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIIKNqJEa8OfAcgKwUrxfcLYTnp4BU9Wr3bdSTgDbMlFqV7QeeTN_GRCYrspOr8X6KtNd3xEW2B36dl0gIlKtCz5urz57UctGzolD5B1rBCSYD4-A9-Ix85MFy3uF3aPyUUx75GhbsgzES/s142/37.png) 0 -45px;
 padding: 10px 0 0 0px;
 }
 
#fbml_turk12 ul li {
 font-family: Verdana, Geneva, sans-serif;
        font-weight: bold;
 font-size: 12px;
}

</style>

<div id="fbml_turk12"><ul>
<table style="width: 100%">
 <tr>
  
<center>
<A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
<center>



<!-- الزر الأول -->
 <tr>
  <td><li><a
 href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
 </tr>
<!-- الزر الثانى --> 
 <tr>
    <td><li><a
 href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
 </tr>
<!-- الزر الثالث --> 
 <tr>
    <td><li><a
 href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
 </tr>
<!-- الزر الرابع --> 
 <tr>
    <td><li><a
 href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
 </tr>
<!-- الزر الخامس --> 
 <tr>
    <td><li><a
 href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
 </tr>
<!-- الزر السادس --> 
 <tr>
    <td><li><a
 href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
</table>
</ul>
</div>

</CENTER>

<br/>

أزرار زيتية ذات إطار ذهبى تتحول إلى اللون الذهبى عند مرور الماوس


أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button
<CENTER>
<!-- مدونة كن داعيا للخير -->
<style type="text/css">

#fbml_turk13 {
 width: 150px;
 font-family: Verdana, Geneva, sans-serif;
 }
 
#fbml_turk13 li a {
   height: 30px;
 text-decoration: none;
 text-align: center;
 } 
 
#fbml_turk13 li a:link, #fbml_turk13 li a:visited {
 color: #FFFF66;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5JWtR5R9heK0_ecVplRqnkH0nDtYTw4lvl5qk3n0vM2Hz1Rf51Z01QxvrKh1OAo6Nj37LWPH3AnQewaLfOfjyFDZKkhnFFQ2ranUs3qErFFm_uM_EQllN1aelx_zMTIFM0ZLWkN-d0aN/h120/71.png);
 padding: 10px 0 0 0px;
 }
 
#fbml_turk13 li a:hover, #fbml_turk13 li a:active {
 color: #3333CC;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKQhvIH1OdjQP6YnMC3u_YRgNnF2lfIlYO167J8AToEjYDVdNnfXLio00NKw4aVLdsSCS_E2UMY0M3FgEtBzj1uA9fLbydwnlGlxYaC6AIouI7xfa6gDaSkccyxulDXLtvYhQxLMuVld4/h120/70.png) 0 -45px;
 padding: 10px 0 0 0px;
 }
 
#fbml_turk13 ul li {
 font-family: Verdana, Geneva, sans-serif;
        font-weight: bold;
 font-size: 12px;
}

</style>

<div id="fbml_turk13"><ul>
<table style="width: 100%">
 <tr>
  
<center>
<A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
<center>



<!-- الزر الأول -->
 <tr>
  <td><li><a
 href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
 </tr>
<!-- الزر الثانى --> 
 <tr>
    <td><li><a
 href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
 </tr>
<!-- الزر الثالث --> 
 <tr>
    <td><li><a
 href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
 </tr>
<!-- الزر الرابع --> 
 <tr>
    <td><li><a
 href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
 </tr>
<!-- الزر الخامس --> 
 <tr>
    <td><li><a
 href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
 </tr>
<!-- الزر السادس --> 
 <tr>
    <td><li><a
 href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
</table>
</ul>
</div>

</CENTER>






قائمة أزرار (إطار فقط)
أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

<BR/>
<CENTER>>
<A HREF="رابط الحائط"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdMvb8YGov4Maaf2_8cEDLsepYSoaSf3hK28cbsSSCRMZSetVWkRtMlrGC-1Zwj5_v5I-gALNeTxiKKK0xVzREtMV2ICEUnHlpauk2vBAoOqWGxyZvyOYo3P1TvJnEwKmXzZGeTp4Gr_i9/s128/21.png"></A>
<A HREF="رابط الصور"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii4FJ0MQkfjHtIT5GfWVThK1JuZ8iFhaOGrSuUyiODJHZpkuHUfx4WNG_kL9T5eJer06ZcABrQSb2OHMgN_EbTsC-KmqVi8dmCYJ5stgrQ1xkpmCmwPxd1HWdEa66jCrOOf0E_vT-XMky7/s128/23.png"></A>
<A HREF="رابط المعلومات"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2FWIgKzpUsFFGWoRMcMIotszx0utSFPVqJIxbjgdS6tWr3lS7v2EzzSj4eS69Rlx9MKoJhl0gBynhtr-xZj8VxipzP6iUEYKhpKnM49zwI2cuhHrXNkLqgmI6Ohj4AAcDjwfj4YvWNaP/s128/24.png"></A><BR/>
<A HREF="رابط مرحبا"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6lexTkkPyPLAombgRbJDm1-wycIjyVjwDPN3b9JeB-T32kM5hBoBAdkPUGHbz-JLERXC0wtX0wHK3SGKRAD-4ClmkZK5G5Ki6oO1I-u5wG9-5KCdGbP3oqbOoGogPm7U7fZy-wnhlqnbK/s128/28.png"></A>
<A HREF="رابط الادمن"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ETJjPGkMYTTnPI9cnmT_VSS9OCsiIfV8v26w0J83rHjV7OyAXEKLIGsUCzFO7roPz97sHXnp9z4xpcignaSWSR5yywn-KIIZMJv2nyLF3JtOkasiZS19jjmU3d0R3whPtv37fQBtE2AX/s128/22.png"></A>
<A HREF="رابط دعوة الاصدقاء"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMORuka_gR0hAYz5EOvsryBrfXDcCAx80WV9b1MsMbIPbfNwwiq2SCzYKkIZM524Tssz-JwKHzbSAJ727SHaO4yYxNee6OTjkX-PsN7aYutQl_zmX_KXbcKvyVlyBdN9HJCK9Eph3BskK8/s128/27.png"></A><BR/>
<A HREF="رابط للمراسله"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD2coPPFSWDQh9WTrDLEKNU7EaZpTStaerM4B6I76nc2YT2qJpvHL0mh3-WPZTZ3bNPyMBCrbaND_FAG9s748OSrSM3QHCw5eABau0JAAUs8Bxa_RT58FRrhwJ_WaB15kXE5uZ-HdTN1l1/s128/26.png"></A>
<A HREF="رابط المصحف"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbne07LLtFudEHKOlXQMmN61Bl_9YNi-RfITy03-pETd44Rk6d5FC0_-wro1rwacXbzySXtEVqyezIu_zZx7cmRwpDYhxr5gD1K360n2i0UM6XGTPudwHJFado5NepCVe1_fzk4I4mnOem/s128/25.png"></A>
<A HREF="رابط تاب"><IMG SRC="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJvXElHItORWEJOoNPrw32Rn2bb8mmgO7fjRt9RIIAPP3sjgwpK1CPgyCAispn1ZIUu7oXUUlfXFngk6UKPSUA3xz-7vjCaXtjE8_xmFoX1FZoCHPNW9y5q7CjgHTQPT0rjc9Ex-Ur_32/s128/29.png"></A><BR/>
</CENTER>
<center>
<A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
<center>
>br/
    قائمة أزرار
    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

    
    <CENTER>
    <A HREF="رابط الحائط"><IMG SRC="http://img845.imageshack.us/img845/2739/62161778.png"></A>
    <A HREF="رابط الصور"><IMG SRC="http://img202.imageshack.us/img202/7407/68483850.png"></A>
    <A HREF="رابط المعلومات"><IMG SRC="http://img818.imageshack.us/img818/1589/56306411.png"></A><BR/>
    <A HREF="رابط مرحبا"><IMG SRC="http://img571.imageshack.us/img571/2329/56099003.png"></A>
    <A HREF="رابط الادمن"><IMG SRC="http://img692.imageshack.us/img692/379/15429286.png"></A>
    <A HREF="رابط دعوة الاصدقاء"><IMG SRC="http://img210.imageshack.us/img210/2188/95215749.png"></A><BR/>
    <A HREF="رابط للمراسله"><IMG SRC="http://img412.imageshack.us/img412/4576/34566440.png"></A>
    <A HREF="رابط الالعاب"><IMG SRC="http://img543.imageshack.us/img543/4378/56719918.png"></A>
    <A HREF="رابط تاب"><IMG SRC="http://img24.imageshack.us/img24/2849/91155132.png"></A><BR/>
    </CENTER>
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    



    أكواد أزرار ذهبية تتحول لأزرار خضراء بمرور الماوس

    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button


    
    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk14 {
     width: 200px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk14 li a {
       height: 45px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk14 li a:link, #fbml_turk14 li a:visited {
     color: #ffffff;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WWQae3HLkuNWDg7ifz9IYapNr3AciyYN4rput2MCnRMNYKAtuTIiEqh0vedkZNSRqGyDU007JLwdJ2AMyf_5afwxREBFqjCy1OR_QDoQwT3wOmknXIKT8AYsQNfnIlMq02jskXDBqstf/s198/57.png);
     padding: 21px 0 0 0px;
     }
     
    #fbml_turk14 li a:hover, #fbml_turk14 li a:active {
     color: #000000;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4l33pLINvBLOAk50UwOWGAI4pcXmm6brW-XrJPR_jVG7WyMTZfX2M4Rm38HKa3YLjLrsLsQYUsoFtisGuPqqzTrvPsaRfpgbMe3cB8lyyuM7bsbPUmqUJFfFcmbe1IXvm6j-GF_D_2f-7/s198/61.png) 0 -75px;
     padding: 21px 0 0 0px;
     }
     
    #fbml_turk14 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 16px;
    }
    
    </style>
    
    <div id="fbml_turk14"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    
    


    أزرار صفراء تتحول إلى اللون البنفسجى عند مرور الماوس
    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button



    أزرار صفراء
    
    
    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk15 {
     width: 150px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk15 li a {
       height: 27px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk15 li a:link, #fbml_turk15 li a:visited {
     color: #660000;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIIKNqJEa8OfAcgKwUrxfcLYTnp4BU9Wr3bdSTgDbMlFqV7QeeTN_GRCYrspOr8X6KtNd3xEW2B36dl0gIlKtCz5urz57UctGzolD5B1rBCSYD4-A9-Ix85MFy3uF3aPyUUx75GhbsgzES/s142/37.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk15 li a:hover, #fbml_turk15 li a:active {
     color: #FFFF00;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AETLEJfljYp3OfznlsMy-Ee5kgfAfyHlCFafPdWhVoyD52NH8FWhrajVW0Lm9vWqenH8E-OOI0KnVQFFdZANU0DadZt9hhV6WqkhdMJ4qr-WVKE-L2NyTVWvdt6yZwIuNPGGHyIpV_qT/s142/38.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk15 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 12px;
    }
    
    </style>
    
    <div id="fbml_turk15"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    
    


    أزرار زرقاء تتحول إلى اللون الذهبى عند مرور الماوس

    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button
    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk16 {
     width: 200px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk16 li a {
       height: 45px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk16 li a:link, #fbml_turk16 li a:visited {
     color: #ffffff;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhM3Z5KKInqE19rMFqU2_giUkQgjd6tonN2bve3_n4s5hgfjP1oxB5JOj__Goauo81eBq05TdGU_Fd6kbOw5NhYZOmlM9v20l-0QbJTp7mf3f9vwYJtn7rfFHXAKZIhcIh8CtihyphenhyphenGAVxr_/s198/62.png);
     padding: 21px 0 0 0px;
     }
     
    #fbml_turk16 li a:hover, #fbml_turk16 li a:active {
     color: #000000;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WWQae3HLkuNWDg7ifz9IYapNr3AciyYN4rput2MCnRMNYKAtuTIiEqh0vedkZNSRqGyDU007JLwdJ2AMyf_5afwxREBFqjCy1OR_QDoQwT3wOmknXIKT8AYsQNfnIlMq02jskXDBqstf/s198/57.png) 0 -75px;
     padding: 21px 0 0 0px;
     }
     
    #fbml_turk16 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 16px;
    }
    
    </style>
    
    <div id="fbml_turk16"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    

    أزرار زجاجية  تتحول إلى اللون البنى بمرور الماوس

    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button


    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk17 {
     width: 150px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk17 li a {
       height: 30px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk17 li a:link, #fbml_turk17 li a:visited {
     color: #660033;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV411jPIrzmAHhueYeOgGHxwYbnXydIRrA9-k5IB1YGgNqIEM6hyZB1dm15UppCwqblS6-U52Y4W7ApfYV1mLMrF5ogtLGP4hs29rX2T86xDQuc6N29E2GyGV1N_xHdz7XThQnlvNinGq6/h120/75.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk17 li a:hover, #fbml_turk17 li a:active {
     color: #3333CC;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLHifiGvctB_nBZ7n1HFI5evkP4YqZ0rT13z4kPqPF02JqpLSB7ScTEG1dF9kNMAThRPEYiHflhenErR7mrmWnem8i7gHtiAalAgHN68VpIX45dvNfKmXgQ-52wRf9iTAZWYcPqhn-0n_k/h120/73.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk11 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 12px;
    }
    
    </style>
    
    <div id="fbml_turk17"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    

    أزرار سوداء ذات إطار ذهبى تتحول إلى اللون البيج بمرور الماوس
    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk18 {
     width: 148px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk18 li a {
       height: 30px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk18 li a:link, #fbml_turk18 li a:visited {
     color: #FFFF66;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjY9e-1EPL14LqNnQfU6XBFr9C0TxWK4Kwtr_0jyhbCpiYNo_3yxItXoQHBKjiXwmSWrlrkVNOHKbcGWBSemBQ8AHD3BJ0tfFosa_J3z46YTSKSVCf9t6Q_iA6iHnnqRuMYcfYB0tkqSKf/h120/72.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk18 li a:hover, #fbml_turk18 li a:active {
     color: #3333CC;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFrQeQIMPGJBFBq_m8QQ3KkG4F2DNzKPg5JzuLtakUb3gbpJUWxf082a2Bse9TUAkvg4jBf-JdzBuCyRYi_fWCv-P0j4FZHpFmh0_Qa5KU1egqkRVn2h47zh0boPjuXDQxm2ppMDaJTwsR/h120/74.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk18 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 14px;
    }
    
    </style>
    
    <div id="fbml_turk18"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    
    <br/>

    أزرار ذات إطار ملون

    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk19 {
     width: 148px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk19 li a {
       height: 30px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk19 li a:link, #fbml_turk19 li a:visited {
     color: #FFFF66;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vtPd0jh9nQzKZmYsEPCFxU6SfO2rSPaZdhvi6V_oLb1YcOta9NS4Y406AWpAa6qHipweZhgF4es59FSANhOytZzfDgNM1DoW04GTb2ibgONMiCeozGYQK8kykWyK9QNrTTCgKBkhqCuZ/h120/78.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk19 li a:hover, #fbml_turk19 li a:active {
     color: #FF9966;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxuTgTeITEUAfZOsl1ooJLuWAHpoP0I_5GGC1SKBW3hoKhTvxdsbgaTLsfIzLLQoHS2ESc-QRv4icKy_VJypZbjPYJR46AcjN6FBxaDJRaccfkOgWvyLMFHdX5ih_xWOszzRjz2UN1tuKd/h120/79.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk19 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 14px;
    }
    
    </style>
    
    <div id="fbml_turk19"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    
    <br/>

    أزرار برتقالية تتحول إلى اللون الأزرق
    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button
    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk10 {
     width: 148px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk10 li a {
       height: 30px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk10 li a:link, #fbml_turk10 li a:visited {
     color: #330066;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUfJdpBWO6rdhbM7eCP4fVMpsXt-DzOwYwpdXxooQX1vGOhTRSov3Dm70dGWf3oZyYoPZVUrvIN7_RhawfeVl6jxyEOHD5CT-_-vn_VlyiiZ-8KuVcbxUiFteLXxIVDrx4XHbgkQK_e_Cj/h120/67.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk10 li a:hover, #fbml_turk10 li a:active {
     color: #FFFF00;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAFq9ONXKtuh-Zs9DMTqUny-XFqVwVkqWd-MwM_lZ4KhrYHfFtRdVVq9OdYbmkS95LvwomsmnhzLzDFOWN8KyAQgeIznkMvD4yXOyk907ACgb1k0oO-R682x_plm3b3oQPzwapKuO8_Fu/h120/65.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk10 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 16px;
    }
    
    </style>
    
    <div id="fbml_turk10"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    <br/>
    
    أزرار زرقاء تتحول إلى الروز

    أكواد,اكوادوقوائم للفيس بوك,ازرار للفيس بوك,فمبل,fbml,css,html,facebook button

    <CENTER>
    <!-- مدونة كن داعيا للخير -->
    <style type="text/css">
    
    #fbml_turk111 {
     width: 148px;
     font-family: Verdana, Geneva, sans-serif;
     }
     
    #fbml_turk111 li a {
       height: 30px;
     text-decoration: none;
     text-align: center;
     } 
     
    #fbml_turk111 li a:link, #fbml_turk111 li a:visited {
     color: #99FFFF;
     display: block;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3QsBLSQavLD_MA4BN14qXAf0EORPmsKovG_EfcnqZ1JATXuG5JXyxgdjxHeaEZZpDdlmtO8sKP6yF4yJAOfIA0YngQl2YMZATB0Ifq7Z0cppw9EaI2AE7WeN9N8uyHeSifU2jiuWZ9qf/h120/80.png);
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk111 li a:hover, #fbml_turk111 li a:active {
     color: #FF66FF;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNpQvAnvvRvMkgaEcxARR8Swx93iD78QW-3yuOfeX8kRKXvESmtmRCAomfCl3vri-VUHlcsTGmmAJ8ROehMMUEmCsbh6Akb4sRVFO3xL2y8RME63MuYrpU4E1uzGrkhIBXLHK-TOKuIGo/h120/81.png) 0 -45px;
     padding: 10px 0 0 0px;
     }
     
    #fbml_turk111 ul li {
     font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
     font-size: 16px;
    }
    
    </style>
    
    <div id="fbml_turk111"><ul>
    <table style="width: 100%">
     <tr>
      
    <center>
    <A HREF="http://conda3ianllkhir.blogspot.com/"> تم التصميم بواسطة مدونة كن داعيا للخير </A>
    <center>
    
    
    
    <!-- الزر الأول -->
     <tr>
      <td><li><a
     href="اللينك الأول" title="الزر الأول"><b>الزر الأول</b></a></li></td>
     </tr>
    <!-- الزر الثانى --> 
     <tr>
        <td><li><a
     href="اللينك الثانى" title="الزر الثانى"><b>الزر الثانى</b></a></li></td>
     </tr>
    <!-- الزر الثالث --> 
     <tr>
        <td><li><a
     href="http://conda3ianllkhir.blogspot.com/" title="الزر الثالث"><b>مدونة كن داعيا للخير</b></a></li></td>
     </tr>
    <!-- الزر الرابع --> 
     <tr>
        <td><li><a
     href="اللينك الرابع" title="الزر الرابع"><b>الزر الرابع</b></a></li></td>
     </tr>
    <!-- الزر الخامس --> 
     <tr>
        <td><li><a
     href="اللينك الخامس" title="الزر الخامس"><b>الزر الخامس</b></a></li></td>
     </tr>
    <!-- الزر السادس --> 
     <tr>
        <td><li><a
     href="اللينك السادس" title="الزر السادس"><b>الزر السادس</b></a></li></td>
    </table>
    </ul>
    </div>
    
    </CENTER>
    
    
    
    
    <br/>



    تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا  
    تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

    هناك 14 تعليقًا

    1. الله ينور عليــــــــــــــك

      ردحذف
    2. شكرا جدا يا دكتورة كانت عندى مشكلة بعد ما حطيت كود الازرار الذهبي اللي بيتحول للاخضر في صفحة iframe بقيت عندي مشكلة في توافق شكلها مع متصفح الاكسبلورر.

      مشكلة كمان انى حطيت كود الترحيب بالزائر في صفحة ال iframe بس بيظهرلي كلمة welcome فقط بدون ما يظهر اسم الزائر

      معلش هتعبك معايا
      وشكرا ليكي

      ردحذف
    3. بالنسبة للتطبيق فهو يعمل جيدا مع فايرفوكس وجوجل كروم
      أما كود الترحيب بالزائر فهو يعمل جيدا على تطبيق fbml

      ردحذف
    4. السلام عليكم الف شكر يا دكتورة على الافاده وكان لي سؤال اخر حضرتك استخدمتى برنامج ارتيستر بصراحة البرنامج اكثر من رااااااااائع وغايه في السهولة والبساطه والسرعه بس المشكله ان لما اعمل بيه قالب بلوجر ولجي احملو الاقيه بيطلع ناقص القائمة الافقية وبعض الحاجات وهما في موقع البرنامج كاتبين طريقة تعديل القوائم الافقية بواسطة البرنامج بس انا مش فهمها بصراحة
      Creating Top Menu
      1. Log in to your Blogger Dashboard.
      2. Go to Layout -> Page Elements -> Top Menu –> Edit


      3. Click "Add Link" to add links.
      4. If you need a multi-level menu please enter "-" (dash) before the Subitem name, for example: "-Submenu Item".
      Please note that Submenu item should be placed below the parent menu item.
      5. Click Save.

      يا ريت لو حضرتك استخدمتية تدلينا لانو برنامج ممتاز جدا وشكرا ليكي

      ردحذف
    5. بالنسبة للقائمة الأفقية بمدونات بلوجر كالتالى
      الذهاب إلى التصميم بلوحة التحكم ثم أضف أداة وأضف قائمة الروابط

      ردحذف
    6. مرحبا ممكن اعرف كيف اجعل ازرار اللايك بجنب بعضهم وليس واحد اسفل الثاني؟؟

      ردحذف
    7. zaid yousif
      شكرا لمتابعتك
      يمكنك متابعة هذا الموضوع
      http://conda3ianllkhir.blogspot.com/2012/03/blogger-image-table.html#.UANb0LX6fIU

      ردحذف
    8. مرحبا دكتورة سؤال وضعت زر اللايك بس وين احط الرابط الرابط مو ضابط بليز ممكن تعطينا روابط ثانية

      ردحذف
    9. مشكووووووووووور مزيد من الابداع والتميز

      ردحذف
    10. السلام عليكم ورحمة الله

      ارجو من الدكتورة ان يعجبه التعديل الذي قمت به
      على الازرار التي صممتها
      لم يكون قصدي الوصول الى هذه النتيجة
      كنت اريد التعديل على عدم تكرار خلفية الصورة
      وجعل الازرار افقية تحصلت على
      هذا التصميم الذي هو في الاساس من تصميمك
      لا اريد ان سرقت مجهودك بل كنت اريد التعديل والارسال اليك
      ولهذ السبب ارسلت اليك
      لاجل مصدر الصفحة استخدمي الزر الايمن للموس لستخراج الكود
      ارجو في المستقبل تصغير حجم الصورة لزر
      ارجو زيارة الربط لطلاع الى التعديل
      http://zaharatb.moontada.com/h8-page

      ردحذف
    11. السلام عليكم ورحمة الله
      بارك الله فيكم وجزكم كل خير

      ردحذف
    12. @wahide nafsah

      شكرا جزيلا لمتابعتك
      تصميم ممتاز للأزرار ولايوجد مشكلة فى إستخدام الاكواد والتعديل عليها

      ردحذف

    يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
    لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

    Privacy-Policy | إعلن لدينا
    جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

    تصميم كن مدون