كود الماسكي لإخفاء رقم الهاتف عند الاتصال بأي شخص

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

طريقة التركيب سلايد شو تلقائي متجاوب لمدونات بلوجر:

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

]]></b:skin>

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

.devt-slider{background:#fff;position:relative;margin-top:2px;}
.devt-slider ul{clear:both;list-style:none}
.devt-slider ul li{height:260px;position:relative}.devt-slider ul li a{text-decoration:none;display:inline-block;height:100%;width:100%;position:relative}
.devt-slider ul li a img{display:block;position:relative;height:100%;width:100%}
.devt-slider ul li a:after{transition:all 0.3s ease-in-out;content:"";position:absolute;width:100%;height:100%;z-index:1000;top:0;right:0;background:rgba(42, 94, 121,0.2)}
.devt-slider ul li a div{-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:100000;display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;height;auto;position:absolute;color:#ddd;bottom:0px;right:0;text-align:right;
background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.5));
background-image: linear-gradient(transparent,rgba(0, 0, 0,0.5));
overflow: hidden;transition:0.2s;vertical-align:middle;text-align:right;}
.devt-slider ul li a:hover div{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));
padding-bottom:20px;}
.devt-slider ul li a div h4{font-size:14px;font-family:"Droid Arabic Naskh",tahoma;color:#eee;}
.devt-slider ul li a div i,.devt-slider ul li a div span{font-size:10px;direction:rtl;display:inline-block}
.devt-slider ul li a div span{padding-left:10px;font-size:11px;font-family:"Droid Arabic Naskh",tahoma}
.devt-slider ul li a div i{padding-left:4px}
.devt-slider ul li a:hover:after{background:rgba(61,61,61,0);)}
.devt-slider .owl-nav{text-align:center;width:100%;height:0}
.devt-slider .owl-nav div{color:rgba(255,255,255,0.78);display:inline-block;font-size:55px;opacity:.9;text-shadow:2px 2px 9px rgba(0,0,0,0.65);width:30px;transition:0.3s}.devt-slider:hover .owl-nav div{opacity:1}.devt-slider .owl-nav div:hover{color:#fff}
.devt-slider .owl-prev{position:absolute;right:10px;bottom:40%;}
.devt-slider .owl-next{position:absolute;left:10px;bottom:40%;}
.devt-slider .owl-prev:before{content:"\f105";font-family:fontawesome}.devt-slider .owl-next:before{content:"\f104";font-family:fontawesome}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}
.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}

* اعد البحث عن الوسم التالي.

</body>

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

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

* قم بالبحث مرة اخرى عن الكود التالي.

<div id='main-wrapper'>

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:section class='devt-slider' id='devt-slider' showaddelement='no'>
      <b:widget id='HTML201' locked='true' title='' type='HTML' visible='true'>
        <b:includable id='main'>
           <div class='widget-content'>
             <data:content/>
           </div>
           </b:includable>
      </b:widget>
    </b:section>
 </b:if>
</b:if>

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

<ul></ul>

الان كل ما عليك فعله هو حفظ المظهر ثم قم بعرض مدونتك وشاهد النتيجة. في حال لم تظهر اضافة معناه ا مدونتك لا يوجد بها مكتبة الجي كويري في مدونتك وقد كنا طريقة اضافتها.

ملاحظة: في حال لم تظهر لك اسهم التنقل وظهرت على شكل مربع فهذا يعني ان مدونتك لاتوجد بها مكتبة الفونت اوسم ويمكنك معاينة التدوينة التي نشرح فيها كيفية اضافة مكتبة font awesome لمدونة بلوجر.

بهذا نكون قد وصلنا الى نهاية تدوينة اليوم. اتمنى ان يكون هذا الشرح مفيد لكم. و لا تنسى اذا واجهت اي مشكلة في التركيب السلايد شو يمكنك تركه في تعليق وسيتم الرد عليك في اقرب وقت.