اضافة سلايد شو أكثر احترافية لمدونات بلوجر

السلام عليكم ورحمة الله

مرحبا بكم متابعي مدونة اضافات بلوجر الى موضوع جديد

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

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

كما يمكن لهذا السلايد شو ان يظهر أجزاء معينة من مواضيع المدونة يمكنك أن تختارها انت بنفسك بكل سهولة..

لنمر الان الى شرح طريقة تركيب هذه الاضافة الى المدونات :

اذهب الى لوحة التحكم في بلوجر

اختر التعديل القالب وقم بالدخول الى خاصية التعديل على HTML

قم بالبحث عن الكود التالي

 ]]></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(http://2.bp.blogspot.com/-DCmjx6RoZr4/USE6_AtfkoI/AAAAAAAAIew/Kymik1Hv4sY/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(http://2.bp.blogspot.com/-wlQ0ByipI94/USJMy6cTt4I/AAAAAAAAIhI/0ZQk2Nw-F-Y/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(http://3.bp.blogspot.com/-0sdXIJ1gg7E/USJMx9yN_NI/AAAAAAAAIg8/_c5LEVNSzyU/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(http://4.bp.blogspot.com/-z8Ap4NNJRac/USJMxgHGlDI/AAAAAAAAIg4/wblKthAlpyQ/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://4theblogger.blogspot.com/",

MaxPost:10,

tagName: "قوالب بلوجر"

});

</script>

<div class='clear'/>

</b:if>

 

قم باستبدال الرابط الموجود برابط مدونتك

 

وقم باستبدال كلمة "قوالب بلوجر" بأحد الأقسام الخاصة بمدونتك التي تريدها أن تظهر في السلايد شو.

 

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

 

السلايد شو يجعل مدونتك تظهر بشكل لائق وجميل جدا ويجعل زوار مدونتك يبقون مدة أطول في المدونة..

 

كما سيسهل على الزوار تصفح مواضيع مدونتك ببساطة وسهولة تامة..

 

الى هنا نكون قد انتهينا من شرح اضفة السليد شو الجميل الى مدونات بلوجر.

 

أتمنى أن يكون الشرح بسيط ومفيد والى اللقاء في شرح جديد.