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.