مكتبة باحدث واروع الاضافات بمناسبة اقتراب السنة الجديدة 2016

السلام عليكم ورحمة

الله وبركاته

بمناسبة اقتراب السنة الجديدة 2016 والتي لم يتبقى لها سوى بضع ايام احببت ان اقدم لكم في هذه التدوينة تجميعة لافضل واروع وارقى الاضافات من تصميم المدونة تساهم هذه الاضافات في زيادة جاذبية وجمالية موقعك بتصميمها النيق كما لها افادة مهمة بالنسبة للزائر

لن اطيل عليكم اترككم مع المعاينة التالية :

معاينة

____________

تعريف صاحب المدونة

طريقة التركيب:

توجه الى التخطيط ثم اضف اداة html/javascript
بعدها ضع الكود التالي داخل الاداة

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.admin{
        width: 249px;
    height: 236px;
    background: #343434;
    border: 1px solid #131313;
    margin: -2px 5px 0px 0px;
}
.cover{
    height: 85px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKCzq4tG7aG0hS1IlrK2ufp9AvKUe4SBrNknTJzGXn8bAGH8NoQBRYxQPWMyKS6V9av9mQyfQ-JRzB0-Ztj4ZTedpAVc8KhjsMzURVA4sHqlZLDaosmRWEpCrT-DLL_7sxOIyejCRKD4/s320/ortilexxx2016.png) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
            width: 95px;
    height: 74px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOeveYjDFtDgAyE4gGkcAG70GSVPIYvC0sQKbGjU82LRnqOOUSTCG8D5jheIz5HS06xzMT4WYWGsH9u9ebYndKLrzEwyNgjxIfUSZZmhJOWCPafIKSVP7lf6IXi8MAuMH_wDxt-I8y0g/s1600/2ortilexgeek.png) no-repeat;
    border: 3px solid #fff;
    margin: -84px 1px 0px 0px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 95px 74px;
}
.form-info{
    border-bottom: 2px solid #FCFCFC;
    border-top: 2px solid #FCFCFC;
    margin-top: 4px;
    background: #424E5A;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    margin-top: 10px;
    background: #2A2A2A;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
margin-top: -9px;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
liort {
    display: block;
    padding: 0px 25px;
    margin: -5px 0px 0px 0px;
    border-bottom: 1px solid #343434;
    height: 108px;
}
liort a {
    display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #fff;
    font-family: Ta3alamFont;
}
</style>


<div class="admin">


<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">

<ul>

<liort>
<a href="www.almejdoubi.com"> مدون ومصمم مغربي الجنسية عمري 16 سنة مهووس بجديد التكنلوجيا من اهتماماتي تطوير المواقع و العلاقات بين المدونين</a>

</liort></ul>
</div>
<div class="form-contact">


</div>
<div class="form-socail">


<a href="#">
<i class="fa fa-google-plus-square"></i></a>

<a href="#">
<i class="fa fa-youtube-square"></i></a>

<a href="#">
<i class="fa fa-linkedin-square"></i></a>

<a href="#">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/#">
<i class="fa fa-facebook-square"></i></a>


</div>
</div>

اللون الاحمر : رابط صورة الغلاف
اللون الاصفر : رابط الصورة الشخصية
اللون الازرق : الوصف
اللون البنفسجي : روابط المواقع الاجتماعية

المتابعة عبر المواقع الاجتماعية

طريقة التركيب:

توجه الى التخطيط ثم اضف اداة html/javascript
بعدها ضع الكود التالي داخل الاداة

<div class="widget-content">
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.doortilex.join:hover,.doortilex.gplus:hover,.doortilex.facebook:hover,.doortilex.instagram:hover,.doortilex.twitter:hover { background: #696868; }
.doortilex{float:none;margin-top:15px;margin-right:5px;width:32px;height:32px;line-height:32px}
.doortilex a{padding:0;margin:0;width:32px;height:32px;line-height:32px;text-align:center}
.doortilex a i{text-align:center;color:#fff;margin-left: 1px;}
.doortilex a:hover i{color:#fff;margin-left: 1px;}
.doortilex.join{background:#CC181E;}
.doortilex.instagram{background:#406f94;}
.doortilex.gplus{background:#f20000;}
.doortilex.twitter{background:#00baff;}
.doortilex.facebook{background:#516ca4;}
.doortilex a i,.doortilex a:hover i{color:#fff;}
.user-profile {
    background-color: #fff;
    text-align: center;
}
.user-profile>img {
    width: 315px;
    background: white;
    padding: 3px;
    border: 1px solid rgba(198, 207, 213, 0.46);
    height: 135px;
    border-radius: 2px;
    margin-right: -5px;
}
.user-profile .user-img {
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: -70px;
    height: 130px;
    width: 130px;
    position: relative;
}
.user-profile .user-img img {
    width: 120px;
    border: 3px solid #fff;
    margin-top: -48px;
    height: 101px;
}

.user-profile .user-img .user-img-hover {
        background: none repeat scroll 0px 0px rgba(44, 62, 80, 0.77);
    color: #F4F4F4;
    font-size: 25px;
    text-align: center;
    line-height: 4;
    height: 100px;
    width: 119px;
    z-index: 999;
    display: inline-block;
    padding-top: 0px;
    position: relative;
    bottom: 107px;
    transition: all 800ms ease 0s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    margin-right: 2px;
}
.user-profile .user-img:hover .user-img-hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

.user-profile .details {
    display: inline-block;
}
.user-profile .details ul {
    padding: 0;
    margin-bottom: 10px;
    margin-top: -2px;
}
.user-profile .details ul li {
    display: inline-block;
    color: #797979;
    font-size: 16px;
    font-weight: 600;
}
.user-profile .details ul li:last-child {
    margin-left: 0;
}
.user-profile .details ul li span {
    display: block;
    font-size: 28px;
}
.formortilex-info{
    border-left: 2px solid #0894D8;
    border-right: 2px solid #0894D8;
    margin-top: -57px;
    background: rgb(52, 73, 94);
    width: 319px;
    margin-right: -5px;
}
.formortilex-info ul{
    margin: 0;
    padding: 0px;
}
.formortilex-info ul li{
    display: block;
    padding: 2px 25px 0px 0px;
    margin: 0px -21px;
    height: 37px;
}
.formortilex-info ul li img{
    display: block;
    float: right;
    padding: 9px;
    height: 18px;
    width: 18px;
}
.formortilex-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #ffffff;
font-family:Ta3alamFont;
}
.formortilex-info ul li a:hover{color:#fff;}
.form-contact{
    margin-top: 10px;
    background: #2A2A2A;
}
</style>
<div class="user-profile">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYXFy-4VPKHUxwnuuKaeTzSwjQ7_KsClfIxYntNXxqKZD2jlCj57tZ2Mnda78k1vUFi3A7-hO4guDSGRMY8ew6nrfAi1pIu0VH_2a5djcznMJiJ0MxiPFjW0-OXiBceNQnZDR0qStd2o/s320/mistralmedia-epublicite.jpg" />
                    <div class="user-img">
                       <a href="#" target="_blank">
                        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNNoQ0FWU8omxkXQR20w1u22wGPfUyWwrSvjOBsVYESBuxs8OeSP7-koMvn_Hhbkahnmn-0BHEclTNiwOz7u6qbvQ6RNt5Tp-HYxYY6Y5TFkPKsvGT70pbx1XjV1Ai7w8Rm2nF9PH-fLA/s1600/1ortilexgeek.png" />
                        <div class="user-img-hover">
                            <i class="fa fa-user fa-lg"></i>
                        </div></a>
                    </div>
<div class="formortilex-info">
<img src="https://cdn4.iconfinder.com/data/icons/gloss-rectangle-flags/180/flag-nation-country-morocco-128.png" style=" float: left; width: 25px; margin-left: 6px; position: relative; top: 12px; margin-right: 15px; " title="images" alt="images" />
<ul>


<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP_aQp0GRF_GJ-EMLjXkMdyrayWh0cVtL_IhEUBvmZOcEEnnupYacbx1a9-fKpJBMy_FxbBwvT6kkcWdIDd9aKq4Dz_xbqJ4iiaSNoFkPxM_UwDLRGkxUgRUOGjgpZTfrie1-Rnai5iPQU/s1600-r/users81.png" />

<a href="https://www.facebook.com/adnmej">عصام   l المشرف عن المدونة</a>
</li>





</ul>

</div>
                    <div class="details">
                      <ul>

<li class="doortilex join"><a href="https://www.youtube.com/channel/*" rel="nofollow" target="_blank" title="اشترك بالقناة"><i class="fa fa-youtube"></i><span class="inv"></span></a></li>
<li class="doortilex instagram"><a href="https://instagram.com/*" rel="nofollow" target="_blank" title="تابعنا على أنستجرام"><i class="fa fa-instagram"></i><span class="inv"></span></a></li>
<li class="doortilex twitter"><a href="https://twitter.com/ortilex" rel="nofollow" target="_blank" title="تابعنا على تويتر"><i class="fa fa-twitter"></i><span class="inv"></span></a></li>
<li class="doortilex gplus"><a href="https://plus.google.com/*" rel="nofollow" target="_blank" title="تابعنا على جوجل+"><i class="fa fa-google-plus"></i><span class="inv"></span></a></li>
<li class="doortilex facebook"><a href="https://www.facebook.com/th3.1ssam" rel="nofollow" target="_blank" title="تابعنا على فيسبوك"><i class="fa fa-facebook"></i><span class="inv"></span></a></li>

</ul>
                </div></div>
</div>

اللون الاحمر : رابط صورة الغلاف
اللون الاصفر : رابط الصورة الشخصية
اللون الازرق : روابط المواقع الاجتماعية

اداة لابراز احد المواضيع

طريقة التركيب:

توجه الى التخطيط ثم اضف اداة html/javascript
بعدها ضع الكود التالي داخل الاداة

<div class="widgetortilex"><br /><style>
.widgetortilex {
    background: #34495e;
width: 322px;
}
.widgetortilex .widget-content {
    padding: 13px;
    text-align: justify;
    direction: rtl;
    font-size: 15px;
    color: #fff;
}
.widgetortilex span {
    font-weight: bold;
color: #0894D8;
}
.ortilex-more {
    border-top: 3px solid #34495E;
    text-align: right;
    font-size: 13px;
    clear: both;
    background: white;
    border-bottom: 3px solid #34495E;
    border-left: 3px solid #34495E;
    border-right: 3px solid #34495E;
}
.ortilex-more:before {
        content: '\f005';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    top: 925px;
    right: 801px;
    bottom: -201px;
    position: absolute;
    padding: 0.4px 13px;
    background: #0894D8;
    color: #fff;
    line-height: 37px;
}
.ortilex-more a {
        color: #34495e;
    padding: 12px 9px;
    display: block;
    width: 212px;
    margin-right: 50px;
}
.widget-item-control {
    float: right;
    height: 20px;
    margin-top: -20px;
    position: relative;
    z-index: 10;
}
.item-control {
    display: none;
}
.widget-item-control a {
    opacity: .5;
}
.item-control a, .item-action a {
    text-decoration: none !important;
}
.quickedit {
    cursor: pointer;
}
.widget .widget-item-control a img {
    border: none;
    padding: none;
    background: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -ie-box-shadow: none;
    box-shadow: none;
}


</style>
<div class="ortilex-image"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" style="width: 314px;height: 172px;margin-top: -13px;margin-right: 4px;"/></div>
<div class="widget-content">
<span>هذا النص  </span>هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات
</div>
<div class="ortilex-more"><a href="https://profmasterissam.blogspot.com/" target="_blank">اضغط هنا لقراءة المزيد</a></div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=363509572487980588&amp;widgetType=HTML&amp;widgetId=HTML2&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML2&quot;));" target="configHTML2" title="تحرير">
<img alt="" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>

اللون الاحمر : رابط الصورة
اللون الاصفر : الوصف
اللون الازرق : رابط التدوينة

اورتيلكس للمعلوميات

Pages

مكتبة باحدث واروع الاضافات بمناسبة اقتراب السنة الجديدة 2016

مكتبة باحدث واروع الاضافات بمناسبة اقتراب السنة الجديدة 2016

تعريف صاحب المدونة

المتابعة عبر المواقع الاجتماعية

اداة لابراز احد المواضيع

المتابعون

معلومات عن التدوينة

تابعونا عبر المواقع الاجتماعية

اعلن هنا مجانا

صاحب المدونة

مؤلف ؟

تبادل اعلاني

زوارنا حول العالم