الجمعة، 24 أكتوبر 2014
السلام عليكم ورحمة الله وبركاته،
الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جمالية الموقع وجذبيته ، و تختلف أنواعها ما بين التي تعدل يدويا و الأخرى التي تعمل بشكل تلقائي، و اليوم أحضرت النوع الأخير أي السلايدر التلقائي الذي يجسده سلايدر شو مدونة المحترف الجديد ، هذا السلايدر مشهور بشهرة صاحب موقعه إلا أنه مليء بالأخطاء وغير منسق ، و لقد قمت برفع أكواده من جديد و عملت على تحسينه وقمت بتصغيره ، رأيت فيه فراغ كبير سيجعله أقل جاذبية. يمكنك معاينته بالضغط هنا
طريقة إضافة السلايدر شو
1- الذهاب للوحة التحكم ثم القالب بعد ذلك تحرير HTML نأخذ نسخة من القالب تفاديا لأي خطأ.
2- نبحث عن هذا الوسم: </head> ثم نضيف الكود التالي قبله مباشرة.
الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جمالية الموقع وجذبيته ، و تختلف أنواعها ما بين التي تعدل يدويا و الأخرى التي تعمل بشكل تلقائي، و اليوم أحضرت النوع الأخير أي السلايدر التلقائي الذي يجسده سلايدر شو مدونة المحترف الجديد ، هذا السلايدر مشهور بشهرة صاحب موقعه إلا أنه مليء بالأخطاء وغير منسق ، و لقد قمت برفع أكواده من جديد و عملت على تحسينه وقمت بتصغيره ، رأيت فيه فراغ كبير سيجعله أقل جاذبية. يمكنك معاينته بالضغط هنا
طريقة إضافة السلايدر شو
1- الذهاب للوحة التحكم ثم القالب بعد ذلك تحرير HTML نأخذ نسخة من القالب تفاديا لأي خطأ.
2- نبحث عن هذا الوسم: </head> ثم نضيف الكود التالي قبله مباشرة.
<script>
//<![CDATA[
/* Script from:http://warch-mo.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
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}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
لا تنسى تغير كلمة "اضافات بلوجر" بإسم القسم الذي تريده أن يظهر.
3- نبحث عن الوسم: </body> ثم نلصق الكود التالي قبله مباشرة.
4- الأن نبحث عن أحد الأكواد التالية:<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></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>
<div id='main-wrapper'>
أو هذا
<div id='content'>
أو هذا
<div id="content">
أو هذا
<div class='column-center-inner'>
ونلصق بعده هذا الكود:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>//<![CDATA[
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>
5- أخيرا الستايل ، نقوم بالبحث عن هذا الوسم: ]]></b:skin> ونقوم بوضع الكود التالي فوقه
/*--------------Slider-------------*/
#alwansd{
height: 200px;
padding: 18px;
background: #fbfbfb;
/*width: 615px;*/
margin-right: 7px;
border-bottom: 2px solid #E6E6E6;
position: relative;
margin: 0 auto;
overflow: hidden;
width: auto;
border: 3px dotted rgba(35, 178, 216, 1);
margin-bottom: 10px;
}
.alwanw {
position: relative;
height: 178px;
width: 127%;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps {
text-align: right;
float: left;
width: 216px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOTPrp2KF9e8LDVW8p4Ruh-MYylaP0d0fOba2Ifsq1YbAn4-fIjimK5O4-tRZk9V8U1ZtKFyMxLHwv7fOgjgg0LUHvWjWdn3FgkEbJyFWN0-4Gz38Wo18EQ7e2sNwW_AHrC6VHxoV5W6s/s1600/next-h.png);}
.alwanip{
width: 333px;
float: left !important;
margin: 0px auto;
padding: 0px 22px 0px 0px;
}
.alwanip a{
color: #2c3e50;
font: 20px ge_dinar;
margin: 0 auto;
line-height: 37px;
text-decoration: none;
}
.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: Droid Arabic Kufi;
font-size: 12px;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 276px;
height: 200px;}
.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;
}
و قم بحفظ القالب ومبروك عليك السلايدر شو
أي إستفسار أنا في الخدمة فقط إترك تعليق و شارك الموضوع لتعم الفائدة
في أمان الله.
الخميس، 24 يوليو 2014
السلام عليكم ورحمة الله وبركاته
السلايدر شو من بين الأليات المحسنة لجمالية واجهة المدونة أو الموقع وأيضا وسيلة وظيفية متطورة لعرض مواضيع المدونة ، و تختلف هذه السلايدرات من حيث العمل و الشكل و طريقة التنسيق و مميزاته وفي هذه التدوينة أحبابي في الله سوف نرى الطريقة الصحيحة لتركيب سلايدر شو المحترف المشهور و لقد إخترت هذا دون غيره لأنه مطلوب بكثرة و للأسف توجد أخطاء شائعة تمنع المدونين من الإستفادة منه يمكنك أن تعاينه مباشرة في رئيسية ورشة مدون
بعد ذلك قم بالبحث عن هذا الوسم </body> وقم بلصق الكود التالي قبله مباشرة:
السلايدر شو من بين الأليات المحسنة لجمالية واجهة المدونة أو الموقع وأيضا وسيلة وظيفية متطورة لعرض مواضيع المدونة ، و تختلف هذه السلايدرات من حيث العمل و الشكل و طريقة التنسيق و مميزاته وفي هذه التدوينة أحبابي في الله سوف نرى الطريقة الصحيحة لتركيب سلايدر شو المحترف المشهور و لقد إخترت هذا دون غيره لأنه مطلوب بكثرة و للأسف توجد أخطاء شائعة تمنع المدونين من الإستفادة منه يمكنك أن تعاينه مباشرة في رئيسية ورشة مدون
طريقة التركيب:
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي ]]></b:skin> بالإستعانة بلوحة التحكم (CTRL+F) و ألصق الكود التالي قابله
الأن نقوم بالبحث عن هذا الوسم </head>
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي ]]></b:skin> بالإستعانة بلوحة التحكم (CTRL+F) و ألصق الكود التالي قابله
#alwansd{ height: 428px; margin: 0 0 0px 0px; padding: 15px 28px 15px 16px; width: 672px; background: #373737; } .alwanw{ position: relative; height:385px; } .alwanw .contentdiv{ visibility: hidden; position: absolute; opacity: 1; } .alwan-ps{ text-align: right; float: left; width: 670px; height: 11px; margin-left:-43px; } .alwan-ps .toc{ font-size: 0px; width: 102px; height: 11px; float: right; background: #5b5b5b; margin-left: 1px; } .alwan-ps a.selected{ background:#dfdfdf; } .alwan-ps .prev, .alwan-ps .next {display:none; } .alwanip{ width: 618px; padding: 10px !important; bottom: 0; float: left !important; position: absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjmzg-t9k1bqt-HkAkyW73OI0wO1Egp1C3Q5zVoA-LaOkzIYcnYsqSexMP_jgDPBEDfIrKwMhRTlUaYcEfBR4qDyzsebvGvB-i5L5SZ0gRYr0WCrGr5nXtAZsJ8qklMlkKxBIXrON3ek/s1600/backslide.png); } .alwanip a{ color:#dcdcdc; font: 12px droidkufi-bold; margin:0; padding:0; line-height: 19px; } .alwanip h6{margin: 0;} .alwanip h6 a:hover {color:#c2df00;} .alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; } .alwanip p{font-size: 13px; margin: 0; color: #a5a5a5; line-height: 23px; } .alwansf a img{float: right !important; } .alwansf {float: right !important; width:680px!important;} .column-center-outer { width: 680px; }
الأن نقوم بالبحث عن هذا الوسم </head>
ثم نلصق هذا الكود مباشرة فوقه
مكان كلمة إضافات بلوجر ضع إسم القسم الذي تريده إن يظهر،<script>
/* Script from:http://warch-mo.blogspot.com */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
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}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'
+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>
بعد ذلك قم بالبحث عن هذا الوسم </body> وقم بلصق الكود التالي قبله مباشرة:
<script src='https://dl.dropboxusercontent.com/s/2t0ulnjvt2kl4hy/slider%20warch-mo.blogspot.com.js'></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>
ثم نقوم بالبحث عن أحد الأكواد التالية:
<div id='main-wrapper'>
أو هذا
<div id='content'>
أو هذا
<div id="content"></div>
أو هذا
<div class='column-center-inner'>
بعد أن تجد أحد هذه الأكواد نقوم بلصق الكود التالي مباشرة أسفله:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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>
أخيرا قم بحفظ القالب ومبروك عليك السلاسيدر شو هذا كل مافي موضوع اليوم دمتم بود في أمان الله
الأحد، 15 يونيو 2014
السلام عليكم و رحمة الله و بركاته,
يشكل السلايدر شو إحدى النقاط الجذابة في واجهة المدونة و بين المعايير التي تساهم في جمالية مدونتك ، بحيث إن كان السلايدر شو متناسق و خفيف يسهل على الزائر فهم طبيعة و إختصاص الموقع المتواجد به بمجرد أن يلقي نظره على المواضيع المعروضة فيه وفي هذه التدوينة أحبابي في الله سوف أشرح لكم طريقة إضافة سلايدر شو قالب MAXXIZ مميزات هذا القالب أنه يعرض المواضيع أتوماتيكيا و ذلك عبر إختيار إسم القسم المرغوب في عرضه، بالإضافة إلى أنه يقوم بالإنتقال من موضوع إلى أخر مستعينا بلامسات فنية تزيده جمالية وإحترافية
*والصق الكود التالي قبله مباشرة
* ثم قم بالبحث عن الكود التالي
* والصق الكود التالي قبله مباشره
*أخيرا قم بالبحث عن أحد هذه الأكواد
*ألصق الكود التالي بعده
وتغير كلمة "قوالب بلوجر" بإسم القسم الذي تريد أن يظهر
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك...
دمتم بود في أمان الله
يشكل السلايدر شو إحدى النقاط الجذابة في واجهة المدونة و بين المعايير التي تساهم في جمالية مدونتك ، بحيث إن كان السلايدر شو متناسق و خفيف يسهل على الزائر فهم طبيعة و إختصاص الموقع المتواجد به بمجرد أن يلقي نظره على المواضيع المعروضة فيه وفي هذه التدوينة أحبابي في الله سوف أشرح لكم طريقة إضافة سلايدر شو قالب MAXXIZ مميزات هذا القالب أنه يعرض المواضيع أتوماتيكيا و ذلك عبر إختيار إسم القسم المرغوب في عرضه، بالإضافة إلى أنه يقوم بالإنتقال من موضوع إلى أخر مستعينا بلامسات فنية تزيده جمالية وإحترافية
شرح كيفية إضافة السلايدر شو
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>
*والصق الكود التالي قبله مباشرة
.featuredpost.box_skitter.box_skitter_home.maxxiz-theme{padding:4px; background-color:#FDFDFD; box-shadow:0 1px 5px #BDBDBD; -moz-box-shadow:0 1px 5px #BDBDBD; -webkit-box-shadow:0 1px 5px #BDBDBD; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; height:350px; position:relative; z-index:88; margin-bottom:15px}
.box_skitter_home.maxxiz-theme .prev_button,
.box_skitter_home.maxxiz-theme .next_button,
.box_skitter_home.maxxiz-theme .info_slide_dots{background-color:#F3F3F3; background:-moz-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFF),color-stop(100%,#F3F3F3)); background:-webkit-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-o-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-ms-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:linear-gradient(top,#FFF 0%,#F3F3F3 100%); transition:background-color linear .3s; -moz-transition:background-color linear .3s; -webkit-transition:background-color linear .3s; -o-transition:background-color linear .3s; outline:0}
#autorslidertop{padding:4px; border:1px solid #DDD; background-color:white; box-shadow:0 1px 5px rgba(0,0,0,.15); -moz-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden; position:relative; width:100% !important; height:100% !important; max-width:100%}
.box_skitter .image{overflow:hidden; max-width:100%; max-height:100%; height:350px}
.box_skitter .image > a{display:block; height:350px}
.box_skitter .image img{display:none; width:100%; height:100%; max-height:100%}
.box_skitter .box_clone{position:absolute; top:0; left:0; width:100px; overflow:hidden; display:none; z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute; top:0; height:350px; left:0; z-index:19; max-width:710px; width:710px}
.box_skitter .prev_button{position:absolute; top:50%; left:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .next_button{position:absolute; top:50%; right:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .info_slide{position:absolute; top:15px; left:15px; z-index:100; background:#000; color:#FFF; font:padding:5px 0 5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:0.75}
.box_skitter .info_slide .image_number{background:#333; float:left; padding:2px 10px; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00; float:left; padding:2px 10px; margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative; overflow:hidden; height:50px}
.box_skitter .info_slide_thumb{-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; overflow:hidden; height:45px; top:auto; bottom:-5px; left:-5px; padding:5px; opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden; width:70px; height:40px; position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute; top:-50px; left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute; bottom:60px; left:50px; background:#ccc; background:-moz-linear-gradient(-90deg,#555,#fff); background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff)); width:200px; height:10px; overflow:hidden; text-indent:-9999em; z-index:101; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; cursor:pointer; border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute; bottom:-40px; z-index:151; padding:5px 0 5px 5px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333; float:left; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:18px; height:18px; text-indent:-9999em; outline:0; overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00; float:left; margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80; position:absolute; bottom:0; left:0; display:none}
.loading{position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px; color:#FFF; text-indent:-9999em; overflow:hidden; background:#FFF no-repeat left top; width:32px; height:32px}
.label_skitter{z-index:150; position:absolute; bottom:0; left:0; color:#FFF; display:none; opacity:0.9}
.label_skitter p{padding:5px; margin:0}
.info_slide *{}
.box_skitter .progressbar{background:#000; position:absolute; bottom:5px; left:10px; height:5px; width:940px; z-index:99; border-radius:20px}
.preview_slide{display:none; position:absolute; z-index:999; bottom:40px; left:-40px; width:100px; height:50px; border:3px solid #FFF; background:rgba(0,0,0,.5); -moz-box-shadow:rgba(0,0,0,0.7) 0 0 10px; -webkit-box-shadow:rgba(0,0,0,0.7) 0 0 10px; box-shadow:rgba(0,0,0,0.7) 0 0 10px; overflow:hidden}
.preview_slide ul{width:100px; height:50px; padding:0; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0}
.preview_slide ul li{width:100px; height:55px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block}
.preview_slide ul li img{position:absolute; top:0; left:0; height:55px; width:100px}
#overlay_skitter{position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh45-bqJbq-f9M8_3zp0W2tQ5-8Sb-4l2dbh9xUCvaVym4H2_utLU1gYlq_ff7LOLxAmN5DpWkB2qjP3uA6JfOH6nZf_yxzcZe3g6TKa53GP0przwazw1Y12ANQUjNG9l8v7WqCSWgUCDU/s1600/anim_loading_sm_082208.gif); background-position:center center; background-repeat:no-repeat}
.box_skitter_home.maxxiz-theme .prev_button,
.box_skitter_home.maxxiz-theme .next_button,
.box_skitter_home.maxxiz-theme .info_slide_dots{border:1px solid #FFF; box-shadow:0 1px 3px #BDBDBD; -moz-box-shadow:0 1px 3px #BDBDBD; -webkit-box-shadow:0 1px 3px #BDBDBD; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0}
.box_skitter_home.maxxiz-theme .info_slide{}
.box_skitter_home.maxxiz-theme .info_slide_dots{ bottom:-14px; height:30px; padding:0px 4px; z-index:99}
.box_skitter_home.maxxiz-theme .info_slide_dots span{transition:background linear .3s; -webkit-transition:background linear .3s; -moz-transition:background linear .3s; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0zG7-ajyNrm_l30p-kAFmw_2qRlcyvSdcg7xaNJeMDLwr_xIYeXYhHESIsJaUCvuFbAaRI46frd346OzJ0gavL3Y-p-kSwzGo6GjgR9DXnL-AKwna47vk5PuQ1GahKQ8MGnCPOnJ6PU/s1600/light-overlay.png); background-repeat:repeat-x; background-position:left -13px; background-color:#d1d1d1; color:#777; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-bottom:1px solid #FFF; display:block; width:10px; height:10px; text-indent:-9999px; float:left; margin:10px 6px 0 6px}
.box_skitter_home.maxxiz-theme .info_slide_dots span:hover{background-color:#777}
.box_skitter_home.maxxiz-theme .info_slide_dots span.image_number_select{background-color:#1ABFC6; border:none; width:14px; height:14px; margin:8px 3px 0 3px; box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.maxxiz-theme .prev_button,
.box_skitter_home.maxxiz-theme .next_button{display:block; width:75px; height:22px; line-height:30px; text-decoration:none; font-size:10px; text-transform:uppercase; transition:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; text-indent:0; bottom:-11px; top:auto; color:#777; z-index:98; cursor:pointer}
.box_skitter_home.maxxiz-theme .prev_button:hover,
.box_skitter_home.maxxiz-theme .next_button:hover,
.box_skitter_home.maxxiz-theme .prev_button:active,
.box_skitter_home.maxxiz-theme .next_button:active{opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button{right:25.5%; padding-right:5px; text-align:right; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button span{padding-right:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAKrr-4iBbJbgndq2tzMdzh_1gqOZfWRuIdLLU9GpcvMwqlxV3JgcrStHdufbz-iLcHBk-BL4yQmmaGR080KuAtVSMofySjKLH-0UCfAp5VbJ3ZOX77bAy3FNQocWtbS4CyhT_egPwNio/s1600/nav-next.png) no-repeat left top; background-position:right center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .prev_button{left:25.5%; padding-left:5px; text-align:left; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .prev_button span{padding-left:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Gl_Fz2-UeSJw99lV2zgZJX5nUCEQzl2UW7SuOwv4FA70zgGWXh9MJOa6LU8wzm6aiNRW6BiO859QIsVKpMGFlqtxvCAfXKM3eojPHpeaTGcNvcSTl0nYtGTX3kc7DgVX5AlyVugJA0Q/s1600/nav-prev.png) no-repeat left top; background-position:left center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .label_skitter{width:90%; padding:0; left:50%; margin-left:-45%; bottom:10%; text-align:right; height:auto; color:white}
.box_skitter_home.maxxiz-theme .label_skitter .inner{padding:5px 8px 5px; background:#1ABFC6; border-right:5px solid white; border-left:5px solid white}
.box_skitter_home.maxxiz-theme .label_skitter p{padding:0; margin-top:5px; margin-bottom:5px; font-size:11px; text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.maxxiz-theme .label_skitter strong{margin-top:0; line-height:20px !important; font-size:15px; text-shadow:0 1px 0 rgba(0,0,0,.3); color:white}
.box_skitter_home.maxxiz-theme .label_skitter a{color:#fff; text-decoration:none; font-family:arial,tahoma; font-size:17px; text-shadow:1px 1px #00D2D9}
.box_skitter_home.maxxiz-theme .label_skitter a:hover{color:#00D2D9}
.box_skitter_home.maxxiz-theme .info_slide_thumb{background-color:#FFF}
.box_skitter.maxxiz-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,
.box_skitter .container_skitter .cm{font-size:8px}
.box_skitter .container_skitter .date span{margin-right:3px}
#autoslidenya .widget-content,
#manualslidenya1 .featuredarea{margin:0; padding:2px}
#manualslidenya1 .featuredarea{margin:0 0 15px}
* ثم قم بالبحث عن الكود التالي
</head>
* والصق الكود التالي قبله مباشره
<script type="text/javascript" src="http://yourjavascript.com/3102224223/slideshow-jalal-maxxiz.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
*أخيرا قم بالبحث عن أحد هذه الأكواد
<div id='main-wrapper'>
او
<div id='content'>
او
<div id="content"></div>
او
<div class='column-center-inner'>
*ألصق الكود التالي بعده
لاتنسى تغير رابط مدونتي<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='clear'/>
<div id='featpost'/>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
blogURL: "http://warch-mo.blogspot.com/",
MaxPost:10,
tagName: "قوالب بلوجر"
});
</script>
<div class='clear'/>
</b:if>
وتغير كلمة "قوالب بلوجر" بإسم القسم الذي تريد أن يظهر
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك...
دمتم بود في أمان الله
الاشتراك في:
الرسائل (Atom)
مميزة
-
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو...
-
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط...
-
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان...
-
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في...
-
السلام عليكم و رحمة الله تعالى وبركاته تعتبر التعليقات خاصية مهمة في المداونات و المواقع عامة، و هي بمثابة الشريان الذي يصل بين المدو...
-
السلام عليكم ورحمة الله تعالى و بركاته. أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض ...
-
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر...
-
السلام عليكم و رحمة الله وبركاته . هل تريد كسب مهتمين ومتابعين ؟! هل تريد نشر مواضيعك بأكبر نسبة ممكنة في مواقع التواصل الإجتماعية، اليو...
-
السلام عليكم ورحمة الله و بركاته قالب بلوجر الخاص بمدونة المحترف أخر إصدار أعلم أن الكثير من المدونين يعشقون هذا النوع من القوالب , وهذ...
-
السلام عليكم ورحمة الله وبركاته متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، الم...
تعليقات الزوار
تواصل معنا على الفيسبوك
أهم المواضيع
-
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو...
-
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط...
-
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان...
-
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في...
-
السلام عليكم و رحمة الله تعالى وبركاته تعتبر التعليقات خاصية مهمة في المداونات و المواقع عامة، و هي بمثابة الشريان الذي يصل بين المدو...
-
السلام عليكم ورحمة الله تعالى و بركاته. أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض ...
-
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر...
-
السلام عليكم و رحمة الله وبركاته . هل تريد كسب مهتمين ومتابعين ؟! هل تريد نشر مواضيعك بأكبر نسبة ممكنة في مواقع التواصل الإجتماعية، اليو...
-
السلام عليكم ورحمة الله و بركاته قالب بلوجر الخاص بمدونة المحترف أخر إصدار أعلم أن الكثير من المدونين يعشقون هذا النوع من القوالب , وهذ...
-
السلام عليكم ورحمة الله وبركاته متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، الم...

