Blogger Şablonu Mobil Hale Getirmek

By: İbrahim Fırat on Pazartesi, Haziran 01, 2015 / yorum : 2 blogger, blogger eklentileri, iF, webmaster

Son zamanlarda yeni güncelleme ile  mobil  uyumlu temaların aramalarda üst sıralara çıkacağını Google  açıklamasında yapmıştı. Ve  yavaş yavaş mobil uyumlu siteler sıralamada üstlere çıkmaya  başladı. Teknolojinin gelişmesiyle birlikte  artık insanlar masa üstünü az kullanıp  mobil cihazlardan sitelere girmektedir. Bu yüzden temanızı tam olarak mobil uyumlu  tema ile değiştirmeniz veya aşağıda ki bilgilerle mobil eklentisini aktif etmeniz yeterli olacaktır. 

Blogger Mobil Tema Aktif Etmek

Facebook Beğen Kutusu - Zaman Ayarlı

By: İbrahim Fırat on Salı, Mayıs 05, 2015 / yorum : 0 blogger, blogger eklentileri, facebook, iF

Site ziyaretçisi ve sayfa beğenizin yükselmesi için Facebook Popup pencereleri son zamanlarda en çok kullanılan eklentileri arasındadır. Blogger siteler için geliştirilmiş olan bu eklentinin en önemli özelliği kullanıcıyı tanımasıdır. Bu yüzden sizin belirlediğiniz herhangi bir zamana kadar aynı ziyaretçi girse bile ekran karşısına çıkmıyor.



Örneğin: Kod içerisinde bulunan bu kısımda  "'/', expires: 7 }); " 7 yazan yer 7 gündür. Bunu istediğiniz gibi ayarlayabilirsiniz. Ayın ziyaretçi 3 gün sonra tekrar girdiğinde gözükmesini istiyorsanız bu bölümü 3 yapmanız yeterlidir.

Siteniz eklemeniz gereken kodlar aşağıda anlatılmıştır:


Şablon > HTML’yi Düzenle > Devam Et yolunu izleyerek Ctrl + F tuşlarının    yardımıyla kodunu  </head>  bulun ve </head> kodunun üstüne aşağıdaki kodları ekleyin. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/> <script src='http://yourjavascript.com/21316592254/cookie-jquery.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(100).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> Sonrasında aynı şekilde arama yaparak ]]></b:skin> kodunu bulun aşağıdaki kodları bir satır üstüne ekleyin. #fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999} #fan-exit{width:100%;height:100%} #fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;} #fanclose {float: right;cursor: pointer;background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;} .remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;} 3. adım ve son yapmanız gereken  </body> kodunu aratarak bulun ve bulduğunuz  </body> kodunun üstüne aşağıdaki vermiş olduğumuz kodu ekleyin. <div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/> 
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ibrahimfirat.net&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'/> 
</div></div> 

En son verdiğimiz kodun içinde bulunan https://www.facebook.com/ibrahimfirat.net yazan bölüme kendi facebook sayfa adresinizi yazmanız yeterli. İlk eklediğiniz kodun içinde bulunan 7 sayısını istediğiniz güne göre ayarlayın. Not: Kodları düzgün ekledikten sonra kod bir kere açılacaktır. Tekrar sayfa yenileme yaptığınızda popup penceresinin gözükmemesi çalışmadığı anlamına gelmez. Eğer şüphe ederseniz başka tarayıcılarda deneyerek gözlemleyebilirsiniz.

Blogger Temaları 2015

By: İbrahim Fırat on Çarşamba, Mart 04, 2015 / yorum : 4 blogger, Blogger Temaları, webmaster

2015 En İyi Ücretsiz Blogspot Temaları

Yeni blog temaları, 2015 yılı temaları, Blogger için en güzel temalar arşivi. Blogspot tema arşivi

Blogger kullanıcıları milyonları aştı ve buna bağlı olarak her gün onlarca yeni blog açılıyor. Bir çok seçenek sunan blogger klasik temaları pek tutulmuyor. Yapımcılar tarafından kaliteli ve çok güzel temalar her sene çıkıyor. Blogger için tasarlanmış en güzel temaları sizler için derledik. 

Uzun zamandan beri böyle bir arşiv paylaşmamıştık.  Özenle seçilmiş temalar ve aralarında seçim yapmakta zorlanacağınız bir  arşiv ancak sadece 18 tanesini sizlerle paylaşacağız. 

Özellikle sade ve hızlı temalardan oluşan aynı zamanda seo dostu sitenizi iyi yerlere getirecek özelliklere sahiptir. Bildiğiniz gibi site tasarımı en az içerik kadar önemlidir. Kaliteli bir tema ve özgün içeriğinizle arama motorlarında yükselme oranınız artacaktır. 

Tema düzenlemeden anlayan biriyseniz seçtiğiniz bir temayı kendinize özel hale getirmenizde mümkün. Renk düzenlemesi, eklenti, görünüm vs.  

18 Adet Ücretsiz Blogger Tema 2015

Foto Galeri Eklentisi (Light Box)

By: İbrahim Fırat on Cumartesi, Şubat 14, 2015 / yorum : 1 blogger, blogger eklentileri, iF, webmaster

Çok kişinin aradığı ve birçok sitenin kullandığı eklentilerdendir. Uzun zamandan beri Blogger için işinize çok yarayacak eklenti paylaşmamıştım. Web sitenize foto galeri eklemek için en uygun kodu aşağıda paylaştım. Kodun kurulumu oldukça basit ve detaylı şekilde anlattım.



Light Box nedir ilk önce onu açıklığa kavuşturalım. Light Box, bir resim görüntüleme eklentisi anlamına gelir.

1. Aşama: Blogger Yönetim panelinize girin

2. Aşama: Yerleşim ► HTML'yi Düzenle kısmına gelin.

3. Aşama: Asağıdaki kodu temanın içinde bulun.

</head>

Yukarıdaki kodun bir satır üstüne aşağıdaki kodları ekleyin ve kaydedin.


<!--Light Box Blogger Resim Baslar--> <style> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(http://i43.tinypic.com/mj5wyd.jpg) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://i44.tinypic.com/mjljmh.jpg) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } </style> <script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/> <script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/> <script src='http://www.weebly.com/uploads/2/2/1/0/2210502/lightbox.js' type='text/javascript'/> <!--Light Box Blogger Resim Biter-->

 Kodlama işleminin 1. Aşaması bitti. 2. Aşamada yapmanız gerekenler aşağıda;


Yeni >> Oluştur - HTML bölümünden (yani herhangi bir konu eklediğiniz kısım ) aşağıdaki kodu ekleyerek kendinize göre düzenlemeler yapmanız gerekmektedir. Bunun için kendinize ait bir resim ve url gerekli olacaktır.

  <center> <table border="0"><tbody> <tr><th align="center">1</th><th align="center">2</th><th align="center">3</th><th align="center">4</th><th align="center">5</th><th align="center">6</th><th align="center">7</th><th align="center">8</th><th align="center">9</th></tr> <tr><td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-1.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Domin"><img border="0" src="http://i.imgur.com/zq9zlGi.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-2.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Web Site"><img border="0" height="40" src="https://lh6.googleusercontent.com/proxy/Ee6GXFrTr_Stlmai-bC5CxjhFD_g7s1hefMbsBq9cqhwfAu-HcrjlRcga3jY6HoXcRQ" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-3.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="eBay ilk satış"><img border="0" height="40" src="https://1.bp.blogspot.com/-JYpQET-nsr4/VN5s77RIYvI/AAAAAAAAgpI/_s02K2QE2qY/s1600/Ads%C4%B1z.png" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-4.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İnternet,Tv, Radyo"><img border="0" src="http://i.imgur.com/0grusNT.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-5.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İnternet Trafiği"><img border="0" src="http://i.imgur.com/jrQVz2r.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-6.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Everest ve İnternet"><img border="0" src="http://i.imgur.com/RqQiqlZ.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-7.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Günde 100 bin Domain"><img border="0" src="http://i.imgur.com/gUenW63.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-8.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="İlk Yüklenen Video"><img border="0" src="http://i.imgur.com/Hs7Ef4x.png" height="40" width="40" /></a></div> </td> <td> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.ibrahimfirat.net/2015/02/az-bilinen-9-bilgi-9.html" imageanchor="1" rel="lightbox[AmandaAman]" style="margin-left: 1em; margin-right: 1em;" title="Facebook'un ilk Üyesi"><img border="0" src="http://i.imgur.com/zYZC2ep.png" height="40" width="40" /></a></div> </td> </tr> </tbody></table> </center>

Eklenti DEMO 

Bir önceki konumuz >>  Robot.txt Dosyası Düzenleme

Robots.txt Dosyası Düzenleme (blogger)

By: İbrahim Fırat on Pazar, Şubat 08, 2015 / yorum : 1 blogger, blogger eklentileri, iF, webmaster

Robots.txt Dosyasını Blogger'da Nasıl Düzenlerim?

Blogger alt yapısını kullanan milyonlarca insan var ve zaman zaman yenilikleride beraberinde getiren çok iyi bir google güvenceli sistemdir. Onlarca blog açılıyor ancak bazı ayarları yapmakta güçlük çeken kişiler var bunların en önemlisi ve arama motorlarında iyi bir yere gelebilmek için blogger   Robots.txt dosyasını hatasız olarak düzenlemeyi anlatacağız:

Robots.txt dosyası düzenlerken çok dikkatli olmanız gerekir en ufak  hatada arama motorlarından kaybolabilirsiniz o yüzden aşağıdaki adımları dikkatlice uygulayın.



1. Adım:  Blogger yönetim panelinize girin
2. Adım:  Ayarlar >> Arama Tercihlerine tıklayın
3. Adım: Karşınıza çıkan ekranda alt bölümde özel robots.txt bölümünü göreceksiniz. Bunu etkinleştirmemiz gerecek. Düzenle seçeneğinden etkileştirilsin mi seçeneğine evet diyin boş bir alan açılacak.  Aşağıda vermiş olduğum kodları kopyalayın ve yapıştırın.

Eklemeniz gereken kod aşağıda:

User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search?q=* Disallow: /*?updated-max=* Allow: / Sitemap: http://www.ibrahimfirat.net/feeds/posts/default?orderby=updated

Bir önceki yazımız  >>   Çok Yorum Alan Konularınız İçin Eklenti

Facebook Popup Widget Blogger Eklentisi

By: İbrahim Fırat on Perşembe, Ocak 08, 2015 / yorum : 0 blogger, blogger eklentileri, facebook, iF, webmaster

Sosyal medyanın önemi her geçen gün artıyor. Sitelerinize ziyaretçi çekmek için en etkili yol sosyal medya hesaplarda takipçileri artırmak ve her eklenen içerikten haberdar etmektir. Dünyada en çok kullanıcısı olan sosyal ağ facebook en aktif kullanılan platformdur.

Bu konumuzda facebook sayfanızın sayısını artıracak bir kodu paylaşacağım. Facebook sayfaların sayısı genel olarak reklam vererek çoğaltılmaktadır. Bunun yanı sıra hitli bir siteniz varsa aşağıdaki kodu ekleyerek giren ziyaretçilerin sayfanızı beğenmesini sağlayabilirsiniz. Facebook popup kutusu ufak boyutta ve en önemli özelliği ise tek sefer açılan ve ziyaretçiyi rahatsız etmeyecek şekilde tasarlanmıştır.


Bu yüzden siteleriniz de kullanmanızı tavsiye ederiz.  Kod içerisinde yükseklik ve genişlik ayarlarını dilerseniz değiştirebilirsiniz. Kod içerisinde yapmanız gereken tek değişiklik ise kendi facebook sayfa linkini eklemenizdir.  bu kodun yerine  >>   https://www.facebook.com/iBRaHimFiratFan kendi sayfa adresinizi ekleyin.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style> #fbox-background { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; } #fbox-close { width: 100%; height: 100%; } #fbox-display { background: #eaeaea; border: 5px solid #828282; width: 340px; height: 230px; position: absolute; top: 32%; left: 37%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #fbox-button { float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; } #fbox-button:before { content: "CLOSE"; padding: 5px 8px; background: #828282; color: #eaeaea; font-weight: bold; font-size: 10px; font-family: Tahoma; } #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover { color: #aaaaaa; font-size: 9px; text-decoration: none; text-align: center; padding: 5px; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(5000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fbox-background'> <div id='fbox-close'> </div> <div id='fbox-display'> <div id='fbox-button'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/iBRaHimFiratFan&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe> <div id="fbox-link"> <a style="padding-left: 0px;" href="http://www.ibrahimfirat.net" rel="nofollow"></a></div> </div> </div>

Çok Yorum Alan Konularınız İçin Eklenti

By: İbrahim Fırat on Cumartesi, Kasım 29, 2014 / yorum : 1 blogger, blogger eklentileri, iF

Şüphesiz en çok kullanılan blog alt yapısı blogger'dır. Bizlerde elimizden geldiğince sitenize zenginlik katacak ve faydalı olacak eklentileri yer yer paylaşıyoruz.

Bugün ki eklentimiz, en çok yorum yapılmış konuları bir kaç satırda gösteren yararlı eklenti. Eklentinin sizlere sunacağı artılar ise, ziyaretçileriniz en çok yorumlanan konuları görünce ilgisini çekecek ve o konuya giderek yeni ziyaretçilerin yorum yapmasını sağlayacaktır. Seo için yorum çok önemlidir. Bu sitenizin hem güncel kalmasını hemde içeriğinizin üst sıralarda çıkmasına neden olacaktır.


Sitenizin yönetim paneline girerek Gadget Ekle >> HTML/JavaScript seçeneği kısmından devam ederek açılmış olan kutucuğa aşağıdaki kodu eklemeniz yeterli olacaktır.

  <!-- Popular posts with comment ibrahimfirat.net --> <script type="text/javascript"> function getYpipePP(feed) { document.write('<ol style="">'); var i; for (i = 0; i < feed.count ; i++) { var href = "'" + feed.value.items[i].link + "'"; var pTitle = feed.value.items[i].title; var pComment = " \(" + feed.value.items[i].commentcount + "\)"; var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle; document.write(pList); document.write(pComment); //to remove comment count delete this line document.write('</a></li> '); } document.write('</ol> '); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://www.ibrahimfirat.net &ShowHowMany=10 &_id=390e906036f48772b2ed4b5d837af4cd &_callback=getYpipePP &_render=json" type="text/javascript"></script> <!-- Popular posts with comment ibrahimfirat.net -->

Kod içinde yapmanız gereken tek değişiklik  "http://www.ibrahimfirat.net" yazan yere kendi site adresinizi yazmanızdır.

Blogger Animasyonlu Resim Eklentisi

By: İbrahim Fırat on Salı, Kasım 11, 2014 / yorum : 0 blogger, blogger eklentileri, iF

Sitenize özellik katacak çok güzel bir eklenti.  Blogspot sitelerinizde kullanabileceğiniz dinamik resim eklentisi.


]]>.post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(+2deg);-moz-transform: rotate(+2deg);} .post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);}