سلايد شو احترافي يعرض آخر المواضيع
مرحباً بك على نكهة التقنية ,يرجى استخدام الزر, Ctrl+C لنسخ الأكواد من مدونتنا, شكرا على زيارتكم ^^ .
السلام عليكم ورحمة الله تعالى وبركاته
البوم عدنا اليكم مجددا بدرس جديد وحصري عن كيفية اضافة سلايدر شو احترافي وتلقائي ويعرض آخر المواضيع كما انه سريع جدا ومن مميزات السلايدر أنه أنيق وسريع حيث قررت نشره بعد طلب بعض الاشخاص لما رأوه في قالب نيو بوك الذي نشرته في مكتبة المدون ولن اطيل عليكم الكلام لذى نمر الى المعاينة وشرح التركيب.
معاينة السلايدر 
اضغط للمعاينة
شرح طريقة التركيب 
  1. أول شيء قم بالذهاب الى تحرير قالب مدونتك
  2. ثم قم بوضع هذه الأكواد فوق الوسم ]]></b:skin>
/*main slider by nak1ha */ div#slider-wrpps .mag-thumb{ border-top: 4px solid #ff5722; height:450px} div#slider-wrpps .mag-thumb a{ width:100%; display:block; height:100%} #slider-wrpps li{ position:relative} #slider-wrpps .mag-content{text-align:center; position:absolute; bottom:0; z-index:9; padding:29px; padding-top:37px; display:block; background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,0.9)); background-image:-moz-linear-gradient(transparent,rgba(0,0,0,0.9)); background-image:linear-gradient(transparent,rgba(0,0,0,0.9)); overflow:hidden; vertical-align:middle; right:0; left:0} } #slider-wrpps h3.mag-title{ font-weight:100; font-size:19px} #slider-wrpps h3.mag-title a{color: #fff; font-weight: 100; font-size: 20px; font-family: Ta3alamFont;} #slider-wrpps .recent-meta{ margin-top:8px; margin-bottom:4px} #slider-wrpps a.mag-tag{ position:absolute; top:12px; left:12px; color:#fff; padding:8px 10px; border-radius:3px; font-size:18px; display:-webkit-inline-box; z-index:99; background:#ff5722; font-family: Ta3alamFont;} div#slider-wrpps{ margin-bottom: 8px;overflow:hidden ;position:relative;width:99;} #slider-wrpps p.mag-sum:after{ content:"\f10d"; font-family:fontawesome; margin-right:4px} #slider-wrpps p.mag-sum:before{ content:"\f10e"; font-family:fontawesome; margin-left:4px} #slider-wrpps p.mag-sum{ color: #e6e6e6; font-size: 15px; font-family: Ta3alamFont;} #slider-wrpps .recent-meta span.recent-author:before{ content:"\f007"; font-family:fontawesome; margin-left:5px; display:inline-block} #slider-wrpps span.recent-date:before{ content:"\f017"; font-family:fontawesome; margin-left:5px; display:inline-block} #slider-wrpps .recent-meta span{ color:#dcdcdc; font-size:15px; display:inline-block; margin-bottom:6px; margin-left:12px; font-family: Ta3alamFont;} #slider-wrpps .owl-controls .owl-prev, #slider-wrpps .owl-controls .owl-next{ display: inline-block; background: #ff5722; width: 35px; margin-top: 1px; text-align: center; color: #fff; height: 35px; line-height: 34px; border-radius: 4px; font-size: 20px; margin-left: 5px;} .slide-texte { border-bottom: 3px solid #ff5722; display: block; text-align: center; font-size: 21px; line-height: 45px; color: #FFFFFF; border-radius: 4px; font-weight: normal; background: #1b1b23; box-shadow: 0px 0px 5px -3px #000; margin-bottom: 8px; }
  1. ثاني خطوة وهي الاهم وهو عليك اختيار مكان مناسب لوضع السلايدر
  2. وافضل مكان هو فوق المشاركات
  3. ولمن لم يستطع تطبيق هذه الخطوة فباب التعليقات مفتوح وسنجيب في اسرع وقت
  4. وهذا هو الكود
<b:if cond='data:blog.url == data:blog.homepageUrl'> <a class='slide-texte'>سلايدر تلقائي</a> <b:section class='slider-wrpps' id='slider-wrpps'> <b:widget id='HTML111' locked='false' title='' type='HTML' version='1' 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>
</b:if>
  1. ثم بعد ذلك قم بوضع هذا الكود فوق الوسم </head>
<link href='https://cdn.rawgit.com/th3littleprof/elprof/master/ca.css' rel='stylesheet' type='text/css'/><script src='https://cdn.rawgit.com/th3littleprof/elprof/master/ca.js'/>
  1. أما الخطوة الأخيرة وهي عبارة عن اكواد الجافا سكريبت ويمكنك تحميل الأكواد من هنا
  2. وهي توضع فوق الوسم </body>
  3.  ثم قم بحفظ العمل 
  4. واخيرا عليك الانتقال الى التخطيط حيث ستجد اضافة جديدة
  5. قم بتحريرها وضع بها الكود التالي
[تسمية][sidebarcarousel]
  1. ثم غير تسمية بالتسمية التي تريدها وقم بعمل حفظ مجددا
  2. ومبروك عليك السلايدر 

اذا كانت هذه اول زيارة لك للمدونة فلا تنسى الانضمام لمتابعتها من هنا ليصلك جديد المدونة 
في أمان الله
سلايد شو احترافي يعرض آخر المواضيع

سلايد شو احترافي يعرض آخر المواضيع

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

  1. عندما اضع التسمية وادهب لئرى السلايدر تضهر لي عاده
    ---------------------------------------------------------------------------------------------
    سلايدر تلقائي
    ---------------------------------------------------------------------------------------------
    [افلام][sidebarcarousel]

    ردحذف

جميع الحقوق محفوظة نكهة التقنية | تصميم : الروسافي عمر