اضافة اداة مواضيع مميزة بتصميم بسيط وانيق للبلوجر

تقييمك للموضوع : التعليقات : 2 الكاتب : seb issam 6:22 ص all ، blogger للإبلاغ عن رابط معطوب اضغط هنا

احصل على هذة الاداة من هنا

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

الله وبركاته

--

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

هذه الاضافة من تصميم مدونة اورتيلكس للمعلوميات لذا اترككم مع المعاينة التالية :

• معاينة

____________

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

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

div#HTML7 {
    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);
}
div#HTML7 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;
}
#HTML7 .widget-content {
    padding: 4px 4px 0 0;
    direction: rtl;
}
#HTML5 .widget-content {
  padding: 4px 4px 0 0;
  direction: rtl;
}
.tile {
  width: calc(49% - 1px);
    margin: 0px 2px 5px 5px;
    position: relative;
    float: right;
}
.tile img {
  width: 100%;
height: 182px;
}
.tile-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);
}
.tile-title:hover {
        background: rgba(44, 62, 80, 0.69);}
@media (min-width: 481px) { .tile-title {font-size: 20px;
    padding: 14px;
    width: 290px;}}
@media (max-width: 480px) { .tile-title {font-size: 17px; padding: 12px;}}
@media (max-width: 360px) {.tile-title {font-size:15px;padding:6px 12px;}}
.tileort {
  width: calc(49% - 1px);
    margin: 0px 2px 5px 5px;
    position: relative;
    float: right;
}
.tileort img {
  width: 100%;
height: 182px;
}
.tileort-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);
}
.tileort-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;}}

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

<h2 class="title">مواضيع مميزة</h2>
<div class="widget-content">
<div class="tileort"><a href="http://profmasterissam.blogspot.com/...html"><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="tile"><a target="_blank" href="http://profmasterissam.blogspot.com/...html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyGSt1BPGuXlTIMKrFte3wwqjBuWDmyCh-trRvCq2KzSROuFy6Bz5pYdGcXjKyWL66sPoYByhSIXXvnHVGS1Br-Cq5uOKFjpLuzXjDNbvfbd_27pUKKbTk2B3btUWLjEYIxpuKa4QfyBV/s640/14.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>

1. اللون الاحمر : رابط التدوينة الاولى
2. اللون البني : رابط صورة التدوينة الاولى
3. اللون الاصفر : وصف التدوينة الاولى
4. اللون الازرق : رابط التدوينة الثانية
5. اللون البنفسجي : رابط صورة التدوينة الثانية
6. اللون الاخضر : وصف التدوينة الثانية