الأحد، 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>
لاتنسى تغير رابط مدونتي
وتغير كلمة "قوالب بلوجر" بإسم القسم الذي تريد أن يظهر
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك...
دمتم بود في أمان الله

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r