Siteniz efekt ile giriş yapsın!

Merhaba herkese. Özgür arkadaşımda gördüm ve ben beğendim. Tüm herkesin beğeneceğini düşündüğüm için bende paylaşıyım dedim sizlere. Kodu nereye eklerseniz sağdan ve soldan hareket ederek geliyor. (Yapımcı: Daniel Eden) Kod tamamen CSS3 yapılmış.

Önizleme;

Demo'ya bak

Sitede açık ve koyu mavi renkli kutularda efektlerin önizlemelerine ulaşabilirsiniz. Kendinize göre seçerek daha iyi bir efekt sağlayabilirsiniz sitenize.

Böyle daha iyi diyorsan;

kodunu temada bulunan  ile   etiketleri arasında bir yere ekleyin.

Kodları site de kullanmak;

Hangi elementte kullanmak istiyorsan eğer class elementine animated etiketini ekleyin.

Örn: class='animated' böyle eklenicek ve işlem tamam.

Bu şekilde istediğiniz elementte istediğiniz efekti ekleyebilirsiniz. Eğer takıldığınız yer varsa yorum kısmını veya Özgür arkadaşıma sorabilirsiniz. Kaynak: Özgür Görgülü.

Blogger'da etiket görünümüzü özelleştirmek ister misiniz?

Merhaba arkadaşlar,

Blogger'da etiketlerinizi iyi bir görünüm sağlatmak istermisiniz? Tabi istersiniz hatta temalarınıza uygun hale getirebilirsiniz ve ziyaretçileriniz tarafından hoş görülür.Kod'da sadece temanıza uygun renkleri ayarlarsanız güzel ve şık olur.

Önizleme:

Blogger Paneline Girin.

Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

.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;
display:inline-block;float:none;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#1BA1E2;color:#fff !important;-webkit-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-moz-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-o-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;
}
.label-size:hover {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgbundefined0,0,50);-moz-box-shadow:0 0 20px rgbundefined0,0,50);-o-box-shadow:0 0 20px rgbundefined0,0,50);box-shadow:0 0 10px rgbundefined0,0,50);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);-o-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);
filter: progid:DXImageTransform.Microsoft.Matrixundefined
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#252c44;color:#fff !important;-webkit-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-moz-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-o-text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;text-shadow:rgbaundefined0,0,0,0.2) 1px 0,rgbaundefined0,0,0,0.2) 0 1px,rgbaundefined255,255,255,0.2) -1px 0,rgbaundefined255,255,255,0.2) 0 -1px,rgbaundefined0,0,0,0.2) 1px 1px,rgbaundefined255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);background-color:#252c44;-webkit-transform:rotateundefined0deg);-moz-transform:rotateundefined0deg);-o-transform:rotateundefined0deg);transform:rotateundefined0deg);
}
.label-size a:hover  {
color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgbundefined0,0,50);-moz-box-shadow:0 0 20px rgbundefined0,0,50);-o-box-shadow:0 0 20px rgbundefined0,0,50);box-shadow:0 0 10px rgbundefined0,0,50);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);-o-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);-webkit-transform:rotateundefined-3deg) scaleundefined1.2);-moz-transform:rotateundefined-3deg) scaleundefined1.2);-o-transform:rotateundefined-3deg) scaleundefined1.2);background-color:#0c92da;transform:rotateundefined-3deg) scaleundefined1.2);-webkit-transform:rotateundefined3deg) scaleundefined1.2);-moz-transform:rotateundefined3deg) scaleundefined1.2);transform:rotateundefined3deg) scaleundefined1.2);background-color:#0c92da;-webkit-transform:rotateundefined2deg) scaleundefined1.2);-moz-transform:rotateundefined2deg) scaleundefined1.2);background-color:#0c92da;-o-transform:rotateundefined2deg) scaleundefined1.2);transform:rotateundefined2deg) scaleundefined1.2);
}

Ve şablonumuzu kaydediyoruz. Tabi kendinize göre düzenleyiniz, iyi günler görüşürüz.

CSS3 ile Sosyal butonları

CSS3 ile yapacağımız Sosyal medya butonları sade ve şık bir tasarıma ait.Kodlara geçmeden önce önizleme görelim.

HTML kodu;

CSS kodu;

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}

html {
 margin:0;
 padding:50px 0;
 background:white;
}

#content {
 text-align:center;

 position:absolute;
 left:0;
 right:0;
 margin:auto;
 padding:120px 0 10px 0;

 width:200px;
 height:20px;
}

input[type="checkbox"]{display:none;}

.checkbox:checked + .label{
 background:#9ac71f;
 color:white;
}

.checkbox:checked ~ .social {
 opacity:1;
 -webkit-transform: scale(1) translateY(-90px);
 -moz-transform:scale(1) translateY(-90px);
 -o-transform:scale(1) translateY(-90px);
 transform:scale(1) translateY(-90px);
 -webkit-transition:.5s;
 -moz-transition:.5s;
 -o-transition:.5s;
 transition:.5s;
}

.label {
 font-size:16px;
 cursor:pointer;
 margin:0;
 padding:5px 10px;

 border-radius:10%;
 color:#7B7484;
}

.social {
 transform-origin:50% 0%;

 -webkit-transform: scale(0) translateY(-190px);
 -moz-transform:scale(0) translateY(-190px);
 -o-transform:scale(0) translateY(-190px);
 transform:scale(0) translateY(-190px);

 opacity:0;
}
ul {
 position:relative;
 left:0;
 right:0;
 margin:auto;
 color:#fff;
 height:46px;
 width:180px;
 background:#3B5998;
 padding:0;
 list-style:none;
}

ul li {
 font-size:20px;

 cursor:pointer;
 width:60px;
 margin:0;
 padding:12px 0;
 text-align:center;
 float:left;
 display:block;
 height:22px;}

ul li:hover {color:rgba(0,0,0,.5);}

ul:after {
 content:'';
 display:block;
 position:absolute;
 left:0;
 right:0;
 margin:35px auto;
 height:0;
 width:0;

 border-left: 20px solid transparent;
 border-right: 20px solid transparent;

 border-top: 20px solid #3B5998;
}

li[class*="twitter"] {background:#6CDFEA;padding:12px 0;}
li[class*="gplus"] {background:#E34429;padding:12px 0;}

SEO uyumlu blogger teması

Bu konuda blogcular arasında çok arayış olduğunu biliyorum.Temanın yapımcısı bu temadan SEO dostu, SEO uyumlu bir tema olarak bahsediyor.

Demo İndir

Temanın Özellikleri

- Otomatik “Resimli Devamını Oku” eklentisi mevcut.

- Minimalist, temiz, şık ve kullanıcı dostu bir tasarıma sahip.

- Yatay açılır menü ekli.

- Sosyal butonlar mevcut.

- Hazır reklam alanları var.

- Yazı sonlarında sosyal paylaşım butonları mevcut.

Düzenlemeniz Gereken Yerler

- Sosyal butonlar

Facebook
Twitter
RSS
Google

- Yatay açılır menü

Home
World News
Entertainment
Health
Technology
Auto
Sport

Soccer
Formula 1
Rally Racing
Golf

Etikete özel yapılmış resimli son yazılar eklentisi

Bu yazıda paylaşacağım son yazılar eklentisi farklı ve güzel bir özelliği var. Belli bir etikete ait son yazıyı bogunuzun sidebarında gösterebiliyorsunuz veya siz nerde isterseniz.

Blogger’da eklentiyi blogunuza eklemek için aşağıdaki kodları Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript gadget yolunu izleyerek boş pencereye kodları yapıştırmanız yeterli olacaktır.

Düzenlemeniz gereken yerler:
numpost = Kaç adet yazının gösterileceğini belirler. En fazla 25 yazı görüntülenir.

showpostthumbnails = Resimlerin gösterilip gösterilmeyeceğini belirler. Kapatmak için true yerine false yazabilirsiniz.

displaymore = “Devamı” gösterilmesini veya gösterilmemesini belirler. Açmak için true kapatmak için ise false yazabilirsiniz.

showpostdate = Yazının tarihinin gösterilip gösterilmeyeceğini belirler. Açmak için true kapatmak için ise false yazabilirsiniz.

showpostsummary = Yazının küçük bir kısmını gösterilip gösterilmeyeceğini belirler. Kapatmak için true yerine false yazabilirsiniz.

numchars = Eğer yazının küçük bir kısmını görüntüleme açıksa ilk kaç karakterin gösterilmesini belirlersiniz.

siteismi.blogspot.com = Buraya kendi blog adresinizi yazın.

Etiketİsmi = Buraya etiket ismini yazın. Ben son yazıları göstermek için etiket olarak “Etiketİsmi” yazdım.

Bu yazı kemdince yazıldı ama burda ilk paylaştım.

BiNot Blogger teması

Merhaba arkadaşlar cihanel ve ben BiNot WordPress temasını Blogger'a entegre etmeye çalıştık ve hatalarımız var kabul ediyoruz ama entegre etmeye çalıştık sonuçta tema mavi renkli sade hoş bir temadır şimdiden kullananlara hayırlı olsun.Şuan bir kaç gün eftal v3 temasını entegre etmeye çalıştım cihanel'de yardım edicek ve hayırlısıyla eftal v3 temasını da yayınlıyacağız.

Footer'da ki linkimizi kaldırana tema haram olsun sonuçta entegre etmeye çalıştık ve emek açısından biraz saygı..


Demoİndir

Folio360 Blogger teması

Merhaba günaydın herkese aslında bir kaç haftadır blogger teması paylaşmıyordum nasip oldu güzel bir tema bir kaç renk değişikliği olursa gözümde daha da güzel olabilir ama şuan gayet de güzel neyse şuan iki tane demo var resim ve canlı olarak.

Demo

İndir

Resim olarak demo;

Kendimce temanın özelliklerini sayıyım;

1. Tasarımcılar için tasarlanmış bir "Ağır" tema. 
2. Gerçekten size büyümeye yardımcı olacak güçlü, son derece esnek ve özelleştirilebilir tema.
3. Bu tema duvar kağıdı ve resimsel tabanlı web siteleri için idealdir.
4. Sizin ve ziyaretçilerin çok etkilemek istiyorsunuz, çarpıcı ve inanılmaz özellikleri çok var.

Bir temayla geliyoruz...

Merhaba arkadaşlar, Cihangir (Cihanel.net) arkadaşımla bir tane WordPress temayı Blogger'a entegre ediyoruz veya etmeye çalışıyorum şuan sadece üç dört yeri kaldı belki temayı dağıtırız veya dağıtmayız kendimiz kullanırız daha planlamadık ama büyük ihtimalle dağıtcaz tema mavi renginde bir tema sidebarı konu kısmı klasik yaptık tabi sidebar tam ayarlanmadı ama olsun umarım iyi bir entegre olur Blogger'a neyse görüşürüz ve iyi günler.

2 yöntem ile resimlere ovallik verme

Blogger kullananlar için çok güzel bir eklenti. CSS kodları yardımıyla konu içerisinde yer alan resimlerinizi oval hale getirmek ister misiniz?


Bu şekilde blogunuzun tasarımı değişmiş ve güzel bir görüntü almış olacak. Ayrıca bazen resimlerin oval olacağı yerler de oluyor ve bunun içinde çeşitli programlar ile uğraşılıyor ve bir sürü zaman kaybı oluyor. İşte bunu önlemek için bu eklentiyi mutlaka kullanmanızı öneriyorum.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)

Kod:

]>

Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.

Kod:

.oval {
  display: block;
  width: 150px;
  height: 150px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);  
}

Bu işlemleri yaptıktan sonra şablonunuzu kaydedebilirsiniz. Tasarım bitti artık bunu konu içinde uygulamaya geldi. Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek. Bunun için aşağıda yer alan kod blogunu kullanmanız gerekiyor.

Kod:

Eğer siz bunları yapmak istemiyorsanız aşşagıdaki uygulamaları yaparsanız iyi olur.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)

Kod:

]>

Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.

Kod:

.post img, .post a img, #front-list img {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px rgb(181, 181, 181);
    padding: 2px;
    border-radius: 8px 8px 8px 8px;
}

İşlem bu kadardır. Gerisine karışmanıza gerek yoktur kendisi otomatik oval oluyor. 2 yöntem ile yapabilirsiniz.İyi günler.

Merhaba,

bazılarınız demoda gördügünüz veya göreceğiniz menü istiyordur bende buldum (internet'te dolaşırken buldu) .Bu menü sizin için gayet güzel ve şık menüdür.






Nasıl kurulur veya ekleriz ?

Şablon kısmına girelim ve düzenle html düğme butonuna tıklıyalım ve aşşagıdaki kodu bulalım.

Sonra aşşagıda ki kodu tam üstüne gelicek şekilde yapıştıralım.

Unknown Devam�n� Oku 31 Mayıs 2013 Cuma Blogger Yorum Yok

Blogger kamyonlu Facebook, Feeds ve Twitter

Merhaba, herkes için tabi bazıları için iyi bir eklenti paylaşmayı düşündüm ve bunu paylaştım, kamyonlu bir siteniz olabilir bu eklenti sayesinde...

Açıklama;
bir web sitesi için çok önemlidir ve eklenti animasyon ilgili ise o zaman herhangi bir blog için çok iyi bir izlenim verir ve aynı zamanda ziyaretçi sayısı artar ve bunun için kamyonlu Facebook, Feeds ve Twitter yaptım, yani bunu ben yazmadım ama çevirmeye çalıştım.

Resim ve demo;

Demo

Önemli yerleri düzenlersiniz, iyi günler.

Blogger bayraklı Google translate

Merhabalar herkese, geç oldu biliyorum ama 2 günde bir konu eklemem lazım bir milyon altı olmalı alexa neyse devam edelim herkes demiyelim de bazılar google translate widget'ini resimli yaptırmak ister bende böyle birşey buldum.

Bunun için tek yapmamız gerek Yerleşim>Sayfa öğeleri>Gadget ekle>Html / Javascript ekle bölümünden aşşagıdaki kodu yapıştırın ve kaydedin.




Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.

Blog'da toplam yazı,yorum, kategori görünsün istemezmisiniz ?

Merhaba, ilk önce nasılsınız ? İnşallah iyisinizdir. Blogunuzda bazıları yani misafir olarak adlandırıyım, sitede kaç yazı var v.b. gibi şeyleri görmek ister neden ? hem sitenizin kalitesini hem de çok yazı varsa bu site işime yarar demesidir tabi benim açımdan, her neyse kodları veriyim siz istediğiniz yere ekleyin.

 
 Sitemizde 3 kategoride toplam  yazı ve  yorum mevcuttur.

Ordaki "blogdi" kelimleri yerine sitenizi yazın, umarım beğenirsiniz.

CSS ile Sosyal medya butonu yapalım mı ?

Merhaba arkadaşlar bugün sizlere Css ile Sosyal Medya Butonu yapmayı veya oluşturmayı göstericem ve öğretmeye çalışıcam (beceremem diye düşünüyorum), neyse devam edelim ilk önce resimimizi görelim;

Şimdi ise şablonumuzda bulucağımız koda geçelim;

]]>< /b:skin>

Bulduktan sonra tam üstüne gelicek şekilde aşşağıdaki kodu yazın (tabi kopyala-yapıştır daha hızlı sonuç alırsınız);

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 300); #sosyal-medya { font-family:'Roboto Condensed', sans-serif; } #sosyal-medya ul { margin-left: -40px; } #sosyal-medya ul a { color: #fff; text-decoration: none; } #sosyal-medya ul a li { float: left; list-style: none; height: 58px; width: 68px; margin: 3px 3px 0 0; text-align: center; font-size: 12px; background: #2c2c2c; display: block; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; padding: 9px 0 0 0; } #sosyal-medya ul a li div { background-image: url(http://bsahin.net/wp-content/uploads/2013/02/sprite-sosyal1.png); margin:5px 0 0 26px; height: 15px; width: 15px; } li#fb:hover { background: #38589f } li#tw:hover { background: #44b0e3 } li#pin:hover { background: #cb2229 } li#gplus:hover { background: #cd4132 } li#ins:hover { background: #d2c3ac } li#flickr:hover { background: #ff0085 } li#in:hover { background: #64b7d2 } li#rss:hover { background: #f8bc2d } li#fb div { background-position: 0 0; } li#tw div { background-position: 0 -16px; } li#pin div { background-position: 0 -117px; } li#gplus div { background-position: 0 -99px; } li#ins div { background-position: 0 -64px; } li#flickr div { background-position: 0 -84px; } li#in div { background-position: 0 -49px; } li#rss div { background-position: 0 -32px; }

Bunu yaptıktan sonra kaydet butonuna tıklıyalım ve Blogger şablonundan "Yerleşim" 'e tıklıyalım ve "Gadget ekle" dedikten sonra HTML/JavaScript 'in yanında "+" butonu var tıklıyalım ve İsterseniz Başlık yazın isterseniz yazmayın hani küçük alan varya oraya işte neyse devam edelim büyük alan'a aşşagıdaki kodları yapıştırın;

    

        
FACEBOOK

        
TWITTER

        
PINTEREST

        
GOOGLE+

        
INSTAGRAM

        
FLICKR

        
LINKEDIN

        
RSS

    

Tabi "#" kısımları kendinizce düzenleyin, umarım işinize yaramıştır tabi bu 2 boyutlu olanı 3 boyutluyu da paylaşıcağım  merak etmeyin.İyi günler

CSS3 açılır menü

Merhaba arkadaşlar, bu benim iki yüzüncü yazım ve blogger kullandığım için blogger'da "Açılır menü" paylaşımı yapıcam. 

Not=Ben türkçeleştirmedim home, about, sub link v.b. gibi yerleri onları siz düzenlersiniz.

Demoya bak!

İlk olarak html kodumuz;

Home
About
PortfolioMore Link

Sub link
Sub link
Sub linkMore Link

Sub Sub link
Sub Sub link
Sub Sub link




Blog
Contact Us
Tutorials More Link

Sub LinkMore Link

Sub Sub Link
Sub Sub Link
Sub Sub Link


Sub LinkMore Link

Sub Sub Link
Sub Sub Link


Sub Link
Sub Link
Sub LinkMore Link

Sub Sub Link
Sub Sub Link
Sub Sub Link
Sub Sub Link
Sub Sub Link




Resource
Submit
Advertise
FAQ

CSS kodu buda;

#top a{
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;}

#top {
background:#222;
float:left;
height:30px;
line-height:30px;
width:100%;font-size: 10px;
font-family: "Open Sans", serif;
}

nav#topmenu {
margin:0 auto;
padding:0 15px;
position:relative;
width:960px;
}
nav#topmenu ul {
margin:0;
padding:0;
}

nav#topmenu ul li {
float:left;
position:relative;
font-size:10px;
list-style:none;
margin:0;
padding:0;
width:90px;
text-align:center;
text-transform:uppercase;
border-right:1px solid #ccc; 
}
nav#topmenu ul li:first-child {
border-left:1px solid #ccc;
}
nav#topmenu ul li a {
color:rgba(255,255,255,0.6);
text-decoration:none;
display:block;
}
nav#topmenu ul li a:hover {
color:#fff;
}
nav#topmenu ul li:hover > a { 
color:#fff;
}
nav#topmenu ul li span { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF6UlyceYrx_FXXoWKKnajOqNCxZJb4F0lkOllg_xEI6V5qnMjAnkEBGb6vxdNKcDZiUm4SfyrM3YdpC5BFyFEgeqd6h7svK58gpi-F77vS-DiTMHd_jpaEOhOZqMaQpNT-TpqG0gTJVE/s1600/arrow.png) center no-repeat;
height:10px;
position:absolute;
text-indent:-9999px;
top:10px;
right:5px;
width:10px;
}
nav#topmenu ul li span.arrow {
background-position:0 2px;
}
nav#topmenu ul li span.arrow-right {
background-position:-10px 2px;
}
nav#topmenu ul li ul.sublist { 
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:0px;
top:31px;
background:#222;
width:90px;
opacity:0;
visibility:hidden; 



-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li {
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin-top:-15px;
padding:0;
width:90px;
-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

nav#topmenu ul li ul.sublist li a {
color:rgba(255,255,255,0);
}
nav#topmenu ul li:hover ul.sublist {
opacity:1;
visibility:visible;
}
nav#topmenu ul li:hover ul.sublist li {
margin-top:0;
opacity:1;
}
nav#topmenu ul li:hover ul.sublist li a {
color:rgba(255,255,255,0.6); 
-moz-transition:color 0.1s ease-out;
-webkit-transition:color 0.1s ease-out;
-o-transition:color 0.1s ease-out;
transition:color 0.1s ease-out;
}
nav#topmenu ul li:hover ul.sublist li a:hover {
color:rgba(255,255,255,1); 
-moz-transition:color 0.3s ease-out;
-webkit-transition:color 0.3s ease-out;
-o-transition:color 0.3s ease-out;
transition:color 0.3s ease-out;
}
hnav#topmenu ul li:hover ul.sublist li:hover > a { 

color:#fff;
}
/* Style Sub Sub menu */
nav#topmenu ul li ul.sublist li ul.subsublist {
float:left;
list-style:none;
margin:0;
padding:0;
position:absolute;
left:61px;
top:0px;
background:#222;
width:90px;
opacity:0;
visibility:hidden;
-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
nav#topmenu ul li ul.sublist li ul.subsublist li{
border:none;
border-bottom:1px solid #ccc;
clear:both;
margin:0;
padding:0;
width:90px;
opacity:1;
}
nav#topmenu ul li ul.sublist li:hover ul.subsublist {
opacity:1;
left:91px;
visibility:visible;
}

evet arkadaşlar bunları yaptığınız zaman açılır menünüz hazır. Kolay gelsin.

Dinamik resim eklentisi

Blogunuza dinamik bir resim eklentisi istermisiniz ?

Bu eklentimiz , fare ile resim üzerine gelindiğinde resmi bir miktar yatırır , oldukça güzel bir eklenti olduğunu düşündümüz dinamik resim efektini sizde blogunuzda kullanabilirsiniz..

]]>

yukarıdaki kodun hemen üstüne bu kodu yapıştırıyoruz

]]>.post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(+2deg);-moz-transform: rotate(+2deg);}

.post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);} 

kaydedip çıkıyoruz. Sorunuz olursa ya iletişim'den ya da yorum kısmından belirtebilirsiniz...

Özlü sözler v2 eklentisi

Merhaba arkadaşlar, yine bir eklenti ile karşınızdayım bu eklentimiz özlü sözler eklentisi v2. Ben bu eklentiyi kullanıyordum sağ taraf'ta GADGET olarak bilirsiniz tabi daha yeni siteye girmişlerse bilemezler, tabi şuan kaldırmışım o eklentiyi. Zaten kolay bir eklenti herkez yapabilir.

Yerleşim >> Gadget ekle >> HTML/JAVASCRİPT ekle. Oradaki boşluga bu aşşagıdaki kodu ekleyin.

Umarım begenirsiniz ben şahsen beğendim. Bu eklenti hakkında sorununuz varsa yorum bölgesine yazınız, emek açısından bir yorum yapın.

Özlü sözler eklentisi

Blogger için yine güzel bir eklenti geliştirdim. Bu eklenti sayesinde siteniz veya blogunuz her yenilendiğinde güzel bir sözle ziyaretçilerinizi ağırlayabileceksiniz. Bu eklenti için birde güzel bir CSS tanımlaması yaptım. İstendiği zaman rahatsız olan kullanıcılar düşünülerek birde kapatma düğmesi yaptım. Ama bu güzel eklentiyi kim kaldırmak ister ki  Hemen nasıl yapıldığına geçelim o zaman:

İlk başta CSS tanımlaması yapalım.  kodundan önce şu kodları yapıştıralım:

.bilgilendirme {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 1em 1.5em 1em 5.5em;
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
color:#444;
background: #FFF6BF url() 2.2em center no-repeat; border-color: #FFD324;
}
.bilgilendirme .kapat{ position:relative; float:right; top:-5px; right:-5px; }
.bilgilendirme .kapat img{border:none; background:none;}
.bilgilendirme a  {color: #817134;}

Bu tanımlamayı yaptıktan sonra blogunuzun sidebarına veya herhangi istediğiniz bir yere de asıl olan şu kodları ekleyelim:

Sözlerin sayılarını arttırmak veya sözleri başka sözlerle değiştirmek mümkün. Gerçekten şimdiye kadar ki paylaştığım eklentiler kadar güzel olan bu eklentiyi ben çok beğendim. İnşallah sizlerde beğenirsiniz. 

Sevgililer gününe kaç gün kaldı kodu

Sevgililer gününe kaç gün kaldığını sitenizden ziyaretçilerinize göstermeye yarayacak, Kod Dostu tarafından hazırlanmış bu güzel kodu kesinlikle denemelisiniz! Sayfa sağında yarısı görünen şık bir kalp figürü içerisinde "Sevgililer gününe X gün kaldı!" şeklinde uyarı veren, sayfayı takip eden bu romantik hazır kod ziyaretçilerinizin çok hoşuna gidecek!

Kod:

WordPress tarzında sosyal simgeler

Bildiğiniz gibi Wordpres site tasarımı ile blogger arasında çok fark olmasada baktığınızda anlaşılabilecek şekildedir Wordpres.Şimdi sizlere Wordpres'e benze sosyal paylaşım butonlarını blogger adresinize nasıl ekleyebilirsiniz onu anlatacağım.Aşağıda vermiş yazmış olduğum talimat basit ve kolay bir anlatım zaten çoğu blogger arkadaşımızda bilir.

1. Blogger Paneli > Yerleşim> 
2. Gatget Ekle > HTML/Javascript.
3. Aşağıdaki Kodu İçersine Yerleştiriyoruz.

    
     
                      33        loyal readers
 
 
     
                      270        followers
 
 
     
                      63        fans
 
 

Değiştirmeniz gereken yerler aşağıda gösterilmektedir.

• Feedburner  http://feeds.feedburner.com/nuri-ozdogan feedburner URL yaz ve değiştir 33 sayısı ile RSS susbscribers düzenle .( Kırmızı renk)

• Twitter http://twitter.com/#!/nuri-ozdogan yerine twitter URL  adresini yaz ve değiştir 270sayısı takipçileri düzenle (, Mavi renk)

• Facebookhttp://www.facebook.com/nuri-ozdogan kendi URL adresinizi 63sayısı ile hayranlarını düzenle. ( Sarı renk)