Eklentilere Kaydırma Çubuğu Ekleme ( Scroll Box Widget )

Eklentilere Kaydırma Çubuğu Ekleme ( Scroll Box Widget )

Blogger blogunuzda kullandığınız eklentiler blogunuzda çokmu yer kaplıyor ? Bu eklentimizle , blogger blogunuzda kullandığınız eklentinizi kaydırma çubuğu olan bir kutu içine alabileceksiniz..

Böylelikle , Uzayıp giden eklentileriniz fazla yer kaplamayacak..

Üstelik bunu yapmak çok basit hemen anlatıma geçelim..

<div style="width:200px;height:350px;overflow:auto; ">

Buraya eklediğiniz eklentinin kodları gelicek

</div>

Yukarıdaki kod içinde kırmızı ile yazılmış olan yazı yerine , siz blogunuzda kullanmak istediğiniz eklentinin kodlarını yazacaksınız..Mavi ile işaretlenmiş olan rakamlardan, eklentinin genişlik ve yükseklik ayarlarını yapacaksınız..örnek olarak , sidebar kısmınız 200px genişliğinde ise 200px değeri vermeniz uygundur..uzunluk değerini eklentinize göre düzenlersiniz..

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

Eklentilere Kaydırma Çubuğu Ekleme , Eklentilere Kaydırma Çubuğu Ekleme ( Scroll Box Widget ) , Kaydırma Çubuğu Ekleme , Blogger Kaydırma Çubuğu Ekleme , Kaydırma Çubuğu Eklentisi , Kaydırma Çubuğu Widget , Scroll Blogger

29 ekim Cumhuriyet Bayramı Eklentisi

29 Ekim Cumhuriyet Bayramını için blogunuza eklenti istermisiniz ?

Bu eklenti başka hiç bir yerde yok...Bu eklentimizle , Blogger blogunuzun sağ ve sol üst köşesinde cumhuriyet bayramına ait görseller ekleyebilirsiniz..

Önizlemesini 29 ekim tarihi boyunca blogumuzun sağ ve sol üst köşesinde görebilirsiniz..

Yapmanız gereken aşağıdaki kodu , blogger blogunuza Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile gadget olarak eklemek..

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7otDgPRSeyifGEi4DXehxAsCu_Bt9zbp4YDpbMKX5OpRwR23-fAKnwC5fcUE1_kdAFMW8vtCoPGPQ9-CZ8EaRfj4iMP-K_MhpC_TYTa9YENqyQzKxwXy828DdUxkCGTxReynZVNvCH2uI/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ0KUKdSwQwRjYFuoAYvtqFT5emwRNK4AsQHZXDOrMMpqfN3HuONZ1copfWE7BS88zsVjuJubxYZzbGulqDYgyou8rQfR502gzZQSv2sAZ3wcT2lJaoHAEu_OA3ivVbyXOkhJVuxxHlR3w/s1600/29-ekim-blogger-eklenti-sag.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Yukarıdaki kodu eklediyseniz , her iki tarafta gözükecektir resimler...Sadece sağ tarafa Atatürk resmini eklemek için aşağıdaki kodu kullanınız..

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ0KUKdSwQwRjYFuoAYvtqFT5emwRNK4AsQHZXDOrMMpqfN3HuONZ1copfWE7BS88zsVjuJubxYZzbGulqDYgyou8rQfR502gzZQSv2sAZ3wcT2lJaoHAEu_OA3ivVbyXOkhJVuxxHlR3w/s1600/29-ekim-blogger-eklenti-sag.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Sadece sol tarafa Cumhuriyet bayramı resmini eklemek için ise aşağıdaki kodu ekleyiniz..

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7otDgPRSeyifGEi4DXehxAsCu_Bt9zbp4YDpbMKX5OpRwR23-fAKnwC5fcUE1_kdAFMW8vtCoPGPQ9-CZ8EaRfj4iMP-K_MhpC_TYTa9YENqyQzKxwXy828DdUxkCGTxReynZVNvCH2uI/s1600/29-ekim-blogger-eklenti-sol.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>

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

29 ekim Cumhuriyet Bayramı Eklentisi , 29 ekim Cumhuriyet Bayramı widget , 29 ekim eklenti , Blogger bayram eklentisi , Blogger bayram eklentileri , Blogger bayram, 29 ekim

Blogger Animasyonlu Slayt Alanı (Nivo Slider)

Bloglardaki slayt alanlarının, yada türk bloggerler arasında blogger manşet alanı olarak adlandırılan geçişleri farklı animasyonlarla süslenmiş blogger nivo sliderolarak bilinen müthiş bir blogger slayt alanı yada blogger manşet alanı eklentisi ile karşınızdayız.Blogger nivo sliderslayt alanını blogunuza ekleme işlemi oldukça basit.Üstellik emsallerine göre yani bu kadar kaliteli olan slayt alanlarına göre ilk etapta açılış hızı da oldukça iyi.

Yani blogunuzun açılış hızını pek te etkilemeyen ve blogger slayt alanları içerisinde benimde en çok beğendiğim blogger slayt alanı eklentisi olan blogger nivo slider i blogunuza eklemek için:
DEMO GÖRÜNÜM 1-Blogger hesabımızla giriş yapıyoruz.Her ihtimale karşı blogger şablonumuzu yedeğini alıyoruz.
2-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<!-- blogger nivo slider www.oyun04.com araba oyunlari code start-->
<style type="text/css">
/* <![CDATA[ */
    #blogokuluSlideContainer           {position: relative;display: block;}
    #blogokuluNivoSlider               {position:relative;width:600px  !important;height:300px  !important;min-height:225px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbtXgSh1DrbTmJlDVK1vhlD1Sg2aGKGcvWXTXyhYVuHxTHpI4htWBqFkNlKwDnLpPZQHghkTwiShV-NriNH2V-QQ6c9tpMUZ5LkW_6wsC8AZJjlPeGdilGjpXIARMUIcUsNaepMO3asEa/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
    #blogokuluNivoSlider img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIm5lqCVCZ4A95hmIiIl5fpMNiWOLVnXjQ_yeWVbisLvDQmZPCo7Qbia0zKwTl16vXp8nvV6R8255wYnv6FL8nWLrI9LMcyHVxKAwqCkG9Aw8SfV90J5n2HlMXF-EssabGARqyQEJ2dqeG/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj43xMHT5B1HE7BSZSn5jbGZYve5y9j2X9_hL5OwA8XAk_IQZBnT2TJfUXizt5nlJ4PXC4Xud3hgGp18YjX5WqyBTvOnnbFEZte-MLTjKlqRppI_97WFcGZrOEy3TztK57NlFCrPt0Nv8ZW/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#blogokuluNivoSlider').nivoSlider({
        effect           : 'random',
        slices           : 15,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 500,
        pauseTime        : 3000,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : false,
        pauseOnHover     : true,
        captionOpacity   : 0.8
    });
});
/* ]]> */
</script>
<!-- blogger nivo slider www.oyun04.com araba oyunlari code end-->

bu kod içerinde: renkli olarakta belirttiğimiz. 
width:600px blogger slayt alanı genişlik değeri

height:300px blogger slayt alanı genişlik değeri
        animSpeed    : 500, slayt geçiş hızı
        pauseTime    : 3000, bir resmin slaytta bekleme süresi
        startSlide      : 0, hangi slayttan başlayacağını seçiyoruz.
daha sonra şablonumuzu kaydedip çıkıyoruz. 
4-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip aşağıdaki kodu kopyalayıp açılan gadget içerisine yapıştırıyoruz.

<div id="blogokuluSlideContainer">
    <div id="blogokuluNivoSlider">
<a href="URL ADRESİ-1"><img src="RESİM URL ADRESİ-1" title="RESİM AÇIKLAMA SATIRI-1" alt=""/></a>
<a href="URL ADRESİ-2"><img src="RESİM URL ADRESİ-2" title="RESİM AÇIKLAMA SATIRI-2" alt=""/></a>
<a href="URL ADRESİ-3"><img src="RESİM URL ADRESİ-3" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>
<a href="URL ADRESİ-4"><img src="RESİM URL ADRESİ-4" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>      
    </div>
</div>

kod içerisinde:
URL ADRESİ-1:Yerine blogger salyt alanındaki resme tıklayınca yönlendirmek istediğimizadresin URL sini yazıyoruz.
RESİM URL ADRESİ-1:Slayt alanında görüntülemek istediğimiz resmin URL adresini yazıyoruz. 
RESİM AÇIKLAMA SATIRI-1:Blogger Slayt alanı altında görünen açıklama satırı.Bu kısma reklediğiniz resimle ilgil kısa bir açıklama yazabilirsiniz.
Yaptığınız değişiklikler neticesinde görünüm aşağıdaki gibi olacaktır.
<a href="www.blogokulu.org"><img src="http://imageshack.us/a/img89/8497/arabaoyunlari.png" title="Blogger Eklentileri,blogger widget ve blogger hakkında güzel şeyler bulabileceğiniz bir blog.Blog Okulu" alt=""/></a>
Gerekli eklemeleri ve düzenlemeleri yaptıktan sonra eklediğiniz gadgeti blog kayıtlarının üzerine sürükleyip bırakın.Blogger slayt alanı,blogger manşet alanı kullanıma hazır.

Posted in: blog dersleri,blog öğreniyorum,blogger eklentileri,blogger nivo slider,blogger slayt alani,blogger widget

Üzerine Gelince Parlayan 4lü reklam Alanı 125x125

Üzerine Gelince Parlayan 4lü reklam Alanı 125x125

Merhaba arkadaşlar.

Bu yazımda bloguma yeni eklediğim ve eklediğimden beri bu eklentiyi bizimlede paylaşırmısınız diye gelen mesajlar halâ gelmeye devam ediyor.Bende bu eklentiyi paylaşmaya karar verdim.

Öncelikle eklenti şok şık bir görünüm sağlıyor ve diğer reklam alanları gibi sade değil.Yani demek istediğim eklentinin üzerine gelince parlıyor. Orjinal görünümünü sağlıyor.

Eklentimize geçelim: Blogger kullanıcı paneli > Tasarım > Yerleşim > gadget ekle >Html/javascript

Yolunu izliyoruz.

Aşağıdaki kodları oraya yapıştıralım:

<center> <a target="_blank" href=" http://webmastersaati.blogspot.com"><img onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=80" style="opacity: 0.6;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" border="0" alt="" src=" http://venusdizayn.com/rest/125.gif
 " /></a> <a target="_blank" href=" http://webmastersaati.blogspot.com/p/reklam.html "><img style="opacity: 0.8;" border="0" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=60" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" alt="" src=" http://venusdizayn.com/rest/125.gif " /></a> <a target="_blank" href="http://webmastersaati.blogspot.com/p/reklam.html"><img style="opacity: 0.8;" border="0" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=60" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" alt="" src="http://venusdizayn.com/rest/125.gif" /></a> <a target="_blank" href="http://webmastersaati.blogspot.com/p/reklam.html"><img style="opacity: 0.8;" border="0" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=60" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" alt="" src="http://venusdizayn.com/rest/125.gif" /></a> <a target="_blank" href="http://webmastersaati.blogspot.com/p/reklam.html"> <div style="text-align: center; ">  </div></a> </center>kaynak:

Son olarak Kaydet'e tıklıyoruz ve eklentimiz hazır.

Değiştirmeniz gereken kodlar: Kırmızı ile yazdığım yerleri kendi sitenize göre düzenleyin. Mavi ile yazdığım yerler ise reklamını ekleyeceğiniz sitenin resmini koyabileceğiniz yerler.

Blogger Etiketleriniz Hareketlensin

Blogger Etiketleriniz Hareketlensin Eklentisi

Blogger blogunuzda bulunan etiketleri biraz hareketlendirmek istermisiniz ?

Bu eklentimiz ile blogunuzda bulunan etiketlerin üstüne fare ile gelindiğinde , etiketimiz belirli bir açı ile sağa doğru yatmaktadır..

Bu eklentiyi blogger blogunuzda kullanmak için aşağıdaki anlatımları takip ediniz..

Aşağıdaki kodumuzu blogger blogumuzda buluyoruz..

]]></b:skin>

Hemen bir satır üstüne , aşağıda yer alan kodları ekliyoruz..

/*-----Etiketleriniz hareketlensin eklentileri.blogspot.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}

Yapmamız gerekenler bu kadar , eklentinin çalışması için blogunuzda etiketler widgetinin ekli olması gerekmektedir..ekli değilse ekleyiniz lütfen..Etiketler eklentisini bulut olarak değiştirmeyi unutmayınız... 

DEMO

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

Blogger Etiket özelleştirme , etiket eklentileri , blogger etiket eklentisi , blogger etiket efekti , etiketler , blogger etiketleriniz hareketlensin , blogger label widget

CSS3 Dairesel Blogger Buton Eklentisi

CSS3 Dairesel Blogger Buton Widget

Blogger blogunuz için , üzerine gelince hareketlilik gösteren buton veya butonlar kullanmak istermisiniz ?

O halde aşağıdaki yazıyı takip edin..

Alttaki kodu blogger blogunuzda bulun..

]]></b:skin>

Hemen üstüne aşağıda yer alan kodları ekleyiniz..

.a-btn{
    width:60px;
    height:60px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    display:block;
    margin:20px;
    float:left;
    background:#f0ad4e;
    position:relative;
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span{
    display:table-cell;
    width:40px;
    height:40px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    color:#fff;
    text-shadow:0px 1px 1px #A03F16;
    font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span:nth-child(1), 
.a-btn span:nth-child(3){
    position:absolute;
    top:0px;
    left:0px;
    font-size:16px;
    line-height:19px;
    opacity:0;
}
.a-btn span:nth-child(1){
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI4Ona_zL4SJ4V5cgHk92n_kMh8bBRrUtL_vHO1ljm5AuDuBAAhX3Rfwot0XFGkW4fYKwkS2f2PmDzJoM70es_1ylsThF9Qvdh8073VIYFsvYF5BCbRaajiZh5CSRwhM63ROs2I9mbww/s1600/star.png) no-repeat center center;
    opacity:0.2;
}
.a-btn:hover{
    background:rgba(170, 77, 27, 0.6);
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
    opacity:1;
}
.a-btn:hover span:nth-child(2){
    opacity: 0; 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.a-btn:hover span:nth-child(1){
    -webkit-animation:rotate 1s linear;
    -moz-animation:rotate 1s linear;
    animation:rotate 1s linear;
}
.a-btn:active{
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
    color:rgba(170, 77, 27, 0.8);
    text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
    0% { transform: scale(1) rotate(0);}
    50% { transform: scale(0.5) rotate(180deg);}
    100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
    0% { -webkit-transform: scale(1) rotate(0);}
    50% { -webkit-transform: scale(0.5) rotate(180deg);}
    100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
    0% { -moz-transform: scale(1) rotate(0);}
    50% { -moz-transform: scale(0.5) rotate(180deg);}
    100% { -moz-transform: scale(1) rotate(360deg);}
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazır , şimdi nasıl kullanılacağını görelim..yaınların içinde yada eklenti olarak kullanmak için aşağıdaki kodları kullanıyoruz.

div class="button-wrapper">

<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Join Now</span>  
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Enter</span> 
<span>It's free!</span></a>

<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>

DEMO

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

CSS3 Dairesel Blogger Buton Eklentisi , Dairesel Blogger Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton Ekleme , Blogger Butonları , Blogger Button Widget , CSS3 Circle Effect Buttons Style For Blogger

Kurban Bayramı Eklentisi

Blogger blogunuza giren kullanıcılara, sayfanızın sağ üstünde yada sağ altında yer alan bir bayram mesajı vermek istermisiniz ?

Bu eklentiye bayram boyunca blogumuzun sağ üstünde veya sağ alt tarafta yer vereceğiz , ön izlemesini blogumuz üzerinden yapabilirsiniz..

Yerleşim >> Gadget Ekle >> HTML/JavaScript tıklayalım ve açılan yere aşağıda yer alan kodları ekleyelim...

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwGcwaXwr0Z-5GvxR9pLn9vhZuZwSrHiO4LI22qSFe8HF7wx7E0PXGgG4_j4IlNluXPWo53lsuL_xQqQGmiH0s9YIxTU5b7VU12RthjBwQKkVZo8eTWqTFHi2buhtxR0alU3Vhm55mbND/s1600/bayram-eklentisi.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Yapmanız gereken bu kadar , eklentiyi sayfanın altında göstermek için , top kısmını bottomolarak değiştirmeniz gerekli..bu blogger eklentisini blogunuzdan kaldırmak için , yerleşim kısmından gerekli gadgeti kaldırmanız yeterli..

Php- Session ve cookie Kullanmadan Giriş İşlemleri

Bu yazımda Cookies ve Session kullanmadan Php & MySQL sistemlerde giriş, çıkış gibi işlemleri yapmayı deneyeceğim. Kısaca admin panelinin giriş işlemleri de diyebiliriz. Şimdi kesin içinizden demişsinizdir ne alaka. Bu kadar saçma bir şeye ne gerek var? diye. Aslında mantıklıca baktığımızda saçma doğru. Farkındayım Ama yazım amacım şu; ufkumuzu genişletmek. Lisede gördüğümüz matematik derslerin deki saçma sapan aşırı uçlarda yer alan sorular gibi görelim bunuda. Hiçbir işimize yaramayacak, kullanmayacağız belki ama azda olsa ufkumuzu genişletmiş olacağız. Belki okurken içinden çıkamadığınız bir projeye çözüm bile olabilir. Şahsen bana oluyor, o yüzden bu tarz değişik makaleleri bol bol okurum.
Neyse geçelim bakalım sistemimize. Şöyle kısaca mantığından bahsedeyim sonrasında veri tabanı şemasına geçelim bakalım. Şimdi veri tabanımızda admin bilgilerinin yer aldığı tabloda bir kolonumuz olacak. Aşağıda kolonun adını ‘giris’ diye adlandıracağım. Admin giriş yapacağı zaman eğer kullanıcı adı ve şifre doğru ise, ‘giris’ kolonuna giriş yapıldığını belli eden bir değer kaydedecek ve giriş yapılacak. Çıkış yapılınca da o kolonun içi temizlenecek. Ve giriş yapılmadığı zaman kolonun içi boş olacağından eğer içi boşsa sayfaları göstermeyecek.
Şimdi veri tabanımıza geçelim. Veri tabanımız da ki admin giriş bilgilerinin yer aldığı tablomuzun adı “admin” olsun. Bu tablo altında da ‘admin_id’, ‘kullanici_adi’, ’sifre’, ’giris’ gibi kolonlarımız olsun. Tabi bunları istediğiniz gibi yazacağınız sisteme göre artırabilirsiniz. Ama ben şuan bize lazım olacak temel bilgileri yazdım sadece.
Veri tabanımızı oluşturduk. Şimdide şimdi de içini dolduralım. ‘admin_id’ nin değeri 1 olsun. Birden fazla admin de olabilir tabi. Ama biz şimdilik sadece bir tane varmış gibi anlatalım. Zaten admin sayısı artınca da mantık değişmeyecek. ‘kullanici_adi’ nın değeri klasik olarak admin olsun bakalım. Şifrede 123456 olsun ama şak diye 123456 diye işlemesin veri tabanına. Hacker abi(!)lere davetiye çıkartmayalım. Onuda normal bir şekilde şifrelemeniz yeterli olacaktır. Ben genelde girilen şifreyi önce md5 sonrasında sha1 ile şifreler, oluşan 40 karakterlik yeni şifrenin ilk, orta son kafama göre 32 karakterlik kısmını alırım. Hemen gösterip sonrasında da niye böyle bir şey yaptığımı kısaca anlatayım.

PHP- Kodu:

<?php
$gelen_sifre = $_POST["sifre"];
$sifre = sha1(md5(".$gelen_sifre."));
$yeni_sifre = substr($sifre, 5, 37);
?>

Bu şekil şifreledim çünkü herhangi bir kelimeyi md5 ile şifrelediğimizde 32 karakterli bir değer çıkar karşımıza ve günümüzde en çok kullanılan metoddur. Genelde yazılımcılar sadece md5 ile şifreleyip veri tabanına kaydeder. Ve biri onun veri tabanına girip o md5 değerini alıp herhangi bir online brute force aracılığı ile şifreyi rahatça kırar. Yok efendim şifre zor olunca wordlistlerde olma olasığı az olduğundan zor şifreler kırılamaz gibisinden boş laflara inanmayın sakın. Çeşitli dillerle yazılmış değişik mantıklarda md5 kırma algoritmaları mevcut. İsteseniz 100 karakterli içinde her türlü değerin olduğu bir şifreyi md5leyin onu bile kırabilirler. Sadece zaman gerekir o kadar. Neyse dönelim konumuza. Şimdi neden sadece md5 ile yetinmeyip sha1 ile de şifrelediğimi anladınız. Şimdi de neden sha1 değerimizin 32 karakterlik bir kısmını aldık oraya gelelim. Eğer biri senin sunucuna girip te o değeri ele geçirirse ilk bakacağı iş kaç karakterli olacağıdır. 32 karakteri görünce hemen sazan gibi atlayıp md5 sanacaktır. Ve hemen kırmaya uğraşacaktır. Bırakın uğraşsın, sonuca ulaşamaz. İşte bunun için 33 değil, 31 değil de 32 karakterlik bir kısmını aldık. substr() fonksiyonu ile 5 ten başlayıp 37. karaktere kadar olan 32 karakterlik kısmını aldım. Ama siz kafanıza göre canınızın istediği yerden başlayıp 32 karakteri alabilirsin.
Şimdi bunları da anlattıktan sonra gelelim ‘giris’ kısmına. Bu kısımda ise şöyle bir yol izleyeceğim. Eğer kullanıcı adı ve şifre doğru ise; ‘giris’ kolonunun değerini ‘on’ diye kaydedelim. Sonrasında da eğer ‘giris’ kolonundaki değer ‘on’ ise giriş yapılmıştır, sayfa içerikleri gösterilebilir. Hayır ‘on’ değilde boş ise giriş yapılmamıştır; sayfaları gösterme.
Peki niye giriş yapılmayınca ‘giris’ kolonunu ‘off’ değil de boş bıraktık? Şöyle açıklayayım; eğer ben bir hacker olsam, senin veri tabanına sızsam ve “admin” tablosunda ‘giris’ diye bir kolon, o kolonun içindeki değeri de ‘off’ olarak görürsem hemen derim “eğer off kapalı giriş yapılamamış demekse on yapılmış demektir” diye ve hemen onu on diye değiştiririm. Ama boş olarak görürsem ben nereden bileyim senin hangi değeri kullandığını.
Şimdi buraya kadar herhangi bir sıkıntı yoksa geçelim hemen php kısmına.
İlk önce admin paneli klasöründe giris.php diye giriş formunun olduğu bir dosya olsun.
giris.php içeriği;

PHP- Kodu:

<?php
$islem = $_GET["islem"];
İf ( $islem != "giris" ) {
?>
<form action="giris.php?islem=giris" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Tamam">
</form>
<?php
} else if( $islem == "giris" ) {
$gelen_kadi = $_POST["username"]; // giriş formundan gelen kullanıcı adı
$gelen_sifre = $_POST["password"]; // giriş formundan gelen şifre
$gelen_sifre_filtre = sha1(md5(".$gelen_sifre.")); // giriş formundan gelen şifreyi önce md5 sonra sha1 ile şifreliyoruz
$gelen_sifre_yeni = substr($gelen_sifre_filtre, 5, 37); // elimizdeki 40 karakterlik sha1 şifremizin 5 ile 37. karakter arasındaki 32 karakterlik kısmı alıyoruz
$sorgu = mysql_fetch_object(mysql_query("SELECT * FROM admin WHERE id=1"));
$mevcut_kadi = $sorgu->kullanici_adi; // veri tabanına kayıtlı kullanıcı adı
$mevcut_sifre = $sorgu->sifre; // veri tabanına kayıtlı şifre
if ( $gelen_kadi == $mevcut_kadi and $gelen_sifre_yeni == $mevcut_sifre ) {
$sql = mysql_query("INSERT into admin (giris) VALUE ('on')");
echo "başarıyla giriş yapıldı. Yönlendiriliyorsunuz…" ;
echo "<meta http-equiv='refresh' content='3;url=index.php'>";
} else if( $gelen_kadi != $mevcut_kadi or $gelen_sifre_yeni != $mevcut_sifre ) {
echo "kullanıcı adı veya şifre hatalı. Lütfen tekrar deneyin…" ;
echo "<meta http-equiv='refresh' content='3;url=giris.php'>";
}
}
?>

giris.php dosyasının içeriği bu kadar. Peki biz burada ne yaptık? Formdan gelen kullanıcı adı ve şifreyi aldık, şifreyi md5 ve sha1 ile şifreleyip, veri tabanına kayıt ederken hangi 32 karakteri almış isek o 32 karakteri aldık. Kullanıcı adı ve şifreyi veri tabanındakiler ile karşılaştırdık. Eğer doğru ise “admin” tablosundaki ‘giris’ kolonunun değerini ‘on’ diye kaydettik. Eğer kullanıcı adı veya şifre hatalı ise ekrana hata verdirtip, tekrardan forma yönlendirdik. Ve böylece bu dosya ile işimiz bitti. Şimdi gelelim index.php dosyasına.
index.php sayfa içeriği;

PHP- Kodu:

<?php
$sorgu = mysql_fetch_object(mysql_query("SELECT * FROM admin WHERE id=1"));
$giris_kontrol = $sorgu->giris;
if ( $giris_kontrol == "on" ) {
// buraya admin panelinin içeriği gelecek. Ve eğer veri tabanındaki ‘giris' kolonu ‘on' ise gözükecek.
} else if( $giris_kontrol != "on" ) {
echo "sayfayı görüntüleme yetkiniz yok. Yönlendiriliyorsunuz…"
echo "<meta http-equiv='refresh' content='3;url=giris.php'>";
}
?>

Evet index.php ile de işimiz bitti. Peki burada ne yaptık? Burada da dedik ki eğer “admin” tablosundaki ‘giris’ kolonunun değeri ‘on’ ise sayfa içeriğini göster. Değil ise hata ver ve giriş formuna yönlendir.
Son olarak geldik cikis.php dosyasına. Buradaki yapacağımız işlem ise sadece ‘giris’ kolonunun içini temizlemek olacaktır.
cikis.php içeriği;

PHP- Kodu:

<?php
$sql = mysql_query("INSERT into admin (giris) VALUE (' ')");
echo "başarıyla çıkış yapıldı. Yönlendiriliyorsunuz…" ;
echo "<meta http-equiv='refresh' content='3;url=giris.php>";
?>

Makalemiz bu kadar daha sonra görüşmek üzere..