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

10 Ağustos 2014 Pazar

Alan Adını domaininizi Blogger'a Yönlendirme

Alan Adını domaininizi Bloger'a Yönlendirme

Bu yazıda Blog'unuza Özel alan adı ( Domain ) nasıl yönlendirilir onu anlatacağım. Günümüzün en büyük blog sistemi olan Blogger bir nevi bize hosting hizmeti veriyor. Hostinglere çok paralar harcamak istemiyorsanız blogger hesabınızı domaininize yönlendirebilirisiniz. Ve artık sizinde bloglarınız özel alan adlarına sahip olacak örn : www.MeftunApart.com gibi. Şimdi sizlerde Domainlerinizi aldıktan sonra alt kısımdaki adımları sırasıyla takip ederek domaininizi yönlendirebilirsiniz.

Blogunuza gidin ve Ayarlar sekmesinin altındaki Temel seçeneğini tıklayın. "Yayıncılık" bölümünde, özel alan adı eklemeye ilişkin bağlantıyı tıklayın.
Satın aldığınız alan adının URL'sini yazın. URL'nin çalışması için www ile başlaması gerektiğini unutmayın.
Ve Kaydet'i tıklayın.
Bir hata mesajı görüntülenir. Altta iki CNAME kaydının listelenmiş olduğunu görürsünüz. Her CNAME iki bölümden oluşur: Ad, Etiket veya Ana Makine ve Hedef, Hedef Nokta veya Yönlendirme Hedefi. İlk CNAME herkes için aynıdır; Ad "www", Hedef ise "ghs.google.com"dur. İkinci CNAME, blog'unuza ve Google Hesabınıza özeldir ve bu nedenle de herkes için farklıdır.
Alan adı kayıt kuruluşunuzun web sitesine gidin ve kontrol panelinde DNS (Alan Adı Sistemi) ayarlarınızı bulun.
Şimdi sıra CNAME kayıtlarınızı girmeye gelmiştir. Ad, Etiket veya Ana Makine kısmına "www" yazın, ghs.google.com'u da Hedef, Hedef Nokta veya Yönlendirme Hedefi olarak belirtin.
Ardından ikinci CNAME kaydını aynı yöntemle girin.
İsteğe bağlı : Çıplak alan adınızı (example.com) gerçek bir siteye (www.example.com) bağlayan A kayıtları da girebilirsiniz. Bu adımı atlarsanız "www" yazmayan ziyaretçiler bir hata sayfasıyla karşılaşır.
İsteğe bağlı (devamı) : 8. Adımı tamamladıktan sonra alan adınızı example.com biçiminde girin ve alt tarafta gösterilen IP adreslerini "A" bölümünde listeleyin. Dört farklı Google IP'sini gösteren dört ayrı A kaydı açmanız gerekir.
216.239.32.21
216.239.36.21
216.239.36.21
216.239.38.21
İsteğe bağlı bölümün sonu
Son adıma geçmeden önce, DNS ayarlarınızın etkinleşmesi için bir saat kadar bekleyin. Ayarlarınız etkinleşmeden önce son adımı uygulamaya çalışırsanız sizi bir uyarı iletisi ile bilgilendiririz.
Ayarlarınız etkinleştikten sonra, Google'ın okuyucularınızı blog'unuza yönlendirebilmesi için Blogger'ın, özel adınızı bildiğinden emin olmanız gerekir. Blogger'a geri dönün ve Ayarlar | Temel sekmenizdeki bilgileri güncelleyin. "Yayıncılık" alanını bulun ve özel bir alan adı eklemeye ilişkin bağlantıyı tıklayın.

Sunulan kutuya, özel alan adınızın URL'sini girin ve Kaydet'i tıklayın.

Blogger'a Özel Alan Adı ( Domain ) Yönlendirme

Hepsi bu kadar! Blogspot.com adresiniz kısa süre içinde yeni özel alan adınıza yönlendirilecektir. Yönlendirmenin çalışmaya başlaması 24 saat kadar sürebileceğinden, sabırlı olun. 24 saat geçmesine rağmen hata sayfası görmeye devam ediyorsanız bu, ayarlarınızın doğru girilmediği ve işlemi bir kez daha denemeniz gerektiği anlamına gelir.

Alan Adını domaininizi Blogger'a Yönlendirme

Eklemek istediginiz Url'yi http://www.MeftunApart.com bölümünü değiştirin.
"Kod Oluştur" butonuna tıklayın

Şimdi Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
Ctrl+F yardımı ile <head> kodunu aratıp bulun ve hemen altına oluşturulan kodu kopyalayıp yapıştırın.
Şablonunuzu kaydedin ve bitti.

Not:

Yeni alan adınız sizi blog'unuza götürmüyorsa tüm DNS sunucularının güncellenmesi için bir veya iki gün bekleyin. Hala çalışmıyorsa, DNS ayarlarınızı doğru girdiğinizden emin olmak için kayıt kuruluşunuzla iletişime geçin.
Orijinal Blogspot adresiniz otomatik olarak yeni alan adınıza yönlendirilecektir. Bu yöntemle sitenize giden var olan bağlantılar veya yer işaretleri çalışmaya devam eder.
Yayınlanmış resimleriniz blog'unuzda görüntülenmeye devam edecektir.

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

7 Ağustos 2014 Perşembe

Google Adsense Reklamları Nedir? Nasıl Kullanılır?

Google Adsense, çeşitli firmaların Google Adwords'e verdiği reklamları büyük kitlelere ulaştırmak için biz internet kullanıcılarına, belli bir ücret karşılığında reklam yapmamızı sağlamaktadır. Google Adsense’nin sağlamış olduğu bu fırsatlardan hem bizler hem de Google para kazanmaktadır. Google AdSense, büyüklükleri ne olursa olsun tüm web sitesi yayıncılarının web sitelerinde hedeflenmiş Google reklamları göstererek para kazanmalarını sağlayan ücretsiz ve kolay bir yöntemdir. Kısaca website sahipleri için Google’ın sunduğu bir reklamcılık hizmetidir. Ücretsiz olarak buradan başvurulabilen bu sisteme kaydınız onaylandığı takdirde sizde google yayıncısı olabilir ve sitenize gelen ziyaretçi trafiği üzerinden belirli bir gelir elde edebilirsiniz.

Kullanım Şartları

Reklam verenler google adwords ile kampanyalarını oluştururken sadece arama ağı değilde yayıncı siteleri de hedeflediği taktirde bu reklamlar Adsense yayıncı havuzunda toplanır ve reklam ile benzer içerik barındıran sitelerde veya sayfalarda bu reklamlar görüntülenmeye başlar. Google örümcekleri sitenizi sürekli indexlediklerinden dolayı sizin içeriğinizin kategorisini belirler ve moda siteniz varsa gidipte sitenizde kombi reklamlarını yayınlamaz. Bunun faydası ise tıklanma oranının arttırmasıdır. Bu sayede hem google hem yayıncı daha çok gelir elde etmiş olur. Google AdSense ile para kazanmak kulağa çok hoş geliyor fakat bu sisteme kabul edilmek çok da kolay değil. Bazı şartları sağlamış olmanız gerekir.

Öncelikle 18 yaşından büyük olmalısınız.
Blogunuz pornografik ve şiddet barından içerik içermemeli .
Blogunuzda ağır küfür, ırkçı hoşgörüsüzlükle ilişkili veya herhangi bir şahıs, grup veya kuruluş aleyhinde propaganda niteliğindeki içerik yer almamalı.
Blogunuzda hack, crack, warez ve uyuşturucu ile ilgili içerikler olmamalı.
Blogunuzda alkol, tütün, reçeteli ilaç, silah, markaların taklit ürünleri, tez, ödev gibi şeylerin satışı yapılmamalı.
Blogunuz yasa dışı, yasa dışı etkinlikleri teşvik eden veya başkalarının yasal haklarını ihlal eden diğer herhangi bir içerik içermemeli.
Blogunuz Google’ın kalite yönergelerine uygun olmalı.
Ayrıca blogunuzda bir “gizlilik politikası” sayfası oluşturmalısınız. Gizlilik politikası oluşturmayla ilgili bilgi almak için buraya bakabilirsiniz.

Organik Trafik

AdSense'nin en çok dikkat ettiği trafik sistemi organikliğidir. Eğer siteniz doğal yollardan yani Google arama ve diğer arama motorlarından geliyorlarsa size daha fazla kazanç sağlayacaktır. Sonuçta arama yaparak erişilen sitenizde o konu ile alakalı reklamlar çıkacaktır ve haliyle o reklamların tıklanma sayısı da artacaktır.
Eğer sitenize verilen bağlantı yolu ile gelen ziyaretçileriniz var ise bu tık sayısı düşecektir. Sitenize verilen bağlantı çeşitleri şunlar olabilir: Backlink, makale içerisindeki linkler ve sosyal ağlarda paylaştığınız linkler.
NOT: Organik trafiği elde etmenin yolu SEO'dan geçtiğini unutmayın.

Kayıt Olma

Blogunuzu kayıt aşamasına hazır hale getirdikten sonra Blogger kumanda panelindeki Kazançlar sekmesinden veya AdSense kayıt sayfasından başvurunuzu yapabilirsiniz.

1. Onay Süreci:

Başvurunuzu yaptıktan sonra yaklaşık 2-3 günlük inceleme sürecinin ardından ilk onayı alıp almadığınızla ilgili bir e-posta gönderilir. Eğer blogunuz onaylandıysa sizden reklam birimi oluşturarak blogunuza eklemeniz istenir.

2. Onay Süreci:

Reklam birimi oluşurmak için Google AdSense hesabınıza giriş yaparak Reklamlarım > Reklam birimleri > Yeni reklam birimi yolunu izleyerek istediğiniz boyutlarda bir reklam birimi oluşturduktan sonra verilen kodu blogunuza eklemelisiniz. Onay aşamasında 1 adet reklam birimi oluşturmanız yeterlidir ve bu reklam birimine ait kodu Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek ekleyebilirsiniz. Onay sürecinin tamamlanması yaklaşık 1 ata sürer bu sürede eklediğiniz reklam biriminde boş bir alan gözükür. Blogunuzun incelenmesi tamamlanıp ikinci onayı da aldıktan sonra size bir bilgi e-postası gönderilir ve birkaç saat içinde boş reklamların yerinde AdSense reklamları gözükmeye başlar. Bu andan itibaren ziyaretçileriniz reklamlara tıkladıkça hesabınızda para birikmeye başlar. Kayıt ve onay işlemi tamamlandaıktan sonra da Google blogunuzu incelemeye devam eder sizden bazı kurallara uymanızı ister.

Kendi reklamlarınıza tıklamayın, kimseden Google reklamlarınızı tıklamasını istemeyin.
Reklamların yanlışlıkla tıklanmasını sağlayacak numaralardan kaçının.
Bir sayfaya en fazla 3 reklam birimi ekleyin ve reklam kodlarında değişiklik yapmayın.

Reklam Yerleşimi Ve Optimizasyonu

Reklam birimlerinin yerleşimini yaparken performansı olduğu kadar kullanıcı deneyimini ve Google AdSense politikalarını da göz önünde bulundurmalısınız.

Blogunuzun içeriğini mantıklı bir şekilde düzenleyin ve blogunuzda gezinmeyi kolaylaştırın.
Reklamlarınızı kullanıcıların ilgilendikleri içeriğin yakınına yerleştirin ve kullanıcıların aradıkları içeriği kolayca bulabildiklerinden emin olun.
Blogunuzdaki resimleri reklamlarınızla hizalamayın veya reklamın yakınındaki içeriğin reklamlarınızın biçimlendirmesini taklit etmemesine özen gösterin.
Reklamları, menü, gezinme veya indirme bağlantılarıyla karıştırılabilecekleri konumlara yerleştirmeyin.

Reklam Boyutları

Bu konuda AdSense uzmanlarının en başarılı olanlarını şöyle sıralamıştı:

336x280 Büyük Dikdörtgen
300x250 Orta Boy Dikdörtgen
728x90 Leaderboard
160x600 Geniş Dikey

AdSense yetkilileri yaptığı araştırmalar ve A/B testleri sonucunda bloglar için en uygun reklam yerleşiminin şu şekilde olduğunu tespit etmişlerdir:

Not : Blogunuza ekleyeceğiniz reklamları "blog temanıza" uygun renkler ile eklemeyi tercih ediniz.

AdSense Reklamları Ne Kadar Kazandırır?

AdSense reklamları ile elde edilen kazanç siteden siteye farklılık gösterir. Kazancınızı belirleyecek 2 temel faktör vardır. Reklamlara tıklanma sayısı ve tıklama başına maliyet. Örneğin reklamlarınıza bir ayda 100 kez tıklandıysa ve TBM (Tıklama Başına Maliyet) 0.5$ ise o ay kazancınız 100x0.5 = 50$ olur.
Reklamlara tıklanma sayısını arttırmaya yönelik yerleşim ipuçlarından yukarıda kısaca bahsettim. Şimdi de TBM yani tıklama başına maliyeti arttırmak için neler yapabileceğinizden bahsedelim.

Reklam birimlerinizin tümü için hem metin reklamların hem de resim reklamların/zengin medya reklamlarının gösterilmesi seçeneğini etkinleştirin.
Filtre listenizi kısa tutun, böylece yüksek ödeme yapan reklamları engelleyerek gelir potansiyelinizi azaltmamış olursunuz.
Yerleşim hedeflemeye yönelik özel kanallarınızı oluşturarak siteniz için rekabet eden reklam sayısını artırın.
Blogunuzda belli konulara odaklanarak kaliteli içerik üretin.

9 Temmuz 2014 Çarşamba

Blogger Şablon Yedekleme

Blogumuzun şablonunda değişiklik yapmak istediğimiz zaman eklediğimiz kodlar çalışmazsa ya da mevcut kod düzenimizde istemediğimiz türden bir değişiklik oluşturursa eğer şablonunuzu yedeklemediyseniz maalesef geriye dönmeniz mümkün olmayacaktır! Blogumda şablonunuzu güzelleştirmek adına zaman zaman blogger eklentileri yayınlıyorum. O yazılarda da fark edeceğiniz üzere şablonunuzda yer alan kodlarda bir takım değişiklikler yapmanız gerekiyor. Sağlıklı bir değişiklik yapmak için şablonunuzun önceki halini yedeklemeniz ileriye dönük size fayda sağlayacaktır.
Şablonunuzu yedeklemeniz sadece kodlarda yapacağınız değişikliklerin olumsuz olmasına karşın değil, bloğunuzun başına gelebilecek herhangi bir durum için de gerekli olacaktır.O yüzden kodlarda değişiklik yapın ya da yapmayın, ayda-2 ayda bir şablonunuzu yedeklemeyi ihmal etmeyin.

Blogger şablon nasıl yedeklenir?

Şablon değiştirmek istediğimizde yaptığımız işlemi bir bakıma tekrar ediyor olacağız.

Blogger hesabınıza giriş yapın.
Şablon menüsüne tıklayın.
Sağ üst köşede yer alan Yedekle / Geri yükle butonuna tıklayın.
Karşınıza çıkan pencerede tam şablonu indir butonuna tıklayın.

Bu adımları doğru yaptığınız takdirde şablonunuzu bilgisayarınıza kaydetmiş olacaksınız.İndirdiğiniz dosya farklı rakamlardan oluşan anlamsız bir isme sahip.Siz şablon adı ve tarih şeklinde bir isim vererek ilerleyen dönemde yaptığınız değişikliği hatırlayabilirsiniz.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

7 Temmuz 2014 Pazartesi

Blogger sayfa numaralandırma eklentisi

Blogger şablonlarının çoğunda sayfa numaralandırma eklentisi yok. Sayfalar arasında geçiş, sayfa sonunda alt tarafta bulunan "daha eski kayıtlar", "daha yeni kayıtlar" gibi linklerle sağlanıyor. Şimdi yapacağımız sayfa numaralandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Ziyaretçiler yazılarınıza bakarken örneğin en eski yazılarınızı görmek için 10-15 kere önceki kayıt butonuna basmak zorunda kalır fakat bu eklenti ile buna gerek kalmayacak. Sayfanın altındaki önceki kayıt ve sonraki kayıt yazılarını kaldırıp onun yerine sayfa numaralarını nasıl ekleyeceğinizi anlatmaya başlayalım.

1. CSS style kodlarını ekleme

1. Adım :

Blogger kontrol Paneli > Şablon > HTML'yi Düzenle tıklayıp devam edin:

Herhangi bir yerde kod alanının içinde Blogger arama kutusunu açmak için CTRL + F tuşlarına basın.

Arama kutusunun içine aşağıdaki etiketi yapıştırın ve onu bulmak için Enter'a basın:

]]></b:skin>

2. Adım :

Şimdi Aşağıdaki numaralandırılmış sayfa navigasyon stillerinin birini seçin ve hemen altındaki kodu kopyalayın.

]]></b:skin> kodunun hemen üst satırına kullanmak istediğiniz stil kodunu kopyalayıp yapıştırın:

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

2. Script Komut Dosyasını Ekleme

3. Adım :

Simdi (CTRL + F) tuş kombinasyonu yardımıyla aşağıdaki kodu bulun:

</body>

Hemen üstüne aşağıdaki komut dosyasını ekleyin:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var prevText ='« Önceki';
    var nextText ='Sonraki »';
    var urlactivepage=location.href;
    var home_page="/";
/*]]>*/
</script>
<script src="http://meftun-mede.googlecode.com/svn/trunk/sayfa_numaralandirma_eklentisi.js"/>
</b:if>
</b:if>

Yapılandırma

Yükledikten sonra, bu varsayılan ayarları değiştirmek isteyebilirsiniz:

perPage: 7,
numPages: 6,
var prevText ='« Önceki';
var nextText ='Sonraki »';
}

- perPage: mesajların sayısı her sayfada gösterilir. (7)
- numPages: sayfa sayısı sayfa navigasyon gösterilir. (6)
- "« Önceki" and "Sonraki »" metnini değiştirebilirsiniz.

4. Adım :

Son olarak Şablonu kaydet diyip çıkıyoruz. işlem bukadar!

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

10 Nisan 2014 Perşembe

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisi

Bugün sizler için hazırladığım blogger için çok şık bir E-Posta Abonelik Eklentisini anlatacam. Düğme butonlu, üzerine gelindiğinde aç-kapa basma efekti veren, 4 sosyal medya, 1 RSS butonuyla güzel bir eklenti. Bu E-posta abonelik eklentisiyle blogunuzun okuyucularınızı güncel tutabilirsiniz. Aslında blogger'in kendi gadgetleri arasında E-posta abonelik eklentisi bulunsada pek göze hitap etmediği için çoğu blog sahibi kullanmıyor. Bu yüzden aynı amaçla oluşturduğum ama göze biraz daha hitap eden bu E-posta abonelik eklentisiyle çok daha fazla kullanıcıya hitap edebileceksiniz. Yazdığınız yazılar E-mail yoluyla takipçilerinize ulaşacak ve takipçileriniz çok daha fazla sitenize girerek yeni konularınızı okuyabilecek ve yorum yapabilecekler.

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisi Önizleme:

Push Butonlu Sosyal Medya ve E-posta abonelik eklentisini Ekleme :

Blogger panelinize giriş yapın Yerleşim → Gadget Ekle → HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
Kaydet diyip çıkın.

<style type='text/css'>
#mefabone-widget{width:300px;background:#ddd;max-height:400px;border:4px ridge green;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;margin:0;padding:0;}
#abone{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjky0StknisL01rO8s3Kx0ok-BdF24Ow5uDBSmRQnaj7nyBWZjLGAFsLxQruKVJYlYrb3KutIJm6vASaW4bFPoG6cSMzVajCTcNWdJKKNKA74RQNYH4UxdSo5L3gt37sEGsUUNlm3-qx0/s1600/blogger-e-posta-abonelik-eklentisi.png) no-repeat scroll 100% 100% transparent;width:266px;height:124px;margin:5px 15px -100px;padding:0;}
#mede{width:300px;margin:0;text-align:center;}
#mede img{width:80px;height:80px;border-style:none;}
.ara{margin:auto 2px;}
.bulten{height:55px;text-align:center;margin:0 0 5px;}
.mefbutton{background-color:#82d4fe;font-size:12px;font-family:helvetica,georgia,oswald;font-weight:700;text-decoration:none;transition:all .2s ease 0;cursor:pointer;color:#333;border:1px solid #ddd;margin:5px;padding:4px 20px;}
.mefbutton:hover{background-color:#3d694e;text-align:center;box-shadow:0 0 8px 0 #FFF;-webkit-box-shadow:0 0 5px 0 #FFF;-moz-box-shadow:0 0 5px 0 #FFF;border:1px solid #fff;color:#fff;}
.email{background:none repeat scroll 0 0 #fff!important;float:left;width:250px;height:25px;border:1px solid #ddd;font-size:11px;font-family:helvetica,georgia,arial,oswald;margin:0 25px;padding:2px 3px;}
</style>
<div id="mefabone-widget">
<div id="abone"></div>
<p style="color:#3A3A3A;text-align:center;text-shadow:0 1px 0 #FFF;font-size:12px;font-weight:700;font-family:Tahoma,helvetica,arial,oswald;">Yayınlanacak Yeni Yazılar E-mail Adresinize Gelsin…</p>
<div class="bulten">
<form action="http://feedburner.google.com/fb/a/mailverify" class="bulten" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MeftunMede', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" name="email" onblur="if (this.value == '') {this.value = 'Buraya E-postanızı girin...';}" onfocus="if (this.value == 'Buraya E-postanızı girin...') {this.value = '';}" type="text" value="Buraya E-postanızı girin..."/>
<input name="uri" type="hidden" value="MeftunMede"/>
<input name="title" type="hidden" value="MeftunMede"/>
<input name="loc" type="hidden" value="tr_TR" />
<input class="mefbutton" name="submit" type="submit" value="Gönder"/>
</form>
</div>
<div id="mede">
<a href="https://www.facebook.com/meftunmede.blogger" rel="nofollow" class="ara" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_VnbwwWBbe4VFnysTWv5lkduxRsxXwZRSRLe9kwceUHQSq504vnmWRdTvcX_Q5KPv6C0rLn_DUlNVuaBGXUtow1PE4vZtUSF8LhcUfROms4IWYHuM9-25FegRcrVM2WnOIukaRaJDpiQ/s1600/Facebook.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8j6SpzyKn3i6CCui5VDqxQnZGnNvTNhTZ1rizzH4dY3r1mwwnqhYwfpReGzdxORfm_yz1O45dD2-MZVE_QF2HWU0BOylfc0BnGuXytv4Bf_SR12KGLPQCXG95iVC_4kKltn91QKB1EOKh/s1600/Facebook_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_VnbwwWBbe4VFnysTWv5lkduxRsxXwZRSRLe9kwceUHQSq504vnmWRdTvcX_Q5KPv6C0rLn_DUlNVuaBGXUtow1PE4vZtUSF8LhcUfROms4IWYHuM9-25FegRcrVM2WnOIukaRaJDpiQ/s1600/Facebook.png" title="Facebook'ta Beğenin" alt="Facebook" height="80" width="80"/></a>
<a href="https://twitter.com/MeftunMEDE" rel="nofollow" class="ara" target="_blank"><img onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfN7htI1xkjWdvyiHDfFFIOvs4xe5P9lFhOulKmOYiqIefA1bs5uBtF3wAFrZmCIRRevVipyRno2gMewhyphenhyphenXW8ivmFJi5qZ07zG1uhDQDreeHeVw9ZeRVuEwUbZ-wjZlw3ue3aO2pk-fHt/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJlD6nrHUUqXWIndDKJxYiouHsV-CKhqZiEBO-auTtutO4eTTPQhaD3kL_l0C5Jq_-3IdkAhGPan9yQL98WPQl72oVqWWZGxS2s4BNRO7nepAzr2qZO0TLN9GN18S55FaaYdtAL_7A23K/s1600/Twitter_Pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLfN7htI1xkjWdvyiHDfFFIOvs4xe5P9lFhOulKmOYiqIefA1bs5uBtF3wAFrZmCIRRevVipyRno2gMewhyphenhyphenXW8ivmFJi5qZ07zG1uhDQDreeHeVw9ZeRVuEwUbZ-wjZlw3ue3aO2pk-fHt/s1600/Twitter.png" title="Twitter'da Bizi Takip Edin" alt="Twitter" height="80" width="80"/></a>
<a href="https://plus.google.com/111555326072108216342" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXZyFrX_T_sY6SnsOV9jiE_c8UPvN2PdQ-u0BjiJv-5YvhPNVr7uQnmN82Kx4rOLprRqgnCcuHo4YMYdsJh4CTS0_znQur_-rNehwvu6qEKnpaz-Vf8M9Tcc92XpGaV6gB3b67BQ4A2H5/s1600/Google.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ejIUQYAgnAHsn4KplgCsGnErXNXOq6-tWbzh_3L1405Zba8EpqQCW8SOhkvDFbNNTjdNA5RVgUPEv5Fk46HHX4LgtnxCo1QP1HbgR23ko-RzuVnWdKrWuDOU_4WW2dvCpBjlVyHBhZZi/s1600/Google_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXZyFrX_T_sY6SnsOV9jiE_c8UPvN2PdQ-u0BjiJv-5YvhPNVr7uQnmN82Kx4rOLprRqgnCcuHo4YMYdsJh4CTS0_znQur_-rNehwvu6qEKnpaz-Vf8M9Tcc92XpGaV6gB3b67BQ4A2H5/s1600/Google.png" title="Google plus'da Bizi Takip Edin" alt="Google" height="80" width="80"/></a>
<a href="http://pinterest.com/meftunmede" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIEiev5YclqRWJlWFyR9Jb7K6C9FmFfFtkU_Hc0rJ27YAxl5lxLpVX8-a7IenA6l9dVBPt8iVzEkMJCJRG6Xo7GEJHyu9Asv2kajlJGUnFpEE2-NaqUwWMkGotgjBo2uakJOXiS1Ro0ZBb/s1600/pinterst.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4-hKuYGg6nSViOVb6pxhNWn3r5t8cnwbcSLLNpq2w-_AU8Ausn_5gK19cz8wKSilFLYVktkZy7zecGGcCHfeoDJd7Q7POhTiwZLuFYt4uMSgPFc_w0CixHpo2J60Jtf_LmYYkqW8t7yq/s1600/pintrest_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIEiev5YclqRWJlWFyR9Jb7K6C9FmFfFtkU_Hc0rJ27YAxl5lxLpVX8-a7IenA6l9dVBPt8iVzEkMJCJRG6Xo7GEJHyu9Asv2kajlJGUnFpEE2-NaqUwWMkGotgjBo2uakJOXiS1Ro0ZBb/s1600/pinterst.png" title="Pinterest'de Takip Edin" alt="pinterest" height="80" width="80"/></a>
<a href="http://feeds.feedburner.com/MeftunMede" rel="nofollow" class="ara" target="_blank"><img  onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7a2BZe4-_XvLnDY8iLEW0VgzvDOnPPTP9FcLV35taPYl4HO2Jex3yVUOxWcjpQbaTx32Fo0TYFy5mpXaisq64_7-ROpeqzLbfnq7lORATk4ECV9pIXFKukIaH1KXgPB3-2BLdJvPFqaQ/s1600/Rss.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnVfL6YiTQuE5n2JDXtOWviUgPuTCCEW7l7T4tMSdYi_vIq6dyXhInMTPSRx6oFZxaIkN5_qb4jqJLKkDSJT2dEVamK3IfBWjDb9PXJqA5rjGfp10zKbQC2KbB-wFjmSurZ2PRNTlOQKy/s1600/Rss_pressed.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv7a2BZe4-_XvLnDY8iLEW0VgzvDOnPPTP9FcLV35taPYl4HO2Jex3yVUOxWcjpQbaTx32Fo0TYFy5mpXaisq64_7-ROpeqzLbfnq7lORATk4ECV9pIXFKukIaH1KXgPB3-2BLdJvPFqaQ/s1600/Rss.png" title="RSS Özet akışlarına Abone olun" alt="RSS" height="80" width="80"/></a>
</div>
</div>

Özelleştirme:

Yukarıda kırmızıyla işaretledigim bölümlere Facebook, Twitter, Google+, Pinterest, RSS ve Feedburner adreslerinizi yazmayı unutmayın. ilk önce Online HTML Editör ile oluşturdugunuz kodu deneyin. Rengini, fontları, kendi isteginize göre ayarlayıp, ondan sonra blogunuza ekleyin.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

19 Mart 2014 Çarşamba

Windows 8 Metro Stil Navigasyon Menü

Eğer web sitenizin navigasyon menüsünden sıkıldıysanız? Windows 8 Metro Stili Menüyü kullanabilirsiniz. Şık ve zarif tasarımıyla dikkat çeken bu Menü Windows 8 navigasyon arayüzünden esinlenilmiştir. Herkesin Microsoft Windows 8 veya Windows akıllı telefonları yeni serisinin arayüz deneyimi varsa, o zaman bu METRO arayüzü menü onlar için yeni bir şey değil. Animasyonlu butonları, arka plan resimlerini kendiniz ayarlayabildiğiniz kullanıcı dostu güzel bir eklenti.

Menü Önizlemesi

1. Adım: CSS Style kodlarını Ekleme :

Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
Şablonu Kaydet diyip çıkın.

.MEFmetromenu{width:960px;margin:10px auto;font-family:'Oswald',Arial,sans-serif;}
@media screen and max-width:960px {
.MEFmetromenu{position:relative;width:100%;}
}
.karo-mf{text-align:center;cursor:pointer;width:90px;height:90px;}
.karo-mf a{display:block;padding-top:12px;text-decoration:none;}
.karo-mf img{padding-bottom:5px;height:48px;width:48px;position:relative;display:block;margin:0 auto;}
.karo-mf span{font-size:15px;padding-bottom:4px;display:block;}
.karo-mf-large{width:190px;height:90px;text-align:center;cursor:pointer;}
.karo-mf-large a{display:block;padding:21px;text-decoration:none;}
.karo-mf-large img{vertical-align:middle;position:relative;width:48px;height:48px;margin:0 auto;}
.karo-mf-large span{font-size:15px;vertical-align:middle;display:inline;}
.karo-mf-extralarge{text-align:center;cursor:pointer;width:190px;height:190px;}
.karo-mf-extralarge a{display:block;padding-top:52px;text-decoration:none;}
.karo-mf-extralarge img{padding-bottom:22px;height:80px;width:80px;position:relative;display:block;margin:0 auto;}
.karo-mf-extralarge span{font-size:15px;padding-bottom:14px;display:block;}
.karo-mf,.karo-mf-large,.karo-mf-extralarge{-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.1s linear;-ms-transition: all 0.1s linear;transition: all 0.1s linear;}
.karo-mf:hover,.karo-mf-large:hover,.karo-mf-extralarge:hover{-webkit-transform: scale(0.92,0.92);-moz-transform: scale(0.92,0.92);-o-transform: scale(0.92,0.92);-ms-transform: scale(0.92,0.92);transform: scale(0.92,0.92);}
.shadow-beyaz:hover{box-shadow:0 0 6px 3px #fff;-webkit-box-shadow:0 0 6px 3px #fff;-moz-box-shadow:0 0 6px 3px #fff;-o-box-shadow:0 0 6px 3px #fff;-ms-box-shadow:0 0 6px 3px #fff;}
.shadow-mavi:hover{box-shadow:0 0 6px 3px #38D1F7;-webkit-box-shadow:0 0 6px 3px #38D1F7;-moz-box-shadow:0 0 6px 3px #38D1F7;-o-box-shadow:0 0 6px 3px #38D1F7;-ms-box-shadow:0 0 6px 3px #38D1F7;}
.shadow-yesil:hover{box-shadow:0 0 6px 3px #AACA37;-webkit-box-shadow:0 0 6px 3px #AACA37;-moz-box-shadow:0 0 6px 3px #AACA37;-o-box-shadow:0 0 6px 3px #AACA37;-ms-box-shadow:0 0 6px 3px #AACA37;}
.shadow-kirmizi:hover{box-shadow:0 0 6px 3px #E81750;-webkit-box-shadow:0 0 6px 3px #E81750;-moz-box-shadow:0 0 6px 3px #E81750;-o-box-shadow:0 0 6px 3px #E81750;-ms-box-shadow:0 0 6px 3px #E81750;}
.shadow-siyah:hover{box-shadow:0 0 6px 3px #444;-webkit-box-shadow:0 0 6px 3px #444;-moz-box-shadow:0 0 6px 3px #444;-o-box-shadow:0 0 6px 3px #444;-ms-box-shadow:0 0 6px 3px #444;}
.renk-mavi{background:#00BBE2;}
.renk-mavi-2{background:#2C84EE;}
.renk-koyumavi{background:#044E94;}
.renk-meneksekirmizi{background:#781766;}
.renk-kirmizi{background:#E51400;}
.renk-kirmizi-2{background:#E81750;}
.renk-pembe{background:#FF539B;}
.renk-mor{background:#D02090;}
.renk-turuncu{background:#FB8F02;}
.renk-turuncu-2{background:#F60;}
.renk-turuncu-3{background:#DD5F37;}
.renk-mercankirmizisi{background:#CD5B45;}
.renk-yesil{background:#67B239;}
.renk-yesil-2{background:#96BF01;}
.renk-koyuyesil{background:#016C38;}
.renk-zeytinyesili{background:#990;}
.renk-cimenyesili{background:#CDCD00;}
.renk-koyukirmizi{background:#5F0000;}
.renk-gold{background:#FEE9AE;}
.renk-sari{background:#F7D100;}
.renk-siyah{background:#000;}
.renk-dumanrengi{background:#F5F5F5;}
.sola-daya{float:left;}
.saga-daya{float:right;}
.beyaz-text{color:#fff;}
.siyah-text{color:#1e1e1e;}
.gradient{background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);}
.ara-bosluk{margin:5px;}

2. Adım: METRO Menüyü Ekleme:

Şimdi tümüyle bu menüyü yerleştirmek isteyen kişiye bağlıdır. Sadece ana başlığı altında eski menünüzün yerinde olacak şekilde eklenmesi ideal bir yer. Ama Menüyü sitenizde görmek istediğiniz her yere aşağıdaki kodlamayı kopyalayıp yapıştırabilirsiniz. İsterseniniz alttaki footer bölümüne ekleyebilirsiniz. İsterseniz normal menü, isterseniz sosyal medya menüsü olarak kullanabilirsiniz.

<div class="MEFmetromenu">
<div class="karo-mf-extralarge renk-meneksekirmizi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwuFXBtW_43gXFa7-Kz_WZ72BVKhBJkFW8L-DnaQf7uC0rhSEndxb_Cl0G6sY3ccjii8GwP_9JBPxLeCgdZSnwwJvafyV4S2q9j1CZPrW4UKYirG2DYkn25jUEPNITvGLRSbfAg7Sq6DI/s1600/home.png" border="0" alt="home" />
<span class="beyaz-text">Ana Sayfa</span>
</a>
</div>
<div class="karo-mf-large renk-mercankirmizisi shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Z72DSLgyNWU65yP2JaLO4KAHw1NLv5CCme-R5cdrEYjK4N3WkXmhzBdn-SfsJZNazZ3nzoqPrrmPRAQKv9wmC6hSSCxGxbaWERKyCVKIRQqtHW5dq8LclT-9aHQQWcizWGRoQpahI-w/s1600/messanger.png" border="0" alt="messanger" />
<span class="beyaz-text">Hakkımızda</span>
</a>
</div>
<div class="karo-mf renk-mor shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMnXfntCDuf6IaGwqb6ORKFQSQu1ZfgTJKC9GORixVi8ra95V4XKpkvug9MnStZohDRBS6Ch93odW32L4rAD7lXzHYzANvQBlj1QjW5dJtRjPVtFp1gbhtb_JOC5OaYAnQEZZyoicKtx0/s1600/rss.png" border="0" alt="rss" />
<span class="beyaz-text">RSS Feeds</span>
</a>
</div>
<div class="karo-mf-large renk-turuncu shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxw0hSCtTwfWJim-WJZUiFqhVV2i8L_Dl3gkyoTQqyLj1CG_IIKjqvLJaCyeG-AORH3bQN8mU9sX7p9Et0sZ2ygHtMZMkbIqN2JwAA4kJ9ieyWAu0tVROQpEbhXQGmX7RJGwKImxvtYIA/s1600/search.png" border="0" alt="search" />
<span class="beyaz-text">Arama</span>
</a>
</div>
<div class="karo-mf renk-koyukirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl9WxqBq5aRtiS-OgqN9HK9C8g13_QmSVj-dI5H17dUSlzoeJknc7DNHEfMCe2PVgKRhQwmYb7tb7Ujc9X9owQO-uOrfO-7SsReRxjrKTI4CcO-gSZBSB36qrz4pTfLRQIrxCCMpVoZo/s1600/mail.png" border="0" alt="mail" />
<span class="beyaz-text">İletişim</span>
</a>
</div>
<div class="karo-mf renk-siyah shadow-siyah ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1WXXGyiunZk39tW_vjNrGfoNQsN6b-Odla1Xt3C0FD18XQoTm0_lgRRw-Zp1bMhkbgAR8klpUI11RF2u1nMZ-HUz0OMtFIfk85fuX_VZg8601CE2K7xUzs1YEcJiKQ-RVS7gaHP4dwc/s1600/help.png" border="0" alt="help" />
<span class="beyaz-text">Yardım</span>
</a>
</div>
<div class="karo-mf renk-kirmizi shadow-kirmizi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MiFQNiPf6XgrQvaUEjf2wLDBUsa5kocKfteRECzo_aj2rC9gAaYqauO7GLhhcycfI3KL8AaEOMcDEybNkgxDNe3aHCMsGgxtpbtkG1cNJELNvY6Vf9qMW6HwWRu4pt1FuksMJTbFrYI/s1600/youtbe.png" border="0" alt="YouTube" />
<span class="beyaz-text">YouTube</span>
</a>
</div>
<div class="karo-mf renk-koyumavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPk-JAyuQODLa2S0H7ak5R53W6gj7nQb2j5HcGdDqarNZWX0gghxFDxt7oNm6BkM0pVMhM_YB3mjEv2-Vtc1WGE9Nx8lpeskyMx4i0D4X7I9cDrIJBCXiGRO0t18qlmY8B78acHvi2fwM/s1600/face.png" border="0" alt="Facebook" />
<span class="beyaz-text">Facebook</span>
</a>
</div>
<div class="karo-mf-large renk-mavi shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvKowkRuysmv-Zr0qNcoVQ-eNSh9vUVWyTP1C_uOAww35L5DJj0iqtHaVyhkmyC9S-epXycvRtjnbw3-tFXEOc8jm-vxscvkP5UXFUSOIjza9wnQ0z3sNVKrEofLpWB5e1tT0cZOOIoM/s1600/photo.png" border="0" alt="photo" />
<span class="beyaz-text">Fotoğraflar</span>
</a>
</div>
<div class="karo-mf renk-zeytinyesili shadow-yesil ara-bosluk sola-daya MEFMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjS1DScxfreGGsTRdHHx1ZzumShlgg0N23Pwuf3uYIN-nRzDxJ8ITXHh4vYKkKvwxU2om07TzbWJS67S5QkPIgt_MUXfwYFi7ua7R0Y21WIUtTsYhUrno0dbpo_UbQtN63O5Q3e2qe2Ko/s1600/music.png" border="0" alt="music" />
<span class="beyaz-text">Müzik</span>
</a>
</div>
<div class="karo-mf-large renk-mavi-2 shadow-mavi ara-bosluk sola-daya MEFMetroMenu">
<a href="http://MeftunMede.Blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjnC7Yn4agJNtujlM7_ETk9gZNTBv9S1tC1ovCcVxaGGrC36yAyO2HfCgUz2RDQuabJFIBgNmOvb-NlVg31QzAyy9L7y7gKLFTvZr6AQpvjztZzo5lXGSd2I5t1DC985hzZEGJxkgyWfc/s1600/MEF.png" border="0" alt="Meftun" />
<span class="beyaz-text">Meftun MEDE</span>
</a>
</div>
</div>

3. Adım: Özelleştirme:

1. Adımdaki eklediğimiz stil kodlarındaki renk bölümünden menünüzün buton rengini, gölge rengini ayarlayabilirsiniz. Hepsi anlaşılır ve Türkçe yazılmıştır.
Örneğin 2. adımdaki kodlardan Ana Sayfa butonu "renk-meneksekirmizi", buton gölgesi "shadow-siyah", buton boyutu ekstra büyük "karo-mf-extralarge"; Bunu değiştirmek için "renk-cimenyesili", buton gölgesi "shadow-pembe", buton boyutu büyük "karo-mf-large" yada kücük "karo-mf" olarak değiştirebilirsiniz. Bu bölümleri kırmızı renkle işaretledim.

Mavi rekle işaretlediğim ( # ) yerlere butona basıldığında açılacak sayfa HTML'nizi yazın.
Örnek: <a href="http://örnek.com/örnek.html" class="gradient">

Buton arka plan resimlerinizide hemen altındaki 2. adımdaki <img src="Buraya..." border="0" alt="help" /> ekleyebilirsiniz

Son olarak <span class="beyaz-text">Arama</span> beyaz-text, siyah text olmak üzere rengini ve sayfa link ismini yazın.

<div class="buton boyutu buton-rengi gölge-rengi ara-bosluk sola-daya MEFMetroMenu">
<a href="Link url'nizi buraya" class="gradient">
<img src="Resim url'niz" border="0" alt="home" />
<span class="beyaz-text">Sayfa adı</span>
</a>

Biraz karışık gibi görünüyo ama öyle değil. Gerçekten basit ve güzel bi menü. Windows 8 görünüm metro stil Navigasyon menüsü web sitenize entegre edilmiştir.
Not olarak: Bu menü HTML ya da CSS yani WordPress, Joomla ve destekleyen herhangi Platformu kullanılabilir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

16 Mart 2014 Pazar

Blogger İçin renkli JQuery Menü

Bugün hem yatay hem de dikey liste görünümü ile, Blogger için renkli JQuery Navigasyon Menüleri sizlerle paylaşmak istiyorum. Bu menü fare üzerindeyken her sekme için renk değiştirir. Düzgün ve temiz geçiş efektleri üretmek için basit bir JavaScript işlevleri kullanır. CSS Drop Down Açılır Menü Eklentisi gibi Geleneksel dikey açılan listeden menü öğeleri yerine alt görüntüleme, birbirleriyle tek bir satır içine sığacak şekilde hizalanmıştır.Diğer menülerin aksine, bu eklenti tasarım problemi olmadan herhangi bir Blogger şablonuna uygundur. Blogunuzun üst kısmında konumlandırılmış okuyucularınızın ilgisini çekecek bir menü.Kurulumu son derece kolay ve menü tüm tarayıcılarda çalışıyor: IE7+, Safari, Chrome, Mozilla ve Opera. Blogunuzun varolan menüsünden memnun değilseniz veya sıkıldıysanız bu menüyü kolayca uygulayıp kullanabilirsiniz.

Menü Önizlemesi

Blogger'a eklemek için:

Blogger > Şablon
Şablonunuzun yedeğini alın
HTML'yi Düzenle > tıklayıp devam edin
<head> kodunu bulun ve hemen altına bu komut dosyasını yapıştırın:

<script src='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Jquery_rekli_menu.js' type='text/javascript'></script>

5. Şimdi body kodunu bulun.

body {
----
---
)

Bu sınıfın içine aşağıdaki değerleri yapıştırın:

body {
margin:0px;
padding:0px;
---
---
}

6. Bir sonraki arama:

<body>

veya bu:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

7. Hemen altına aşağıdaki sıkıştırılmış kodu yapıştırın:

<style>
.MEF-Nav-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCTLoPwUkp91VDmOntjajAbAK2Or7R1ejUKqtnHHNjjZ-m3NwW7-Gw-yeYUKnmniICGOcKaz4qMrKDGm5DRGhmrn_VFZA0-0Jt85-0X4Rvs8KoPxOsBywCdBJeqgd6OxyFgDjOp6QrQg/s400/menu-bgd.png) bottom left repeat-x;position:relative;border:1px solid #cfcfcf;margin:0;padding:0;}
ul#nav{width:960px;border-left:1px solid #cfcfcf;border-right:0 solid #cfcfcf;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCTLoPwUkp91VDmOntjajAbAK2Or7R1ejUKqtnHHNjjZ-m3NwW7-Gw-yeYUKnmniICGOcKaz4qMrKDGm5DRGhmrn_VFZA0-0Jt85-0X4Rvs8KoPxOsBywCdBJeqgd6OxyFgDjOp6QrQg/s400/menu-bgd.png) bottom left repeat-x;position:relative;font-size:12px;font-family:helvetica, arial, sans-serif;list-style:none;margin:0 auto;padding:0;}
#nav ul{margin:0;}
:focus{outline:0;}
*html ul#nav{clear:both;height:1%;}
ul#nav li a{display:block;float:left;text-transform:uppercase;font-weight:700;line-height:33px;color:#333;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSIuyDsneh62M9ouxvLKBON9vaAxTQaTznzOGwcQ79wXn7H6ph53BN5NvcBKBMTyUU_QgtOGEBrJzhyShovS-QGKLSiGT3PTKwhwgeFKWBK1h-dKzfYM7N-7QkO5zpcI9Ejsp1DQr9gc/s400/menu-rule.png) right 2px no-repeat;padding:0 13px 0 10px;}
ul#nav li a:hover,ul#nav li a.open{color:#fff;}
ul#nav li#mef a:hover,ul#nav li#mef a.open{background:#0f1f37;}
ul#nav li#link-haberler a:hover,ul#nav li#link-haberler a.open{background:#cf3c02;}
ul#nav li#link-yasam a:hover,ul#nav li#link-yasam a.open{background:#724375;}
ul#nav li#link-teknoloji a:hover,ul#nav li#link-teknoloji a.open{background:#02b0cf;}
ul#nav li#link-top10 a:hover,ul#nav li#link-top10 a.open{background:#353533;}
ul#nav li#links-2 a:hover,ul#nav li#links-2 a.open{background:#289728;}
ul#nav li#links-3 a:hover,ul#nav li#links-3 a.open{background:#666;}
ul#nav li#link-home a{text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3RrMBicjHGpbkKVNdFIk0eOg_Gj_UIr1t4_WPrunfu3b8TgcNZT5tIrHPcDY6x5Lfqz3MWLuFNNiOz8lPDNFs40SWcJdWiT_hzy7gUTue6gjjR6XdJtA86jktwcY1broQfgRU-jP0AzM/s400/home-icon.png) right 0 no-repeat;padding:0 33px 0 10px;}
*html ul#nav li#link-home a{width:43px;padding:0;}
ul#nav li#link-home a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3RrMBicjHGpbkKVNdFIk0eOg_Gj_UIr1t4_WPrunfu3b8TgcNZT5tIrHPcDY6x5Lfqz3MWLuFNNiOz8lPDNFs40SWcJdWiT_hzy7gUTue6gjjR6XdJtA86jktwcY1broQfgRU-jP0AzM/s400/home-icon.png) right -33px no-repeat;}
ul.sub-nav{position:absolute;width:960px;top:33px;left:-1px;overflow:hidden;display:none;z-index:999;list-style:none;padding-left:0;}
ul#nav li#mef ul.sub-nav{background:#6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJTiLTfePtq5L8gLIexRcv7UHdvMU27oWPlgieknUSp_PrNr-DRDUwdHbxVOD8IDgWAOq3eWrmwu_QIxgCxjto216wEASXGO_PfStCtduT5sGL8rSDEk8ScR91NorvaMF-dYmNdNju3fA/s400/business-subnav-bgd.png) top left repeat-x;}
ul#nav li#link-sanat ul.sub-nav{background:#d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhAnCOqxdEzcTvUyifHUfBZ6mUajBvnI4diViWMpNmkxN3shCcobK-stn_wMSTinJvSxCLv3edbZMQdsGeOxtmjcPKZVC-r2-rzg9EPY5C2Y7i-dBzwULiojH3-dafxsUJCx_2qbVjIw/s400/entertainment-subnav-bgd.png) top left repeat-x;}
ul#nav li#link-haberler ul.sub-nav{background:#e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTi_2DtYW6S2zgDxJckT35MDRVEvsPN8w2SquJ2g5RhFUVBb1Ys-_XdfBR7yawEtCGVUly7ezgnwE6ROo6mH36f-PR-ugU0cGBawhQBDxK0Jak1LYNjDLbAUGuMUmq__5Vwm0uVE66vG0/s400/news-subnav-bgd.png) top left repeat-x;}
ul#nav li#link-yasam ul.sub-nav{background:#aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjO9z33Romz8nxJPSgeC-XTc79loT-TVfAACrGQAYHVvNpuQr-1NgOABSODcZ94qw-uz5IcuHwnsqbaHSsUasHW_AQcUNVz32dpTZnbjfEDv5b7gAl0LLLK5r13ALpgex8gMr4t6bnSpY/s400/life-subnav-bgd.png) top left repeat-x;}
ul#nav li#link-teknoloji ul.sub-nav{background:#67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXIpp7nqR2DSFdky2_rUb8Oo24hDQnKFmJzoWqnTRDXJT6IXiuyVHzQyahiqMwvpR3vNIOoRJRillP2NrrzM0Blz9vkcklwaH03DA1oHd9GdGNOuw61STTj0e8A9zwelkvjXerkSqfnpI/s400/technology-subnav-bgd.png) top left repeat-x;}
ul#nav li ul.sub-nav li{float:left;}
ul#nav li ul.sub-nav li a{float:none;background:none;font-size:11px;text-transform:none;color:#fff;line-height:25px;}
ul#nav li#mef ul.sub-nav li a:hover,ul#nav li#mef ul.sub-nav li a.active-cat{background:#0f1f37!important;}
ul#nav li#link-sanat ul.sub-nav li a:hover,ul#nav li#link-sanat ul.sub-nav li a.active-cat{background:#b70943!important;}
ul#nav li#link-haberler ul.sub-nav li a:hover,ul#nav li#link-haberler ul.sub-nav li a.active-cat{background:#cf3c02!important;}
ul#nav li#link-yasam ul.sub-nav li a:hover,ul#nav li#link-yasam ul.sub-nav li a.active-cat{background:#724375!important;}
ul#nav li#link-teknoloji ul.sub-nav li a:hover,ul#nav li#link-teknoloji ul.sub-nav li a.active-cat{background:#02b0cf!important;}
*html ul#nav li.top-link,:first-child+html ul#nav li.top-link{float:left;padding-top:2px;margin:0 0 -13px;}
ul#nav li#link-sanat a:hover,ul#nav li#link-sanat a.open,ul#nav li#links-1 a:hover,ul#nav li#links-1 a.open,ul#nav li#links-4 a:hover,ul#nav li#links-4 a.open{background:#b70943;}
</style>
<div class='MEF-Nav-container'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Ana Sayfa</a></li>
<li class='top-link' id='mef'><a href='#'>TAB 1</a>
<ul class='sub-nav'>
<li><a href='#'>SUB TAB 1.1</a></li>
<li><a href='#'>SUB TAB 1.2</a></li>
<li><a href='#'>SUB TAB 1.3</a></li>
<li><a href='#'>SUB TAB 1.4</a></li>
</ul>
</li>
<li class='top-link' id='link-sanat'><a href='#'>TAB 2</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 2.1</a></li>
<li><a href='#'>SUB TAB 2.2</a></li>
<li><a href='#'>SUB TAB 2.3</a></li>
<li><a href='#'>SUB TAB 2.4</a></li>
<li><a href='#'>SUB TAB 2.5</a></li>
</ul>
</li>
<li class='top-link' id='link-haberler'><a href='#'>TAB 3</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 3.1</a></li>
<li><a href='#'>SUB TAB 3.2</a></li>
<li><a href='#'>SUB TAB 3.3</a></li>
<li><a href='#'>SUB TAB 3.4</a></li>
</ul>
</li>
<li class='top-link' id='link-yasam'><a href='#'>TAB 4</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 4.1</a></li>
<li><a href='#'>SUB TAB 4.2</a></li>
<li><a href='#'>SUB TAB 4.3</a></li>
<li><a href='#'>SUB TAB 4.4</a></li>
<li><a href='#'>SUB TAB 4.5</a></li>
<li><a href='#'>SUB TAB 4.6</a></li>
<li><a href='#'>SUB TAB 4.7</a></li>
</ul>
</li>
<li class='top-link' id='link-teknoloji'><a href='#'>TAB 5</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 5.1</a></li>
<li><a href='#'>SUB TAB 5.2</a></li>
<li><a href='#'>SUB TAB 5.3</a></li>
<li><a href='#'>SUB TAB 5.4</a></li>
<li><a href='#'>SUB TAB 5.5</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>
<!-- Daha fazla sekme oluşturabilirsiniz -->
<!-- <li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li> -->
<li style='clear: both;'/>
</ul>
</div>

8. Kaydet ve bitti!

Özelleştirme:

Sayfanın URL'sini "#" değiştirin ve Sayfa Başlığı ile "TAB" isimlerini değiştirin
Menü genişliğini ayarlamak için; Style kodları içinde ul#nav ve ul.sub-nav bölümündeki width: 960px blogunuzun genişliğine göre değiştirin.
Herhangi bir alt yeni sekme oluşturmak için aşağıdaki kodu yukarıdaki örnekdeki gibi </ul> kodu arasına yazın

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

12 Mart 2014 Çarşamba

jQuery Facebook Fotoğraf Galerisi Eklentisi

Facebook jQuery Fotoğraf Galerisi eklentisi

Facebook kalite hedefli trafik için bir numaralı kaynak olduğunu ortaya koymuş bir sosyal platform. Bugün bu yazıda size Nasıl Blogger'da bir jQuery Facebook Fotoğraf Galerisi Oluşturulur onu göstereceğim. Bu eklenti Facebook sayfanızda paylaştığınız tüm albüm ve fotoğraflarınızı web sitenizde, blogunuzda görüntülemeyi sağlar. Tüm sistem jQuery ile çalışır. Ayrıca Lightbox işlevselliği sayesinde sitenizin içinde fotoğrafları görüntüleyebilirsiniz. Farklı albümlerizi tarayabilir ve başladığınız yere geri yere gidebilirsiniz. Facebookta çok vakit geçiren ve çok fotoğraf paylaşan kullanıcılar için güzel bir eklenti.

Örnek jQuery Facebook Fotoğraf Galerisi Eklentisi

Blogger'da jQuery Facebook Fotoğraf Galerisi Nasıl oluşturulur?

Facebook fotoğraf galerisini yükleme:

Google hesabınıza giriş yapın.

Blogger > Şablon

Şablonunuzun yedeğini alın!

HTML'yi Düzenle > tıklayıp devam edin

</head> kodunu bulun ve hemen üstüne aşağıdaki komut dosyalarını kopyalayıp yapıştırın:

<link media="all" href="http://meftun-mede.googlecode.com/svn/trunk/Meftun-fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_fancybox.min.js"></script>

Şablonu Kaydet diyip bir sonraki adıma geçiyoruz.

Şimdi Facebook Sayfa profil kimliğini bulmak gerekiyor (şunu hatırlatayım; Herkeze açık profil sayfalarda çalışır).
Facebook Sayfa kimliği ID'sini bulmak için http://findmyfacebookid.com'a gidin.
Ve Sayfa URL'sini girin yani http://www.facebook.com/MeftunApart gibi.
Sayfanızın sayısal kimlik ID'sini almak için “Lookup Numeric ID” butonuna basın.

Şimdi Blogger kontrol panelinde Yerleşim sonra eklentiyi görmek istedigimiz yere Gadget ekle sonra HTML/JavaScript'i buluyoruz. Sonra aşağıdaki kodları Sayfa kimliği ID'nizi girdikten sonra kopyalayıp yapıştırın.

<div id="FB_Album_Frame"></div>
<script type="text/javascript" src="https://meftun-mede.googlecode.com/svn/trunk/MeftunMede_fancybox.js"></script>
<script>
$(document).ready(function ($) {
    $('#FB_Album_Frame').FB_Album({
        facebookID: 'Sayfa_kimliği_ID',
        responsiveGallery: false
   });
});
</script>

Tebrikler :
Herşey bittikten sonra, yayınlayabilirsiniz. Başarıyla Blogger'da bir Facebook jQuery Fotoğraf Galerisi oluşturduk. Şimdi düzgün bi şekilde çalışıp çalışmadığını kontrol edin.
Umarım hoşunuza gitmiştir. Kodu kopyalayıp bloğunuza yada websitenizin istediğiniz bölümüne yapıştırın.
Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

10 Mart 2014 Pazartesi

YouTube Video Yayın Akışı Eklentisi

Biliyorsunuzki YouTube Şubat 2005'te kurulan ve milyarlarca kullanıcının orijinal olarak oluşturulmuş videoları keşfetmesine, izlemesine ve paylaşmasına olanak vermektedir. Bu yazıda Yotube videolarınızı küçük parçalar (snippet) halinde sidebarınızda nasıl yayınlayacağınızı gösterecem. Bu eklenti Jake Handling tarafından geliştirilmiştir. Web sitenizde bir widget yaratan yeni bir "Yunero" jQuery eklentisidir. Sadece Youtube kanal URL'sini belirtin ve bu widget kanaldan son yüklenenler videolarınızı gösterecektir. Ayrıca youtube çalma listenizin URL'sini belirtebilirsiniz ve video çalma listeniz ekrana gelecek. Videoya tıklandığında eklentinin kendi içinde hemen üst tarafta izlenilebilir özelliği var. Bu eklentiyi wesitenizde/blogunuzda kullanarak izleyicilerinizi/abonelerinizi arttırabilirsiniz.

Blogunuza / Websitenize YouTube Video Yayın Akışı Eklentisini Ekleme

1. Aşağıda gösterildiği gibi Youtube Kanalı veya Oynatma Listesi yazan yere youtube kanal URL'nizi yada Oynatma Listesi URL'nizi girin.
Örnek: (http://www.youtube.com/user/Meftun48) yada
(http://www.youtube.com/playlist?list=UUQY8ropVDUm_5w5XmqHnIgMQ-M) gibi...
2. Oluştur ve Önizleme'yi tıklayın.
3. Son olarak Blogger'a Ekle'yi tıklayın yada Aşağıdaki Oluşturulmuş Kodu kopyalayıp yapıştırın.

YouTube Video Yayın Akışı Eklentisi Widget Oluşturucu

YouTube Widget Oluşturucu yardımıyla kolayca blogunuza veya web sitenize YouTube Video Akışını gösterilmesini sağlayabilirsiniz.

Not: Widget Oluşturucuyu Kullanmadan Önce Blogger hesabınıza giriş yapın. Şimdi Blogunuzu kontrol edin. Eklentiniz hazır.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

7 Mart 2014 Cuma

Blog Yazılarının Altına Yazar Bilgi Kutusu

Blogunuzda, yazılarınızın/yayınlarınızın hemen altında, sizi yada blogunuzu tanıtan bir eklenti istermisiniz? Yazar bilgi kutusu, her blog yazısının sonunda yer alan ve yazarla ilgi kısa bilgiler ile iletişim bilgilerini içeren bir kutudur. Yazar hakkında eklentisi sayesinde kendiniz hakkında bilgi verebilir, ne ile uğraştığınızı, ilgi alanlarınızı vs. kendinizi ziyaretçilerinize kısaca tanıtabilirsiniz. Sade ve kullanışlı bu kolay eklenti sayesinde blogunuzda yazılarınızın altında kendi tanıtımınız ve resminizi ekleyebilirsiniz. Her renge ve boyuta ayarlanabilen bu eklenti kesinlikle çok işinize yarayacaktır.

4 Sosyal Ağ bağlantısı
Uyumlu ve Esnek tasarım
Yazar fotoğraflı
Kısa Biyografi Özeti
Özelleştirilebilir
Uygulaması Kolay

Demo Görüntüsü

1. Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle
2. Ctrl+F yardımı ile <b:includable id='post' var='post'> kodunu aratıp bulun.

Ve Genişletin (►).

Resimde görüldügü gibi post alanı </b:includable> ile bitiyor.
hemen üstüne aşağıdaki kodları kendinize göre düzenleyip, kopyalayıp yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="yazar-hakkinda">
<h3 class="kutubasligi">YAZAR HAKKINDA</h3>
<div class="yazarkutusu">
<div class="yazarsosyal">
<li><a class="fb" href="https://www.facebook.com/meftunmede.blogger" rel="nofollow"></a></li>
<li><a class="twitter" href="https://twitter.com/MeftunMEDE" rel="nofollow"></a></li>
<li><a class="google" href="https://plus.google.com/113884753756003696845" rel="author"></a></li>
<li><a class="in" href="http://linkedin.com/in/meftunmede" rel="nofollow"></a></li>
</div>
<div class="yazarinfo">
<img src="http://Profil-Resminiz.jpg" alt="Author"/>
<p>Yazar Hakkında kısa bilgi...<a href="http://meftunmede.blogspot.com">Devamını Oku</a></p>
</div>
</div>
</div>
</b:if>

Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın!

3. Şimdi CSS kodunu ekleyerek yazar kutusuna stil verelim. Tekrar ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

.yazar-hakkinda{width:100%;}
.yazarkutusu{overflow:hidden;background:#26292c;color:#ccc;padding:0;box-shadow:1px 3px 4px #bcbcbc;}
.yazarkutusu .yazarinfo{color:#ccc;}
.yazarkutusu .yazarsosyal{float:left;}
.yazarkutusu .yazarsosyal li{list-style:none;position:relative;margin:0;}
.yazarkutusu .yazarsosyal li a{width:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV73ubASsgbdopbVn2nkNjQSVaGvrS1rz-3wqr_2as4Up5wT0cT0ZXt43y3d29c6gHp30vv9Hu4H41Mf6KEsu-g6oAeIOX85Jm1X3Zgkps-rHj_yk4FJpSOKZREb-fIwzuVx8ZvVj9MZk/s1600/yazarkutusu_social_logo.png);height:32px;margin:0;}
.yazarkutusu .yazarinfo img{float:left;border-radius:100%;width:17%;background:#fff;margin:4px 10px 4px 5px;padding:5px;}
.yazarkutusu .yazarinfo p{font-size:18px;line-height:25px!important;font:15px georgia, Arial;text-align:left;margin:0;padding:5px;}
.yazarinfo p a{text-decoration:none;color:#1BC3F8;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s;transition:.5s;padding:2px 4px;}
.yazarinfo p a:hover{background:#2882b7;color:#fff;}
h3.kutubasligi{background:#26292c;color:#fff;text-align:center;width:25%;font:17px georgia, Arial;margin:0 auto;padding:2px 10px;}
.yazarkutusu .yazarsosyal li .fb{background-position:0 0;}
.yazarkutusu .yazarsosyal li .twitter{background-position:0 -32px;}
.yazarkutusu .yazarsosyal li .google{background-position:0 -64px;}
.yazarkutusu .yazarsosyal li .in{background-position:0 -96px;}
.yazarkutusu .yazarsosyal li .in:hover{background-position:-32px -96px;}
.yazarkutusu .yazarsosyal li .google:hover{background-position:-32px -64px;}
.yazarkutusu .yazarsosyal li .twitter:hover{background-position:-32px -32px;}
.yazarkutusu .yazarsosyal li .fb:hover{background-position:-32px 0;}
.yazarkutusu:hover img{background:#1BC3F8;}
.yazarkutusu .yazarinfo img,.yazarkutusu .yazarsosyal li a{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;}

4. Şablonu Kaydet diyip çıkıyoruz.
Not: Bu eklenti tek yazarlı bloglar içindir.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...