-->

الخميس، 12 أكتوبر 2017

واحدة من أفضل إضافات بلوجر هي عرض المواضيع حسب التسميات  التي يمكن استعمالها في الصفحة الرئيسية لموقعك ، حيث يمكنك استعراض تديونات قسم معين من الموقع بشكل خرافي و إحترافي مع هاته الإضافة الأكثر من جميلة .

في البداية يمكنك معاينة السلايد شو على الموقع التالي :

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

أولا قم بتحرير القالب ثم Ctrl+f و ابحث عن وسم ]]></b:skin>  و ضع الكود التالي قبله :

.recent-posts-title h2 {border-radius: 8px 8px 0px 0px;background-color: #444;color: #fff;padding: 9px 11px;margin-bottom: 0px;font-size: 16px;border-bottom: 3px;line-height: 25px;text-align: right;font-weight: 700;font-family: Mahdi-font;}
.recent-posts-title a#more {float: left;line-height: 18px;display: block;background: #ff8b18;color: #fff;font-weight: 700;font-size: 18px;padding:0px 11px;border-radius: 3px;padding-bottom: 12px;}
div#main-content2 .HTML{margin-bottom:14px;width: 85.5%;margin: 0 auto;z-index: 1;}
div#main-content2 .column .block-columen:first-child .mag-thumb a{height:408px}
div#main-content2 .column .widget-content{background:#fff;  padding:12px 12px;  overflow:hidden}
div#main-content2 .column .block-columen:first-child{height:408px;  margin-left:1%}
div#main-content2 .column .block-columen{height:200px;  float:right;  width:49.5%;  position:relative;  margin-bottom:1%;  overflow:hidden}
div#main-content2 .column .block-columen .mag-thumb a{width:100%;  height:200px;  display:block;  overflow:hidden;  position:relative}
div#main-content2 .column .block-columen .mag-thumb{height:100%}
div#main-content2 .column .mag-content{position:absolute;  bottom:0;  z-index:99999;  padding:20px;  display:block;  background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.7));  background-image:-moz-linear-gradient(transparent,rgba(0,0,0,.7));  background-image:linear-gradient(transparent,rgba(0,0,0,.7));  right:0;  left:0}
div#main-content2 .column .block-columen:nth-child(4){width:100%}
div#main-content2 .column .mag-content .mag-title a{color:#fff; font-size: 19px; font-weight: 100;}
div#main-content2 .column .mag-content .recent-meta >span{display:inline-block;  color:#e2e2e2;  font-size:14px;font-weight:600;  margin-left:11px}
div#main-content2 .column .mag-content .recent-meta >span:before{width:10px;  height:10px;  background:#e2e2e2;  border-radius:50%;  content:"";  display:inline-block;  margin-left:6px}

الان قم بالبحث عن وسم </body> و ضع الكود التالي قبله :

.recent-posts-title h2 {background-color: #243750;color: #fff;padding: 8px 6px;margin-bottom: 14px;font-size: 16px;border-bottom: 3px;line-height: 25px;text-align: right;font-weight: 700;font-family: Mahdi-font;}
.recent-posts-title a#more {float: left;line-height: 33px;display: block;background: #fff;color: #243750;font-weight: 100;font-size: 17px;padding: 0 10px;border-radius: 3px;}
div#main-content2 .HTML{margin-bottom:14px}
div#main-content2 .column .block-columen:first-child .mag-thumb a{height:408px}
div#main-content2 .column .widget-content{background:#fff;  padding:12px 12px;  overflow:hidden}
div#main-content2 .column .block-columen:first-child{height:408px;  margin-left:1%}
div#main-content2 .column .block-columen{height:200px;  float:right;  width:49.5%;  position:relative;  margin-bottom:1%;  overflow:hidden}
div#main-content2 .column .block-columen .mag-thumb a{width:100%;  height:200px;  display:block;  overflow:hidden;  position:relative}
div#main-content2 .column .block-columen .mag-thumb{height:100%}
div#main-content2 .column .mag-content{position:absolute;  bottom:0;  z-index:99999;  padding:20px;  display:block;  background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.7));  background-image:-moz-linear-gradient(transparent,rgba(0,0,0,.7));  background-image:linear-gradient(transparent,rgba(0,0,0,.7));  right:0;  left:0}
div#main-content2 .column .block-columen:nth-child(4){width:100%}
div#main-content2 .column .mag-content .mag-title a{color:#fff; font-size: 19px; font-weight: 100;}
div#main-content2 .column .mag-content .recent-meta >span{display:inline-block;  color:#e2e2e2;  font-size:14px;font-weight:600;  margin-left:11px}
div#main-content2 .column .mag-content .recent-meta >span:before{width:10px;  height:10px;  background:#e2e2e2;  border-radius:50%;  content:"";  display:inline-block;  margin-left:6px}

الكود الاخير يمكنك وضعه في اي مكان تريد سواء قبل مواضع المدونة او بعدها

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='labels-content'>
  <b:section class='section' id='main-content2'>
  <b:widget id='HTML345' locked='false' title='تصميم' type='HTML' visible='true'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
  </div>
  </b:if>

التعديل الاخير هو الذهاب الى التخطيط و ستجد صندوق جديد ضع به الكود التالي :

column/حلقات/4 
يمكنك تغيير حلقات بالقسم الذي تريد إظهاره من موقعك الخاص و بعدها قم بحفظ و مبروك عليك الإضافة . 
0 تعليقات على " أسهل طريقة لإضافة سلايدشو إحترافي الإصدار الثاني يقوم بعرض مواضيع المدونه تلقائيا "

جميع الحقوق محفوظة ل سلسلة المحترف