25 Haziran 2015 Perşembe

Blogunuzun Ana Sayfası İçin Sıradışı Bir Tasarım

Sadece 2 parça kod ekleyerek blogunuzun ana sayfasını çok özgün ve sıradışı, belki de daha önce hiç görmediğiniz bir tasarıma kavuşturacağınızı söylesem ne derdiniz?

blogger tasarımı


Evet sadece birkaç kod ekleyerek yukarıda fotoğrafını ve aşağıda video demosunu gördüğünüz farklı bir ana sayfa tasarımına sahip olabilirsiniz. Bu tasarım ilk bakışta bir zaman tünelini andırıyor. Yazı başlıkları alt alta dizilmiş ve yanlarında yazıda kullanılmış görsel daire içinde gösterilmiş. Ayrıca CSS kodları kullanılarak çeşitli 3D efektler verilmiş. Örneğin yazı başlıklarının yanındaki tik işaretine tıkladığınızda yazının belli bir bölümü açılıyor ve yazı hakkında ziyaretçiye fikir veriyor. Üstelik tüm bunlar 3D efektleriyle gerçekleşiyor. Şu videoyu izlediğinizde tasarım hakkında daha fazla fikir sahibi olacaksınız sanırım.





Eğer blogunuzda bu tasarımı denemek isterseniz kodları şu şekilde uygulayabilirsiniz:

Öncelikle şalonda <head> kodunu bulun ve bu kodun üstüne aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {padding: 0px; border: 0px;}
.post-footer {display: none;}
.post {margin-bottom: 50px; padding-bottom: 0px; background: none; border: none;}
.jump-link a {display: none;}
  h3.post-title a {display: none;}
.date-header {display: none;}
*,
.timeline:after,
.timeline:before {box-sizing: border-box;padding: 0; margin: 0;}
.timeline {position: relative;padding: 30px 0 50px 0;font-family: Arial, sans-serif;}
.timeline:before {content: &#39;&#39;;position: absolute;width: 5px;height: 100%;margin:0px;top: 0;left: 200px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);}
.event {position: relative;margin-bottom: 80px;padding-right: 40px;}
.thumb {position: absolute; width: 90px; height: 90px;box-shadow:
        0 0 0 8px #87939E,
        0 1px 1px rgba(255,255,255,0.5);background-repeat: no-repeat;border-radius: 50%;-webkit-transform: scale(0.8) translateX(24px);-moz-transform: scale(0.8) translateX(24px);-o-transform: scale(0.8) translateX(24px);-ms-transform: scale(0.8) translateX(24px);transform: scale(0.8) translateX(24px);}
.thumb:before {content: &#39;&#39;;background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);position: absolute;height: 8px; z-index: -1; width: 50px;top: 42px; left: 100%;margin-left: 8px;
}
.thumb span {color: #87939E;width: 100%;text-align: center;font-weight: 700;font-size: 15px;text-transform: uppercase;position: absolute;bottom: -30px;}
.event label,.event input[type=&quot;radio&quot;] {width: 24px;height: 24px;left: 158px;top: 36px;position: absolute;display: block;}
.event input[type=&quot;radio&quot;] {opacity: 0;z-index: 10;cursor: pointer;}
.event label:after{content: &quot;\2713&quot;;background: #8995A1;border-radius: 50%;color: #fff;font-size: 20px;height: 100%;width: 100%;font-weight: bold;left: -2px;top: -3px;line-height: 24px;position: absolute;text-align: center;}
.content-perspective { margin-left: 230px;position: relative;perspective: 600px;-webkit-perspective: 600px;-moz-perspective: 600px;-o-perspective: 600px;-ms-perspective: 600px;}
.content-perspective:before { content: &#39;&#39;; width: 34px; left: -44px; top: 48px;position: absolute;height: 1px; z-index: -2;background: #fff;}
.post-content {transform: rotateY(10deg);transform-origin: 0 0;transform-style: preserve-3d;}
.blog-post-body {position: relative;padding: 20px;color: #333; border-left: 5px solid #8995A1;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #F9F9F9;}
.blog-post-body h3 {border: none;margin: 0px;}
.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #86919D;margin: 0px;text-decoration: none;border: none;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 a{color: #F26328;}
.blog-post-body p,.thumb span,.event label {-webkit-backface-visibility: hidden;}
.blog-post-body p {font-size: 15px;max-height: 0px; overflow: hidden; color: rgba(0,0,0,0);text-align: left;}
.blog-post-body:before {content: &#39;\25c2&#39;;font-weight: normal; line-height: 86px; font-size: 86px;position: absolute;color: #8995A1; left: -41px;width: 100%;height: 100%; top: 3px;z-index: -1;}
.thumb,.thumb span,.blog-post-body h3 {transition: all 0.6s ease-in-out 0.2s;-webkit-transition: all 0.6s ease-in-out 0.2s;-moz-transition: all 0.6s ease-in-out 0.2s;-o-transition: all 0.6s ease-in-out 0.2s;-ms-transition: all 0.6s ease-in-out 0.2s;transition: all 0.6s ease-in-out 0.2s;}
.blog-post-body { transition: box-shadow 0.8s linear 0.2s;-webkit-transition: box-shadow 0.8s linear 0.2s;-moz-transition: box-shadow 0.8s linear 0.2s;-o-transition: box-shadow 0.8s linear  0.2s;-ms-transition: box-shadow 0.8s linear 0.2s;}
.post-content {transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;}
.blog-post-body p { transition: max-height 0.5s linear, color 0.3s linear;-webkit-transition: max-height 0.5s linear, color 0.3s linear;-moz-transition: max-height 0.5s linear, color 0.3s linear;-o-transition: max-height 0.5s linear, color 0.3s linear;-ms-transition: max-height 0.5s linear, color 0.3s linear;}
.event input[type=&quot;radio&quot;]:checked + label:after {content: &#39;\2714&#39;;color: #fff;background: #F26328;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective:before {background: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 { color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .post-content {transform: rotateY(-5deg);-webkit-transform: rotateY(-5deg);-moz-transform: rotateY(-5deg);-o-transform: rotateY(-5deg);-ms-transform: rotateY(-5deg);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height: 460px; color: rgba(0,0,0,0.6); transition-delay: 0s, 0.6s;-webkit-transition-delay: 0s, 0.6s;-moz-transition-delay: 0s, 0.6s;-o-transition-delay: 0s, 0.6s;-ms-transition-delay: 0s, 0.6s;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body:before {color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .thumb {transform: scale(1);box-shadow: 0 0 0 8px rgba(242,99,40,1), 0 1px 1px rgba(255,255,255,0.5); -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}
.event input[type=&quot;radio&quot;]:checked ~ .thumb span {color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);}
@media screen and (max-width: 850px) {.blog-post-body h3 {font-size: 20px;}
.blog-post-body p { font-size: 14px; text-align: justify; }
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p { max-height: 500px; }}
@media screen and (max-width: 540px) {.timeline:before { left: 50px;}
.event {padding-right: 0px; margin-bottom: 100px; }
.thumb { transform: scale(0.8); -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);}
.event input[type=&quot;radio&quot;] { width: 100px;height: 100px;left: 0px;top: 0px; }
.thumb:before,.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {background: none;width: 0;}
.event label {display: none;}
.content-perspective {margin-left: 0px;top: 80px;}
.content-perspective:before {height: 0px; }
.post-content { transform: rotateX(-10deg);-webkit-transform: rotateX(-10deg);-moz-transform: rotateX(-10deg);-o-transform: rotateX(-10deg);-ms-transform: rotateX(-10deg);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .post-content { transform: rotateX(10deg);-webkit-transform: rotateX(10deg);-moz-transform: rotateX(10deg);-o-transform: rotateX(10deg);-ms-transform: rotateX(10deg);}
.blog-post-body {border-left: none;border-top: 5px solid #8995A1;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);}
.blog-post-body:before {content: &#39;\25b4&#39;;left: 33px; top: -32px;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height:300px; }}
ul.timeline {list-style-type: none;}
</style>
</b:if>
</b:if>

Ardından ikinci <data:post.body/> kodunu bulun ve bu kodu silerek yerine aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <ul class='timeline'><li class='event'><input checked='checked' name='tl-group' type='radio'/><label/> <b:if cond='data:post.thumbnailUrl'><img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></b:if><div class='thumb'><b:if cond='data:post.dateHeader'><span><data:post.dateHeader/></span></b:if></div> <div class='content-perspective'><div class='post-content'><div class='blog-post-body'><h3><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3><p><b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><data:post.snippet/></b:if></b:if></p></div></div></div></li></ul></b:if></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Eğer okdları silerken veya eklerken bir yanlışlık yapmadıysanız önizlemede hata vermez. Ardından şablonu kaydedebilirsiniz.

12 Haziran 2015 Cuma

Sorularla Google Analytics Kullanımı

Site istatistiklerini örenmek için kullanabileceğiniz en detaylı ve en başarılı araç Google Analytics’dir. Fakat öyle zannediyorum ki içerisinde çok sayıda ve detaylı veri olduğundan ya da terimlerle dolu bir arayüzü olduğundan insanlar bu aracı kullanırken zorlanıyorlar. Hatta çoğu kişi Analytics kodunu sitesine ekledikten sonra hesabına giriş bile yapmıyor.

Daha önce Google Analytics kullanımına dair detaylı ve görsel destekli bir yazı yazmıştım fakat geçen sürede Analytics’te pek çok değişiklik olduğu için yazı güncelliğini kaybetti. Ben de Analytics’in sık kullanılan özelliklerini soru-cevap şeklinde derlemek istedim. Böylece detaylara girmeden sitenizle ilgili en önemli verileri ve istatistikleri kolayca öğrenebileceksiniz.

1. Siteme Hangi Ülkeden Ve Şehirden Giriliyor?

Analytics Yer


Kitle > Coğrafi > Yer yolunu takip ederek seçtiğiniz tarih aralığında sitenizi hangi ülkeden kaç kişinin ziyaret ettiğini, bunların kaçının yeni ziyaretçi olduğunu ve bu ziyaretçilerin sitede kalma sürelerini görebilirsiniz. Eğer işi ziyaretçilerin hangi şehirden geldiklerini görmek isterseniz birincil boyut olarak ülke yerine “şehir”i seçmeniz yeterli.

2. Siteme Hangi Cihazlardan Erişmişler?

analytics mobil


Kitle > Mobil > Genel Bakış yolunu takip ederek sitenize bilgisayarlardan, tabletlerden ve yoksa cep telefonlarından kaç kişinin girdiğini görebilirsiniz. Mobil ve tabletten yapılan ziyaretleri eski dönemlerle karşılaştırırsanız ne kadar büyük artış olduğunu göreceksiniz. İşte bu yüzden sitemizin mobil versiyonuna çok daha fazla önem vermeliyiz.

3. Ziyaretçilerin Ne Kadarı Sitemi Tekrar Ziyaret Ediyor?

analytics geri gelenler


Kitle > Davranış > Yeniler – Geri Gelenler yolunu takip ederek ziyaretçilerinizin kaçının sitenizi ilk kez ziyaret ettiğini, kaçının daha önce de sitenizi ziyaret ettiğini görebilirsiniz. Buradaki verileri iki türlü yorumlayabiliriz. Eğer geri gelenler çok fazlaysa sadık bir kitleniz olduğunu söyleyebiliriz. Eğer yeni gelenler çok fazlaysa sitenizin tanıtım çalışmaları işe yarıyor demektir :)

4. Ziyaretçiler Sitemde Ne Kadar Kalıyor?

analytics katılım


Kitle > Davranış > Katılım yolunu takip ederek sitenizi ziyaret eden insanların sitenizde geçirdiği vakti öğrenebilirsiniz. Burada 0-10 sn vakit geçirenlerin çok olmasını şu şekilde yorumlayabiliriz; ya sitenize girdiklerinde onları kaçıran bir tasarımınız vardır, ya sitenize yanlışlıkla girmişlerdir, ya da aradıkları bilgiyi ilk 10 sn içerisinde bulamayıp sitenizden çıkmışlardır.

5. Siteme Hangi Kaynaklardan Gelmişler?

analytics kanallar


Edinme > Tüm Trafik > Kanallar yolunu takip ederek sitenize hangi kaynaklardan ulaşıldığı bilgisini görebilirsiniz. Direct, adres satırına doğrudan sitenizin adresi yazılarak veya sık kullanılanlardan tıklanarak yapılan ziyaretlerin değeridir. Organic Search, arama motorlarında yapılan aramalar sonucu sitenize ulaşanların değeridir. Üzerine tıkladığınızda hangi aramalardan geldiklerini görebilirsiniz. Social, sosyal medya sitelerinden gelen ziyaretçilerin değeridir. Üzerine tıkladığınızda hangi sosyal medya sitesinden kaç kişinin ziyaret ettiğini görebilirsiniz. Referral, başka sitelerde yer alan linkinize tıklayarak sitenize ulaşanların değeridir. Üzerine tıkladığınızdan hangi siteden kaç kişinin geldiğini görebilirsiniz. Email, maillerde yer alan linkinize tıklayarak yapılan ziyaretlerin değeridir.

6. En Çok Hangi Yazım Okunmuş?

analytics içerik


Davranış > Site İçeriği > Tüm Sayfalar yolunu takip ederek sitenizin en çok ziyaret edilen sayfalarını yani blogunuzun en çok okunan yazılarını görebilirsiniz. Burada ayrıca ziyaretçilerin her bir sayfada ortalama ne kadar vakit geçirdiğini ve kaçının yazıyı okuduktan sonra hemen sitenizi terk ettiğini (Hemen Çıkma Oranı) görebilirsiniz.

7. Sitemde Kaç Kişi Online?

analytics online


Gerçek Zamanlı > Genel Bakış yolunu takip ederek sitenizdeki online ziyaretçi sayısını, hangi yazılarınızı okuduklarını, hangi cihazlardan bağlandıklarını ve hangi kaynaklardan sitenize ulaştıkları bilgilerini görebilirsiniz.

Umarım faydalı olmuştur. Paylaşmaya değer bulup aşağıdaki butonları kullanarak sosyal medyada paylaşırsanız sevinirim. Google Analytics ile ilgili sorularınızı da yorum bölümünden sorabilirsiniz.

10 Haziran 2015 Çarşamba

Blogger İçin Google Çeviri Eklentisi

İletişim formundan bana ulaşan bir okuyucum bloguna çeviri eklentisi eklemek istediğini ve bu konuda yardımcı olup olamayacağımı sordu. Kendisine Google çeviri eklentisini bloguna nasıl ekleyeceğini kısaca anlattım ama başka bloggerların da işine yarayabileceğini düşündüğüm için burada aha detaylı anlatmak istedim.

Google Çeviri Eklentisi Nedir? Ne İşe Yarar?

Google çeviri eklentisi blogunuzu bir şekilde ziyaret eden yabancı kullanıcılar için siteyi onların diline çevirerek blogu rahatça okumalarını sağlar. 

Bazı terimler global olduğu için her ülkeden kullanıcı bu terimleri Google’da arayabiliyor. Örneğin BH’ye FeedBurner ve Google Analytics ile  ilgili aramalardan pek çok yabancı misafir gelebiliyor. Onları blogda tutmak Google çeviri eklentisini bloga eklemek iyi bir çözüm olabilir.Siz de blogunuza her dilde çeviri yapabilen bir çevirmen eklentisi eklemek isterseniz aşağıdaki adımları takip edin.


1. https://translate.google.com/manager/website/ adresine giderek “Hemen şimdi web sitenize ekleyin” butonuna basın.


blogger çeviri eklentisi


2.Web Sitesi URL’si” kısmına blogunuzun adresini yazın ve “Web sitesinin dili” kısmından Türkçe’yi seçerek “Sonraki” butonuna basın.

google çeviri eklentisi


3. Çeviri dilleri olarak tüm dilleri veya listeden istediğiniz dilleri seçebilirsiniz. Görüntüleme modu olarak istediğiniz eklenti modunu seçtikten sonra Gelişmiş seçeneklerden ilk kutucuğu işaretlemenizi öneririm. Eklenti ayarlarını tamamladıktan sonra Kodu Al butonuna basın.

bloggera çeviri ekleme



4. Eklentinin kodları hazır. Kutu içerisindeki kodları kopyalayın ve Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek yapıştırın.

google translate widget


Tebrikler! Çeviri eklentiniz hazır.

8 Haziran 2015 Pazartesi

Düşük Bütçeyle Hit Arttırmanın Yolu

Blogunu yeni kuran veya bir süredir blog yazmasına rağmen istediği hite ve takipçi sayısına ulaşamayan bloggerlar kısa sürede bu sayıyı yükseltmek istiyorlarsa ellerini ceplerine atarak popüler sitelerde tanıtımlarını yapmalı veya Google AdWords’ü kullanarak reklam vermeliler. Fakat ne yazık ki bu iki yöntem oldukça maliyetli olabilir. Peki benzer etkiyi benzer sürede daha düşük maliyetle elde etmenin yolu var mı? Kesinlikle evet! Çekiliş düzenlemek…

hediye


Çekiliş Düzenleyerek Neler Kazanırsınız?

- Çekilişe katılan bloglardan backlink kazanacaksınız. Bu sizin arama sonuçlarındaki performansınızı olumlu etkiler.

- Sosyal medyada bol bol tweet ve like kazanacaksınız, hesaplarınızın takipçi sayıları artacak.

- Çekilişe katılan bloglarda blogunuzun tanıtımı yapılmış olacak. Kısa sürede çok fazla hit alacak, takipçi kazanacaksınız.

Peki Tüm Bunlar Nasıl Olacak?

Yukarıda bahsettiğim şeyleri kazanmak için dikkat etmeniz gereken 2 husus var. Birincisi çekilişe katılım şartları, ikincisi ise dağıtılacak hediyeler.

Çekilişe katılım şartlarını zorlaştırmamalısınız ki katılım yükse olsun. Eğer bu çekilişi backlink, hit ve takipçi kazanmak için yapıyorsanız katılım şartlarını şöyle belirleyebilirsiniz:

* Katılım için blogda çekiliş duyurusu yayınlamayı zorunlu kılarsınız. Duyuru metnini de siz yazarsınız. Böylece katılımcı bloglardan backlink almış olursunuz ve duyuru metninin yayınandığı her blogun takipçileri blogunudan ve çekilişten haberdar olur.

* Sosyal medya blogunuzdan daha çok bahsedilmesini ve takipçi sayınızı arttırmak istiyorsanız hesabınızı takip edip çekiliş postunu beğenen ya da tweetleyen kişilere ekstra +1 çekiliş hakkı verirsiniz.

Çekiliş süresince göreceksiniz ki kısa sürede ziyaretçi sayınızda büyük bir artış olacak.

Çekilişte Ödül Olarak Ne Verilebilir?

Çekilişe her yaştan, meslekten ve sosyal statüden insanın katılabileceğini göz önünde bulundurduğumuzda en uygun ödüllerin hediyelik eşyalar olduğunu söyleyebilirim. Bunun için pek çok seçeneği uygun fiyata bulabileceğiniz  bir hediyelik eşya sitesi olan hediyesepeti.com’u öneririm. hediyesepeti.com’da herkese hitap eden ürünler olduğu gibi özel bir kitle veya gün için yapacağınız çekilişlerde verebileceğiniz ürünler de mevcut. Örneğin;

- Yılbaşlarında veya blogunuzun yıl dönümlerde düzenleyeceğiniz çekilişler için Yılbaşı hediyeleri,
- Blogunuzun okuyucu kitlesi anneler ise bebek hediyeleri,
- Blogunuz yemek blogu ise mutfak hediyeleri,
- Blogunuzun okuyucu kitlesi bayanlar ise bayan hediyeleri

ödül olarak verilebilir. Böylece düşük bir bütçeyle kısa sürede blogunuzu tanıtabilir, hitinizi ve takipçi sayınızı arttırabilirsiniz.

5 Haziran 2015 Cuma

Blogger Jquery Açılır/Kapanır Panel Eklentisi

Blogunuza görsellik ve işlevsellik katacak yeni bir Blogger eklentisi daha paylaşmak istiyorum. Aşağıda detaylarını bulabileceğiniz Jquery Sliding Panel yani açılır kapanır panel eklentisi ile ziyaretçilerinize güzel bir kullanıcı deneyimi sunacak, aynı zamanda blogunuza çeşitli faydalar sağlayacaksınız.

Eklentinin nasıl ekleneceğine geçmeden önce özelliklerinden ve ne işe yaradığından bahsetmek isterim.

jquery blogger panel


Blogger Jquery Açılır/Kapanır Panel Eklentisinin Özellikleri

Eklentiyi ekledikten sonra bloga girdiğinizde sayfanın en üstünde bir bar gözükecek ve üzerinde “Merhaba” karşılama mesajı ile paneli açıp kapayan bir buton olacak. Bu butona tıklayarak paneli atığınızda pek çok özellik barındıran harika bir menü göreceksiniz. 3 sütuna bölünmüş bu menüde şunlar var:

- “Hoşgeldiniz” mesajı, profil resmi, yazar hakkında kısa bilgi ve blog içi arama yapılmasını sağlayan bir arama kutusu.

- Ziyaretçileri İitediğiniz yazı veya sayfalara yönlendireceğinz linkler bölümü.

- Blogunuzu e-mail, Rss, Facebook, Twitter ve Google+ ile takip etmelerini sağlayacak bir abonelik bölümü.




Blogger Jquery Açılır/Kapanır Panel Eklentisini Bloga Ekleme
Bu harika eklentiyi blogunuza eklemek için şu adımları takip etmelisiniz:

1. Adım: Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu takip edin ve </head> kodunun üzerine şu kodları yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

2. Adım: ]]></b:skin> kodunun üzerine aşağıdaki kodları yapıştırın.

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(
http://1.bp.blogspot.com/-NUzxkktRzaU/Uv_kp1jV21I/AAAAAAAAGLo/KtKg7i17Ecc/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(
http://4.bp.blogspot.com/-xlp0IDZdYO0/Uv_kY314jPI/AAAAAAAAGLQ/rViPl1Lb6AA/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(
http://2.bp.blogspot.com/-5XawEIl5fZ4/Uv_kY6E8W2I/AAAAAAAAGLc/3gC41-rCLcE/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(
http://3.bp.blogspot.com/-xRg5USmC76w/Uv_kY2BfO2I/AAAAAAAAGLU/ssNd4LjkegQ/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(
http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(
http://2.bp.blogspot.com/-cdOsu2eBoaw/Uv_jiuYiBwI/AAAAAAAAGK0/MHNq2ZHKx84/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(
http://2.bp.blogspot.com/-x8TYckHLWSI/Uv_jikLN4XI/AAAAAAAAGKw/351QJzRE6hU/s1600/button-close.png) no-repeat left -19px;}
#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #fff;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #cc3333;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: #F1921A;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
cursor: pointer;
border: 1px solid #fff;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(
https://lh3.googleusercontent.com/-QfpM_erK1Hs/VW7Bae7s8NI/AAAAAAAALeg/Sqrj7lPAryg/s24/bullet-star-icon.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}

3. Adım: Şablonda <body> veya <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> kodlarından hangisi varsa onun altına aşağıdaki kodları yapıştırın. Kendinize göre düzenlemeniz gereken yerleri kırmızı renkle gösterdim.

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<div class='left' style='width:240px !important'>
<h4>Blog Hocam’a Hoşgeldiniz!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='http://lh5.googleusercontent.com/-kdgXVUeKv8o/AAAAAAAAAAI/AAAAAAAAGKo/To7qbwbiwKo/s80-c/photo.jpg'/>
<h3 class='boxtitle'>Ben Serdar</h3>
<p>Blog Hocam’ın kurucusu ve tek yazarıyım. Blog yazarlığı, SEO, sosyal medya, dijital pazarlama, girişimcilik ve kişisel gelişim konularıyla ilgileniyor ve bu konularda yazılar yazıyorum.</p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>Aradığınız birşey mi var?</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='Ara...' size='40' type='text'/>
</form>
</div>

<div class='left' style='width:320px !important'>
<h4>Öne Çıkan Yazılar</h4>
<div id='sliding-panel'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/15-ucretsiz-online-fotograf-editoru.html'>Fotoğraf Editörleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/adm-adm-iyi-bir-blog-sitesi-kurmak.html'>Adım Adım Blog Kurmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/12/az-zamanda-cok-ziyaretci-getiren-siteler.html'>Hit Getiren Siteler</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/09/affiliate-marketing-nedir.html'>Affiliate Marketing</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/03/blog-yazarak-para-kazanmak-mumkun-mu.html'>Blogdan Para Kazanmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/bloglar-icin-ziyaretci-trafigi-rehberi.html'>Ziyaretçi Trafiği Rehberi</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='http://bloghocam.blogspot.com/2013/08/google-adsense-reklamlar-icin-baslangc.html'>Google AdSense Rehberi</a></li>
<li><a href='http://bloghocam.blogspot.com/2014/01/blog-yazarlar-icin-swot-analizi.html'>SWOT Analizi</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/07/link-insaas-calsmalarnda-dikkat-edimesi.html'>Link İnşası</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/11/analiz-icin-kullandgm-seo-araclar.html'>SEO Araçları</a></li>
<li><a href='http://hur.so/dbzjxe'>Trafik Hayattır</a></li>
<li><a href='http://hur.so/dbznw7'>Galaxy S6</a></li>
<li><a href='http://hur.so/dbzvke'>LG G4</a></li>
</ul>
</div>
</div>

<div align='center' class='left right'>
<h4>Blog Hocam’ı Takip Edin!</h4>
<p style='padding:0px 30px;'>Yeni yazıların e-mail adresinize gelmesini istiyorsanız kutuya mail adresinizi yazıp abone olun.</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='tr_TR'/>
<input class='button-register' type='submit' value='Abone Ol'/></form>

<div align='center' style='clear: both;'>
<a href='http://feeds.feedburner.com/BlogHocam'><img src='https://lh3.googleusercontent.com/-OzTMC5N1pYo/VW7Cxnv-5kI/AAAAAAAALe0/s9lkntgtftk/s48/RSS-icon.png' style='padding:5px;' title='RSS Beslemeleri' width='32'/></a>
<a href='http://www.facebook.com/bloghocam'><img src='https://lh3.googleusercontent.com/-XfakxQm9BrA/VW7CvJ2-GfI/AAAAAAAALes/Lx2QJF0yZR4/s48/Facebook-icon.png' style='padding:5px;' title='Facebook Beğen' width='32'/></a>
<a href='http://twitter.com/bloghocam'><img src='https://lh3.googleusercontent.com/-1Wpv9cElOiA/VW7CzQqU6VI/AAAAAAAALe8/xhrLL6pf6TM/s48/Twitter-icon.png' style='padding:5px;' title='Twitter Takip' width='32'/></a>
<a href='https://google.com/+BloghocamBlogspot'><img src='https://lh3.googleusercontent.com/-aV1TNuPx8QY/VW7C1uAXqeI/AAAAAAAALfE/MmrC42-YI6g/s48/Google-plus-icon.png' style='padding:5px;' title='Google+ Takip' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Merhaba!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Menüyü Aç</a>
<a class='close' href='#' id='close' style='display: none;'>Menüyü Kapat</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

Şablonu önizleme yapın, eğer bir sorun veya hata mesajı yoksa kaydedin ve blogunuzu tekrar ziyaret edin.

Kodları bloga ekleme, düzenleme veya eklentiyi çalıştırma ile ilgil sorunlar yaşrsanız yorum bölümünden sorabilirsiniz.

2 Haziran 2015 Salı

AdSense’e Kayıt Olamayanlar İçin Alternatif Reklamlar

Blog yazan nerdeyse herkesin para kazanmak için tercih ettiği 1 numaralı yöntem Google AdSense reklamları olsa da bu sisteme kabul edilmek ve AdSense yayıncısı olmak pek de kolay değil. Bazıları daha başvuruda bulunamadan “Blogunuz Şuan AdSense İçin Uygun Değil”  uyarısı alıyor ve kayıt olma butonu hiç aktif olmuyor, bazıları da ilk onayı alıyor ama yetersiz içerik gibi nedenlerle ikinci onayda takılıyor.

Bu şekilde AdSense kullanamayan bloggerlar için alternatif tıklama başına para kazandıran yöntemleri araştırdım ve en iyi 4 AdSense alternatifini inceledim.



1. Wordego

Türkiye’nin en kaliteli ve en ciddi reklam firması diyebilirim Wordego için. Blogunuza özel ve hedeflenmiş reklamlar gösterek österim başına para kazanmanızı sağlar. Yetersiz içerik, düşük trafik ve hizmet sözleşmesine aykırı içerik başvurunuzun reddedilmesine neden olabilir ama AdSense kadar ince eleyip sık dokumadıklarını söyleyebilirim. Hesabınızda 100 TL biriktiğinde ödeme talep edebilirsiniz. Ödemeler banka hesabınıza havale ile gerçekleştirilir.

2. AdHood

AdHood’a kayıt olduktan sonra sisteme site eklemeniz ve bu sitenin size ait olduğunu ispatlamnız gerekir. Siteler kısmından site ekle dedikten sonra site düzenle > site doğrulama kısmından alacağınız meta kodunu Blogger şablonundaki <head> kodunu altında bir yere yapıştırın.  Kaydederken hata alırsanız kodu şu şekilde değitirin: <meta name='AdNetwork value=adhood - www.adhood.com acceptcode=xxxxxxxxxxxxxxxx'/> Doğrulama işleminden sonra editörler sitenizin uygunluğunu inceleyip reklam yayınlamanıza onay verecekler. Tıklamaa başına ortalama 10 kuruş veriyor ve ödemeler banka hesabınıza yapılıyor.

3. CPM Fun

Neredeyse her başvuruyu onaylayan ve AdSense’de olduğu gibitıklama başına para veren bir reklam ağı. Manage Websites kısmından sitenize ekledikten sonra onaylanmasını bekler ve Ad Tags kısmından istediğin boyuttaki reklamları eklersiniz. En fazla 3 adet rekam birimi ekleebilirsiniz ve ödemeler 100$ ödeme eşiğine geldiğinizde Paypal hesabınıza yapılır.

4. Qadabra

Zararlı ve illegal içerik barındıan siteler hariç tüm siteleri kabul eden Qadabra da tıklama başına veren bir sistem. Ödemeler Paypal hesabınıza yapılıyor ve en güzel tarafı ödeme alt limitinin sadece 1$ olması. Banner reklamların yanı sıra popup reklamlar da ekleyebiliyorsunuz.

Hangi Reklamları Öneriyorum?

İçlerinde en uzun süre kullandığım reklam ağı Wordego. Güvenilir ve ilgili bir firma. Her kullanıcının bir hesap yöneticisi var. Sizi telefonla arayarak ya da mail yazarak kazancınızı arttırmaya yönelik ipuçları veriyor ve sorularınızı yanıtlıyor. Karşınızda bir muhattap olması bir online reklam firması için büyük hizmet. Ayrıca reklamlara tıklanmasını beklemek gibi bir sorununuz yok. Tüm bu nedenlerden dolayı blogu için bir reklam firması arayanlara Wordego’yu tercih ederim.

Önemli not: Bu yazıyı yazmak veya Wordego’yu övmek için her hangi bir ücret almadım. Tamamen şahsi ve samimi fikirlerimdir.