Magzon Blogger Teması

Merhaba Arkadaşlar,

bu yayında sizlere Magzon blogger temasından bahsedeceğim.Zarif ve şık ,gözü fazla yormayan yerleşim ve sade olan bu temayı çok seveceksiniz.

Temanın Özellikleri

-Şık ve temiz 

-Dergi,kişisel,eğlence gibi kullanım alanı

-2 Sütunlu

-Hazır Reklam Alanlı

-Kullanımı kolay

• Demo
• İndir

MineZine Kişisel Responsive Blogger Teması

Merhaba Arkadaşlar,

bu yayınımda sizlere MineZine blogger temasını tanıtacağım.Kişisel blogger teması olarak kullanabilceğiniz tema çok zarif ve kullanımı kolaydır.

Temanın Özellikleri

-Responsive Temadır.

-2 Sütunlu

-Şablon başlığında sosyal medya bağlantıları

-Özel arama kutusu

-Google yazı fontu

• Demo
• İndir

Linux Hosting mi ? Windows Hosting mi?

Merhaba Arkadaşlar,

bu yayınımda sizlere Linux Hosting ve Windows Hosting anlatacağım.

Linux Hosting Php ile sürekli çalışan Centos işletim sistemine sahip sunuculardır.

Son zamanlar da en çok tercih edilenler arasında kendine yer edinmiştir.

Linux Hosting de Asp ve Asp.Net çalıştıramazsınız.

Sadece Php ve Html sorunsuzca çalıştırabilirsiniz.

Windows Hosting ise Asp ve Asp.Net i sorunsuzca çalıştırabilen sunuculardır.

Bir çok webmaster Windows Hosting i seçmektedir ve bir çok sorunla uğraşmıştır.

Eğer Asp bir websiteniz varsa Windows Hosting i seçmelisiniz.Eğer Php veya Html kullanıcaksanız Linux u tercih etmelisiniz.

Sağlıcakla Kalın..

Ücretsiz Online Resim Düzenleme Siteleri

Merhaba Arkadaşlar,

bu yayınımda sizlere ücretsiz online resim düzenleme sitelerini tanıtacağım.Site yazarları resim düzenleme konusunda bazen zorlanabiliyorlar ve bunun için pratik ve kullanışlı şeyler arıyorlar.Sitenize gelen ziyaretçilerin dikkatini çekmek için konulara resim eklemek önemli bir şeydir.Resimler trafik çekmenize yardımcı olabilir.

1-Pixlr

Pixlr en çok kullanılan resim düzenleme sitelerinden biridir.Üyelik gerektirmeyen bilgisayarınızdan resim yükleyebilir,resmin url sini atarak düzenleyebilirsiniz.
Siteye gitmek için tıklayın.

2-Lunapic

Lunapic tüm temel düzenleme araçlarını ve animasyon seçeneklerini sunmaktadır.Bilgisayarınızdan ve internet sitelerinden resim yükleyebilir ve çok kullanışlı özelliklerle düzenleyebilirsiniz.
Siteye gitmek için tıklayın.

3-İPiccy

Bilgisayarınızdan,internet sitelerinden veya web kameranızdan resimleri yükleyebilir ve düzenleyebilirsiniz.Kolaj türü resim düzenlemek istiyorsanız İPiccy tam size göre.
Siteye gitmek için tıklayın.

4-Online Image Editor

Eğer resimleriniz üzerinde basit düzenlemeler yapmak istiyorsanız Online Image Editor'ü deneyebilirsiniz.Kesme,boyutlandırma gibi basit düzenlemeleri sunmaktadır.
Siteye gitmek için tıklayın.

Resimleri düzenlemek için veya profesyonel olarak düzenlemek için bu siteleri kullanabilirsiniz.Hızlı ve kolaydır.Etkileyici resimler yapmak istiyorsanız bu araçları kullanabilirsiniz...Sağlıcakla Kalın...

Ücretsiz Logo Yapabileceğiniz Siteler

Merhaba Arkadaşlar,

bu yayınımda sizlere ücretsiz logo yapabileceğiniz servislerden bahsedeceğim.Sitenizin logosunun olması sizi daha çok hatırlatacaktır.Fakat iyi bir logo oluşturmak o kadar da kolay değildir.Yaptığınız işi ve sitenizi iyi yansıtan bir tasarım yapmanız gerekir.Profesyonel tasarımcıların yapacağı logolar yüksek bütçe ayırmanız gerekebilir.Aşağıda belirtecek olduğum sitelerden ücretsiz ve sizi yansıtacak derece de logolar yapabilirsiz.Bazıları ücretsizken bazılarıda yüksek çözünürlükte logo yaptığından dolayı ücretli.Fakat siz ücretsiz olanlarıyla da iyi bir logo tasarlayabilirsiniz.

1-ONLİNE LOGO MAKER

En iyi logo tasarım sitelerinden biridir ve ücretsizdir.Hazır görsellik kullanarak veya kendi istediğiniz bir resmi yükleyerek düzenleyip kullanabilirsiniz.

Siteye gitmek için tıklayın.

2-THE FREE LOGO MAKERS

Basit bir arayüze sahip olan bu sitede oldukça basit ve sade logolar yapabilirsiniz.
Siteye gitmek için tıklayın.

3-LOGO GENİE

Logo tasarlamak için en iyi sitelerden birisidir.Oldukça iyi ve basit bir arayüzü vardır.Kategoriye site adınızı ve sloganını yazarak oluşturulan tasarımları görebilirsiniz.Bir logo oluşturarak onu özelleştirebilirsiniz.

Siteye gitmek için tıklayın.

4-LOGO GARDEN

Sade ve şık logo oluşturmak için kullanılabilicek bir servis.Buradan sembollere efektler vererek logo oluşturabilirsiniz.
Siteye gitmek için tıklayın.

5-LOGASTER

Gerçekten iyi bir logoya ihtiyacınız varsa Logaster ilk girmeniz gereken logo sitesi olabilir.Kullanıcı arayüzü gayet kullanışlı ve kaliteli bir logoyu hızlı tasarlayan servistir.Logoları oluşturabilir ve ücretsiz kayıt olarak indirebilirsiniz.

Siteye gitmek için Tıklayın.

Oluşturduğunuz logoyu üyelik açarak ve ücretsiz bir şekilde indirebilirsiniz.Zip dosyası halinde inen ve bunun içerisinde altı farklı şekilde olan logolar yer alır.Düşük çözünürlükte olmasına rağmen iyi bir logo yapabilirsiniz.Ücret ödemeden iyi bir logonuz neden olmasın ki...

İstenmeyen Sitelerden Hit Almayı Engellemek

Merhaba Arkadaşlar,

Bu yayınımda sizlere blogunuza kötü sitelerden gelen hitleri nasıl kaldırabiliriz konusuna değineceğim.Bazı istemediğimiz sitelerden sitemize hit geliyor ve sitenin uygunluğunu etkiliyor bunun için bir yöntem var.Aşağıda vermiş olduğum kodu ekledikten sonra bu sorundan kurtulmuş olacağız.Şablon > Html'yi Düzenle diyip </head> kodunu bulup aşağıdaki kodu hemen üstüne yapıştırıp ve url 1 ve url 2 yerlerine de istemediğimiz sitelerin adresini yazıyoruz.İstersek bu url leri çoğaltabiliriz size kalmış bir şey.

<script type='text/javascript'> var block = ['url1', 'url2']; for (var b = block.length; b--;) { if (document.referrer.match(block[b])) window.location = "http://google.com/"; } </script>

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Discover Responsive Blogger Teması Modern

Merhaba Arkadaşlar,

Bu yayınım sizlere modern bir responsive blogger temasından bahsedeceğim.Discover modern responsive tema seo destekli ve çok zarif bir tasarımı olan bir temadır.

Temanın Özellikleri

-Hazır Seo Destekli

-Galeri

-Slider Eklentili

-Hazır Reklam Yerleri

-Beyaz,Gri Ağırlıklı

-2 Sütunlu

-Kişisel,Moda,Modern

İNDİRME DOSYASI GÜNCELLENMİŞTİR HATALAR GİDERİLMİŞTİR.

• Demo
• İndir
• 
  

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Responsive Seo Destekli Kişisel Blogger Teması

Merhaba Arkadaşlar,

Bu yayınım da sizlere ücretsiz responsive blogger teması sunmak istiyorum.Görsel olarak çok hareketli olan bu tema moda,kişisel,fotoğraf gibi alanlarda kullanabiliceğiniz Mc3 Revoltify Alternate Blogger Teması.

Temanın Özellikleri

-Mavi,Beyaz renk ağırlıklı

-Seo Destekli

-Responsive Tema

-Hazır Sosyal Paylaşım Butonu

-Açılır Menü

-1 Sağ Kenar Çubuğu

• Demo
• İndir
• 
  

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Simplitona Responsive Kişisel Blogger Teması Türkçe

Merhaba Arkadaşlar,bu yayınımda sizlere yabancı bir blogdan aldığım temayı editleyip Türkçeleştirilmiş biçimde sunacağım.Simplitona Responsive Blogger Teması Ücretsiz ve Türkçe.

Temanın Özellikleri

-Seo Dostu

-Responsive Özellikli

-Kullanım Alanı Kişisel Blog,Moda,Haber,Teknoloji

-Sekmeli Widget

-Full Türkçe Edit

-Hazır Reklam Yerleşimi

• Demo
• İndir
• 
  

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Decarus Responsive Blogger Teması

Merhaba Arkadaşlar,bu yayınımda sizlere kişisel blogunuz için kullanabiliceğiniz responsive uyumlu temadan bahsedeceğim.Decarus Responsive Blogger Teması

Özellikler

-Film,Haber,Kişisel Sayfalar,Fotoğrafçılık,Kültür alanında kullanabilir.

-Responsive Duyarlı

-Seo Dostu

-Reklamlar Yerleşimi Hazır

-Slayt Gösterisi-

-Sekmeli Widget

-Sidebars

-Dikey Açılır Menu

• Demo
• İndir

Punjab Press v4 Responsive Blogger Teması

Merhaba Arkadaşlar,bu yayınımda sizlere responsive blog temasını sunacağım.Daha çok teknoloji veya bilgi paylaşım siteleri için uygun olan Punjab-Press-v4  teması.

Özellikler

-Responsive Duyarlı

-Seo Dostu
-Hazır Reklam Yerleşimi
-Slayt Gösterisi
-Açılır Menü
-Sekmeli Widget
-Alt Sütun
-Sidebars

• Demo
• İndir

Hazır Sosyal Paylasım Eklentisi - 8

Merhaba Arkadaşlar,bu yayınımda sizlere blogunuzda kullanabiliceğiniz sosyal paylaşım eklentisinden bahsedeceğim.Siyah efektli bu eklenti sitenizde farklı bir hava yaratıcaktır.Hemen anlatıma geçeyim.

Blogger Admin Panel'ine girip Yerleşim > Gadget Ekle diyip aşağıdaki aşağıdaki kodları ekliyoruz.

/* Siyah Zoom Efektli Sosyal Butonlar Eklentisi kodblogcum.blogspot.com */ <style> .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 60px; height:60px; } .bubblewrap li img{ width: 50px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 4px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8);} </style> <div> <ul class="bubblewrap"> <li><a href="http://www.plus.google.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWPP26Rs0MrOtHicuYGeO65WKgivk4fS8LZ3nXOuxw3TCMhMgbfg3NGURR4tVLTLkqzson1NlOS6MGIJ1WnJrW8-CV1_LWLLy8huUcweNDPp4rxxo3xQE6U6B6dESXfgjFYbLa5z9h6Q/s1600/bloggertrix-google-icon.png" title="Google" /></a></li> <li><a href="http://www.facebook.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiic5ZGWmGN65vU8X-RQiaVVy2uY7B8IJIr9bL-p14h9RDRnNmb_86Qma2Pr0iCdNvPd21Vw1KXqf26t0fDsYPZNxLIXigrQiIO9rteJK7nkZHIHGuH12dULGzZCuGn-Oa_ykOKrz6YEYw/s1600/bloggertrix-facebook-icon.png" title=" Facebook" /></a></li> <li><a href="http://www.digg.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbsEuXvSyW49YX0OZ8iSESIEmptxBMifFrzgglIHbtKA6IAfYQbe1BKcLA7qUYie3TWNzQzkl9rHv8gRIAz9Mw-0FEizccqHwZUhdTjBXCiBp0zxDSyIQ6OOjzYXEy1euyFr0UlfUj2Tw/s1600/bloggertrix-digg-icon.png" title="Digg" /></a></li> <li><a href="http://www.twitter/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsYXXW5Lb2xu21zNr12o6YzYDvd-VPB_DrNhP9oLi9xAphs2eD3WSXSJCPm1Od6QMkm_j8HBGCraU078TfPCo8oGW_XZX4eEPsvzgYc-dh1AfLbdt9Y4h8G0Zg-oCcVNoeY6dWzP4L24/s1600/bloggertrix-twitter-icon.png" title="Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinsb5SrCO3EQZtI0xMB84h6Dlogim0H8WQGaLNModGEkw77iqUdf8KiB2MjS4pBH-5FKmgjXH22PZ6AYYGilO7UtO2_EhB43m90KVrFRwfd0OKwvBCuOPj2_TThrNqgEkdYfKgssakPkY/s1600/bloggertrix-rss-icon.png" title="RSS Feed" /></a></li> </ul> </div>

# İle olan yerlere linklerimizi ekliyoruz.

• 
• 
• 
• 
• 

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Konu Başlıklarının Yanına Yorum Kutucuğu Ekleme

Merhaba Arkadaşlar,bu yayınımda sizlere blogunuzda konu başlıklarının sağ üst tarafına yorum kutucuğu eklemeden bahsedeceğim.Blogunuzda görsel değişikliklerin olmasını isterseniz bu eklentiyi kullanabilirsiniz.Bu eklenti sayesinde konunun içine girmeden kaç adet yorum yapıldığını görebilirsiniz.

Bi uyarıdan bahsedeceğim her temada olmuyor umarım sizin temanızda çalışır.

Blogunuza eklemek için ilk olarak Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyip ]]></b:skin> kodunu bulup hemen üstüne aşağıdaki kodu ekliyoruz.

.yorumkutucugu { float: right; width: 48px; height: 48px; background: url(http://icons.iconarchive.com/icons/semlabs/web-blog/48/comment-empty-icon.png) no-repeat; font-size: 16px; float: right; margin-top: -15px; margin-right: 2px; text-align: center; position: float; text-align: center; padding-top:13px; }

Sonrasında yine şablondan  <b:if cond='data:post.link'> kodunu buluyoruz ve aşağıdaki kodla değiştiriyoruz.
<b:if cond='data:post.allowComments'> <a class='yorumbalonu' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> </b:if> <b:if cond='data:post.link'>

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Yorumlarını Numaralandırma

Merhaba Arkadaşlar,bu yayınımda sizlere blogunuzda kullanabiliceğiz bir eklentiden bahsedeceğim.Bu eklenti görsel anlamda bir güzellik katıyor diyebiliriz.Bu eklentide yorumun hemen sağ üstünde numaranladırması blogumuzda mevcuttur.Benim de kullandığım bu eklentiyi sizlere sunayım.

Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve ]]></b:skin> kodunu bulup hemen üstüne aşağıdaki kodu ekliyoruz.

.comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: right; font-size: 12px; color: #555555; padding-left: 10px; padding-top: 3px; background: url(https://lh5.googleusercontent.com/-SnPLukqeA8w/Uy78FFOkg2I/AAAAAAAAGts/ofi2C0g2TGE/s33-no/wLrBEz.png) no-repeat; margin-top: 7px; margin-left: 10px; width: 30px; height: 35px; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: right; font-size: 12px; color: #666666; }

Hepsi bu kadar yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Konu İçinde Reklam Gösterme

Yeni bir yayınla hepinize merhaba arkadaşlar,bu yayınımda sizlere blogunuzda konuların içinde reklam göstermeden bahsedeceğim.Site veya blogunuz zamanla genişledi ve artık reklamlar almaya başladınız ve reklamı konuların içine koymak istiyorsunuz ve bunun için ne yapmalısınız?

Bunun için öncelikle Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve <data:post.body/> kodunu bulup üstüne veya altına aşağıdaki kodu düzenleyerek koyuyoruz.Bence üstte görünmesi daha iyi çünkü üstte kullanıcı reklamı daha iyi görebilir ve reklamlarınıza tıklayabilir.

<b:if cond='data:blog.pageType == "item"'>Reklam kodu buraya gelecek

</b:if>

Reklam kodunuzu buradan Blogger'a uygun hale getirmelisiniz.Çünkü bazı reklam kodları sitenizle uyumlu olmayabiliyor.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Yukarı çık button eklentisi

Merhaba Arkadaşlar,bu yayınımda sizlere blog veya sitenizde kullanabiliceğiniz yukarı çık button veya çapasından bahsedeceğim.Bu eklentiyi çoğu kullanıcı da arıyordur sanırım.Neyse uzatmadan anlatıma geçeyim.

Şimdi nasıl ekleyeceğimizi anlatayım öncelikle <head></head> kodlarının arasına aşağıdaki kodu ekliyoruz.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>

2.olarak css kodlarımızı ekliyoruz kodlardan ]]></b:skin> kodunu bulup aşağıdaki kodu üstüne ekliyoruz.
.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow:hidden; text-align:center; z-index:99; background-color:#2ba6e1; color:#fff; width:47px; height:44px; line-height:44px; right:25px; bottom:-25px; padding-top:2px; border-radius:5px; transition:all 0.5s ease-in-out; transition-delay:0.2s; } .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--sesuaikan sebagai tambahan--*/ color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } .smoothscroll-top:hover { background-color:#3eb2ea; color:#fff; transition:all 0.2s ease-in-out; transition-delay:0s; } .smoothscroll-top.show { visibility:visible; cursor:pointer; opacity:1; bottom:25px; } .smoothscroll-top i.fa { line-height:inherit; }

3.olarak da </body> kodunu bulup hemen üstüne aşağıdaki kodu ekliyoruz ve işlem tamamdır.

  <div class="smoothscroll-top"> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <script type="text/javascript"> //<![CDATA[ $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.smoothscroll-top').addClass('show'); } else { $('.smoothscroll-top').removeClass('show'); } }); $('.smoothscroll-top').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50); } //]]> </script>

Yardım için yoruma yazabilirsiniz... Sağlıcakla Kalın...

Sitemap (Site Arşivi)

Blogger Otomatik Slider Eklentisi

Merhaba Arkadaşlar,bugün sizlere blogunuzda veya sitenizde kullanabiliceğiniz yine güzel olan bir eklentiden bahsedeceğim.Buna benzer bi eklenti daha paylaşmıştım.Şimdi ise farklı bir slider eklentisi ile karşınızdayım.Hemen anlatıma geçeyim.

Blogunuza eklemek için Blogger Admin Panel'inden Yerleşim > Gadget Ekle  kategorisinden  Html / Javascript i seçip aşağıdaki kodu yapıştırıyoruz.

Eklentinin içinde yazan kodblogcum.blogspot.com.tr adresi yerine kendi adresinizi yazıyorsunuz.

<style> /* CSS Slider Recent Post */ #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald'; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald'; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:50%} #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%} #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%} #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}} </style> <div id="featuredpost"> </div> <script type="text/javascript" src="https://tolgagnl.googlecode.com/svn/photoviewer.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"http://kodblogcum.blogspot.com.tr/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>

Yardım için yoruma yazabilirsiniz... Sağlıcakla Kalın...

Blogger Yorum Alanını Özelleştirme

Merhaba Arkadaşlar, bu yayınımda sizlere blogger da yorum alanını özelleştirmeden bahsedeceğim.Renkli ve ilginç olan bu eklentiyi sunmak istiyorum.

Eklemek için Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyip ]]></b:skin> aşağıdaki kodu ekliyoruz.

@font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; }

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Film Temaları

Merhaba Arkadaşlar,bu yayınımda sizlere blogger için kullanılan popüler film temalarını sunacağım.

1.Cinema Free Version

• Demo
• İndir

2.Johny Joss Banget

• Demo
• İndir

3.Jony Ember

• Demo
• İndir

4.Hash Movie

• Demo
• İndir

5.Johny Crottube

• Demo
• İndir

Blogger Renkli Etiketler Oluşturma - 2

Merhaba Arkadaşlar, bu yayınımda sizlere yeni bir renkli etiket oluşturmadan bahsedeceğim.Daha sade duran bu etiket eklentisini anlatayım.

Adım 1: Blogger Şablon > Html'yi Düzenle diyoruz ve ]]></b:skin> kodunu aratıp aşağıdaki kodu ekliyoruz.

.label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;} .label-size-1 a:hover {background:#16a085;} .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;} .label-size-2 a:hover {background:#2980b9;} .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;} .label-size-3 a:hover {background:#27ae60} .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;} .label-size-4 a:hover {background:#8e44ad} .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;} .label-size-5 a:hover {background:#c0392b} .label-size-6 a {background:#FE2200;border-bottom:3px solid #FE2200;} .label-size-6 a:hover {background:#FE2200} .label-size { position:relative; text-transform:uppercase; text-decoration:none; font-size:13px; font-family:Arial; color:#fff!important; } .label-size a { color:#fff!important; font-weight:bold; float:left; display:block; transition: all 0.4s ease-in-out; padding: 3px 5px; margin: 2px 5px 5px 2px; }

Adım 2 : Blogger Yerleşim menusünden Gadget Ekle diyoruz ve Etiketleri ekliyoruz.