إتقان

                                                 إضغط هنا لمشاهدة كيفية وضع الأكواد والدرس بكامله         

 <style type="text/css">
    .hbfbOuter {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-nW9XDVvejDfttyTtNmCeRYGm8Axu-C0Trf577Sd9aKV5pIZAz_DjvEoc2hfjE7gBhoTQyy-tzPASBo51VuXgv1QnKjXmwkQsYqX4aYmyJol9SI0bZdrbZj1Z-rEjm8KrAuC6WpFC3Y/s1600/hb-custom-facebook-likebox6.png);
        width: 250px;
        padding: 10px 0 10px 10px;
        height: 250px;
        border: 1px solid #CCCCCC;
        -moz-box-shadow: inset 0 0 10px #5E346C;
        -webkit-box-shadow: inset 0 0 10px #5E346C;
        box-shadow: inset 0 0 10px #5E346C;
    }
    .hbfbInner {
        height: 240px;
        overflow: hidden;
    }
</style>

<div class="hbfbOuter">
    <div class="hbfbInner">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhassan.boudri.19&amp;width=242&amp;height=230&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:242px; height:230px;" allowtransparency="true"></iframe>
    </div>
<div style="float:right;margin-right:4%;font-size:x-small;font-family:calibri;"><a href="http://www.helperblogger.com/" target="_blank">Get this widget</a></div></div> 


 <style>
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* CSS Code Start */
    
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 3px;
        /*distance between tabs*/
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border: 1px solid #CCC;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
        border-radius: 3px 3px 0 0;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        border: 1px solid #B7B7B7;
        background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqyelRUyZ5t10jKMXm8dWF-oDTP51j7BUWYeWwWlPUla-wm5G0ALDkpgFk5J3lwVgWr9plO5hCi2ziy5Z8AzgYiVv78WRk3FLAK6fU1oHkHhG-s7cy7vnFI8vjUmhx5sUINfHaG46cpE/s1600/hb-tabbg.gif) 0 -50px repeat-x;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: white;
        border: 1px solid #B7B7B7;
        border-bottom-color: white;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #B7B7B7;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#view1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRNP8trYinT9eGAO3Ep9FC0v00QARuP23q0jPIExVaHB9VchwRggLhXW4gSJ9qCaLG6zfG-aIsSF7tozgcYrlkkbEeI8FwKyd-tB1aU0nFTTZArcuOD8UNce94V_JwcQdXQGfl84LbrM/s1600/helperblogger.com-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view2">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikKGrQmseqJmCLGT8esmkGC7S1NEa8Htrukw7bkOrxsBF5Vqbi5Nrp85zzXOqY8hnNsW9oS3i0uY9dd_H6kI6hGezsK6N_j1GluxaybPx7KPzigZqlG03f2oLT2SmVTznxf2HY4HTyGGc/s1600/helperblogger.com-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view3">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwx1Uv_dvdwQOiihlmCOxaGJuJDrjlaEk0wT5NJKzmRFmqNeg-gttoGpTVR0qAQHYmQI3y47KNr6kRyZlM_rtzsDQ_txNI-0k6P_yt-kM4KE2nrQZJ54tsN2TM4mfzUS3i8zcDIC-tmYE/s1600/helperblogger.com-gplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Gsnu1XfKVtsANzJwHWeAzcDSwOE-XyaDVJ4wZ2zFD-JVsim398wyrce6y7q3AxYYCDMg6f8ART0Jmjy4jPZSWp4xxqBQ4WZv4gtIRgK6_JspVd1aR3BiQe7uh5A9tdofGe-Zf8G-uGY/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="view1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhassa.boudri.19&amp
;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces
=true&amp;header=false&amp;stream=false&amp;show_border=
false&amp;appId=409936535724253" scrolling="no"
 frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
    </div>
    <div id="view2">
        <div id="twitter-box"></div>
        <script>
            var tw_user = 'boudrii1';
            var tw_width = 260;
            var tw_height = 250;
            var no_face = 8;
            (function() {
                var tw_box = document.createElement('script');
                tw_box.type = 'text/javascript';
                tw_box.async = true;
                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
            })();
        </script>
    </div>
    <div id="view3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/105903291004126465850" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="view4">
        <a href="http://pinterest.com/helperblogger/">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
    <div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
    </div>
</div> 

إبحت على هذا الكود ]]></b:skin> وضع قبله أو بعد الكود التالي

 .tips {
font-family: Droid Arabic Kufi;
background: #4E1B3F url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuSFqvjduabWiOFeCflqEyd0bRKmIr1-ILkAM9d4ZA2if1_DwAJkcWRwrnehViKqaZRZB4KIOYOGEPIf04SiCbmS8S-HkeCvWKjpbRqafDfgIWsTguUeN8b787o61_CyfWOtFmwCXNX41/s1600/gh.png') no-repeat right;
color: #fff;}
.dhi_menu {
float: left;
margin: 0 0 0 8px;
padding: 0;
position: relative;
z-index: 9999;
margin-top: 36px;}
.dhi_menu ul {
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;}
.dhi_menu ul li {
float: right;
margin: 3px;
display: block;
padding: 0;
margin-top: 8px;}
.dhi_menu a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0CyN23Pq2jScrHf4xI-Zum_t-uqhgkMDbKAYiJl_O5iHfQC1bNdOSXZovb6zUREeqKVt1WkhAH0oypnv9x9LXHGFdJ_EjYhvbwe5hW0Zg_dkFkCGaK7G8QZA3I3ULge5abaNGtMvh_kw/s1600/tw.png) no-repeat 87%;
background-color: #0ba6f7;}
.dhi_menu a.twitter:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0CyN23Pq2jScrHf4xI-Zum_t-uqhgkMDbKAYiJl_O5iHfQC1bNdOSXZovb6zUREeqKVt1WkhAH0oypnv9x9LXHGFdJ_EjYhvbwe5hW0Zg_dkFkCGaK7G8QZA3I3ULge5abaNGtMvh_kw/s1600/tw.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.share {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj719LyN6GjSRuCq9as2nNndrXiYVnVckE7K1azKu6Fj6rBxtVTHuAIjzLtMcXJbCTKoY9STKUSLpcAzEtxQLeTaWTW26M67CoyZUEl9HPOjY4Q_CBqN99TAgjKzD6WH81t-Yh7gtW1ZfA/s1600/fb.png) no-repeat 87% center;
background-color: #003366;}
.dhi_menu a.share:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj719LyN6GjSRuCq9as2nNndrXiYVnVckE7K1azKu6Fj6rBxtVTHuAIjzLtMcXJbCTKoY9STKUSLpcAzEtxQLeTaWTW26M67CoyZUEl9HPOjY4Q_CBqN99TAgjKzD6WH81t-Yh7gtW1ZfA/s1600/fb.png) no-repeat 87% center;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7rP4BTYd4TQupXrA7ppft51s847BXdqiRMiwG5pQfNURg2YII07Qx6wUOTsODQXF7xNtBfdU7Wu5XXb2UVIiKMaQ6lQY-utu_Pa_lYtUCrbWVECLhxGACSFN44vUV3pCb7RpRWuqIkdY/s1600/g.png) no-repeat 87%;
background-color: #dc311b;}
.dhi_menu a.plus:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7rP4BTYd4TQupXrA7ppft51s847BXdqiRMiwG5pQfNURg2YII07Qx6wUOTsODQXF7xNtBfdU7Wu5XXb2UVIiKMaQ6lQY-utu_Pa_lYtUCrbWVECLhxGACSFN44vUV3pCb7RpRWuqIkdY/s1600/g.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu ul li a {
padding: 10px 30px 10px 10px;
border-radius: 3px;
font: normal 12px tahoma;
float: right;
display: block;
color: #FFF;}
.tips {
line-height: 22px;
min-height: 0px;
font: 16px ges,arial;
padding: 8px 12px 12px;
margin: 5px 0;
text-align: right;
padding-right: 50px;
direction: rtl;
margin-top: 35px;
margin-bottom: 14px;
font-family: Droid Arabic Kufi;
}

الخطوة الاخيرة بحت على هدا الكود ا <div class='post-footer'> ستجد اكتر من واحد فجرب الكل حتى تجد النتيجة المطلوبة تم ضع تحته الكود التالي
 <div class='dhi_menu'>
<ul>
<li>
<a class='twitter' data-via='course4design' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Twitter'>غرد</a>
</li>
<li>
<a class='share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook'>مشاركة</a>
</li>
<li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Google Plus'>إضافة</a>
</li>
</ul>
</div>
<div class='tips'>
بضغطة زر تشارك الفائدة وتدعم هاى تك
</div>

 <div class="ar1web_today_img">
<img alt="قالب seo smile ؟" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI6PNRojFda5CNed2hAncN2bnpNm3HYhS1dlZ0hrhpdK0x0NLM1VUvfRnmrcIbP3MvyqpxqjAhWpVp1q7Lapfzx7IXEkbosCu-62-kKlLqG0FDfabT6fyqban3JB6iS9a9yCcndYsKOAZx/s1600/poetin_sissi_rnw_18887722.png" />
<a href="http://www.di9a.com/2015/02/Amine.Mghari.html"><i class="fa  fa-arrows-alt"></i></a>
<p>تعرف على أمين المغاري مقدم برنامج عابر سبيل
</p>
</div>
<style>
.ar1web_today_img{position:relative;padding-top:5px}.ar1web_today_img img{width:100%;height:200px}.ar1web_today_img a{display:block;width:48px;height:48px;background:rgba(236, 169, 0, 0.76);color:#e23a3e;font-size:20px;text-align:center;line-height:2.6;opacity:0;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);position:absolute;top:76px;left:126px;z-index:1001;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.ar1web_today_img p{position:absolute;bottom:0;left:0;background: rgba(51, 54, 59, 0.71);

text-align: center;padding:12px 29px;margin:0;font-size:15.1px;color:#FFF;}.ar1web_today_img:hover a{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.ar1web_today_img:hover a:hover{color:#333}.ar1web_posts{float:right;width:730px;background:#FFF;margin:24px 0;-webkit-box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;box-shadow:0 0 5px #DDD}.ar1web_post{position:relative;padding:24px;border-bottom:1px solid #EEE}.ar1web_post_title h1{padding:0;margin:0;font-size:24px;font-weight:400}
</style>

هنا تجد تتمة الشرح وكيفية وضع الأكواد
<div class="widget-content">
<div class="screen">
<div class="header">
<h4 style="
    margin: 11px;
">الكاتب</h4>
</div>
<div class="slider">
<div class="header1">
<img class="profilepic" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xaf1/v/t1.0-1/p160x160/10565063_680700702023758_6812102086945431951_n.jpg?oh=5cef483307eac05b249706ec918c9604&oe=55812F0D&__gda__=1434724785_3d21e8002be1185bfda8fff6167bee9f" />
<h3>حسن بودري</h3>
</div>
<div class="header2">
<p>
مدونة دقة مدونة حديتة تهتم بالبرمجة و التصميم و هدفها غناء هذين المجالين في العالم العربي و تقديم دروس في التصميم و البــرمـجة , كــذالك تهتـم بالمـهـووسيـن الـعـرب وتـعـطـــي لـكـل مـهـووس تـعريفــا شخـصيــا لـه وعـلى انجــازاته والمهــووس لا يكون بالضرورة مبرمجا او مصمم فالهوس ميادينه مختلفة ,ونعرض بعض خدماتنا
</p>
</div>
</div>
</div>
<style>

.screen:hover .background {
    opacity:0.5;
}
.slider:hover {
    left:-320px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
body {
  
}
.header {
    width:100%;
    height:49px;
    background:#ed6b4b;
    text-align:center;
    float:left;
    color:#fff;
margin-top: 0px;
}
.profilepic {
    width:64px;
    height:64px;
    border-radius:50%;
    margin-top:20px;
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
    border:2px solid #fff;

}
h3 {
    margin-top:0;
    text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);

}
.screen {
margin: 0 auto;
margin-top: 1px;
width: 316px;
height: 242px;
box-shadow: 0px 2px 6px #999;
position: relative;
overflow: hidden;
background: #333;
}
.slider {
    width:640px;
    float:left;
    left:0;
    position:relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
margin-top: -8px;
}
.background {
    position:absolute;
    width:320px;
    height:auto;
    z-index:0;
    top:60px;
    left:0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.header1, .header2 {
    text-align:center;
    width:320px;
    float:left;
    height:140px;
    color:#fff;
    position:relative;
}
.header2 {
    padding-top:8px;
}
p {
   margin: 10px;
color: #fff;
font-size: 15px !important;
letter-spacing: 0.5px !important;
text-align: right;}
</style>
</div>