Blog üçün Şəkil slaydı (image slider)

Bu dərsdə sizlərə yeni və baxımlı blogunuz üçün əla slayd düzəltməyi öyrədəcəm.Bu slayd blogunuzu daha baxımlı və peşəkar göstərəc...

Bu dərsdə sizlərə yeni və baxımlı blogunuz üçün əla slayd düzəltməyi öyrədəcəm.Bu slayd blogunuzu daha baxımlı və peşəkar göstərəcək.
Bu Animasiyalı slaydı öz blogunuza qoymaq üçün aşağıdakı addımları etmək lazımdır.

1. Menyuya (Dashboard) daxil oluruq
2. Template(Şablon)
3. Edit Html (Html Düzenle)
4. Axtarış edirik və aşağıdakı kodu tapırsan. 
Qeyd. Axtarış üçün klaviyaturadan istifadə edin  CTRL+F

</head>

5. İndi isə aşağıdakı kodu yuxarıdakı kodun üstünə əlavə edirik.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <!--[if IE]> <style type="text/css"> .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; } </style> <![endif]--> <script type='text/javascript'> $(window).load(function() { $('#featured').orbit({ advanceSpeed: 5000, 'bullets': true, 'timer' : true, 'animation' : 'horizontal-slide' }); }); </script> <script type='text/javascript'> //<![CDATA[ /* * jQuery Orbit Plugin 1.1 * www.ZURB.com/playground * Copyright 2010, ZURB * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ (function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&& x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0}, a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"> <span class="mask"><span class="rotator"></span></span><span class="pause"></span></div> ');var j=e("div.timer"),p;if(j.length!=0){var C= a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B; d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"> <span class="orbit-caption"></span></div> ');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h}, a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"> <span class="right">Right</span><span class="left">Left</span></div> ');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul> ');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e(" <li>"+i+"</li> ");e("ul.orbit-bullets").append(j); j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery); //]]> </script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Diqqət. Əgərin sizin Blogda JQuery varsa vəya əvvəl əlavə etmisinizsə onda yuxarıdakı kodun ilk hissəsini silmək lazımdır.Əgər yoxdursa Pozmayın.

6. İndi sə aşağıdakı kodu axtarın...

]]></b:skin>

7. Tapdığımız kodun üzərinə aşağıdakı kodu əlavə edin.

#featured {height: 1px; width: 1px; overflow: hidden;} div.orbit { width: 1px; height: 1px; position: relative; overflow: hidden; } div.orbit img { position: absolute; top: 0; left: 0; } div.orbit a img {border: none;} div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right:10px; opacity: .6; cursor: pointer; z-index: 1001; } span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RG1EHEC_cQsg7QpC-68y4tZFvBNzcFVjNzkOqHhL54ulUhhfUEQwE-GUBfEgf565dJNirBgRqalrBE7PFkmGxTz19eMCp4JXfahBOqWxiRsXuDgSp-ZhqZekqDn442PBpK3jykj3T4Fn/s1600/timer-icon.png); background-repeat: no-repeat; z-index: 3; } span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } span.rotator.move {left: 0;} span.mask.move { width: 40px; left: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyn26BSHrTkHwYSF8n6p76OJcVSLXkrllvJweGdRtr-dMvM1_yyZCNDPQzX6ROBGnXBKulBHd-r4L6RAaKro_WVGDrOUNQxJ1tRJTQ4XYp-rfp5VABufd3UlBd1Ftavwy5jKeIM-DU2_L/s1600/timer-right.png); background-repeat: repeat; background-position: 0px 0px; } span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbVCqsYsXWQocOA-6taa-WCpf2A6eHTr4O726OI6QUrQyK-okoISqpW2365DnPIG-wt0dKZfBNgrCcDZCcTnWGNXNUziEM9Sl6WI5mPu8GYbseGNfIxUYGwgFDlNKS-iyB4OVj8Kh_KrgG/s1600/pause-icon.png); background-repeat: no-repeat; z-index: 4; opacity: 0; } div.timer:hover span.pause, span.pause.active, div.timer:hover span.pause.active { opacity: 1; } div.caption { background: #000; background: rgba(0,0,0,.6); width: 100%; z-index: 1000; position: absolute; bottom:-100px; color: #fff; padding: 8px 0; text-align: center; } div.caption span { padding: 0 10px; font-size: 14px; text-shadow: 0px 1px 0px rgba(0,0,0,.8); margin: 0; } .orbit-caption { display: none; } div.orbit:hover div.slider-nav { display: block; } div.slider-nav { display: none; } div.slider-nav span { width: 33px; height: 33px; text-indent: -9999px; position: absolute; z-index: 1000; top: 43%; cursor: pointer; } div.slider-nav span.right { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFclHo2pRphPJi6kklttWsPItOhNFqLKp8hiLFZW-Zqv3tcw0yUBRHLsWX9WkyXLkxbwjcIZgpLS7lOX_sFXKyaFtzYJGmietHhq-b9VmKnTH6l9yQWd3mdOwFchyphenhyphenYwZ9vJ8hKtn9p6ng/s1600/arrow-right.png); right: 10px; } div.slider-nav span.left { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4pPVHgPd-pQdsIsDEES66XtCPAR0yGEXS7pOAeuxV7IBd4ixK0jcX8etcEfuWCeOht5dwONXLBixdO9c2nJZPX5GuNLwLGDw5SussLOZuIy4j_rhIx9EbUHdEW4LWv12PFcyJUSuinz_N/s1600/arrow-left.png); left: 10px; } .orbit-bullets { position: absolute; z-index: 1000; list-style: none; top: 10px; left: 7px; margin: 0; padding: 0; } .orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Zfxk0DM7tY1igQKgJLvW7owUn7meUIoCNOnz_-Ihax3djLrXZ-v6Qg41ZgP8EWE288BX4Vl2HvslnW62pTRXB1KMZU_qg1WXvkfo8OXbXIPTV2ZRro5fHL7zCYRWZd6LXvI3LY0WGkZ8/s1600/bullets.png); background-repeat: no-repeat; background-position: 0 0; width: 7px; height: 7px; overflow: hidden; } .orbit-bullets li.active { color: #222; background-position: -7px 0; }

8. Save (Şablonu Kaydet) edirik.

İndi isə Html kodu əlavə etmək lazımdır.Bunun üçün Layout (Yerleşim) daxil oluruq. Layout-a daxil olduqdan sonra Add  Gadget ( Gadget Ekle) əlavə edirik.Açılmış pəncərədən Html/javascript -i seçirik.

9. Aşağıdakı kodu Html olan hissəyə əlavə edirik.

<div id='featured'> <a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a> <span class='orbit-caption' id='photo1'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span> <a href="Link URL"><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a> <span class='orbit-caption' id='photo2'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span> <a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a> <span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span> <a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a> <span class='orbit-caption' id='photo4'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span> </div>

a. Link URL - sizin səhifənizin adresi
b. image URL - sizin şəkilinizin url-i

 Bunları etdikdən sonra save (Kaydet) edirik.