كيفية اضافة سكريبت سلايد شو احترافي (سلايد شو قالب ليوماجازين) لمدونات بلوجر بطريقه سهله ومضمونه , طبعا هذا السلايد شو غني عن التعريف فمعظم المدونين يعرفونه , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية في المدونه , ومن مميزاته ايضا انه يقوم بعرض اخر مواضيع المدونه بطريقه تلقائيه بشكل دون الحاجه الى ادراج روابط وصور المواضيع فيه, الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله
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/AVvXsEiAvz8c_hvMgSpFL-hxTGTAumpEF2SXwSNr63vAbh2aHsyS-kVsWxDTm_RVysrQe95XO_a-jXEPTlEktIWMmx5AqlLLgZVON5wW2v9hhoUOJsG0Vvykm9YTHbyR3eJ0sPvMIjPgGpsKXjLb/s1600/sliderThumbs.png) repeat-x top;} #featuredThumbs ul.direction-nav li .prev { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRIpKCQi291BfCJgi2Aurcgz1TuMVOQX1VwCokFPIZQ_IztDy3QIefFSiaJ5T3K2cY3X1KwakvA5ptsgvdQ8Ai5fUVENIrD-cFoZnIPCroNPEHydUjBHdTfgyjs-4jzAMtx7_CgeLeCbr/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/AVvXsEiJMkn8912ZLJzcEP2w80j42UGJvytfv5fbMw4-885aghFiOHbSk6OuA2FgjB5763sS_Z8sawp5oo89D9n1nIOjFRsyR4ulExLwpdPGF9Gq0565vy0jSHIQMQP-lK3M4eoVYdWUsVwPavLO/s1600/slider-arrows-next.png) no-repeat center center;} .mainSlideshows .preloader { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_9lgGGo-IXUmQKtsimyL5ADwWseV2YHpoRjdA_JCxFExVAv8vX-m0LlcC1bK5mXjHK6xpjxCKyHMvyekBBaOc9wVuKeHZ-Z_Hk788Epvsy0XtwbIP29VCKCjKbKKf905iYPDs0CdvDNxo/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
=
'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 برابط مدونتك (ستجده مكرر مرتين)
وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك
0 التعليقات:
إضغط هنا لإضافة تعليق
إرسال تعليق
Blogger Widgets