اضافة اداة اخر المواضيع بتصميم مميز وفريد من نوعه

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

الله وبركاته

في هذه التدوينة سوف اقدم لكم اضافة مميزة لن تجد مثلها على اي موقع اخر لانها من تصميم مدونة اورتيلكس للمعلوميات

اضافة بتصميم انيق وجد احترافي وبالوان متناسقة تم تصميمها لتتلائم مع جميع المدونات دون اخطاء ومشاكل

معاينة

____________

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

توجه الى القالب ثم تحرير html
ابحث عن الوسم ]]></b:skin> وضع الكود التالي فوقه مباشرة

div#HTML7ort {
    font-size: 12px;
    color: #34495E;
    margin: 0px 0px 10px 0px;
    overflow: hidden;
    /* font-family: Kufi, Roboto; */
    background: white;
    border-radius: 4px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
border-radius: 8px 8px 0px 0px;
}
div#HTML7ort h2 {
    line-height: 40px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 17px;
    padding: 10px 70px;
    text-align: right;
    border-bottom: 1px solid #FFFFFF;
    background: #34495E;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 4px;
    width: 596.5px;
    margin-right: 6px;
border-radius: 2px 2px 0px 0px;
}
#HTML7ort .widget-content {
    padding: 4px 4px 28px 0;
    direction: rtl;
}
h8.titleortilex {
    color: #fff;
    line-height: 51px;
    font-weight: 400;
    font-size: 22px;
    padding: 4px 94px 58px 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgubIv8sHsgIoFHfJrI6LCvTRxIxNpi28OyhALGG2EVocgo-4lI1wu9RDf_v2xRHBNxn2fe1gQz0p3aOuEzeGIBfiigwKoPWfkyvK-ObhkmTDcz8tTrgMM0gJ5TbZ6jNqWCMK74ltCLI/s320/1.jpg) center;
    border-radius: 8px 8px 0px 0px;
}
.tileortilex {
  width: calc(49% - 2px);
    margin: 51px -4px -49px 10px;
    position: relative;
    float: right;
}
.tileortilex img {
     width: 69%;
    height: 90%;
}
.tileortilex-title {
  position: absolute;
    top: 44px;
    right: 20px;
    left: 0px;
    bottom: 45px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.tileortilex-title:hover {
        background: rgba(44, 62, 80, 0.69);}
@media (min-width: 481px) { .tileort-title {font-size: 20px;
    padding: 14px;
    width: 290px;}}
@media (max-width: 480px) { .tileort-title {font-size: 17px; padding: 12px;}}
@media (max-width: 360px) {.tileort-title {font-size:15px;padding:6px 12px;}}
.tileortilex-title {
      position: absolute;
    top: 0px;
    right: 104px;
    left: 0px;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.tileortilex-title:hover {
        background: rgba(44, 62, 80, 0.69);}
.tileortilex-title:after {
    content: '\f005';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    top: 0;
    right: 152px;
    bottom: 0;
    position: absolute;
    padding: 22.4px 21px;
    background: #0894D8;
    color: #fff;
    line-height: 34px;
    border-right: 3px double #FFFFFF;
}
a.ortxt {
    text-align: center;
    text-shadow: 5px 5px 0 rgba(0,0,0,0.1);
    color: #fff;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
    font-size: 22.3px;
}
@media (min-width: 481px) { .tileortilex-title {font-size: 16px;
    padding: 11px;
    width: 136px;}}
@media (max-width: 480px) { .tileortilex-title {font-size: 17px; padding: 12px;}}
@media (max-width: 360px) {.tileortilex-title {font-size:15px;padding:6px 12px;}}

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

<div class="widget-content" style="
    padding-left: 12px;
    width: 327px;
">
<h8 class="title"><a class="ortxt" style="
">مواضيع مميزة</a></h8><div class="widget-content">
<div class="tileort"><a href="http://profmasterissam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://profmasterissam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://profmasterissam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://profmasterissam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://profmasterissam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdA0-I0DXPESkkg3a_pzSIN8948V-_9KQOxMThc4qZvNR6eVgtBd4vdBcxka5yoDC_8-AjUWjrjXklZxPu9dNyGS6Wdkdn-qvvsuYaiK8FE29uJpAuVQwKQWjd9q3XJMR4nAWUCoh3RD1/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
</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=638675343712576475&amp;widgetType=HTML&amp;widgetId=HTML7&amp;action=editWidget&amp;sectionId=main" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML7&quot;));" target="configHTML7" 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

اضافة اداة اخر المواضيع بتصميم مميز وفريد من نوعه

اضافة اداة اخر المواضيع بتصميم مميز وفريد من نوعه

المتابعون

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

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

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

صاحب المدونة

مؤلف ؟

تبادل اعلاني

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