<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script src='https://th3maestro.googlecode.com/svn/trunk/js/menu.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    
    $(&quot;#open&quot;).click(function(){
    $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
    });
    
    $(&quot;#close&quot;).click(function(){
    $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
    });
    
    $(&quot;#toggle a&quot;).click(function () {
    $(&quot;#toggle a&quot;).toggle();
    });
    
    });</script>
    
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    body#layout #slide-top-panel {display:none !important;}
    </style>
    </b:if>

    <style>
    .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix {display: inline-block;}
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    .clearfix {height: 1%;}
    .clearfix {display: block;}
    
    .tab {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkmXHitZy6o_gleIsdFzIeupHOM7zXea3qt1F8qmoWXCjC0S1purGfpOgwUGGjDM3fTj0HwW_1ayYwa5hQkt-O67X-lF_GAMrxvHg6AjuNX6INRiQO3zr0YcYfC9RXlgB_tp_nALedvV1/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
    height: 42px;
    position: relative;
    top: 0;
    z-index: 999;
    }
    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 150px;
    color: white;
    font-size: 100%;
    text-align: center;
    font-family: GESSTwoMediumRegular;
    }
    .tab ul.login li.left {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatwBqGVwNDpr6tF3ZLbG9jlBR2-dfRL7sHWk85QCJQJGV0pOfzKnzq8rrD8Tmr1OfWzQFHa5R7iqNePmsJXEDZBaP_Z0kGSzEsZJ2LwDWOAI3w50haENaBsOJ1nsrIbRQhxsfmT2wrpKy/s1600/sliding-panel-tab-left.png) no-repeat left 0;
    height: 42px;
    width: 30px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    }
    .tab ul.login li.right {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAK5Zf6dvU8bWRaiPGmoBLmkOFjn_JHrnyYh3lZq4JPaGAcmwsmupu_1JQXMnWPY9b2By_llRWHpG0QYLbo5zZ7yBbq_0eqKFaVxvMT_LPzO0-izP5tZgD3bUPZzSDoLIeSnoS4KV38QiQ/s1600/sliding-panel-tab-right.png) no-repeat left 0;
    height: 42px;
    width: 30px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    }
    .tab ul.login li {
    text-align: left;
    padding: 0 6px;
    display: block;
    float: left;
    height: 42px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3yZpj1vkRUjV2jN9hy-c4YbuybvAbE2TLnr8NPjDkMb5Hmyfg6E5HTsiiDWMAFBidOQSv0sK-fGjBfeAYRzQ6BUw-_a03-tybIeGbLrbbD_iWZrW_4jvnK5_FgIiquy-z9w5qWkJKWYL/s1600/sliding-panel-tab.png) repeat-x 0 0;
    }
    
    .tab ul.login li a {color: #15ADFF;}
    .tab ul.login li a:hover {color: #FFFFFF;}
    .tab .sep {color:#414141}
    
    .tab a.open, .tab a.close {
    height: 20px;
    line-height: 20px !important;
    padding-left: 30px !important;
    cursor: pointer;
    display: block;
    width: 100px;
    position: relative;
    top: 11px;
    }
    
    .tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu12Mf_lK6qpzQOOhUe6N4J6q6v3MM1oSsivb-2yNw9ROryVlw42XMYd0_IorBf3sNEpm4ZBsRkcw5x0AYDpByi-KWWzWF9CcX8Gk_t2BXIxDMFuFPHF_JvglRJlsxtNR6Hi7cTnRRGXVW/s1600/button-open.png) no-repeat left 0;}
    .tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxklOw0ukuITJyOVYM_mycT4D7tmIdkOdW3RWl1KjvwITpjqm_qwoTt_Vl3nFBv6TpahvwC63ERf8RAe2XXbKQQbRzq2Y2wubv2KgwuRGH-Ecb2ypY5_gBjVWUvsUSu19AAR_fGCBHmaZ/s1600/button-close.png) no-repeat left 0;}
    .tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu12Mf_lK6qpzQOOhUe6N4J6q6v3MM1oSsivb-2yNw9ROryVlw42XMYd0_IorBf3sNEpm4ZBsRkcw5x0AYDpByi-KWWzWF9CcX8Gk_t2BXIxDMFuFPHF_JvglRJlsxtNR6Hi7cTnRRGXVW/s1600/button-open.png) no-repeat left -19px;}
    .tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxklOw0ukuITJyOVYM_mycT4D7tmIdkOdW3RWl1KjvwITpjqm_qwoTt_Vl3nFBv6TpahvwC63ERf8RAe2XXbKQQbRzq2Y2wubv2KgwuRGH-Ecb2ypY5_gBjVWUvsUSu19AAR_fGCBHmaZ/s1600/button-close.png) no-repeat left -19px;}
    
    #slide-top-panel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }
    #panel {
    width: 100%;
    height: 230px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
    }
    #panel h4 {
    font-size: 16px;
    color: #F2F2F2;
    text-align: center;
    padding: 5px 0 10px;
    margin: 0;
    font-family: GESSTwoMediumRegular;
    }
    #panel p {
    margin: 5px 15px;
    padding: 0px;
    font-family: GESSTwoMediumRegular;
    }
    #panel a {
    text-decoration: none;
    color: #15ADFF;
    }
    #panel a:hover {
    color: white;
    }
    #panel .content {
    width: 960px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: left;
    font-size: 0.85em;
    }
    #panel .content .left {
    width: 280px;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #333;
    }
    #panel .content .right {
    border-right: 1px solid #333;
    }
    #panel .content form {
    margin: 0 0 10px 0;
    }
    #panel .content label {
    float: left;
    padding-top: 8px;
    clear: both;
    width: 280px;
    display: block;
    }
    #panel .content input.field {
    border: 1px #1A1A1A solid;
    background: #545454;
    border-radius: 10px;
    margin-right: 5px;
    margin-top: 4px;
    width: 200px;
    color: white;
    height: 18px;
    }
    #panel .content input:focus.field {
    background: #7F7F7F;
    }
    #panel .content input.button-register {
    display: block;
    clear: both;
    height: 24px;
    width: 94px;
    color: white;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs3JzwafPMYurrs_0Gl_uzMMw8U27QlTfdJpX9uDch62VgUBzv6jN0YmKmjInUrcLl4nfVdjezbyKi-BAYqROoz2mDqo7UxYu1n_XLB1k237WJDYL9LBE2y-LF6TgL_m_GxP8OC71EsY4A/s1600/button-register.png) no-repeat 0 0;
    text-align: center;
    cursor: pointer;
    border: none;
    font-weight: bold;
    margin: 10px auto;
    }
    #sliding-panel {
    width: 160px;
    float: left;
    }
    #sliding-panel2 {
    width: 160px;
    float: right;
    }
    #sliding-panel ul, #sliding-panel2 ul{
    font-family: Arial, Helvetica, sans-serif;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    #sliding-panel ul li a, #sliding-panel2 ul li a {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVKDhOpY5rltYDcfsPe674zwL1V7U5BGXSGPpC4nM9uHbcYgt0dZ3J4NtmN6XrE2RryRlWa5g0ra6ajdxuN8QJbrG2_eMEW8RDKXj12NK1zZr64bwH9RwgCLxvfxZRF6kicHy5V7aNvF-/s1600/star-bullet.png) center left no-repeat;
    margin:0;
    padding:3px 3px 3px 18px;
    }
    #sliding-panel li, #sliding-panel2 li {
    display: inline;
    }
    #sliding-panel a, #sliding-panel2 a{
    color: #999999;
    text-decoration: none;
    font-size: 11px;
    display: block;
    padding: 3px;
    width: 160px;
    }
    #sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
    color: #999999;
    text-decoration: none;
    }
    #sliding-panel a:hover, #sliding-panel2 a:hover {
    color: #FFFFFF;
    }
    
    #search-box22{
    margin-top: 20px;
    }
    
    #search-box22 input[type="text"] {
    float: right;
    background: 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 160px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
    
    #search-box22 input[type="text"]:focus {
    width: 190px;
    }
    
    .about-author {
    width: 100%;
    text-transform: none;
    margin-top: 15px;
    }
    .authorbox {
    overflow: hidden;
    padding: 0;
    width: 100%;
    }
    .authorbox .authorinfo {
    }
    .authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 20%;
    background: #222;
    padding: 5px;
    }
    .authorbox .authorinfo p {
    margin: 0;
    padding: 0 5px;
    text-align: left;
    }
    .authorinfo p a {
    text-decoration:none;
    }
    .authorbox h3 {
    margin: 0;
    display: inline-block;
    }
    h3.boxtitle {
    font-size: 14px;
    font-family: GESSTwoMediumRegular;
    }
    </style>

    <!-- Start sliding panel -->
    <div id='slide-top-panel'>
    <div id='panel'>
    <div class='content clearfix'>
    
    <!-- first section -->
    <div class='left' style='width:240px !important'>
    
    <h4>اهلا بك فى مدونة مطور بلوجر</h4>
    <div class='about-author'>
    <div class='authorbox'>
      <div class='authorinfo'>
    <img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT814LcyLF1_-H-dQWOOd8j970c6ROlZ94bJvOwRk50RpI4Gc18SQ'/>
    <h3 class='boxtitle'>الكاتب</h3>
    <p>محمد نور مدون مغربي مهووس بالتدوين المعلوماتي و التقني و كل ما يتعلق بالنت و التكنولوجيا</p>
    </div>
    </div>
    </div>
    <p align="right" style="margin-top: 10px;">البحث فى المدونة</p>
    <form method="get" action="/search" id="search-box22">
      <input name="q" type="text" size="40" placeholder="ابحث...." />
    </form>
    
    </div>
    
    <!-- second section -->
    <div class='left' style='width:320px !important'>
    <h4>اقسام المدونة</h4>
    
    <div id='sliding-panel'>
    <ul>
    <li><a href='Link URL'>قسم واحد</a></li>
    <li><a href='Link URL'>قسم اتنين</a></li>
    <li><a href='Link URL'>قسم تلاثه</a></li>
    <li><a href='Link URL'>قسم اربعه</a></li>
    <li><a href='Link URL'>قسم خمسه</a></li>
    <li><a href='Link URL'>قسم سته</a></li>
    <li><a href='Link URL'>قسم سبعه</a></li>
    </ul>
    </div>
    
    <div id='sliding-panel2'>
    <ul>
    <li><a href='Link URL'>قسم واحد</a></li>
    <li><a href='Link URL'>قسم اتنين</a></li>
    <li><a href='Link URL'>قسم تلاثه</a></li>
    <li><a href='Link URL'>قسم اربعه</a></li>
    <li><a href='Link URL'>قسم خمسه</a></li>
    <li><a href='Link URL'>قسم سته</a></li>
    <li><a href='Link URL'>قسم سبعه</a></li>
    </ul>
    </div>
    </div>
    
    <!-- third section -->
    <div class='left right' align="center">
    
    <h4>اشترك ليصلك كل جديد</h4>
    <p style="padding:0px 30px;">اشترك الان واحصل على كل جديد فى عالم التدوين لحظة بلحظة </p>
    
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=th3maestro' method='post' target='_blank'>
    <input class='field' name='email' type='text/' value=''/>
    <input name='uri' type='hidden' value='Feed-Name'/>
    <input name='lang' type='hidden' value='en_EN'/>
    <input class='button-register' type='submit' value='اشترك'/></form>
    
    <div align='center' style="clear: both;">
    <a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-tMSUinWm4bQVFF6Zvzi3JC3obieyynt1ngb3tMlywH7GEuqOhahDHge7pZJNYe2Zvf94WYzMb9BN-c6Whpe3K43Trb18um65tDOqz0SUU-2tpYBcq8NoaOOxm6jcxo3m8srn-dVum2N/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
    <a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5r7uam6D4kXHmdi-TLKjxXusDdhpnQ5nAAehRhD-VtUJod9gdmHXwMNyRRvCK5FYjRUZb_43njMsEFFEUaf8K9nSUllWyBBkhl9VkAIdd3rDO5CJfBVsLOmlou8_OOSK-6x-xoZivSny/s1600/RSS.png' style='padding:5px;' width='32'/></a>
    <a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDlTHCZopBbjbcNoJZalhLwF5nq8YRPvP4x3Bk95SP9ybEnPbHUx3zf-xyxwPctIEK1CUqUt-8XNKcY_gRpEkNPGRVScP3ZwnuxQDoXuDM2tjlb2HbXSroxsiCCtK6gNbXCOQ4anlWfNF/s1600/Google-plus.png' style='padding:5px;' width='32'/></a>
    <a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbqX3qQ1iqDVNxJSwCzEegwfN0n-iqBSJJUJpTur6O0hJfEhHAYCeVefwOCQJR7gnrZ4CoqR_gIvE1DFOQdYtn95J3A-nysh9Vn73AUY35d39DfFbxmNhJFHBx96BtULU2D-qO8vcl6B2D/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
    </div>
    
    </div>
    </div>
    </div>
    
    <div class='tab'>
    <ul class='login'>
    <li class='left'/>
    <li>مرحبا بالزائر</li>
    <li class='sep'>|</li>
    <li id='toggle'>
    <a class='open' href='#' id='open'>افتح القائمة</a>
    <a class='close' href='#' id='close' style='display: none;'>اغلق القائمة</a>
    </li>
    <li class='right'/>
    </ul>
    </div>
    </div>