سلايد بلوجر Slide Blogger او عرض المقالات بالمقدمه جوجل سلايدز

جوجل سلايدز (بالإنجليزية: Google Slides)‏ أو العروض التقديمية من جوجل عبارة عن برنامج عرض تقديمي مضمن كجزء من مجموعة أدوات تحرير مستندات جوجل المجانية القائمة على الويب.
نبذة
عبارة عن برنامج عرض تقديمي مضمن كجزء من مجموعة أدوات تحرير مستندات جوجل المجانية المستندة إلى الويب والتي تقدمها جوجل، تشمل الخدمة أيضًا مجموعة أدوات تحرير جوجل، متوفر كتطبيق ويب ، وتطبيق جوال وكتطبيق سطح مكتب على نظام التشغيل كورم أو إس
تاريخ
في سبتمبر 2007، أصدرت جوجل برنامج جوجل سلايدز.
في مارس 2010 ، استحوذت Google على DocVerse، وهي شركة تعاون عبر الإنترنت للمستندات سمحت بالتعاون عبر الإنترنت بين العديد من المستخدمين على مايكروسوفت باوربوينت وتنسيقات المستندات الأخرى المتوافقة مع مايكروسوفت أوفيس مثل مايكروسوفت وورد ومايكروسوفت إكسل.
في يونيو 2012، استحوذت Google على كويك أوفيس، وهي مجموعة إنتاجية مجانية مملوكة للأجهزة المحمولة
https://www.google.com/slides/about/

موضوع: جرب سلايد 1 الجمعة يوليو 22, 2022 7:23 pm

البحث
</head>
وضع الكود التالي فوق مباشرة

اقتباس :

<if cond="data:view.isPost">
<link defer href="/ajax/libs/owlcarousel2/2-2-1/assets/owl.carousel.css" rel="stylesheet">
<style>
/*<![CDATA[*/
.img-box{clear:both;box-shadow:0 0 8px 0 rgba(0,0,0,.06),0 1px 0 0 rgba(0,0,0,.02);margin: 62px auto}
.title-box-img{display:block;position:relative;margin-bottom:0;color:#0076fe;font-weight:500;text-align:center;background:#fdfdfd;line-height:40px;padding-bottom:2px;border-bottom:1px solid #eee}
.title-box-img i {margin: 0 5px;}
.pics-content{padding:20px;background:#fff}
.picitem {height: 182px}.pics-content img{width:100%;height:100%}
/*]]>*/
</style>
</if>

البحث
</body>
وضع الكود التالي فوق مباشرة

اقتباس :

<if cond="data:view.isPost">
<tag name="srcipt" src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/owlcarousel.js" type="text/javascript"></tag>
<script type="text/javascript">
//<!le_img ='[color=#FF0000]صور الموضوع';
var postclass='post-body';
$("."+postclass).each(function(){for(var i="<div class='title-box-img'>
<i class='fa fa-camera'/>"+title_img+"</div>
",s="<div class='img-box'>
"+i+"<div class='pics-content'>
",e="",a=$(this).find("img"),c=a.length,l=0;c>l;l++){var t=a[l].src.replace("/s72-c/","/w300/").replace(/lh[0-9]+.googleusercontent.com/,"https://1.bp.blogspot.com/").replace("/s640/","/w300/")
e+='<div class="picitem">
<img src="'+t+'"></div>
'}s+="<div class='pics-ul ' id='img-slider'>
"+e+"</div>
</div>
</div>
","0"==c||$(this).append(s),$(".pics-ul").owlCarousel({loop:!0,margin:15,rtl:!0,autoplay:!0,navText:["",""],navspeed:2e3,responsive:{0:{items:2},600:{items:3},1e3:{items:3}}})})
//]]>
</script>
</if>

منذ فترة لم اشارك موضوع عن هندسة بلوجر واليوم سوف أشارك معكم سلايد شو تلقائي بحسب التسمية او التصنيف هذا السلايد شو هو نسخة متوفرة بعدة أشكال لكن هو قابل للتغيير في اي وقت, هذا السلايد خفيف ومميز ويمكنكم إضافته لقالب VUSION كما أضفته أنا
معاينة السلايد شو إضعط هنا
كيفية تركيب سلايد شو تلقائي على مدونتك؟
نذهب إلى لوحة تحكم المدونة -->> القالب ثم أنقر على تحرير html
الآن نبحث عن الرمز
]]></b:skin>
ثم نضع الكود التالي فوقه مباشرةً:

اقتباس :

/*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(http://3.bp.blogspot.com/-F8fngEbMepA/UVydrTCbj4I/AAAAAAAAD7Q/scYhb8FHD5U/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

الخطوة الثانية نبحث عن الرمز
</head>
ثم نضع الكود التالي فوقه مباشرةً:

اقتباس :

<style>
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden;}
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
#alwansd{width:100%;margin:0;padding:0;overflow:hidden; }
}
</style>
<script>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 550;
numposts1 = 6;
label1 = "تقنية";
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} }}
//]]>
</script>

غير كلمة تقنية باسم التسمية التي تريد أن تظهر بالسلايد شو بما يناسبك
الرقم 6 هو لعدد المشاركات التي ترغب بأن تظهر بالسلايدر numposts1 = 6;
الآن يجب ان نحدد المكان الذي نرغب بإظهار السلايد شو على سبيل المثال فوق رسائل المدونة الإلكترونية او أسفل الرمز
<div class='content-wrapper'>
أو الرمز
<div id='main-wrapper'>
او من خلال التخطيط ثم إضافة أداة javascrpt/html
المهم أن تختار مكان مناسب للسلايد شو ثم لصق الكود التالي:

اقتباس :

<b:if cond='data:blog.pageType == "index"'>
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

لكن على السلايد أن يكون موضوع في نفسك المكان كما شاهدته في المعاينة ليظهر بشكل جيد
الخطوة الأخيرة نبحث عن الرمز
</body>
ثم نضع الكود التالي فوقه مباشرةً:

اقتباس :

<script type='text/javascript'>
//<![CDATA[
var featuredcontentslider={
//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?
settingcaches: {}, //object to cache "setting" object of each script instance
jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},
ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},
ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},
buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none" //collapse all content DIVs to begin with
}
}
},
buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
this.autorotate(setting)
}
},
urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},
setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},
fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},
cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},
autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"="+value
},
init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}
}
//]]>
</script>
<script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

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

شرح التركيب للسلايد
يجب عليك أن تقوم بوضع الأكواد بشكل صحيح حتى لا تحدث مشكلة
ثم البحث الأن عن الوسم هذا فى مدونتك
]]></b:skin>
ثم ضع فوقه الكود التالى

اقتباس :

div#content-sl{ position:absolute; top:0; right:0; text-align:center; background:rgba(76, 88, 113, 0.75); left:0; padding-top:14%; padding-left:12px; bottom:0}
div#content-sl:hover{
text-shadow: 0px 0px 5px #000;
background-image: -webkit-linear-gradient(200deg,rgba(0, 0, 0, 0.42),rgba(0, 0, 0, 0.42));
background-image: -moz-linear-gradient(200deg,rgba(0, 0, 0, 0.42),rgba(0, 0, 0, 0.42));
background-image: -o-linear-gradient(200deg,rgba(0, 0, 0, 0.42),rgba(0, 0, 0, 0.42));
background-image: linear-gradient(200deg,rgba(0, 0, 0, 0.42),rgba(0, 0, 0, 0.42));
}
.a
#tag3-posts li{ position:relative; height:300px; width:102.5%; overflow:hidden}
img.slider-images{ height:300px}
.slider-wrapper{ overflow: hidden; margin-bottom: 5px;}
p#slider-summary{ color:#fff; font-size:14px; padding:0 26px}
h3.slider-title a{ color:#fff; font-size:23px; margin-bottom:10px; display:inline-block; font-weight:100; padding-bottom:5px !important; padding:0 16px; border-bottom:2px solid #fff}

الأن قم بالبحث عن هذا الوسم
</body>
وضع فوقه الكود التالى

اقتباس :

<script>
/* <![CDATA[ */
var _0xeaef=["\x74\x65\x78\x74","\x72\x65\x6D\x6F\x76\x65","\x6D\x61\x74\x63\x68","\x23\x48\x54\x4D\x4C\x32\x36\x37","\x2F\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x2F\x2D\x2F","\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x38","\x67\x65\x74","\x6A\x73\x6F\x6E\x70","","\x3C\x75\x6C\x20\x69\x64\x3D\x27\x74\x61\x67\x33\x2D\x70\x6F\x73\x74\x73\x27\x3E","\x6C\x65\x6E\x67\x74\x68","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x24\x74","\x63\x6F\x6E\x74\x65\x6E\x74","\x68\x74\x6D\x6C","\x3C\x64\x69\x76\x3E","\x73\x72\x63","\x61\x74\x74\x72","\x69\x6D\x67\x3A\x66\x69\x72\x73\x74","\x66\x69\x6E\x64","\x74\x69\x74\x6C\x65","\x74\x65\x72\x6D","\x63\x61\x74\x65\x67\x6F\x72\x79","\x3C\x6C\x69\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x69\x6D\x2D\x73\x6C\x69\x64\x65\x72\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x6C\x69\x64\x65\x72\x2D\x69\x6D\x61\x67\x65\x73\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x75\x72\x6C\x28","\x29\x20\x6E\x6F\x2D\x72\x65\x70\x65\x61\x74\x20\x63\x65\x6E\x74\x65\x72\x20\x63\x65\x6E\x74\x65\x72\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x73\x69\x7A\x65\x3A\x20\x63\x6F\x76\x65\x72\x22\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x6E\x74\x65\x6E\x74\x2D\x73\x6C\x22\x3E\x3C\x68\x33\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x6C\x69\x64\x65\x72\x2D\x74\x69\x74\x6C\x65\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x73\x75\x62\x73\x74\x72","\x2E\x2E\x2E\x3C\x2F\x61\x3E\x3C\x2F\x68\x33\x3E\x3C\x70\x20\x69\x64\x3D\x27\x73\x6C\x69\x64\x65\x72\x2D\x73\x75\x6D\x6D\x61\x72\x79\x27\x3E","\x2E\x2E\x2E\x3C\x2F\x70\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E","\x65\x61\x63\x68","\x23\x48\x54\x4D\x4C\x32\x36\x37\x20\x2E\x77\x69\x64\x67\x65\x74\x2D\x63\x6F\x6E\x74\x65\x6E\x74","\x6F\x77\x6C\x43\x61\x72\x6F\x75\x73\x65\x6C","\x23\x48\x54\x4D\x4C\x32\x36\x37\x20\x75\x6C","\x61\x6A\x61\x78","\x70\x6C\x61\x63\x65\x68\x6F\x6C\x64\x65\x72","\u0623\u064A\u0645\u064A\u0644\u0643\x20\u0647\u0646\u0627\x2E\x2E\x2E\x2E","\x69\x6E\x70\x75\x74\x2E\x66\x6F\x6C\x6C\x6F\x77\x2D\x62\x79\x2D\x65\x6D\x61\x69\x6C\x2D\x61\x64\x64\x72\x65\x73\x73","\x76\x61\x6C\x75\x65","\u0625\u0634\u062A\u0631\u0643","\x69\x6E\x70\x75\x74\x2E\x66\x6F\x6C\x6C\x6F\x77\x2D\x62\x79\x2D\x65\x6D\x61\x69\x6C\x2D\x73\x75\x62\x6D\x69\x74","\x2E\x69\x6D\x67\x2D\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x2E\x6D\x61\x68\x64\x69\x2D\x70\x73","\x73\x65\x6C\x65\x63\x74\x6E\x61\x76","\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74","\x65\x76\x65\x6E\x74","\x74\x61\x72\x67\x65\x74","\x73\x72\x63\x45\x6C\x65\x6D\x65\x6E\x74","\x6E\x6F\x64\x65\x54\x79\x70\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x74\x6F\x4C\x6F\x77\x65\x72\x43\x61\x73\x65","\x6E\x6F\x64\x65\x4E\x61\x6D\x65","\x75\x6C","\x6F\x6C","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x20","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x73\x65\x61\x72\x63\x68","\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x55\x52\x4C","\x3C\x6F\x70\x74\x69\x6F\x6E\x20\x76\x61\x6C\x75\x65\x3D\x22","\x22\x20","\x3E","\x3C\x2F\x6F\x70\x74\x69\x6F\x6E\x3E","\x3C\x6F\x70\x74\x69\x6F\x6E\x20\x76\x61\x6C\x75\x65\x3D\x22\x22\x3E","\x3C\x73\x65\x6C\x65\x63\x74\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x65\x6C\x65\x63\x74\x6E\x61\x76\x22\x20\x69\x64\x3D\x22","\x3C\x2F\x73\x65\x6C\x65\x63\x74\x3E","\x69\x6E\x73\x65\x72\x74\x41\x64\x6A\x61\x63\x65\x6E\x74\x48\x54\x4D\x4C","\x64\x6F\x63\x75\x6D\x65\x6E\x74\x45\x6C\x65\x6D\x65\x6E\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74","\x20\x6A\x73","\x61\x63\x74\x69\x76\x65\x63\x6C\x61\x73\x73","\x61\x63\x74\x69\x76\x65","\x61\x75\x74\x6F\x73\x65\x6C\x65\x63\x74","\x62\x6F\x6F\x6C\x65\x61\x6E","\x6E\x65\x73\x74\x65\x64","\x69\x6E\x64\x65\x6E\x74","\u2192","\x6C\x61\x62\x65\x6C","\x2D\x20\u0627\u0644\u0642\u0627\u0626\u0645\u0629\x20\x2D","\x20\x73\x65\x6C\x65\x63\x74\x65\x64\x20","\x61\x66\x74\x65\x72\x65\x6E\x64","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x63\x68\x61\x6E\x67\x65","\x61\x74\x74\x61\x63\x68\x45\x76\x65\x6E\x74","\x6F\x6E\x63\x68\x61\x6E\x67\x65","\x6E\x61\x76\x31","\x6E\x61\x76","\x72\x65\x61\x64\x79"];$(document)[_0xeaef[99]](function(){$(_0xeaef[37])[_0xeaef[36]](function(){var _0xb1d0x1=$(this)[_0xeaef[0]]();if(_0xb1d0x1[_0xeaef[2]](_0xeaef[1])){$(_0xeaef[3])[_0xeaef[1]]()}else {$[_0xeaef[40]]({url:_0xeaef[4]+ _0xb1d0x1+ _0xeaef[5],type:_0xeaef[6],dataType:_0xeaef[7],success:function(_0xb1d0x1){var _0xb1d0x2=_0xeaef[8];var _0xb1d0x3=_0xeaef[9];for(var _0xb1d0x4=0;_0xb1d0x4< _0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xeaef[10]];_0xb1d0x4++){for(var _0xb1d0x5=0;_0xb1d0x5< _0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[13]][_0xeaef[10]];_0xb1d0x5++){if(_0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[13]][_0xb1d0x5][_0xeaef[14]]== _0xeaef[15]){_0xb1d0x2= _0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[13]][_0xb1d0x5][_0xeaef[16]];break}};var _0xb1d0x6=_0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[18]][_0xeaef[17]];var _0xb1d0x7=$(_0xeaef[20])[_0xeaef[19]](_0xb1d0x6);var _0xb1d0x8=_0xb1d0x7[_0xeaef[24]](_0xeaef[23])[_0xeaef[22]](_0xeaef[21]);var _0xb1d0x9=_0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[25]][_0xeaef[17]];var _0xb1d0xa=_0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[27]][0][_0xeaef[26]];_0xb1d0x3+= _0xeaef[28]+ _0xb1d0x2+ _0xeaef[29]+ _0xb1d0x8+ _0xeaef[30]+ _0xb1d0x2+ _0xeaef[31]+ _0xb1d0x1[_0xeaef[12]][_0xeaef[11]][_0xb1d0x4][_0xeaef[25]][_0xeaef[17]][_0xeaef[32]](0,80)+ _0xeaef[33]+ _0xb1d0x7[_0xeaef[0]]()[_0xeaef[32]](0,300)+ _0xeaef[34]};_0xb1d0x3+= _0xeaef[35];$(_0xeaef[37])[_0xeaef[36]](function(){$(this)[_0xeaef[19]](_0xb1d0x3)});$(_0xeaef[39])[_0xeaef[38]]({rtl:true,loop:true,nav:true,navText:[_0xeaef[8],_0xeaef[8]],margin:20,autoplay:true,autoplayHoverPause:true,responsive:{0:{items:1},600:{items:2},1000:{items:2}}})}})}});$(_0xeaef[43])[_0xeaef[22]](_0xeaef[41],_0xeaef[42]);$(_0xeaef[46])[_0xeaef[22]](_0xeaef[44],_0xeaef[45]);$(_0xeaef[49])[_0xeaef[48]]($(_0xeaef[47]));window[_0xeaef[50]]= function(){_0xeaef[51];var _0xb1d0x1=function(_0xb1d0x1,_0xb1d0x2){function _0xb1d0xb(_0xb1d0x1){var _0xb1d0x2;if(!_0xb1d0x1){_0xb1d0x1= window[_0xeaef[52]]};if(_0xb1d0x1[_0xeaef[53]]){_0xb1d0x2= _0xb1d0x1[_0xeaef[53]]}else {if(_0xb1d0x1[_0xeaef[54]]){_0xb1d0x2= _0xb1d0x1[_0xeaef[54]]}};if(_0xb1d0x2[_0xeaef[55]]=== 3){_0xb1d0x2= _0xb1d0x2[_0xeaef[56]]};if(_0xb1d0x2[_0xeaef[44]]){window[_0xeaef[57]][_0xeaef[16]]= _0xb1d0x2[_0xeaef[44]]}}function _0xb1d0xc(_0xb1d0x1){var _0xb1d0x2=_0xb1d0x1[_0xeaef[59]][_0xeaef[58]]();return _0xb1d0x2=== _0xeaef[60]|| _0xb1d0x2=== _0xeaef[61]}function _0xb1d0xd(_0xb1d0x1){for(var _0xb1d0x2=1;document[_0xeaef[62]](_0xeaef[50]+ _0xb1d0x2);_0xb1d0x2++){;};return _0xb1d0x1?_0xeaef[50]+ _0xb1d0x2:_0xeaef[50]+ (_0xb1d0x2- 1)}function _0xb1d0xe(_0xb1d0x1){_0xb1d0x16++;var _0xb1d0x2=_0xb1d0x1[_0xeaef[63]][_0xeaef[10]],_0xb1d0x3=_0xeaef[8],_0xb1d0xf=_0xeaef[8],_0xb1d0xb=_0xb1d0x16- 1;if(!_0xb1d0x2){return};if(_0xb1d0xb){while(_0xb1d0xb--){_0xb1d0xf+= _0xb1d0xa};_0xb1d0xf+= _0xeaef[64]};for(var _0xb1d0x10=0;_0xb1d0x10< _0xb1d0x2;_0xb1d0x10++){var _0xb1d0x11=_0xb1d0x1[_0xeaef[63]][_0xb1d0x10][_0xeaef[63]][0];if( typeof _0xb1d0x11!== _0xeaef[65]){var _0xb1d0x12=_0xb1d0x11[_0xeaef[66]]|| _0xb1d0x11[_0xeaef[67]];var _0xb1d0x13=_0xeaef[8];if(_0xb1d0x4){_0xb1d0x13= _0xb1d0x11[_0xeaef[69]][_0xeaef[68]](_0xb1d0x4)!== -1|| _0xb1d0x11[_0xeaef[56]][_0xeaef[69]][_0xeaef[68]](_0xb1d0x4)!== -1?_0xb1d0x17:_0xeaef[8]};if(_0xb1d0x5&& !_0xb1d0x13){_0xb1d0x13= _0xb1d0x11[_0xeaef[16]]=== document[_0xeaef[70]]?_0xb1d0x17:_0xeaef[8]};_0xb1d0x3+= _0xeaef[71]+ _0xb1d0x11[_0xeaef[16]]+ _0xeaef[72]+ _0xb1d0x13+ _0xeaef[73]+ _0xb1d0xf+ _0xb1d0x12+ _0xeaef[74];if(_0xb1d0x9){var _0xb1d0x14=_0xb1d0x1[_0xeaef[63]][_0xb1d0x10][_0xeaef[63]][1];if(_0xb1d0x14&& _0xb1d0xc(_0xb1d0x14)){_0xb1d0x3+= _0xb1d0xe(_0xb1d0x14)}}}};if(_0xb1d0x16=== 1&& _0xb1d0x15){_0xb1d0x3= _0xeaef[75]+ _0xb1d0x15+ _0xeaef[74]+ _0xb1d0x3};if(_0xb1d0x16=== 1){_0xb1d0x3= _0xeaef[76]+ _0xb1d0xd(true)+ _0xeaef[31]+ _0xb1d0x3+ _0xeaef[77]};_0xb1d0x16--;return _0xb1d0x3}_0xb1d0x1= document[_0xeaef[62]](_0xb1d0x1);if(!_0xb1d0x1){return};if(!_0xb1d0xc(_0xb1d0x1)){return};if(!(_0xeaef[78] in window[_0xeaef[80]][_0xeaef[79]])){return};document[_0xeaef[79]][_0xeaef[69]]+= _0xeaef[81];var _0xb1d0x3=_0xb1d0x2|| {},_0xb1d0x4=_0xb1d0x3[_0xeaef[82]]|| _0xeaef[83],_0xb1d0x5= typeof _0xb1d0x3[_0xeaef[84]]=== _0xeaef[85]?_0xb1d0x3[_0xeaef[84]]:true,_0xb1d0x9= typeof _0xb1d0x3[_0xeaef[86]]=== _0xeaef[85]?_0xb1d0x3[_0xeaef[86]]:true,_0xb1d0xa=_0xb1d0x3[_0xeaef[87]]|| _0xeaef[88],_0xb1d0x15=_0xb1d0x3[_0xeaef[89]]|| _0xeaef[90],_0xb1d0x16=0,_0xb1d0x17=_0xeaef[91];_0xb1d0x1[_0xeaef[78]](_0xeaef[92],_0xb1d0xe(_0xb1d0x1));var _0xb1d0xf=document[_0xeaef[62]](_0xb1d0xd());if(_0xb1d0xf[_0xeaef[93]]){_0xb1d0xf[_0xeaef[93]](_0xeaef[94],_0xb1d0xb)};if(_0xb1d0xf[_0xeaef[95]]){_0xb1d0xf[_0xeaef[95]](_0xeaef[96],_0xb1d0xb)};return _0xb1d0xf};return function(_0xb1d0x2,_0xb1d0x3){_0xb1d0x1(_0xb1d0x2,_0xb1d0x3)}}();$(document)[_0xeaef[99]](function(){selectnav(_0xeaef[97]);selectnav(_0xeaef[98])})})
/* ]]> */
</script>
<style>
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.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(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{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-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}
</style>

الأن أخر كود وهذا الخاص بأظهار السلايد
يمكنك وضعه فى أى مكان والأفضل فوق المواضيع
الأن قم بحفظ القالب بعد وضع الأكواد كامله

اقتباس :

<div class='container'>
<div class='slider-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section id='wrapper-posts' showaddelement='no'>
<b:widget id='HTML267' locked='true' title='' type='HTML' version='1'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<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>

</div></div>

وأنتقل لتخطيط مدونتك سوف تجد أضافة جديده بأسم wrapper-posts
قم بوضع بها تسمية من مدونتك مثلا أندرويد وبعد ذلك أحفظ الإضافة

موضوع: سلايد 3 الجمعة يوليو 22, 2022 7:33 pm

طريقة إضافة سلايد شو لمدونتك
من لوحة تحكم المدونة >> المظهر > أنقر على تحرير html ثم أبحث عن الرمز
</head>
واضف الكود التالي فوقه مباشرةً

اقتباس :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/*<![CDATA[*/
/* Recent Posts Slider */
.flex-direction-nav a,.flex-direction-nav a:before{color:#f1f1f1;text-shadow: 1px 1px 0 #000;}
@font-face{font-family:flexslider-icon;src:url(https://cdn.staticaly.com/gh/woocommerce/FlexSlider/master/fonts/flexslider-icon.eot);src:url(https://cdn.staticaly.com/gh/woocommerce/FlexSlider/master/fonts/flexslider-icon.eot?#iefix) format('embedded-opentype'),url(https://cdn.staticaly.com/gh/woocommerce/FlexSlider/master/fonts/flexslider-icon.woff) format('woff'),url(https://cdn.staticaly.com/gh/woocommerce/FlexSlider/master/fonts/flexslider-icon.ttf) format('truetype'),url(https://cdn.staticaly.com/gh/woocommerce/FlexSlider/master/fonts/flexslider-icon.svg#flexslider-icon) format('svg');font-weight:400;font-style:normal}
.flex-container a:hover,.flex-slider a:hover{outline:0}
.flex-control-nav,.flex-direction-nav,.slides,.slides>li{margin:0;padding:0;list-style:none}
.flex-pauseplay span{text-transform:capitalize}
.flexslider{height:480px;padding:0;margin:10px 0 20px;background:#fff;position:relative;zoom:1;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);}
.flexslider .slides>li{display:none;-webkit-backface-visibility:hidden}
.flexslider .slides:after{content:"\0020";display:block;clear:both;visibility:hidden;line-height:0;height:0}
html[xmlns] .flexslider .slides{display:block}
* html .flexslider .slides{height:1%}
.no-js .flexslider .slides>li:first-child{display:block}
.flexslider .slides{zoom:1}
.flexslider .slides img{width:100%;display:block;height:480px;-moz-user-select:none}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}
.loading .flex-viewport{max-height:300px}
.carousel li{margin-right:5px}
.flex-direction-nav a{text-decoration:none;display:block;width:40px;height:40px;margin:-20px 0 0;position:absolute;top:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.flex-direction-nav a:before{font-family:flexslider-icon;font-size:40px;display:inline-block;content:'\f001'}
.flex-direction-nav a.flex-next:before{content:'\f002'}
.flex-direction-nav .flex-prev{left:-50px}
.flex-direction-nav .flex-next{right:-50px;text-align:right}
.flexslider:hover .flex-direction-nav .flex-prev{opacity:.7;left:10px}
.flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1}
.flexslider:hover .flex-direction-nav .flex-next{opacity:.7;right:10px}
.flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1}
.flex-direction-nav .flex-disabled{opacity:0!important;filter:alpha(opacity=0);cursor:default;z-index:-1}
.flex-pauseplay a{display:block;width:20px;height:20px;position:absolute;bottom:5px;left:10px;opacity:.8;z-index:10;overflow:hidden;cursor:pointer;color:#000}
.flex-pauseplay a:before{font-family:flexslider-icon;font-size:20px;display:inline-block;content:'\f004'}
.flex-pauseplay a:hover{opacity:1}
.flex-pauseplay a.flex-play:before{content:'\f003'}
.flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center}
.flex-control-nav li{margin:0 6px;display:inline-block;zoom:1}
.flex-control-paging li a{width:11px;height:11px;display:block;background:#eee;background:rgba(238,238,238,.5);cursor:pointer;text-indent:-9999px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.3);-o-box-shadow:inset 0 0 3px rgba(0,0,0,.3);box-shadow:inset 0 0 3px rgba(0,0,0,.3);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}
.flex-control-paging li a:hover{background:#FF1744;background:rgba(255,23,68,.7)}
.flex-control-paging li a.flex-active{background:#fff;background:rgba(255,255,255,.9);cursor:default}
.flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden}
.flex-control-thumbs li{width:25%;float:left;margin:0}
.flex-control-thumbs img{width:100%;height:auto;display:block;opacity:.7;cursor:pointer;-moz-user-select:none;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}
.flex-control-thumbs img:hover{opacity:1}
.flex-control-thumbs .flex-active{opacity:1;cursor:default}
.flexslider.loading:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:url(https://2.bp.blogspot.com/-j5_B6uRRf_I/WUnnQw-tddI/AAAAAAAArpQ/tN7vxuosXf0w2g4qOHqH6UD02hi-al-uACLcBGAs/s1600/loadingbox.gif) center center no-repeat;background-color:rgba(255,255,255,.9);z-index:9999}
.flexslider.loading ol,.flexslider.loading ul.flex-direction-nav,.loading .flex-caption{display:none}
.flexslider a{text-decoration:none}
.flex-caption{position:relative;padding-left:15px;padding-right:15px;height:auto;color:#f1f1f1;font-family:'Open Sans',sans-serif;font-weight:500;font-size:36px;line-height:1.2;text-align:center;text-shadow: 1px 1px 0 #000;margin:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}
.flex-caption span{display:block;vertical-align:middle;height:auto}
.flex-caption.overlayDark,.flex-caption.overlayLight{margin-bottom:-60px;bottom:110px;position:absolute;width:100%;z-index:2}
.flexslider ul.slides li.flex-active-slide .flex-caption.overlayLight{display:block;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
ul.slides li a{display:block;overflow:hidden;height:480px;position:relative;}
.flexslider ul{margin:0!important;padding:0!important;line-height:initial!important}
.flexslider ul.flex-direction-nav li{margin:0;padding:0;line-height:initial}
.flexslider ul.slides li{margin-bottom:0!important;height:480px;position:relative;}
.flexslider ul li{margin-bottom:0!important;}
.flexslider .flex-viewport ul li .overlay{background:#000;opacity:.2;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}
.flexslider img{padding:0;border:none;-webkit-box-shadow:none;box-shadow:none}
ul.flex-direction-nav,ul.flex-direction-nav li{position:static}
.error{font-family:monospace,sans-serif}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@media screen and (max-width:860px){.flex-direction-nav .flex-prev{opacity:1;left:10px}
.flex-direction-nav .flex-next{opacity:1;right:10px}
}
@media (max-width:414px){.flexslider,ul.slides li a,.flexslider ul.slides li,.flexslider .slides img{height:250px}
.flex-caption{font-size:20px;line-height:20px;font-weight:400}
.flex-direction-nav a{top:93%}
.flex-direction-nav a:before{font-size:30px}
.flex-direction-nav a{width:30px;height:30px}
}
@media (max-width:375px){.flexslider,ul.slides li a,.flexslider ul.slides li,.flexslider .slides img{height:200px}
.flex-direction-nav a{top:93%}
.flex-direction-nav a:before{font-size:20px}
.flex-direction-nav a{width:20px;height:20px}
}
/*]]>*/
</style>
</b:if>

الخطوة التالية أبحث عن الرمز
</body>
واضف الكود التالي فوقه مباشرةً

اقتباس :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js'/>
<script type='text/javascript'>
//<![CDATA[
!function(a){a.fn.BloggerDynamicSlider=function(b){var c=a.extend({blogURL:"",labelName:"",maxItem:6,showPostTitle:!0,postTitleStyle:"overlayLight",imageWidth:728,imageHeight:480,animation:"slide",controlNav:!0,directionNav:!0,pauseOnHover:!1,slideshowSpeed:7e3,animationSpeed:600,animationLoop:!0},b);return this.each(function(){var b=a(this),d=b.attr("id"),e=c.blogURL+"/feeds/posts/summary/"+(0==c.labelName.length?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?max-results="+c.maxItem+"&orderby=published&alt=json-in-script";a.ajax({type:"GET",url:e,async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){var f,g,h,i,j,k,l,m,n,o,p,q,r,e=a.feed.entry||[];for(f="",f+='<div class="flexslider loading" style="max-width:100%">',f+='<ul class="slides">',g=0;g<e.length;++g){for(i=e[g],j=i.title.$t,k=i.media$thumbnail?i.media$thumbnail.url:"https://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s72-c/nothumb_large.png",l=k.replace("s72-c","w"+c.imageWidth).replace(/.*?:\/\//g , "//"),m=i.link||[],h=0;h<m.length&&"alternate"!=m[h].rel;++h);n=m[h].href,o='<img src="'+l+'" width="'+c.imageWidth+'" height="'+c.imageHeight+'"/>',p=c.showPostTitle?'<p class="flex-caption'+("default"==c.postTitleStyle?"":" "+c.postTitleStyle)+'"><span>'+j+"</span></p>":"",r='<div class="overlay"></div>',q='<a href="'+n+'" target="_blank">'+o+p+"</a>",f+="<li>"+q+r+"</li>"}f+="</ul></div>",f+='<style type="text/css">#'+d+" .flexslider.loading {min-height:"+c.imageHeight+"px !important;}</style>",b.append(f)},error:function(a,c,d){b.append('<div class="error"><p>No Result! Or Error Loading Feed</p></div')},complete:function(){a("#"+d+" .flexslider").flexslider({animation:c.animation,controlNav:c.controlNav,directionNav:c.directionNav,pauseOnHover:c.pauseOnHover,slideshowSpeed:c.slideshowSpeed,animationSpeed:c.animationSpeed,animationLoop:c.animationLoop});var b=a("#"+d+" .flexslider ul.slides li a img"),e=0;b.on("load",function(){if(e++,e==b.length-1){var c=a("#"+d+" .flexslider").data("flexslider");c.animating=!1,c.flexAnimate(0),a("#"+d+" .flexslider").removeClass("loading")}})}})})}}(jQuery);
$(document).ready(function() {
$("#slider1").BloggerDynamicSlider({
});
});
//]]>
</script>
</b:if>

الخطوة الأخيرة عليك إيجاد المكان الصحيح لوضع السلايد شو وتشغيله على مدونتك مثلاً يمكنك إضافة الرمز التالي

اقتباس :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider1'/>
</b:if>

فوق الرمز
<div id='content-wrapper'>
او أسفله من المظهر ثم أنقر على حفظ المظهر لمشاهدة النتائج

نوصي دائماً بأخذ نسخة إحتياطية من القالب من اجل تجنب أية أخطاء

» كل ما يخص All thing about Blogger AdSense الربح من جوجل أدسنس
» مجموعه طابعه بلوجر blogger set
» أجمل خط لمدونات بلوجر beautiful fonts for blogger
» How To Add Reply Button To Blogger Comment كيفية إضافة زر الرد إلى تعليق بلوجر
» يوجد امرين لفتح مدونه بلوجر عاديه ومحترف للارباح ونتعرف على المخاطر blogger