16 Eylül 2015 Çarşamba

Blogger fare imlecini değiştirmek

Merhaba ;

Bu yazımda birçok blogger gibi benimde kullanımından çekindiğim fare imlecini değiştirmeyi anlatıcam.
Şuanda fare imleciniz değişmiş durumda ancak benim bloğumda yalnızca bu yazıya özel bir durum :)
Aslında fare imlecini değiştirmek bloglarda ve websitelerde farklı bir hava katmasına neden olur.
Yabancı ülkelerin birçok bloğunda rastladığım bir durum ancak az öncede söylediğim gibi türk bloggerlar ki bu duruma bende dahilim fare imlecini değiştirme taraftarı değil.
Tabiki herkesin farklı düşüncesi ve zevki var saygı duymamız gerekiyor.

Fazla uzatmadan kuruluma geçelim ;


  • Şablon > Html düzenleye gelerek ctrl+f yardımıyla " </head> " kodunu buluyoruz ve hemen üstüne aşağıdaki kodu ekliyoruz.
  • <style type="text/css">body, a:hover {cursor: url(http://ani.cursors-4u.net/cursors/cur-12/cur1103.ani), url(http://ani.cursors-4u.net/cursors/cur-12/cur1103.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2014/03/14/rainbow-pinwheel-pointer.html" target="_blank" title="Rainbow Pinwheel Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Rainbow Pinwheel Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

  • Daha sonra kaydedip çıkıyoruz.
fare imlecinizi özelleştirmek için buraya tıklayarak yüzlerce fare imleci arasından beğendiğiniz imlecin " <style " kodlarını bu yazıda verdiğim kod ile değiştirebilirsiniz.

Bütün işlem bu kadar.Hayırlı olsun :)






" Anahtar Kelimeler : Blogger fare imlecini değiştirmek, fare imlecini değiştirmek, blogger mouse işaretini değiştirmek, blogger mouse imlecini değiştirmek, mouse imlecini değiştirmek "
Rainbow Pinwheel Pointer

Blogger yazı oylama eklentisi [ GRADDIT ]

Merhaba ;

Hepimizin bildiği gibi bloglar okuyucular yani ziyaretçiler içindir.
Biz bloggerlar olarak yazılarımızı okuyucular yani ziyaretçiler için yazarız ve bu kişilerin beğenisine sunarız.
Ziyaretçileri bu sunumun başarılı olup olmadığını bize yorum yoluyla iletirler.
Yorumlar yazar ve okuyucu arasındaki en etkili iletişim aracıdır.
Sizlerin beğenisine sunduğum bu eklentide yazar ve okuyucular arasındaki iletişim araçlarından birisi olan oylama eklentisidir.
Ziyaretçiler bu eklenti sayesinde düşüncelerini yorum ile puanlamasını ise oylama aracıyla bloggerlara iletebilecekler.

Blogger orjinal oylama eklentisi mevcut ancak blogger'in tüm eklentileri gibi sade ve görünüş bakımından oldukça şekilsiz :)

Bizde fazla kod ile uğraşmaktan kaçınarak bu eklentiyi ücretsiz olarak bizlere sunan graddit ile eklentimizi bloğumuza eklicez.

Eklentiden bir görüntü ;



Kuruluma geçelim ;


  • buradan graddit websitesini ziyaret ediyoruz.
  • Sol taraftan beğendiğimiz ve bloğumuza uyum sağlayacığını düşündüğümüz oylama stilini seçiyoruz ve sağ üst tarafta bulunan Blogger yazısının üstüne tıklıyarak kodlamayı blogger diline çeviriyoruz.
  • Sağ taraftaki blogger html kodunu kopyalıyoruz ve not ediyoruz.
  • Hemen ardından Şablon>Html düzenle ctrl+f yardımıyla " </head> " tagını buluyoruz ve hemen üstüne aşağıdaki kodu ekliyoruz.
    <link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
  • tekrar ctrl+f yardımıyla " <data:post.body/> " kodunu buluyoruz ve hemen altına beğenip html kodunu not ettiğimiz kodu yapıştırıyoruz.
  • Daha sonra kaydedip çıkıyoruz.
Önemli Not : 
ctrl+f yardımıyla bulduğumuz " <data:post.body/> " birden fazla olduğu için tek tek hepsinin altına yapıştırıp denemeniz gerekmektedir.


Anahtar kelimeler : blogger yazı oylama eklentisi, blogger yazı puanlama eklentisi, blogger yazı oylama, blogger yazı oylama kodu, blogger yazı puanlama kodu,

Blogger yapım aşamasında eklentisi

Merhaba ;

Neredeyse hepimiz bloglarımızın tasarımında gündelik olarak değişiklik yapıyoruz.
Bu değişiklikler esnasında doğal olarak kontrol etmemiz gerekiyor.
Bu kontrol esnasında bloğumuzun tasarımda pek hoş görüntüler ortaya çıkmıyor , kendimden biliyorum :)
Bu kod sayesinde biz bloğumuzun tasarımıyla uğraşırken ziyaretçiler bloğumuza girdiklerinde flash bir görünüme sahip yapım aşamasında görüntüsüyle karşılaşıyorlar.

Eklentiden bir görüntü ;



Kurulum ;

Yerleşim > Gadget Ekle > HTML/Javascript ekle diyoruz.
Hemen ardından aşağıdaki kodu ekliyoruz ve kaydet diyip çıkıyoruz.

" Kodun telif hakları koddostu.com 'a aittir. "

<!--Kod Dostu Yapım Aşaması Kod Başlangıcı-->
<!--kod içerisinde değişiklik yapmak yasaktır-->
<!DOCTYPE HTML><style type="text/css">div.koddostus{position:fixed;text-align:center;z-index:4000;}div.bybyhapp{top:0px;left:0px;width:100%;height:100%;}</style><style type="text/css">div.koddostus{_position:absolute;}div.bybyhapp{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="koddostus bybyhapp">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width="100%" height="100%" id="test1">
<!--siteneeklekodlari.blogspot.com-->
<param name="movie" value="http://www.weebly.com/uploads/4/1/3/2/4132766/custom_themes/853832618635402178/files/indcedx.swf" /><embed src="http://www.weebly.com/uploads/4/1/3/2/4132766/custom_themes/853832618635402178/files/indcedx.swf" width="100%" height="100%" name="test1" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /></object>
</div>
<!--kod içerisinde değişiklik yapmak yasaktır-->
<!--Kod Dostu Yapım Aşaması Kod Bitişi-->


Anahtar kelimeler ; blogger yapış amasında kodu, blogger yapım aşamasında eklentisi, yapım aşamasında kodu, bloğa yapım aşamasında kodu eklemek, yapım aşamasında eklentisi

Blogger resimlere sağ tıklamayı engelleme

Merhaba ;

Bloglarda resim ve fotoğrafların önemini hepimiz biliyoruz.
Bloglarında resim ve fotoğraflara yer vermeyen hiçbir blogger görmedim , görmekte istemem açıkcası.
Resim ve fotoğraflar blogların vazgeçilmezidir.
Birçok blogger arkadaşımız resim ve fotoğrafları başka bloglardan bağlantı kopyalama tekniği ile resim ve fotoğrafları kendi bloglarına taşımakta.
Durum böyle olunca çözümler üretilmeye başlandı ve ilk etapta filigran dediğimiz şeffaf logolar resim ve fotoğraflara eklenmeye başlandı ancak bu çözüm biraz meşakatli...
Bu basit kodu kullanarak filigran eklememize gerek kalmayacak.
Bu kod sayesinde blog yazılarınızda paylaştığınız ve yazınızı temsil ettiğini düşündüğünüz resim veya fotoğraflarınızın üstüne sağ tık engeli kodunu ekleyerek çalınmasınının önüne geçicez.

Kullanımı ;

Kullanımı oldukça basit.
Yazımıza resim veya fotoğraf eklendiğimizde sol taraftaki " HTML " sekmesine gelerek yazımızın HTML görünümüne geçiyoruz.

Sonra ctrl+f yardımıyla " src= " buluyoruz ve aşağıda görmüş olduğunuz formata dönüştürüyoruz.

<img src="resim linki" oncontextmenu="return false;" />






Bütün işlem bu kadar.

Anahtar Kelimeler ; blogger sağ tık engellemek, blogger resimlere sağ tıklamayı engellemek, blogger fotoğraflara sağ tıklamayı engellemek, sağ tıklamayı engellemek






Blogger etiketlerini CSS3 ile düzenlemek

Merhaba ;

Blogger etiketlerinin sağda solda görünmesi benim pek hoşlanmadığım bir durum.
Ancak birçok blogger arkadaşımız etiketlerini bloglarının bazı musait yerlerine bu etiket yerleştirmekteler.
Benim yerleştirmememdeki en büyük etken görünüşü.
Görünüşünden dolayı ve blog tasarımımda sırıtmasından dolayı tercih etmiyorum ama bu eklenti sonrasında kullanmayı düşünebilirim.
Bu derde son verecek bir css3 efekti ile karşınızdayım.
Bu css3 kodu ile oluşturulmuş ve editlenmiş olan şık , kullanışlı etiket eklentisini sizlerle paylaşmak istedim.



Eklentimizden bir görüntü ;

Kurulum ;

! Bu eklentinin aktif olabilmesi için yerleşim menüsündeki etiketleri bulut olarak eklememiz gerekiyor.!

]]></b:skin>

Yukarıdaki kodu şablondan bulup hemen üstüne aşağıdaki kodu ekliyoruz.

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}
 
.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}
 
.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}
 
#Label1 {
    height: 210px;
}
 
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;

Bu kodları ekledikten sonra yukarıdada söylediğim gibi etitketi bulut biçiminde eklememiz gerekiyor.

Anahtar Kelimeler ; blogger etiket görünümünü değiştirmek, blogger etiket, blogger etiket görünümünü düzenlemek, blogger etiket düzenlemek