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

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

كيفية تركيب سلايد الذي يعرض اخر المواضيع:

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

]]></b:skin>

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

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:390px}
#slides li{width:50%;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), #slides li:nth-child(5){display:block}
#slides li:nth-child(1) {
  right: 0;
  top: 0;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
  height: 390px;
}
#slides li:nth-child(2) {
  right: 50%;
  width: 25%;
  height: 50%;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
  border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li span.dy {
  display: inline-block!important;
}
#slides li:nth-child(3) {
  right: 75%;
  width: 25%;
  height: 50%;
  border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(4) {
  right: 50%;
  top: 50%;
  width: 25%;
  height: 50%;
  border-left: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(5) {
  right: 75%;
  top: 50%;
  width: 25%;
  height: 50%;
}
#slides li h4 {
  overflow: hidden;
  bottom: 0;
  color: #fafafa;
  width: 100%;
  text-align: right;
  text-transform: uppercase;
  height: 80px;
  line-height: 55px;
  right: 0;
  margin-left: 0;
  padding: 0 15px;
  background-image: linear-gradient(transparent,rgba(0,0,0,0.83));
}
#slides li:nth-child(1) h4 {
  font-size: 20px;
  height: 90px;
}
#slides a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#slides img{display:block;width:100%;height:100%;border:0;padding:0;background-color:#333;-moz-
transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background-position: 50% 40%;
  background-repeat: repeat-x;
}
#slides h4 {
  position: absolute;
  bottom: 40px;
  margin: 0;
  font-size: 13px;
  right: 10px;
  padding: 0;
  color: #f9f9f9;
  z-index: 3;
  line-height: 20px;
  font-weight: normal;
  text-align: right;
  text-transform: uppercase;
}
#slides .label_text {
  font-size: 12px;
  color: #fff;
  bottom: 10px;
  z-index: 3;
  right: 10px;
  position: absolute;
  padding: 3px 6px;
  text-transform: uppercase;
}
span.autname {
  display: none;
}
.label_text:before {
  content: "\f073";
  font: normal normal normal 14px/1 FontAwesome;
  float: right;
  display: block;
  margin-top: 3px;
  margin-left: 5px;
}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

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

</head>

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

<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],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" title="prev"></a><a href="#" id="nextx" title="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();};document.write('')
//]]></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.yoursite.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:5000,
autoplay:true,
tagName:false
});});
//]]></script>

بعدها قم بتغيير رابط مدونتي الذي بلون أزرق في الكود السابق https://www.yoursite.com برابط مدونتك.

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

<div id='featuredpost'/>

بعد انتهاء قم بحفظ القالب وشاهد النتيجة.

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