Blogger Jquery Slider Menu Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrABCdYOuYPbwI26-6MT0vK-rMQnELE5DwFXtHGZ9cQsd8vPV5wxGZPC6FSkmacFxw8WABq946TLxVFQWC1u2SIy5b1gMjCcylMJ-S070ybGEIntAYNKClaLN2Ayz9-fOx0OOJqnPIqw91/s1600/slider-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrABCdYOuYPbwI26-6MT0vK-rMQnELE5DwFXtHGZ9cQsd8vPV5wxGZPC6FSkmacFxw8WABq946TLxVFQWC1u2SIy5b1gMjCcylMJ-S070ybGEIntAYNKClaLN2Ayz9-fOx0OOJqnPIqw91/s320/slider-menu.png" width="320" /></a></div><div class="hata" style="clear: both; text-align: center;">Blogger Jquery Slider Menu Eklentisi</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Menu Eklentisini blogger blogunuza eklemek için şağıdaki anlatılanları yapmanız yeterli..</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzdaki ziyaretçilerinize önemli konularınızı , duyurularınızı göstermek için güzel bir eklenti...Kullanımı ve görüntüsüde oldukça hoş..</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Hemen anlatıma geçelim..</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="hata" style="clear: both; text-align: center;">Aşağıdaki kodumuzu bulalım.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">]]></b:skin><br /></pre><div class="hata" style="clear: both; text-align: center;">Hemen üstüne alttaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;">/*--Main Container--*/<br />.main_view {<br />float: left;<br />position: relative;<br />}<br />/*--Window/Masking Styles--*/<br />.window {<br />height:250px; width: 500px;<br />overflow: hidden; /*--Hides anything outside of the set width/height--*/<br />position: relative;<br />}<br />.image_reel {<br />position: absolute;<br />top: 0; left: 0;<br />}<br />.image_reel img {float: left;}<br /><br />/*--Paging Styles--*/<br />.paging {<br />position: absolute;<br />bottom: 40px; right: -7px;<br />width: 178px; height:47px;<br />z-index: 100; /*--Assures the paging stays on the top layer--*/<br />text-align: center;<br />line-height: 40px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMNlh0pnyB-R_fku2E5PDxOUs_7OthSQOKfnIcnEOhDhKK0tTS7FGy-a3vrkqygBo9e15P1fuMBPWnnOwmu3LCTMXvH5ihSv5s7f8KvZoev1UK2Hn5ROVbYYxGYxv76T0sUhbmHjbeXsT/s1600/paging_bg2.png) no-repeat;<br />display: none; /*--eklentileri.blogspot.com--*/<br />}<br />.paging a {<br />padding: 5px;<br />text-decoration: none;<br />color: #fff;<br />}<br />.paging a.active {<br />font-weight: bold;<br />background: #920000;<br />border: 1px solid #610000;<br />-moz-border-radius: 3px;<br />-khtml-border-radius: 3px;<br />-webkit-border-radius: 3px;<br />}<br />.paging a:hover {font-weight: bold;}<br /></pre><div class="hata" style="clear: both; text-align: center;">Şimdide bu kodu bulalım.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"></head><br /></pre><div class="hata" style="clear: both; text-align: center;">Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left: 11px double rgb(185, 211, 238); color: black; font-family: Andale Mono,Lucida Console,Monaco,fixed,monospace; font-size: 10px; height: 100%; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br /><br />$(document).ready(function() {<br /><br />//Set Default State of each portfolio piece<br />$(&quot;.paging&quot;).show();<br />$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);<br /><br />//Get size of images, how many there are, then determin the size of the image reel.<br />var imageWidth = $(&quot;.window&quot;).width();<br />var imageSum = $(&quot;.image_reel img&quot;).size();<br />var imageReelWidth = imageWidth * imageSum;<br /><br />//Adjust the image reel to its new size<br />$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});<br /><br />//Paging + Slider Function<br />rotate = function(){ <br />var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide<br />var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com<br /><br />$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class<br />$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)<br /><br />//Slider Animation<br />$(&quot;.image_reel&quot;).animate({ <br />left: -image_reelPosition<br />}, 500 );<br /><br />}; <br /><br />//Rotation + Timing Event<br />rotateSwitch = function(){ <br />play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds<br />$active = $(&#39;.paging a.active&#39;).next();<br />if ( $active.length === 0) { //If paging reaches the end...<br />$active = $(&#39;.paging a:first&#39;); //go back to first<br />}<br />rotate(); //eklentileri.blogspot.com<br />}, 7000); //Timer speed in milliseconds (3 seconds)<br />};<br /><br />rotateSwitch(); //Run function on launch<br /><br />//On Hover<br />$(&quot;.image_reel a&quot;).hover(function() {<br />clearInterval(play); //Stop the rotation<br />}, function() {<br />rotateSwitch(); //Resume rotation<br />}); <br /><br />//On Click<br />$(&quot;.paging a&quot;).click(function() { <br />$active = $(this); //Activate the clicked paging<br />//Reset Timer<br />clearInterval(play); //Stop the rotation<br />rotate(); //Trigger rotation immediately<br />rotateSwitch(); // Resume rotation<br />return false; //Prevent browser jump to link anchor<br />}); <br /><br />});<br /></script><br /></pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki işlemleri yaptıysanız , kaydet diyelim.. </div><br /><div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s1600/BURAYA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFUFybFFTOjE4sV4D14z8r-C4OJnQTGfk6qvLDEaLgW0zpuyJW5N4SMxJOdMiEFWDbitfOnrIxA0QYvwDrqsmlplK7Gl6qP4JLA0zPnKTVREqEhLN7L1GpZIsVxzzscTAAJ6k46Li4Rh2/s320/BURAYA.png" width="320" /></a></div><br /><div class="hata" style="clear: both; text-align: center;">Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim.. </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 10px; height: 100%; line-height: 14px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 100%;"><span style="color: black;"><div class="container"><br /><br /><div class="folio_block"><br /><br /><div class="main_view"><br /><br /><div class="window"> <br /><div class="image_reel"><br /><br /><a href="</span><span style="color: red;">http://eklentileri.blogspot.com/</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWhc1qRrX0pI7Iz7LcAxaw-Qvv8Fp6-NZwvLvNCDlv5hPX4w3cjfpWsFu3HuFWBXzMRjeWCAr94BJozrxEzoQLPyjR6nSsObsW7gPrBtN61DfyDNmUl6XsOXXF8bRetLv7VH9OhiZJS8i/s1600/slider-image-1.jpg</span>" alt="" /></a><br /><br /><br /><a href="<span style="color: red;">http://eklentileri.blogspot.com/</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_B5assZHqOxyWxcFedMGlheEDoGsk8SAXol9-vrHY2QJRrCoTJRB5bQWjlXZhh063Cu-AereQ1-XJAI12-hT4BwsCoDf-qRkAAKdo1n2PLHUQaW6vicM-vN8D6hw1R8jhF1GSCBYh3-u/s1600/slider-image-2.jpg</span>" alt="" /></a><br /><br /><br /><a href="<span style="color: red;">http://eklentileri.blogspot.com/</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOFYkZWTOp3xQ48RcJswDVDW2Bq8nr0ggScHsSiYhpWFUIt1cOPApT6vHJswtkFDyrFX4q4T_pLms1z4bIAPDNP2V_fRtbeLnDcKPAqrV-u25n40eZ7JSpjRkRfjrn-YXOGkfWAfD4-gJ/s1600/slider-image-3.jpg</span>" alt="" /></a><br /><br /><br /><a href="<span style="color: red;">http://eklentileri.blogspot.com/</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYXk9nHNPknIoobheCbjrIz5OKfxgqTj9pepjtnaDCSL1ICfqJIfhePUFRKW6X1ViF83iRwT9SKfxW9G7C87Zg7Jj3-cEOhTqbJTlY_vxVZ7HNcpL6El7d_pcKyoHCD3wSczRTyj7MwSD/s1600/slider-image-4.jpg</span>" alt="" /></a><br /><br /><a href="<span style="color: red;">http://eklentileri.blogspot.com/</span>"><img src="<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmfzc0CYBYgWi30G3KG_Y-JW-j_XOp1hnTYZ9_zr031YfKouTndBlqjKPBoCNXbEq9b_jhC7c6yXX0btwLu3BKog8MkNrBAxdrROUbPwQl0DqRCufkTkrpST8aYS-5gV3MblgKVlhyphenhyphenDZR/s1600/slider-image-6.jpg</span>" alt="" /></a><br /><br /><br /></div><br /></div><br /><div class="paging"><br /><br /><a href="#" rel="1">1</a><br /><a href="#" rel="2">2</a><br /><a href="#" rel="3">3</a><br /><a href="#" rel="4">4</a><br /><a href="#" rel="5">5</a><br /><br /></div><br /></div><br /><br /></div> <br /><br /></div><br /></pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki <span style="color: red;">kırmızı</span> olan yerleri kendinize göre düzenleyin..<b><a href="http://eklentilerideneme2.blogspot.com/" target="_blank">DEMO</a></b></div><br /><br /><div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> <br /><br />Blogger Jquery Slider Menu Eklentisi , Blogger Jquery Slider Menu  , Blogger Jquery  Menu Eklentisi , Blogger Jquery  Menu , Blogger  Slider  Eklentisi , Blogger Jquery  Eklentisi , Blogger Slayt Menu</div>

Blogger Jquery Slider Menu Eklentisi

Blogger Jquery Slider Menu Eklentisi Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Me...

Devamı »