سلايد شو إحترافى لعرض أخر المواضيع

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

سلايد شو إحترافى لعرض أخر المواضيع

شرح التركيب سلايد شو لعرض أخر المواضيع:

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

</b:skin>

ثم ضع فوقه الكود التالي.

.LatestTitle {

z-index: 70;

width: 32px;

height: 140px;

position: absolute;

right: -7px;

top: 10px;

background-image: url(https://2.bp.blogspot.com/-RP0njwFlHrY/V69RU9X6SHI/AAAAAAAAJYs/WT8QccQzKLgnQWpJXESRX2R_jYrMBC0CwCLcB/s1600/LatestTitle.png);

}

.recent-layout .box-title h2.title{font:$(titles.font);display:inline-block}

.more-link{height:20px;line-height:20px;padding:0 5px;margin-top:7px;font-size:11px;color:#FFF;background-color:rgba(255,255,255,0.32);border-radius:5px}

.more-link:after{font-family:fontawesome;font-size:9px;vertical-align:middle}

.box-title{margin-bottom:15px;box-shadow:rgba(0,0,0,.18) 2px 5px 5px 0;background:linear-gradient(to bottom,#3a6ca5 10%,#102a60 50%,#031e5f 51%,#255992 100%);border-radius:5px 5px 0 0}

.box-title h2{display:inline-block}

.box-title h2 a{color:#FFF;font-weight:100;font-size:15px;text-transform:uppercase;display:block;}

.box-title h2 a:before{content:”f1ea”;font-family:fontawesome;font-size:16px;vertical-align:middle;font-weight:400}

.recent-date:before{content:’f073′;font-family:fontawesome;color:#bbb}

.recent-date{color:#999;font-weight:400;font-size:12px}

.recent-author:before{content:’f007′;font-family:fontawesome;color:#bbb}

.recent-author{color:#999;font-weight:400;font-size:12px}

.intro-loader{position:absolute;top:0;width:100%;height:100%}

.intro{position:relative;padding:10px 10px 0 10px;background-color:#FFFFFF;box-shadow:0 0 4px rgba(0,0,0,0.2);border-radius:2px}

.intro-loader .fa{position:absolute;top:50%;left:50%;margin-left:-10px;margin-top:-10px;font-size:20px;color:#222}

.intro .widget{margin-bottom:10px!important;overflow:hidden}

.intro h2{display:none;display:none}

.intro .rcp-thumb{width:100%;height:215px;display:block}

.intro li:hover .rcp-thumb{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}

.intro .rcp-title{font:$(titles.font);font-size:16px}

.intro .rcp-thumb:after{content:no-close-quote;position:absolute;bottom:0;width:100%;height:151px;opacity:.8}

.intro li{height:183px;position:relative;padding:.1px;overflow:hidden;background:#111;width:31.90%;margin:0 0 10px 0;transition:all .4s;border:3px solid #fff;box-shadow:0 0 3px 0 rgba(0,0,0,0.71);margin-top:1px;margin-left:1px}

.intro li:nth-child(2){margin-bottom:20px}

.intro li:first-child{height:385px;background:#111;width:65.9%;padding:0;transition:all .4s;border:3px solid #fff;box-shadow:0 0 3px 0 rgba(0,0,0,0.71);margin-right:1px;margin-top:1px}

.intro li:first-child .rcp-thumb{height:450px}

.intro li:first-child .rcp-title{font-size:25px}

.intro .post-panel{position:absolute;bottom:20px}

.intro .rcp-title a{color:#FFF;font-weight:700;position:relative;bottom:10px;line-height:14px;}

.intro .rcp-title a:hover{color:#fff;transform:scale(1.1);-webkit-transition:all .3s ease;opacity:.5}

.intro li:first-child .rcp-title:hover{margin-bottom:10px}

.intro .rcp-title:hover{margin-bottom:10px}

.intro .recent-date:before{color:#bbb}

.intro .recent-date{color:#bbb}

.intro .recent-author:before{color:#bbb}

.intro .recent-author{color:#bbb}

.intro .post-tag{text-transform:uppercase;font-weight:700;background:rgba(0,0,0,0.3);display:inline-block;color:#fff;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2;border-radius:5px}

* الأن وبنفس الطريقة السابقة أعد البحث عن الكود التالي الذي عادة ما يتواجد في اخر القالب.

</body>

ثم ضع فوقه الكود التالى. لقد وضعنا الكود في ملف خاريجي بسبب حجمه الكبير نسبيا لهذا يمكنك تحميله من موقع ميديا فاير.

* و الأن مع الكود الذى يعمل على ظهور السلايد، قم بوضعه في اي مكان تريده فى مدونتك، واذا اردته فوق المواضيع فى مدونتك يمكنك وضعه فوق هذا الوسم.

post-wrapper

واذ لم تجده قم بالبحث عن هذا الوسم.

main-wrapper

عند ايجاده ضع الكود التالي فوقه.

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>
<div class='intro' id='intro'>
<span class='LatestTitle'/>
<b:section class='intro-sec' id='intro-sec' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML452' locked='true' title='' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>random</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<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>

هذا السلايد شو يظهر فى الرئيسية فقط، واذا اردت ان يظهر في كل الصفحات قم بحذف الوسم (السطر) الذي في البداية وسطر الذي في النهاية. ثم قم بحفظ القالب.

* عند الانتهاء قم بذهاب الى التخطيط في مدونتك وسوف تجد آداة جديدة ، قم بوضع هذا الوسم. بداخلها.

random

ثم احفظ إضافة ، ومبروك عليك السلايد شو الجديد لمدونتك. كان هذا كل شيء اتمنى ان تنال التدوينة اعجابكم. وأخر الكلام ، سلام.

تعليقات