Blogger tarafından desteklenmektedir.

Kişisel Blog

Slider etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Slider etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

9 Aralık 2012 Pazar

Blogger Bu Yazıyı Okudunuz mu Eklentisi

Hiç yorum yok :

Blogger blogunuzda , ziyaretçileriniz sayfada aşağı indiklerinde , rastgele bir yazı göstermek istermisiniz ?

Blogger Bu Yazıyı Okudunuz mu Eklentisi , blogunuzun sağ altında çıkar , ziyaretçiniz isterse bu eklentiyi X butonu ile minimize edebilir

Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodları ekliyoruz
<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/AVvXsEixlXaPmfIWiwO5rKnm_ECrqbFJQuuift-PcXPBm0594F_P4GnlnYHNVbPMpPjMaT9T8anWPDAJXDlyZ80OssvZfrncVJmMd8y4gMOo4b6fj6YDMK_2u5WAI4f-lc_9Bv3aQsODizXwDxU/I/bloggerplugins.png" alt="Bu yazıyı okudunuz mu" /></a>
Şimdide şablon kısmına giryoruz , (Widget Şablonlarını Genişlet kutucuğunu işaretlemeyi unutmayın) Aşağıdaki kodları arıyoruz , bu 3 koddan sizde olanın altına ekliyeceksiniz..kodlar blogunuzda 2-3 tane olabilir , hepsini deneyin mutlaka çalışacaktır..
<div class='post-footer-line post-footer-line-1'>


YADA


<p class='post-footer-line post-footer-line-1'>


YADA


<data:post.body/>




ÜSTTEKİ 3 KODDAN BLOGUNUZDA OLANI BULUN
VE HEMEN ALTINA ALTTAKİ KODLARI EKLEYİNİZ


<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
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..

DEMO



<<< Bu Yazı için Arama Sonuçları  >>>

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

23 Mayıs 2012 Çarşamba

Blogger Nivo Slider Eklentisi

Hiç yorum yok :

Blogger Nivo Slider Widget

Öncelikle bu eklentinin demosunu BURDAN görebilirsiniz , Aynı zamanda bu slider eklentisini bizde kullanmaktayız , ana sayfamızda görebilirsiniz 

Lafı uzatmadan , Blogger Nivo Slider Eklentisini blogger blogunuza nasıl ekleyeceğinizi anlatalım..

Aşağıda yer alan kodu buluyoruz...
]]></b:skin>
Hemen üstüne , aşağıdaki kodlarımızı ekliyoruz..
/*Start Nivo Slider Css eklentileri.blogspot.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - Rahul Ippar @ helperblogger.com
*
* March 2010
*/


/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}

.nivoSlider {
position: relative;
}

.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}

.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}

.nivo-caption p {
padding: 5px;
margin: 0;
}

.nivo-caption a {
display: inline !important;
}

.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}

.nivo-prevNav {
left: 0px;
}

.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}

.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIUsnf80hdMfmMTCvCmKm7ZOk8v8gWBZHnRUDaWknIEj_Z47HEd7j6sgoCRfEJVHGyxdCp86X3FRvhaT122l-uCzYx0fxQ6mVY3QKzj3v1PUAKBxpxoMon_3UBWVtl7CElGv7ujGzxYAh/s1600/helperblogger-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}

.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1aW_hGgL-voReo0ED0-ZGbiD2au4KCYD6q72VULEhJD9EFhh888eBwJTR_rU7Ygj_cLIOLKz_IkymrPv_Laa0cJn_2FgwoMUCKiFfpijnnj2I23jk6jF8ZiehvF9EYP-ixhDBVH7CS8t/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}

.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}

.theme-pascal .nivoSlider a {
border: 0;
display: block;
}

.theme-pascal .nivo-controlNav {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7MozcEBeEz9zMVF5wpSC2UzO-DRLeISQ-XJjufh47PLSN31neZVw3GXAjy2_cfT67nJSloNFQzDc_vK_COGjgN-I98gJcnVBkrOiTq4ta5YjYoLpgFOGnWjmQ83KuON8oR6alnWFhr4P/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}

.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9KzhMMsDA3tW7j6-eqTjfgm5Qcc_omkPpvAlIptgCAsQCTP8UMSi1U32IA3cHHoWIpEZzSOA2ZJ5_VW4v0Ra9H8h_NE2RPi8riLFDBIf19wpIO9NpvHGkHtm5zbMtK8Syqc5Kr_NO_yBX/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}

.theme-pascal .nivo-directionNav a {
display: none;
}

.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}

.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .ribbon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZYFoHHCaEK_btr130GAaPlR_hnVDxZkIRzTXJhLftj0bg5vjdmhWnD9YckMlKzF9lAVTWLGDHGN1RIum_HmUfvfPtPClMtKMMRJz3YCGBYEAM247SH9yBTOrOAvkq5NM2MoPkztCCOqf/s1600/helperblogger-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css eklentileri.blogspot.com*/
Şimdi ise aşağıdaki kodumuzu buluyoruz.
</body>
Bu kodumuzunda hemen üstüne , aşağıda yer alan kodlarımızı ekliyoruz.
<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
Üstte yer alan işlemleri yaptıysanız , şablon kısmı ile işimiz bitti , kaydedebilirsiniz..

Şimdi yerleşim kısmına girip , Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıda yer alan kodlarımızı ekliyoruz..
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://eklentileri.blogspot.com/2012/04/blogger-facebook-yorum-kutusu-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tbZ7koWJu0sz7XZqyvYtD7OArSB5Iihxn_JB5mUZxEkqb7VN81pzZQyftJz9-RAyDrgHK6dRwn3984F1-1F82rk_2HcmHyglxsYoLF7M2hJv_Pqux4MZU-fZ4atyIMv7V7hKATBlgvdR/s1600/facebook-yorum-kutusu-eklentisi-ekleme.png" alt="" title="isteğe bağlı yazı" /></a>
<a href="http://eklentileri.blogspot.com/2012/03/blogger-yorum-kutusuna-arka-plan-ekleme.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGk87qxKN0-gSh5nvPVM3GnOjGv89GpYXg1GRqfzo92xAPgjFEX89RANwNrgMOmz2CiCM8dOCVd_3JQpl5xnNrq-VgIjf2iwvzGP70evKWzBLEmnxgi97SnwwJmqpS0giDHFrPsOHefd55/s1600/yorum-formu.png" alt="" title="isteğe bağlı yazı" /></a>

<a href="http://eklentileri.blogspot.com/2012/04/yandan-aclr-facebook-ve-twitter-takipci.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs4GCEVNurTiBTrgGyBtdJw-uc0f7LFYHpr0gpUEUZp07ihbzS3hIxOsZpPJxlOxXH91JSqDkrMl0Lntc72VUr-xSvc8-2afuwzoUlU2OPjMKa0yQgGOcntXoGwAdsjWdwYH12h-iud5v/s1600/takipci.png" alt="" title="isteğe bağlı yazı" /></a>

<a href="http://eklentileri.blogspot.com/2012/03/blogger-admin-yazar-yorumlarn-farkl.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgIU2o_puTrjsBN113jJgSy69UeOl9HS43tn8XPkxelDelVgyf4YeLj67VJa4UVNsv_iFftFHciC2ukeZR-q0F-E6Diu1hhev4Mzxpaa7FlcR2gVUcX3Jw5qLTzt4h7Vbl0OJipSjDId-/s1600/yazar.png" alt="" title="isteğe bağlı yazı" /></a>
</div>


</div>
Yukarıdaki kodlar içinde , kırmızı yerlere resim adresleriniz , mavi yerlere resime tıklayınca gidilmesi gereken adres , siyah kalın yazılmış yerleri ise , resim üstüne yazı eklemek için kullanabilirsiniz ( yazı istemezseniz , boş bırakabilirsiniz.. )

Eklentiyi , aşağıdaki resimde gördüğünüz yere eklemeniz önerilir..


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Nivo Slider Eklentisi , Blogger Nivo Slider Widgets , Blogger Slider Eklentisi , Blogger Sliders , Blogger Slider Eklentileri , Blogger Slider Ekleme , Bloga Slider Nasıl Eklenir

4 Nisan 2012 Çarşamba

Blogger Jquery Slider Menu Eklentisi

Hiç yorum yok :
Blogger Jquery Slider Menu Eklentisi

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..

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ş..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu bulalım..
]]></b:skin>
Hemen üstüne alttaki kodlarımızı ekleyelim..
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3hLArSgSeW3CUbjN_nzbyp3CavV_CkiYHUT_kR7YOSj6i1boBupKSq_3WTQTwwLPe1xUUmMmGFEFdfysKvm-rLdbuuRvHql4jQdzNF48nhQcdJvqjLr8hPIU3wbRFJLPtT9MQaQ_uiB8/s1600/paging_bg2.png) no-repeat;
display: none; /*--eklentileri.blogspot.com--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
Şimdide bu kodu bulalım..
</head>
Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //eklentileri.blogspot.com
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>
Yukarıdaki işlemleri yaptıysanız , kaydet diyelim..


Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim..
<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window">
<div class="image_reel">

<a href="
http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLJm4KoQ2kO5Uihih8pL3n5s4_6WYFw-B0UdzqkYAuPLmCNSpufVFhkLHfkJ3wsMucUdwzNnoe_vP_ge6UTkL38Fg9r6vUwzhXAI_cha7LDPpddT9zzv7Kr3JXsw7ue5UzMqZNi20alBL/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpRTZJ-_QX8jSgW7Cs8avv6BZX5FrC2m1UMi5T6lTuA5r-rddWPz1xvzLfHd7b1HBekDkoT1couDTx3HwnIsdm32sKJPPngo7cS9TLHP4rYZUYzALpam8sWysTK6kVsNcG72xh8rFXR3h/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYOFFNQVFOTajkRFI2FDFMLFKNeYrg7XHwK1gPo6ScSNboLKynHcZylEmP9mo9um1eu-WhjYLTcMzarnTYy4pMqv3grCPwW5MeK0UqXYm1SpIRGL2av3cIn8CyeKqPUocS39pKAqx4vBj/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEZfq7EsvpIVcvXnyBbo7_DioUOVNxOY6oWTRf6Q6sihLSBLgrhaC0oCOvp5yiJanyBOlSMe94ocCOtYrOaHyQIVQdNAleF7x72tl7y7kHHrfQzzgzAEviGF8g-moKyaUguVdmCwsgXEm/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkfshtFg-AZvzd72GOuML5WcaINKnFc0JUYorzzFvJCTuoFaQWxo3T0VQP7YMSxFeJgyyw6UbjctFIvvSZVSaWx9GJ4t5X13vi2EW2wTTgEv0p4poBp9DvB1J3XYvkxL_4CMzsHbctZrD/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div>

</div>
Yukarıdaki kırmızı olan yerleri kendinize göre düzenleyin..DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

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