أخر الأخبار
recent

اضافة اداة المشاركات الشائعة بشكل جميل جدا

اضافات بلوجر حصرية, اضافات بلوجر, اضافات بلوجر 2016, بلوجر, blogger,

أهلا وسهلا بكم اعزائي الأحباء أقدم لكم اليوم اضافة بلوجر حصرية اضافة اداة المشاركات الشائعة بشكل جميل تتميز بشكلها الرائع والجذاب . 

طريقة تركيب الإضافة في مدونتك

1 _ لوحة تحكم مدونتك > القالب > تحرير html 
بعد ذلك اضغط علي ctrl+f ثم ابحث عن وسم ]]></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://1.bp.blogspot.com/-1YuOK2T_s_o/VncLCyXgyQI/AAAAAAAAAC0/hsB4jHuK8QY/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://web3r.blogspot.com/"><img src="http://1.bp.blogspot.com/-NgyEi3maaSM/VmblRdyKsKI/AAAAAAAAAB0/dzac40mU--k/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://web3r.blogspot.com/"><img src="http://1.bp.blogspot.com/-NgyEi3maaSM/VmblRdyKsKI/AAAAAAAAAB0/dzac40mU--k/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://web3r.blogspot.com/"><img src="http://1.bp.blogspot.com/-NgyEi3maaSM/VmblRdyKsKI/AAAAAAAAAB0/dzac40mU--k/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://web3r.blogspot.com/"><img src="http://1.bp.blogspot.com/-NgyEi3maaSM/VmblRdyKsKI/AAAAAAAAAB0/dzac40mU--k/s640/6.jpg" /><div class="tile-title">هذا مثال لاحد الامثلة التي لا مثال لها</div></a></div>
<div class="tileort"><a href="http://web3r.blogspot.com/"><img src="http://1.bp.blogspot.com/-NgyEi3maaSM/VmblRdyKsKI/AAAAAAAAAB0/dzac40mU--k/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>
اتمني ان تكون الإضافة قد نالك إعجابك وإذا واجهت اي مشكلة فـ باب التعليق مفتوح . 


ليست هناك تعليقات:

إرسال تعليق

يتم التشغيل بواسطة Blogger.