سلايدشو احترافي يقوم بعرض مواضيع المدونه تلقائيا (سلايدشو ليوماجازين)
بسم الله والصلاة والسلام على رسول الله , مرحبا بكم اخواني في كل جديد من
مدونة جلال البعداني , اليوم باذن الله سوف سنتظرق الى كيفية اضافة سكريبت سلايد شو
احترافي (سلايد شو قالب ليوماجازين) لمدونات بلوجر بطريقه سهله ومضمونه , طبعا هذا
السلايد شو غني عن التعريف فمعظم المدونين يعرفونه , مايميز هذا السلايد شو انه يضفي لمسة
جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر
المواضيع أهمية في المدونه , ومن مميزاته ايضا انه يقوم بعرض اخر مواضيع المدونه
بطريقه تلقائيه بشكل دون الحاجه الى ادراج روابط وصور المواضيع فيه, الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله
كيفية اضافة هذه الاداه الى مدوناتكم
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>
** والصق الكود التالي قبله تمامآ
.mainSlideshows {
width: 628px !important;height: 460px;margin-bottom: 20px;
position: relative;border: none;padding:10px;background:#fff;overflow:hidden;
}.mainSlideshows .sliderloader {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
#featuredPosts {overflow: hidden;height: 350px;width:628px;}
#featuredPosts .slide {display: none;position: relative;
width:628px;height:350px;}
#featuredPosts .slide img {float: left;width:628px;height:350px;}
#featuredPosts .slide .text {position: absolute;bottom: 0px;
left: 20px;z-index: 2;}
#featuredPosts .slide .text p {margin: 0px 60px 0px 0px;padding: 10px;}
#featuredPosts .slide .text h3 {font-size:16px;font-weight:bold;
text-shadow: 1px 1px 1px #017bb4;
margin: 0;padding: 10px;display: inline-block;
position: relative;top: 0px;}
#featuredPosts .slide .overlay {
position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
#featuredThumbs {position: relative;padding: 0px 20px;height:110px;}
#featuredThumbs ul {margin: 0;padding: 0;list-style: none;}
#featuredThumbs li {margin: 15px 14px 15px 0;padding: 0;
list-style: none;float: left;width:105px;max-width:105px;height:80px;
overflow:hidden;}
#featuredThumbs li img {float: left;cursor: pointer;
filter: grayscale(100%);-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);width:105px;max-width:105px;
height:80px;border-radius: 0px;box-shadow: none;}
#featuredThumbs li img:hover, #featuredThumbs li.active-slide img {
filter: none;-moz-filter: none;-webkit-filter: none;width:105px;
max-width:105px;}
#featuredThumbs ul.direction-nav {}
#featuredThumbs ul.direction-nav li {margin: 0;}
#featuredThumbs ul.direction-nav li a {
display: block;width: 15px;height: 15px;text-indent: -9999px;
position: absolute;top: 50px;right: -10px;padding:5px 2px;}
#featuredThumbs ul.direction-nav li a.prev {left: -10px;right: 620px;}
#featuredThumbs ul.direction-nav li a:hover {
opacity: .7;filter: alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}
#featuredPosts .slide .text, #featuredPosts .slide .text a {color: #fff;}
#featuredPosts .slide .text p {color:#FFF;text-shadow: 1px 1px #000;
background: rgba(0, 0, 0, 0.8);padding: 10px;}
#featuredPosts .slide .text h3 {background: #21b8ff;}
#featuredThumbs {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkxaymPBtezMz5zhBrYQAEDJDqVmZSaj_KRo1Hj1dbVuOK1dPdadPC0HifD23SfmVGGRwlmKg9jdeA97EYs9xZedTnl8_jOKSonwvyUhDTGftdG-alkH-JnbFms3oBkiV1qnrR4Im283nY/s1600/sliderThumbs.png) repeat-x top;}
#featuredThumbs ul.direction-nav li .prev {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_jStHuLe4_ENrFqzaj1bG19sBT-dr9DaHxTnpD6ZvaiYylI7_iElXowNkUFtQSbmoB_QLlOCkfknH1oBDw4PLfRVAdAY0tBPrRD7psrUvlb0oKTCbZnd5h4fHVOcttgZDJK1TSitEMBe/s1600/slider-arrows-prev.png) no-repeat center center;}
#featuredThumbs ul.direction-nav li .next {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLDXedUg4rly8Dzkd_7Ecv98cSvS795K6iJb-z26gffkjCkaonDAhYEyN2PKMu13Pju28OhWvCyNvNcVnNo0DXMBicZpdI4DyrMUzGXnT1b0yFBsdJJTFQL2J0089TF66UX58pfgSC9mZ/s1600/slider-arrows-next.png) no-repeat center center;}
.mainSlideshows .preloader {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJlYJH690maZl4VhKIXTaX6DXqLW0266wFnCSUjFwm6K4C24ukyz9A0H6H7yra9THkdtNDMvYMQ3paO-l0HyIa_S5-sABpR0IwydMBL2fR5zDOCPZI1grPuAYLjy5ccJN5dwqgUmrYEWx/s1600/ajax-loader.gif) center center no-repeat;
}
ثم قم بالبحث عن الكود التالي
</head>
** والصق الكود
التالي قبله مباشره (فوقه)
<script src='http://dl.dropboxusercontent.com/s/qd713000d962kms/jquery.flexslider-rtl.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' 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='mainSlideshows clearfix mainBorder' id='mainSlideshows'>
<div class='clearfix' id='featuredPosts'>
<div class='preloader'/><!--End Loading-->
<div class='slides'> <script src='http://yourjavascript.com/9138228314/slide1.js'/> <script type='text/javascript'>
var numposts = 20;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<script src='http://alb33dani.com/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</div><!--End Slides-->
</div><!--End featured Posts-->
<div class='clearfix' id='featuredThumbs'>
<ul class='slides'>
<script src='http://yourjavascript.com/1391494332/slide2.js'/>
<script type='text/javascript'>
var numposts = 10;
</script>
<script src='http://alb33dani.com/feeds/posts/default/?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</ul>
</div>
</div><!--End SlideShow-->
<script type='text/javascript'>
jQuery(document).ready(function($) {
jQuery('#featuredThumbs').flexslider({
namespace: "",
animation: "slide",
asNavFor: '#featuredPosts',
slideshow: false,
controlNav: false,
itemWidth: 105,
itemMargin: 11,
minItems: 2,
maxItems: 6
});
jQuery('#featuredPosts').flexslider({
namespace: "",
selector: ".slides > .slide",
animation: "slide",
sync: '#featuredThumbs',
slideshowSpeed: 5000,
animationSpeed: 900,
animationLoop: true,
slideshow: true,
controlNav: false,
directionNav: false,
start: function(slider) {
jQuery('.preloader').hide();
jQuery('#featuredThumbs').show();
}
});
});
</script></b:if>
الان يجب عليك استبدال رابط مدونتي http://alb33dani.com برابط مدونتك (ستجده مكرر مرتين)
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك
