الجمعة، 24 أكتوبر 2014

حصريا : سلايدر شو المحترف بشكل أنيق و مصغر

بقلم: BR MED يوم الجمعة، 24 أكتوبر 2014 القسم : 8 التعليقات
السلام عليكم ورحمة الله وبركاته،
الكثير من المدونين على البلوجر يفضلون أن تتوفر مدونتهم على السلايدر شو، هذا لأن السلايدر شو يزيد من جمالية الموقع وجذبيته ، و تختلف أنواعها ما بين التي تعدل يدويا و الأخرى التي تعمل بشكل تلقائي، و اليوم أحضرت النوع الأخير أي السلايدر التلقائي الذي يجسده سلايدر شو مدونة المحترف الجديد ، هذا السلايدر مشهور بشهرة صاحب موقعه إلا أنه مليء بالأخطاء وغير منسق ، و لقد قمت برفع أكواده من جديد و عملت على تحسينه وقمت بتصغيره ، رأيت فيه فراغ كبير سيجعله أقل جاذبية. يمكنك معاينته بالضغط هنا
طريقة إضافة السلايدر شو
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> ثم نلصق الكود التالي قبله مباشرة.
      <script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>
          featuredcontentslider.init({
            id: &quot;slider1&quot;, //id of main slider DIV
            contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
            toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
            nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; 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>
4- الأن نبحث عن أحد  الأكواد التالية:
<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

طريقة إضافة slader show المحترف بشكل صحيح

بقلم: BR MED يوم الخميس، 24 يوليو 2014 القسم : 0 التعليقات
 
السلام عليكم ورحمة الله وبركاته
السلايدر شو من بين الأليات المحسنة لجمالية واجهة المدونة أو الموقع وأيضا وسيلة وظيفية متطورة لعرض مواضيع المدونة ، و تختلف هذه السلايدرات من حيث العمل و الشكل و طريقة التنسيق و مميزاته وفي هذه التدوينة أحبابي في الله سوف نرى الطريقة الصحيحة لتركيب سلايدر شو المحترف المشهور و لقد إخترت هذا دون غيره لأنه مطلوب بكثرة و للأسف توجد أخطاء شائعة تمنع المدونين من الإستفادة منه يمكنك أن تعاينه مباشرة في رئيسية ورشة مدون
طريقة التركيب:
1- من  لوحة التحكم -> قالب -> تحرير HTML
     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'>
&lt;script&gt;
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
&lt;/script&gt;
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>
أخيرا قم بحفظ القالب ومبروك عليك السلاسيدر شو هذا كل مافي موضوع اليوم دمتم بود في أمان الله
إقرأ البقية

الأحد، 15 يونيو 2014

إضافة سلايدر شو قالب MAXXIZ لمدونات بلوجر

بقلم: BR MED يوم الأحد، 15 يونيو 2014 القسم : 0 التعليقات
السلام عليكم  و رحمة الله و بركاته,
يشكل السلايدر شو إحدى النقاط الجذابة في واجهة المدونة و بين المعايير التي تساهم في جمالية مدونتك ، بحيث إن كان السلايدر شو متناسق و خفيف يسهل على الزائر فهم طبيعة و إختصاص الموقع المتواجد به بمجرد أن يلقي نظره على المواضيع المعروضة فيه وفي هذه التدوينة أحبابي في الله سوف أشرح لكم طريقة إضافة سلايدر شو قالب MAXXIZ مميزات هذا القالب أنه يعرض المواضيع أتوماتيكيا و ذلك عبر إختيار إسم القسم المرغوب في عرضه، بالإضافة إلى أنه يقوم بالإنتقال من موضوع إلى أخر مستعينا بلامسات فنية تزيده جمالية وإحترافية

شرح كيفية إضافة السلايدر شو
 1- من  لوحة التحكم -> قالب -> تحرير HTML
 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 &gt; 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(&quot;#featpost&quot;).AutofeaturedPost({
blogURL: &quot;http://warch-mo.blogspot.com/&quot;,
MaxPost:10,
tagName: &quot;قوالب بلوجر&quot;
});
</script>
<div class='clear'/>
</b:if>
لاتنسى تغير رابط مدونتي
وتغير كلمة "قوالب بلوجر" بإسم القسم الذي تريد أن يظهر
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك...
دمتم بود في أمان الله
إقرأ البقية