web-xL: Slider

Blogger Bu Yazıyı Okudunuz mu Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlK32avlS6QzzzxQn8IqLt165FEo_nYZ3noSwQP6-7XcbbcsXgTnCI59rl5yx5ZCynUq0B6RzdPgOKw4r3nJodSe4RSzF9BcJMZoMCfnVcQHBoOyePrnX_ZUu24Th-C0Wcbj1KZW1Ko2F/s1600/bu-yaz%C4%B1-eklenti.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBlK32avlS6QzzzxQn8IqLt165FEo_nYZ3noSwQP6-7XcbbcsXgTnCI59rl5yx5ZCynUq0B6RzdPgOKw4r3nJodSe4RSzF9BcJMZoMCfnVcQHBoOyePrnX_ZUu24Th-C0Wcbj1KZW1Ko2F/s320/bu-yaz%C4%B1-eklenti.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Blogger blogunuzda , ziyaretçileriniz sayfada aşağı indiklerinde , rastgele bir yazı göstermek istermisiniz ?</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Blogger Bu Yazıyı Okudunuz mu Eklentisi , blogunuzun sağ altında çıkar , ziyaretçiniz isterse bu eklentiyi X butonu ile minimize edebilir</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="hata" style="clear: both; text-align: center;"><b>Yerleşim >> Gadget Ekle >> HTML/JavaScript </b>yolu ile açılan panele altta yer alan kodları ekliyoruz </div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><span style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: x-small;"><span style="line-height: 14px;"><div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Bu Yazıyı Okudunuz mu ?</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://yourjavascript.com/22209113892/recom.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://eklentileri.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVK6L5JP8Mn1CpyAWs2zkCkL2w7nJNtFXZ7WrGB-cUqeYPTo4yKgdnjbb30RtMLEEEeQ6jafTzSnrfW7YfV4mqriwpo6cWLSTXiNJ0RwD-rj11TVy3vQqqpZrECuxlcQYGsgvXGQWwvBk/I/bloggerplugins.png" alt="Bu yazıyı okudunuz mu" /></a></span></span></pre><div class="hata" style="clear: both; text-align: center;">Şimdide şablon kısmına giryoruz , (Widget Şablonlarını Genişlet kutucuğunu işaretlemeyi unutmayın) Aşağıdaki kodları arıyoruz , <b>bu 3 koddan sizde olanın altına ekliyeceksiniz..kodlar blogunuzda 2-3 tane olabilir , hepsini deneyin mutlaka çalışacaktır.. </b></div><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 11px; height: 100%; overflow: auto; padding: 5px; width: 100%;"><span style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: x-small;"><span style="line-height: 14px;"><div class='post-footer-line post-footer-line-1'><br /><br /><br /><b><span style="color: red;">YADA</span></b><br /><br /><br /><p class='post-footer-line post-footer-line-1'><br /><br /><br /><b><span style="color: red;">YADA</span></b><br /><br /><br /><data:post.body/><br /><br /><br /><br /><br /><b>ÜSTTEKİ 3 KODDAN BLOGUNUZDA OLANI BULUN<br /> VE HEMEN ALTINA ALTTAKİ KODLARI EKLEYİNİZ</b><br /><br /><b:if cond='data:blog.pageType == "item"'><br /><div style='display:none' id='bpslidein_place_holder'></div><br /></b:if><br /></span></span></pre><div class="hata" style="clear: both; text-align: center;">Yapmanız gereken bu kadar , Blogger Bu Yazıyı Okudunuz mu Eklentisi hazır...son olarak bu eklenti anasafada çalışmaz , yazı sayfalarınızda çalışacaktır.. <br /><br /><a href="http://bloggereklentilerideneme8.blogspot.com/2012/10/deneme-yazs-2.html" rel="nofollow" target="_blank">DEMO</a></div><br /><br /><div class="arama" style="clear: both; text-align: center;"><br /><<< Bu Yazı için Arama Sonuçları  >>> <br /><br />Blogger Bu Yazıyı Okudunuz mu Eklentisi , Blogger Bu Yazıyı Okudunuz mu , Rastgele yazı kutusu , Blogger  Rastgele yazı , Recommended Post Slide out for Blogger , Recommended Post Slide out for Blogger widget  , Bu Yazıyı Okudunuz mu , Bu Yazıyı Okudunuzmu<br /></div><br />

Blogger Bu Yazıyı Okudunuz mu Eklentisi

Blogger blogunuzda , ziyaretçileriniz sayfada aşağı indiklerinde , rastgele bir yazı göstermek istermisiniz ? Blogger Bu Yazıyı Okudunuz mu ...

Devamı »

Blogger Nivo Slider Eklentisi

<div class="ikaz" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUeOnSW4k1GSuPnvi3qIEnEv6PCnZQ2JkotxGn-w2E992cePQ23BMhMIJ4cunvhn526vcUlNckOOKeuIbz_pRDNB10jgiO9yOsDTEOJSQYTXAJtN5MUKdAswTP7bbOH1TK6JhWb-epM7O/s1600/nivo_slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUeOnSW4k1GSuPnvi3qIEnEv6PCnZQ2JkotxGn-w2E992cePQ23BMhMIJ4cunvhn526vcUlNckOOKeuIbz_pRDNB10jgiO9yOsDTEOJSQYTXAJtN5MUKdAswTP7bbOH1TK6JhWb-epM7O/s320/nivo_slider.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="ikaz" style="clear: both; text-align: center;">Blogger Nivo Slider Widget</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Öncelikle bu eklentinin demosunu <a href="http://nivo.dev7studios.com/demos/3/" target="_blank"><b>BURDAN</b></a> görebilirsiniz , <b>Aynı zamanda bu slider eklentisini bizde kullanmaktayız , ana sayfamızda görebilirsiniz </b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="bilgi" style="clear: both; text-align: center;">Lafı uzatmadan , Blogger Nivo Slider Eklentisini blogger blogunuza nasıl ekleyeceğinizi anlatalım..</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="hata" style="clear: both; text-align: center;">Aşağıda yer alan kodu buluyoruz... </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 , aşağıdaki kodlarımızı ekliyoruz.. </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%;">/*Start Nivo Slider Css eklentileri.blogspot.com*/<br />/*<br />* Copyright 2011, Gilbert Pellegrom<br />* Free to use and abuse under the MIT license.<br />* http://www.opensource.org/licenses/mit-license.php<br />* For blogger by - Rahul Ippar @ helperblogger.com<br />* <br />* March 2010<br />*/<br /><br /><br />/* The Nivo Slider styles */<br />#slider {<br />width: 618px;<br />height: 246px;<br />}<br /><br />.nivoSlider {<br />position: relative;<br />}<br /><br />.nivoSlider img {<br />position: absolute;<br />top: 0px;<br />left: 0px;<br />}<br />/* If an image is wrapped in a link */<br />.nivoSlider a.nivo-imageLink {<br />position: absolute;<br />top: 0px;<br />left: 0px;<br />width: 100%;<br />height: 100%;<br />border: 0;<br />padding: 0;<br />margin: 0;<br />z-index: 6;<br />display: none;<br />}<br />/* The slices and boxes in the Slider */<br />.nivo-slice {<br />display: block;<br />position: absolute;<br />z-index: 5;<br />height: 100%;<br />}<br /><br />.nivo-box {<br />display: block;<br />position: absolute;<br />z-index: 5;<br />}<br />/* Caption styles */<br />.nivo-caption {<br />position: absolute;<br />left: 0px;<br />bottom: 0px;<br />background: #000;<br />color: #fff;<br />opacity: 0.8;<br />/* Overridden by captionOpacity setting */<br />width: 100%;<br />z-index: 8;<br />}<br /><br />.nivo-caption p {<br />padding: 5px;<br />margin: 0;<br />}<br /><br />.nivo-caption a {<br />display: inline !important;<br />}<br /><br />.nivo-html-caption {<br />display: none;<br />}<br />/* Direction nav styles (e.g. Next & Prev) */<br />.nivo-directionNav a {<br />position: absolute;<br />top: 45%;<br />z-index: 9;<br />cursor: pointer;<br />}<br /><br />.nivo-prevNav {<br />left: 0px;<br />}<br /><br />.nivo-nextNav {<br />right: 0px;<br />}<br />/* Control nav styles (e.g. 1,2,3...) */<br />.nivo-controlNav a {<br />position: relative;<br />z-index: 9;<br />cursor: pointer;<br />}<br /><br />.nivo-controlNav a.active {<br />font-weight: bold;<br />}<br />/*<br />Skin Name: Pascal Theme<br />Skin URI: http://nivo.dev7studios.com<br />Skin Type: fixed<br />Description: A nice, light skin for the Nivo Slider.<br />Version: 1.0<br />Author: Gilbert Pellegrom & Pascal Gartner<br />Author URI: http://dev7studios.com<br />*/<br /><br />.theme-pascal.slider-wrapper {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwt5x9uRz6u-fHisxFCou8_5FmdFOHqm-ewLgrak9IBfhkvar41nX5ZMbxcaaVGaIBK8vi4E8b_KStIlUlA2PCp55F5fL188oAuF4XVrtDJJWj2q-sWX8kq5bXXpXhRhphmBnZmI13yMW/s1600/helperblogger-slider-bg.png) no-repeat;<br />width: 668px;<br />height: 299px;<br />margin: 0 auto;<br />padding-top: 17px;<br />position: relative;<br />}<br /><br />.theme-pascal .nivoSlider {<br />position: relative;<br />width: 630px;<br />height: 235px;<br />margin-left: 19px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtFPz_mUV0oFAqRbUfNF6D_knZqR5wQmtfUsFUhzV0FEqqW1u6PA7PmrcvXY3bxhfKV34rrZ9mrlM0dSYRYADj_tUP0LaEpuErdZLlSqX6BlK-68K7oEs93QHXq3zR_zb-009iWTlomBuZ/s1600/helperblogger-loading.gif) no-repeat 50% 50%;<br />}<br /><br />.theme-pascal .nivoSlider img {<br />position: absolute;<br />top: 0px;<br />left: 0px;<br />display: none;<br />width: 630px;<br />/* Make sure your images are the same size */<br />height: 235px;<br />/* Make sure your images are the same size */<br />}<br /><br />.theme-pascal .nivoSlider a {<br />border: 0;<br />display: block;<br />}<br /><br />.theme-pascal .nivo-controlNav {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbONOGeUOc4yGPqjDkqEA50w7ewyvYAqkItUhPI-kWBOUFJMkbCzebANlDnSbrpy9vgoootWiTDFzE9YdNxS5JLeQmhDceWPqmcXHq05H0x09zoFoW4N0hX-D_dCzGLPouyIc7AHfmuBKg/s1600/helperblogger-controlnav.png) no-repeat;<br />width: 251px;<br />height: 40px;<br />position: absolute;<br />left: 200px;<br />/* Tweak this to center bullets */<br />bottom: -42px;<br />padding: 8px 0 0 82px;<br />z-index: 20;<br />}<br /><br />.theme-pascal .nivo-controlNav a {<br />display: block;<br />width: 22px;<br />height: 22px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkxYSkBiyHrV9oa7Sq0Q_aYAPVLrRKsp76U3vZ3mS9N00xswYAE5buV9OGAH_xPRuXLPHiM4FHuUpUikkf0sMMUVMpkz12sDUjQtkka_cfLcSjV4SXJF7frF8dboG-3Ltd2NBCR7Lb9D_/s1600/helperblogger-bullets.png) no-repeat;<br />text-indent: -9999px;<br />border: 0;<br />margin-right: 3px;<br />float: left;<br />}<br /><br />.theme-pascal .nivo-controlNav a.active {<br />background-position: 0 -22px;<br />}<br /><br />.theme-pascal .nivo-directionNav a {<br />display: none;<br />}<br /><br />.theme-pascal .nivo-caption {<br />bottom: 40%;<br />left: auto;<br />right: 0px;<br />width: auto;<br />max-width: 630px;<br />overflow: hidden;<br />background: #fff;<br />text-shadow: none;<br />font-family: arial, serif;<br />color: #4c4b4b;<br />}<br /><br />.theme-pascal .nivo-caption p {<br />padding: 5px 15px;<br />color: #333;<br />font-weight: bold;<br />font-size: 27px;<br />text-transform: uppercase;<br />}<br /><br />.theme-pascal .nivo-caption a {<br />color: #333;<br />font-weight: bold;<br />font-size: 27px;<br />text-transform: uppercase;<br />}<br /><br />.theme-pascal .ribbon {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTjbs0xst1PUK0Gh1xOatPjMu1LXd6O73Ll3eujfhW-UUGlysgs0Tdw7rWTCt0FNVe4zATan2Oq4A85XXs6lae6zHRLi4DRBRK_DznHar7wt1GzZjTiPZGwNZA4XWkMVRfp8c9RwKe3yL/s1600/helperblogger-ribbon.png) no-repeat;<br />width: 111px;<br />height: 111px;<br />position: absolute;<br />top: -8px;<br />left: -8px;<br />z-index: 300;<br />}<br />/*End Nivo Slider Css eklentileri.blogspot.com*/<br /></pre><div class="hata" style="clear: both; text-align: center;">Şimdi ise aşağıdaki kodumuzu buluyoruz. </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%;"></body><br /></pre><div class="hata" style="clear: both; text-align: center;">Bu kodumuzunda hemen üstüne , aşağıda yer alan kodlarımızı ekliyoruz. </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%;"><br /><script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><br /><script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(window).load(function() {<br />$(&#39;#slider&#39;).nivoSlider();<br />});<br /></script><br /></pre><div class="hata" style="clear: both; text-align: center;">Üstte yer alan işlemleri yaptıysanız , şablon kısmı ile işimiz bitti , kaydedebilirsiniz.. </div><br /><div class="hata" style="clear: both; text-align: center;">Şimdi <b>yerleşim</b> kısmına girip , <b>Gadget Ekle >> HTML/JavaScript</b> seçeneği ile açılan panele aşağıda yer alan kodlarımızı ekliyoruz.. </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: auto; padding: 5px; width: 100%;"><div class="slider-wrapper theme-pascal"><br /><div class="ribbon"></div><br /><br /><div id="slider" class="nivoSlider"><br /><br /><a href="<b><span style="color: blue;">http://eklentileri.blogspot.com/2012/04/blogger-facebook-yorum-kutusu-ekleme.html</span></b>"><img src="<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoP5B02tG9RGh0D1vH4Cin_GxtzyyA7XSBs9FhYCwRg87MORlL56aw85rEKB93U00MZHgMhyphenhyphenQ_RI3wgRqgP-tuGcPjtFpTxKhhqns9Ii_LdWbwe4tSdHaWBUPeK3ZzlRdzmijTcD9avQRw/s1600/facebook-yorum-kutusu-eklentisi-ekleme.png</span></b>" alt="" title="<b>isteğe bağlı yazı</b>" /></a><br /><a href="<b><span style="color: blue;">http://eklentileri.blogspot.com/2012/03/blogger-yorum-kutusuna-arka-plan-ekleme.html</span></b>"><img src="<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8BMHnLdZTAJ6BJT-45ymEomkMZb828O_oHTBD1FV3vOBFtpCl7BmF370cbeh1X4-Ep1e6WeLfOpJnbwMy0njyS_mFmSkQS4lDOgYexHCK7fUnQNDgbNS_Qhfiq7Em4RmXGTzjnqR9r_5/s1600/yorum-formu.png</span></b>" alt="" title="<b>isteğe bağlı yazı</b>"  /></a><br /><br /><a href="<b><span style="color: blue;">http://eklentileri.blogspot.com/2012/04/yandan-aclr-facebook-ve-twitter-takipci.html</span></b>"><img src="<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVPNFwfvcd_ou61FGurBRjxYZudIk41AT-4MDTGTduPeKs-gvGxVtgiYry8S34s7XvGADST1wJi0SwUV-wU8nlBeUpTQhHUq6RL46sC_N515y75Jw2PNpMyZ_DqfYSILnUxj1l4C3cs4y/s1600/takipci.png</span></b>" alt="" title="<b>isteğe bağlı yazı</b>" /></a><br /><br /><a href="<b><span style="color: blue;">http://eklentileri.blogspot.com/2012/03/blogger-admin-yazar-yorumlarn-farkl.html</span></b>"><img src="<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo9271yQsKnYpwMjREwqcznFENSCXjupWv950jdw08MlghkPIXaKT9WyvKrKi0fmaq3OnT2sv0QGLdPBxmXI3U0kyJiMGPC8zrjpYkJBl2Z1vqdwYebJcf9RlNfA-7ZehbTMN7KO7QMcd/s1600/yazar.png</span></b>" alt="" title="<b>isteğe bağlı yazı</b>"  /></a><br /></div><br /><br /><br /></div><br /></pre><div class="hata" style="clear: both; text-align: center;">Yukarıdaki kodlar içinde , <b><span style="color: red;">kırmızı</span></b> yerlere resim adresleriniz , <b><span style="color: blue;">mavi</span></b> yerlere resime tıklayınca gidilmesi gereken adres , <b>siyah</b> kalın yazılmış yerleri ise , resim üstüne yazı eklemek için kullanabilirsiniz ( yazı istemezseniz , boş bırakabilirsiniz.. ) </div><br /><div class="tamam" style="clear: both; text-align: center;">Eklentiyi , aşağıdaki resimde gördüğünüz yere eklemeniz önerilir.. </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdVnnoC8KhMQaJLPZqlWJ8gUxmJa8Qh8Kh7ETqXH2NHD2NW4t0_rDoTiR5HZnA-ZFZBNbAQTfqSoRqTHjcucZJGyKoCbUCNUctkU-8eQz5cHAzY3GFoSYnfNpiqXiOQqNY5ZOjF8HQfKF/s1600/BURAYA.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdVnnoC8KhMQaJLPZqlWJ8gUxmJa8Qh8Kh7ETqXH2NHD2NW4t0_rDoTiR5HZnA-ZFZBNbAQTfqSoRqTHjcucZJGyKoCbUCNUctkU-8eQz5cHAzY3GFoSYnfNpiqXiOQqNY5ZOjF8HQfKF/s320/BURAYA.png" width="320" /></a></div><br /><br /><div class="arama" style="clear: both; text-align: center;"><<< Bu Yazı için Arama Sonuçları  >>> <br /><br />Blogger Nivo Slider Eklentisi , Blogger Nivo Slider Widgets , Blogger Slider Eklentisi , Blogger Sliders , Blogger Slider Eklentileri , Blogger Slider Ekleme , Bloga Slider Nasıl Eklenir<br /><br /></div>

Blogger Nivo Slider Eklentisi

Blogger Nivo Slider Widget Öncelikle bu eklentinin demosunu BURDAN görebilirsiniz , Aynı zamanda bu slider eklentisini bizde kullanmaktayız...

Devamı »

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ı »