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

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

اضافة سلايد شو احترافي و متجاوب لمدونتك:

* أولا قم بدخول لمدونتك.

* بعدها انتقل الى التخطيط.

* ثم بعدها قم بإضافة آدة ثم اختر HTML/JavaScript.

* الان قم بنسخ الكود التالي والصقه داخل آدة HTML/JavaScript.

<style type="text/css">

#top-main{position:relative}

#top-main .widget{border:0;padding:0 0 22px}

#top-main h2{position:absolute;left:-9999px}

#slides li {

display: none;

background-color: white;

padding: 4px;

border: 1px solid #CECECE;

-webkit-border-radius: 3px;

margin-top: 0;

-moz-border-radius: 3px;

-o-border-radius: 3px;

border-radius: 3px;

position: absolute;

}

#slides li:nth-child(1) .overlayx {

background-position: 0 0;

}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}

#slides ul{height:275px}

#slides li{width:49.9%;height:100%;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}

#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}

#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{width:100%;height:100%}

#slides .overlayx {

position: absolute;

top: 0;

left: 0;

border: 4px solid #fff;

width: 100%;

height: 100%;

z-index: 2;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lG330-gqTjgLuDm_huohl0QN2W7-QajHkbrrnExvFiGR-6Wyu3hKcT4havFDdV26J5I9jSSOut7bq1G5evRu4Yskr1mVqLYVH89ZCpR3Ufns5w5DkAYPY-VtFhE8NSvxn04SobsOLPk/s1600/cnmubg-fade.png);

background-position: 70% 70%;

background-repeat: repeat-x;

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

-o-transition: all .4s ease-in-out;

-ms-transition: all .4s ease-in-out;

transition: all .4s ease-in-out;

}

#slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}

#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}

#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}

#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

#buttons{margin: 0px auto;text-align: center;width: 10%;}

#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}

#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}

@media only screen and (max-width:600px){

#slides ul{height:600px}

#slides li:nth-child(1){width:100%;height:49.8%}

#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}

#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}

#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}

}

#slides .overlayx {

position: absolute;

top: 0;

left: 0;

border: 4px solid white;

width: 100%;

height: 100%;

z-index: 2;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lG330-gqTjgLuDm_huohl0QN2W7-QajHkbrrnExvFiGR-6Wyu3hKcT4havFDdV26J5I9jSSOut7bq1G5evRu4Yskr1mVqLYVH89ZCpR3Ufns5w5DkAYPY-VtFhE8NSvxn04SobsOLPk/s1600/cnmubg-fade.png);

background-position: 60% 60%;

background-repeat: repeat-x;

}

</style>

<div id="featuredpost">

</div>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"https://www.yorsite.com",

MaxPost:15,

idcontaint:"#featuredpost",

ImageSize:300,

interval:7000,

autoplay:true,

tagName:false

});

});

//contnue

function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://softglad.at.ua/images/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};
function rotate() { $('#nextx').click();}
//]]></script>

لتعديل على الكود التالي لا تنسى إستبدال الرابط أزرق www.yoursite.com الذي بلون أحمر برابط مدونتك. ثم قم بحفظ آداة ثم قم بمشاهدة النتيجة عملك.

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

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