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

13 Tem 2013

Blogger Site Geçiş Efektlerinizi Düzenleyin!


Merhaba arkadaşlar.Bu vereceğim kod sayesinde,sayfa geçişlerini düzenleyebiliyorsunuz.Sitemde zaten var bir linke tıklayarak bakabilirsiniz.Aşağıda anlatıma bakabilirsiniz.

İlk önce arkadaşlar şu kodu buluyoruz.
</head>
Bu kodun üstüne aşağıdaki kodu ekliyoruz ve işlemimiz tamamdır.İyi Bloglamalar.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $("body").css("z-index", "-10"); $("body").fadeIn(0); $("a").click(function(event){ event.preventDefault(); linkLocation = this.href; $("body").fadeOut(500, redirectPage); }); function redirectPage() { window.location = linkLocation; } }); //]]> </script> <style> html { background-color: #F2F2F2; } </style>

12 Tem 2013

Blogunuza Enerji Tasarruf Modu Ekleyin!

Blogunuza Enerji Tasarruf Modu Ekleyin!

 Merhaba arkadaşlar.Ben aslında bu kodu bir siteden aldım.Aşağıda belirteceğim.Aşağıdaki anlatıma bakarak yapabilirsiniz.Bu kod başka bir sitede gezinirken sitenizi yukarıdaki gibi gösteriyor.Mouse'u oynatınca tekrar sitenize geri dönüyorsunuz.

İlk olarak şu kodu buluyoruz.
 </head>
Ve bu kodun üstüne aşağıdaki kodu yapıştırıyoruz.
 <script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=120' type='text/javascript'/><script>jQuery.noConflict();</script>
Not:120 olan yer aktive olurkenki geçen zaman.Yani eğer siteye on saniye bakmazsanız on saniye içinde moda girecek.

Powered by Onlineleaf  .Eğer denemek istiyorsanız Tıklayın.

8 Tem 2013

Sitenize İmsak ve İftar Vakitleri Ekleyin (2013)


 Arkadaşlar sizlere vereceğim kod ile ekleyebilirsiniz.Her şeyi dört dörtlük.Yok yok!Herkese hayırlı Ramazanlar.
<br /><iframe align="middle" frameborder="0" marginheight="0" marginwidth="0" src="http://ozicab.com/dosyalar/iftar.php" height="950" width="965"></iframe><br />

7 Tem 2013

İnternet Explorer'a CSS Desteği Getirmenin Yolları

 Birçok blogcu sitesine özen gösterir.Ziyaretçilerinin ilgisini çekmek için.Görünüm her zaman önemlidir.Ya ziyaretçiler CSS desteği olmayan bir browser ile giriş yapıyorsa?

 İnternet Explorer'da CSS desteği yok arkadaşlar.Birçoğumuz blog görünümünü CSS ile güzelleştirdi bile.Bu yazımda ise sizlere İnternet Explorer'a CSS Desteği Getirmenin Yollarından bahsetmeye çalışacağım.

 İnternet Explorer'a nasıl CSS desteği getirilir?
 Bunun İki yolu var arkadaşlar.İlki Css kodlarının önüne "_" işareti getirmek.Yani;
.h1{_color:#fff}
Bu şekilde css kodumuz İE de uyumlu olacaktır.İkinci yol ise şöyle;aşağıdaki kodu temada buluyoruz.
<head>
Bu kodun üstüne aşağıdaki kodu ekliyoruz ve css kodlarumuz İE de uyumlu hale gelecektir.
<meta content='IE=9' http-equiv='X-UA-Compatible'/>

6 Tem 2013

Editlediğim Sipmlesive Blogger Teması

Merhaba arkadaşlar.Size editlediğim simplesive blogger temasını sunmak istiyorum.Aslında can sıkıntısından editledim.Pek profesyönel değilim ama ortaya bir şeyler çıkarmaya çalıştım.Kullanan arkadaşlara hayırlı olsun.

10 Haz 2013

Artık Yeter Dedim Temamı Değiştirdim.

Yeterin ulen!

Uzun zamandır profesyonel tema arıyorum.Artık yeter.İstediğimi bulamıyorum yada ben hiç bir şey beğenmiyorum.Sonunda dedim ki yeter!Bana ne lazım?Tema.Nasıl bir şey olsun?Sade.Bende Mastemplate'nin bu temasını hemen yükledim.Aslında gerek yok öyle tema felan bana yeter böyle sade bir tema.Artık bu tema ile takılacağım :D

23 May 2013

Simplesive Minimal Blogger Teması

BLogger Temaları | Sana özel Blog

Merhaba arkadaşlar.Bir blogger teması sunmak istiyorum.Ben severim böyle tema aramayı.Bu Blogger temasına biraz çeki düzen verirseniz harika bir tema olacak,inanıyorum.Özelliklerinden bahsedelim;


  • Hassas duyarlı tasarım.
  • Şık arama motoru koymuşlar.
  • Arama motoru h1, h2 ve h3 etiketleri ile optimize edilmiş.
  • Güzel hover efekti ve yatay menü bar eklenmiş.
  • Bir sağ kenar çubuğu ile iki sütun şablonu (genişlik: 300px)

12 May 2013

Çağrıhan Koçpınar SÖB Blogger Teması

Arkadaşlar şuan kullandığım ve kendi editim olan bu blogger temasını ücretsiz dağıtıyorum.İsteyen arkadaşlar aşağıdaki bağlantıdan indirebilirler..Arşiviniz varsa arşivinize de ekleyebilirsiniz.

Blogger' da daha yeniyim ve temayı çok profesyönel bir tema olarak tanıtmak istemiyorum.Temanın çok sade ve şık olduğunu söyleyebilirim.Temanın tasarımında Cufon Font kullandım.Resimlerde hover efekti kullandım.Devamını oku da border efekti kullandım.Sosyal Paylaşım butonları kullandım.Üst tarafta kayan menü kullandım.Alıntı (blockquote) de çok şık bir hover efekt kullandım. Önizlemesi sitemdir fakat yinede bir resim paylaşmak istedim.

Sana özel Blog Blogger Teması

10 May 2013

Blogger Son Yazılar Eklentisi

Sana özel Blog

Çok şık bir görünümü olan eklentidir.Kodlar bana ait değildir.Aşağıda belirttiğim kaynaklara bakabilirsiniz.Css kodları ile oynama yaparak blogunuza göre ayarlayabilirsiniz.

Nasıl Eklerim?
Blogunuza eklemek için yapacağınız tek işlem ; Blogger kumanda paneli > yerleşim > gadget ekle > Html Javascript'e tıklayıp kodları yapıştırmak.İyi Bloglamalar.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
#mini-gallery {
  width:360px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0px auto;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#7E7E7E;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal 14px Impact,Arial,Sans-Serif;
  color:#1CAA01;
  text-shadow:0px 1px 0px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#292929;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:67px;
  height:67px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #00C200;
  -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  box-shadow:0px 0px 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#09AC0F;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>
<script type="text/javascript">
var rpTitle     = "Son Yazılar", // Tentukan judul widget
    numposts    = 15,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://sanaozelblog.blogspot.com"; // Alamat blogmu
</script>
<script src="https://ivyth.googlecode.com/svn/js/rp-m-gallery-dte.js" type="text/javascript"></script>
Kaynak:
Mkr Site

7 May 2013

Blogger Sosyal Paylaşım Butonları v2

Sana özel Blog

İlk Paylaşımım olan Css ile Oluşturulan Sosyal Ağ Menüsü yazımıza bakmanızı öneririm.Bu yazımda ise bunlardan çok farklı ikinci versiyonunu paylaşmak istedim.Çok sade ve şık bir tasarımı var gerçekten.Aşağıdaki adımları takip ederek kolayca kullanabilirsiniz.

İlk olarak Css kodumuzu ekleyelim.Aşağıdaki Css kodunu ]]></b:skin> kodunun hemen üstüne eklememiz gerekiyor.


.social-wrap {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.social-wrap ul li{
list-style:none;
border-bottom:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.social-wrap li a {
margin:5px 5px 0px 5px;
padding:0px 0px 0px 0px;
width:60px;
height:60px;
float: left;
text-indent:-99999px;
background: #191919;
border:solid 1px #222121;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.social-wrap li a.facebook {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxldtg01o2XVhz9jleC9e6XiXl5m1skDguLhANUH08gFb3XFhLtUNkyGxS5GTrx2GlEfSaRNyKIYMjRu0sMFm2w9ryyz_U8a2gKk1_GrNyVXeLYGwZkugr2tQvJqLWAy7VojQ0Th5oQ/s1600/facebook.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxldtg01o2XVhz9jleC9e6XiXl5m1skDguLhANUH08gFb3XFhLtUNkyGxS5GTrx2GlEfSaRNyKIYMjRu0sMFm2w9ryyz_U8a2gKk1_GrNyVXeLYGwZkugr2tQvJqLWAy7VojQ0Th5oQ/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTSHxKQlKhVwmhUYJnNdH_eH0Lzlxj02pjmvQKMwuf572KQBa8FERy9g6jwP0SZKb7yBAXwHc7QK69Z66ftU4IodKYv2j9GxhkAB13IQpNcfQ70YEij0C7CbNtJLPwA3qOThUwpsvDQ/s1600/twitter-1.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTSHxKQlKhVwmhUYJnNdH_eH0Lzlxj02pjmvQKMwuf572KQBa8FERy9g6jwP0SZKb7yBAXwHc7QK69Z66ftU4IodKYv2j9GxhkAB13IQpNcfQ70YEij0C7CbNtJLPwA3qOThUwpsvDQ/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGNeBA58j2xgkcRDSmnX-AOLykFuYR-3prlfoCQSZ3caamlwiAzKasZm3cLQmVA-iT-vQ6T71tSocplXwhnom4WP0Hl3LAIr4S9cxy0478UIVNYkt_5vQhj_sIDzgE3qwoE7RQxw20w/s1600/google.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGNeBA58j2xgkcRDSmnX-AOLykFuYR-3prlfoCQSZ3caamlwiAzKasZm3cLQmVA-iT-vQ6T71tSocplXwhnom4WP0Hl3LAIr4S9cxy0478UIVNYkt_5vQhj_sIDzgE3qwoE7RQxw20w/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Bd6suuNFtIBC-zF_-qw1gNTVKxjjGm4G6RZof_PbAw271CqK5Qkl7LDZ3E8uv6Pzc3PgZWmc9JKzroEeXkISLcrSf7UDuLsZSOyt5oKmIMwkQBsBWCZb64fMUdOMh_B1JGjOyKFn9Q/s1600/twitter.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss:hover {
background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Bd6suuNFtIBC-zF_-qw1gNTVKxjjGm4G6RZof_PbAw271CqK5Qkl7LDZ3E8uv6Pzc3PgZWmc9JKzroEeXkISLcrSf7UDuLsZSOyt5oKmIMwkQBsBWCZb64fMUdOMh_B1JGjOyKFn9Q/s1600/twitter.png) no-repeat -0px -0px;
}

Şimdi aşağıda bulunan kodları ise bir gadgete eklememiz gerekli.Blogger > Kumanda Paneli > Yerleşim > Gadget ekle kısmından ekleyebilirsiniz.Benden bu yazılık bu kadar.Demosuna buradan bakabilirsiniz..İyi Bloglamalar.

<div class="social-wrap">
<ul>
<li><a class="facebook" href="http://www.facebook.com/" target="_blaank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/" target="_blaank">Twitter</a></li>
<li><a class="google-p" href="https://plus.google.com/" target="_blaank">Google Plus</a></li>
<li><a class="rss" href="http://www.blogger.com/blogger.g?blogID=3230679417635010393#" target="_blaank">Rss</a></li>
</ul>
</div>

25 Nis 2013

Css ile Oluşturulan Sosyal Paylaşım Butonları

Css

Merhaba arkadaşlar.Bu yazıda css paylaşımı yapmak istedim.Alttaki adımları takip ederek ekleyebilirsiniz.

İlk olarak blogger > kumanda paneli > şablon  yolunu takip ediyoruz.Daha sonra ctrl+f ye basıp ]]></b:skin> kodunu aratıyoruz ve bu kodun üstüne aşağıdaki bulunan CSS kodunu yapıştırıyoruz. Daha sonra yukarıdaki HTML yazan yerdeki koduda istediğiniz yere yapıştırabilirsiniz. İyi Bloglamalar...

20 Nis 2013

Blogger için Resimlere Efekt Verme (Css ile)

Sana özel Blog

Merhaba arkadaşlar.Bu yazıda sizlere resimlere efekt verme kodlarını paylaşacağım.Tek Yapmanız gereken aşağıda bulunan CSS kodlarını ]]></b:skin> kodunun üstüne yapıştırmak.Html kodlarınıda yazılarınıza ekleyebilirsiniz.Biraz css biligisi olan arkadaşlarda bunları ana sayfaya da yapabilirler.

Bu Efektler ; Yazılarınıza hoş bir görüntü kazandırıyor.Ziyaretçilerin ilgisini çekiyor.Kullanmanızı öneririm.İyi Bloglamalar.



15 Ağu 2012

Jw Player Kullanımı - Nasıl Kurulur ?


Merhaba Arkadaşlar,bugün size "Jw Player" ile sitenize video eklemeyi göstereceğim fakat bunu yapabilmek için bir önceki yazım olan "video linki bulma" yazımıza bakmazın gerekli . Direk anlatıma geçelim ;

Aşağıdaki kodları yazılarınıza eklemeniz yeterli olacaktır.Önizlemesi burada.

<script src="http://player.longtailvideo.com/jwplayer.js" type="text/javascript"></script>

<br />
<div id="mediaspace">
This text will be replaced</div>
<script type="text/javascript">
  jwplayer('mediaspace').setup({
    'flashplayer': 'http://inciswf.com/7492incip7730482.swf',
    'file': 'Video Linki',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });
</script>

Daha Sonra Video Linki Yazan yere bir videonun linkini koyuyoruz.Artık İşlemimiz tamam.İyi Bloglamalar.
İlgili Bağlantılar