Blogger Esnek Slider Manşet Eklentisi

By: İbrahim Fırat on Pazartesi, Ocak 15, 2018 / yorum : 1 blogger, blogger eklentileri, Genel, iF, webmaster

Blogger kullanıcıları için vazgeçilmez olan eklentiler arasında manşet eklentisi yer almaktadır. Blogger slider manşet eklentisi ile sitenizi daha şık hale getirebilir ve daha fazla okunma oranını artırabilirsiniz.  Sitenizin temanıza göre uygun bir yere  blogger manşet eklentisini eklemeniz mümkün. Esnek bir yapıya sahip olan bu eklenti sitenizin hemen hemen her yerine koyabilirsiniz. Fakat bunu header kısmına yani en üst kısma eklemeniz daha iyi olur.  Eğer üst kısımda slider var ise temanıza göre daha alt taraflara ekleyebilirsiniz seçim size kalmış. 




Blogger manşet eklentisinin özellikleri arasında siteyi  hiç kasmaması ve diğer  slider mansetlerle  uyumlu olması. Örnek vermek gerekirse, herhangi bir  javaScript kodu ile oluşturmuş eklentiyi eklediğiniz zaman bazı durumlarda temanız yer alan manşet çalışmaz hale geliyor. Bunun nedeni js. kodlarının çakışmasından kaynaklıdır. Bu gibi sorunları  halletmek aslında basit ama benim bu önerdiğim eklenti de hiç bir ayar yapmanıza gerek yok. 

Blogger esnek manşet eklentisi eklemek

İlk olarak Blogger > Kumanda Paneli > Tema > HTML'yi düzenle kısmından kod bölümüne gelin ve CTRL + F tuşlarının yardımı ile arama yaparak </head> kodunu bulun ve hemen üstüne altta vermiş olduğum kodu ekleyin.


<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style type="text/css"> #myslidepost {margin:15px auto; width: 970px;} #myslide *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #myslide ul,#myslide li{padding:0;margin:0;list-style:none;position:relative} #myslide ul{height:320px} #myslide li{width:50%;height:100%;position:absolute;display:none} #myslide li:nth-child(1), #myslide li:nth-child(2), #myslide li:nth-child(3), #myslide li:nth-child(4), #myslide li:nth-child(5){display:block} #myslide li:nth-child(1){left:0;top:0} #myslide li:nth-child(2){left:50%;width:25%;height:50%} #myslide li:nth-child(3){left:75%;width:25%;height:50%} #myslide li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #myslide li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #myslide li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #myslide li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #myslide li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #myslide li:nth-child(1) span.dm {display:block;font-size:14px;background:#242424;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #myslide li:nth-child(1) span.dy, #myslide li:nth-child(1) span.msname{display:none;} #myslide a{display:block;width:100%;height:100%;overflow:hidden} #myslide img{display:block;width:100%;height:auto;border:0;padding:0;background:#242424;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #myslide li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #myslide .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAFACAYAAAB5k8bJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhhJREFUeNrslG1LVFEUhe/cGQtLfBlrECECIZEgDAlRCUEoUwQRIXWc/HmmJaIiKqIFCin1YQiFNDWTCKQPEhS9qGO6Vuwlxzs62cfiXnhg77Ofu845M44Rz/MqPXt8z3nCJmzCJmz+/cZ3m1+qfXfR1Xw3IKImAg7ZRFnoxQObRn1T8pQWAxlpGdMuKO0i2GOTD/a16a5N86VdAj/YFICf0r7btCBm8ZfBNxaFNv196q+mFetycfCFRSkLpX02La4rJLjIpgzsUIvaO5yW6Wzl4BOba2CbU2rFpl3XphXgI4sb4IPSikyrlFYF3qnYkKa0mzrbLbDKphq8CWq3pdWAJTa1YJnfhqvdkVYH0mzqwUvPvtxCm96N2UIDWKDWCBZ1U12hUVdoAi9Y3APz0pR2X9oD8JxFC3gWvEKzPt5WMMOmDUxLK7GQNmmcTvHFSTCuK+hs7dq0A0xwZRaMuRqfDn0gnZyymAMj0uKaalNqo1xZAMPSSmz6UGldnLJ4BYaCaV1KozbElTR4EtS6pXWDp1x57WqlZ2rLph1Su2paT5bGP6JBN82TxmmSISxWXE1pSaX1cMqVt2BA2hWbJpXWK23tNK1XadQeU1tn8WeNP5d+92z89/RIm/ZxLxabbpq0lNJSSsvSTt80t3ac9j54tr/QTpytX9rxpokzz3ZObSvn2XKnZZ9t63xXCLVQC7VQ+0+0IwEGAOg12Bw8IUYdAAAAAElFTkSuQmCC);background-position:50% 40%;background-repeat:repeat-x;} #myslide h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald'; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #myslide .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald'; text-transform:uppercase;} #myslide li:nth-child(2) .msname,#myslide li:nth-child(3) .msname,#myslide li:nth-child(4) .msname,#myslide li:nth-child(5) .msname{display:none;} #myslide .overlayx,#myslide li{transition:all .4s ease-in-out} #myslide li:nth-child(1) .overlayx{display:none;} #myslide li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #myslide li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #myslide ul{height:600px} #myslide li:nth-child(1){width:100%;height:50%} #myslide li:nth-child(2){top:50%;height:25%;left:0;width:50%} #myslide li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #myslide li:nth-child(4){left:0;top:75%;height:25%;width:100%} #myslide li:nth-child(5){display:none;}} @media only screen and (max-width:480px){#myslide li:nth-child(1) h4 {font-size:13px;line-height:16px;}} </style> </b:if> </b:if>

2. adım olarak aynı şekilde arama yaparak  </body> kodunu bulun ve bir satır üstüne aşağıdaki kodu ekleyin ve kayıt edin. 


<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script> //<![CDATA[ function myslidepost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#myslidepost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",MonthNames:["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım","Aralık"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="myslide"> <ul class="randomnya"></ul> </div> <div id="buttons"> <a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div> ').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+=' <li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"> </div> <img class="random" src="'+u+'" title="'+k+'"><h4> '+k+'</h4> </a><div class="label_text"> <span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="msname">'+m+"</span></div> </li> "}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#myslide li:first").before(e("#myslide li:last"));return false});e("#nextx").click(function(){e("#myslide li:last").after(e("#myslide li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#myslide li:first").before(e("#myslide li:last"));e("#myslide").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('') //]]> //<![CDATA[ $(document).ready(function () { myslidepost({ blogURL: "http://www.ibrahimfirat.net/", MaxPost: 12, idcontaint:"#myslidepost", ImageSize:500, interval: 10000, autoplay:true, tagName: false }); }); //]]> </script> </b:if> </b:if>

Yapmanız gerekenler bu kadar. Son bir ekleme daha yapacağız oda  manşeti nerede göstermek isterseniz oraya ekleyeceğiniz koddur. Kodu daha sonra vereceğim şimdi bu yukarı vermiş olduğum kod içinde değişliklikler yapmanız gerekecek. 

blogURL: "http://www.ibrahimfirat.net/", Buraya kendi site adresinizi yazınız.
MaxPost: 12, burada ne kadar yazı gösterecekseniz o kadar sayı belirleyiniz.
idcontaint:"#myslidepost",
ImageSize:500,
interval: 10000, Slider hızı bunu hızlandırmak için 10000 rakamını azaltın örnek olarak 5000 ve yavaşlatmak için ise rakamı çoğaltmanız gerekecektir.
autoplay:true,

tagName: false Burası en önemli kısımdır. Bu şekilde eklendiği zaman son yazılar gözükecektir. Ancak tagName kısmına dilediğiniz  bir etiketinizi yazarsanız o etikete göre yazılar ekranda çıkacaktır. Örnek olarak şöyle olabilir. 

tagName: false yerine "sağlık" etiketi olduğunuzu düşünerek sağlık etiketini ekleyeceğiz yani tagName: yazan yer sağlık: olmuş olacak. Ben küçük  harf kullandım sizin etiketinizin başlangıç harfi küçük ise küçük şekilde yazın, büyük ise büyük harf ile başlayın o zaman başarılı olacaksınız. 

Şimdi manşetimizi ekleyeceğimiz son kod. 

Bu kodu ( <div id="myslidepost"></div> ) gadget şeklinde herhangi bir yere kumanda panelinden ekleyebilirsiniz.  Nereye eklerseniz manşet orada gözükür. 

Örnek görüntü için iF sitemizin ana sayfasına bakabilirsiniz.


Bir önceki blogger eklentileri konumuzda "Blogger Widget'ları Mobilde Görünür Yapma (Reklam Gösterme)" ile ilgili çok detaylı bilgi içeren konumuzu okumanızı tavsiye ederiz

Blogger Widget'ları Mobilde Görünür Yapma (Reklam Gösterme)

By: İbrahim Fırat on Cumartesi, Aralık 30, 2017 / yorum : 4 blogger, blogger eklentileri, iF, slayt, webmaster

Mobil Tema Düzenleme, Adsense Reklamlarını Mobil cihazlarda göstermek. Gadget'ları Mobilde Göstermek.

Blogger Mobil Cihazlarda Widget Göstermek Video izle

Bir önceki blogger eklentileri konumuzda "Slider (2016 - 2017)" çok güzel sitenizi daha şık gösterecek bir eklenti. Bu konu için sayfamızı ziyaret edebilirsiniz.

Slider (2016 - 2017)

By: İbrahim Fırat on Pazar, Haziran 05, 2016 / yorum : 3 blogger, blogger eklentileri, iF, webmaster

Blogger Slider Manşet Alanı

<style type="text/css"> .slider-box { background: none repeat scroll 0 0 #FAFAFA; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #333333; margin: 0 auto; width: 675px; overflow: hidden; } #slider-wrapper { margin: 0 auto; padding: 10px; } #jslider-container { border: 2px solid #FFFFFF; max-width: 550px; position: relative; text-align: left; z-index: 90; } </style> <link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <div class="slider-box"> <div id="slider-wrapper"> <div id="jslider-container"> <div class="jslider_images"> <ul> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFlpl4t3fvqw4Et-UXLdaM2OfkvPFCmNBu7l64QKWjsx3I2N_r9H23MCSuIZ1wHFRY3tHvfs6LWLyZiG_xpZbiLgL7EBHAbLpY8VHT7vai2sM-vz6hK3KvtTGKhBFg_2sfbA8Xm-OAiPs/s550/sample1.jpg" title="İF" /> </a>görsel 1</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZshXem9gMU3O73wBNiI06f_f-GbotET95Ytosj7y1VDF1GvUwzUsv-5JYW1zFK0zHtOmSUgkh1j-RP1Siros_pCYe1AtxOj3ardjEr8XMcr4BlAMIDazhTp-LI2RF3EQR3pt5YOJXI2F/s550/sample2.jpg" title="ibrahim" /> </a> </li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvluxY7CUF8alC8DawFCG3mNPipxHJdg54mj9ivC-7TrCGidOaiMkM03K6NxMhhPMV3IhqqW-QTIUaq45jTuEdLXUnnR1Pifi3-cSST2l_RdJLaRcLwcOTC4NV8uTu1uV6S7ovpOhiTDJQ/s550/sample3.jpg" title="ibrahimfirat" /> </a>resim</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8e-Ns7mtFEOkqFbcJe3n70kqi01kQtZJa5xOt9104v7lBR3cU16SlNH-FqPkmgdyAZeFjQKVscaDQrqBPUJAHIc1WRw6pd6iPqe1i_Gu_PBumfVFYkEQ6WUT6KU38Jf5lw6_xGLVcGP-/s550/sample4.jpg" title="slider" /> </a>değişik görsel</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9ChVtO_MErUco92OQoDbMnmkJVxdmlfkTnGCXVvWF8rtZbJwJhCjO16wilCVH5coEZ9KLXGMgD3h9ct1jEg_xy9k3pgI-__4oIE4uSx3EzcqUCw6xAMz4uIF98_PB2D5SC_kMa3D00R8/s550/sample5.jpg" title="manşet" /> </a> </li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIMfrRfYlmRsT3WqD_Gnkiey3z7v-nzO1Y7em4NEX2TqNPbhkfnVdEWwg4mMcDLFjMxeJofFoNZ-5Jl9A_3GGcGQko26xsTZJBHaP76pczGUm8ddTsI6iBAELTzkFeqqQSouOgHZ3GgVD/s550/sample6.jpg" title="açıklama" /> </a> </li> </ul> </div> <div class="jslider_thumbs"> <div> <a href="#" title="resim1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj155UJOSDQm_EibFf-zAVgACg1wP1IY8H__ttVBYpcFwkKt1xiaJ8UDT9t90J_wJ4T49WajOYwVj4xjpiAHi1qSV7cY7sR58BcbZ29xgHmB30yVAUtUBV_YKxHyZ6WO49ntdGpcswXfbMI/s85/sample1.jpg" /></a> <a href="#" title="resim2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLMW1bA_mY7j9CwhHyLcnXZu-Fs4IjebYCVRXMhJI-Azm7i0Krr_2pBSLkY6ir5vk1JWKjJ_8rUoP9RbrkMQBT7qauSTpVLxl5HsE02tUVzhbwGtijqINA7kb-rc7VkvDjiGWuYG0DDjY2/s85/sample2.jpg" /></a> <a href="#" title="resim3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8KBBA65fDRtkgrP5uEYpr9MydLz1onWUWR0MX7N0lnHMSRU7TPuptkmOhWrONYzIh2lLiorI3XMszeQSAhlPwer-xobbnTAUbFigX6Rr52xgo8FJdUROVuxLXzECqhDOHyV8riC6AAXx/s85/sample3.jpg" /></a> <a href="#" title="resim4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dxqpLtZab2oxb4srijUHlzosKMpvtSXBj9JCIt-uNOV7doIPgnIYHqs79pL7qxN-giA-dMXinRIum-bfODB9acCTAT3JsPRLzlNOChefq9oN3saSxETNY_fMMPe_8I4CBGuIUxhwXlSg/s85/sample4.jpg" /></a> <a href="#" title="resim5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgsK91qEVdo_mkhvQWm5cU7nFmYiOGhgz7GlzNMIfxsJ8MX1CjYtvtyPazwqxaTh9BrzliAjkd6_oNuMZg0kBIYtFvrQrUKZC3TRLFYGBQ9UyqsV4nho9Y9CH5gjOwfHelg5ZaLAs2uou/s85/sample5.jpg" /></a> <a href="#" title="resim6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg553GzXgr6XHsgJrYRLW7ZdYiJS1fFXqUftLf9bW2XRMHeRPdZXshtwAAEtD3Rwan7U_VBTqIHLBqyy4cOBSMYbjRl671L_GPB85udN78bHwmNnHqF-c-FX8T7bZDaCbk2gdJDPafAU79D/s85/sample6.jpg" /></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Video izle

Blogger Site haritası Güncelleme

By: İbrahim Fırat on Pazar, Mart 20, 2016 / yorum : 5 blogger, blogger eklentileri, Google, iF, seo, webmaster

Blogger - Blogspot Site Haritası Güncelleme Nasıl Yapılır.

Blogger site haritası dosyası güncellendi 2016

Bu konumuzda web site sahipleri (webmaster) için önemli olan site haritası güncelleme olayıdır.

Biz bu konuya blogger üzerinden bakacağız. Bu yüzden eskiden blogger için sitenizdeki  içerikleriniz arttıkça site haritasını kendiniz güncelliyordunuz. Bunun için google 500 olarak index alıyordu. şimdi ise yeni bir güncelleme duyurdu ve bu sayı 150 olarak belirlendi. Bu yüzden en kısa zamanda site haritanızı "https://www.google.com/webmasters/tools" adresine giderek ilgili sitenizi bulup eski tüm eklediğiniz site haritalarını örnek olarak "atom.xml?redirect=false&start-index=1&max-results=500" olanları hepsini silmeniz ve yerine sadece bir kod ekleyerek geri kalan işi google'a bırakmanız yeterlidir.  Bu işlem seo açısından da etkili sonuç almanıza yarayacaktır.

Google bu şekilde kendi otomatik olarak güncelleme yapacak en geç 24 saat içinde her şey yerine oturmuş olacaktır. Bu sebeple daha sağlıklı index alacak ve iyi sitelere sahip olacaksınız. 




Eklemeniz gereken kod sadece "sitemap.xml"  örnek olarak ise şöyle olacaktır. "http://www.ibrahimfirat.net/sitemap.xml"  blogger için eklemede sadece yukarıdaki sitemap.xml eklemeniz yeterli zaten kendi blog adresiniz site haritası ekleme aşamasında karşınıza çıkıyor. 

Blogger Sitelere Nasıl Yorum Yapılır?

By: İbrahim Fırat on Pazartesi, Aralık 28, 2015 / yorum : 2 blogger, Eğitim, iF, webmaster

Aslında bu konu önemlidir. Genel olarak insanlar sadece yorum biçimli sitelerde yorum yapmayı bilirken blogger veya blogger alt yapılı sitelerde yorum yapmayı pek beceremiyor ve ilk kez yorum atacaklara karışık gelebiliyor.

Bundan dolayı bizde bu yazıyı yazmayı uygun gördük. Yorum atmak isteyip de atamayanlar için çok kolay şekilde görsel ve video şeklinde anlatımı gerçekleştirdim.

İlk olarak aşağıdaki resimdeki gibi seçiminizi yorum kısmından yapıyorsunuz:

Blogger Sitelere Nasıl Yorum Yapılır? Vido izle

Öne Çıkan Yayınlar Blogger

By: İbrahim Fırat on Pazartesi, Aralık 14, 2015 / yorum : 3 blogger, blogger eklentileri, Google, iF, webmaster

Öne Çıkan Yayınlar Blogger Gadget

Blogger kullanıcıları için yeni bir güncelleme geldi. Öne çıkan yazılar eklentisi (gadget)

Öne Çıkan Yayınlar Video izle

Gonzo Magazin - Teknoloji Teması

By: İbrahim Fırat on Salı, Temmuz 28, 2015 / yorum : 3 blogger, Blogger Temaları, iF, webmaster

Gonzo Blogger Teknoloji - Magazin - Haber teması

Gonzo temayı birçok alanda kullanabilirsiniz. Oldukça esnek ve şık bir yapıya bu tema blogger kulanıcıları için ücretsiz olarak sunulmuştur. Günümüzde mobil kullanım arttığı için çok siteler tema değişikliğine gitti özellikle Google açısından fayda sağlanması için "Responsive" tema kullanmanız artık şart.  Bu yüzden bu temayı sizlere öneriyoruz.

Gonzo Responsive temasının genel özellikleri

Temanın demosu için aşağıdaki bağlantıyı kullanınız.

Temayı indirmek için aşağıdaki bağlantıyı kullanın. 

Bir önceki yazımızda blogger temaları mobil uyumlu hale getirmek isimli konumuzda blogger alt yapılı sitelerin nasıl mobil uyumlu hale getireleceği anlatılmıştır.

Yazılarınızda Google+ Arkadaşlarınızdan Bahsedin

By: İbrahim Fırat on Pazartesi, Haziran 08, 2015 / yorum : 0 blogger, Google, iF, webmaster

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Eo1ksdv6Mcn91KRMccBuZxaMfC-VNxjFEVwDEgI6Muj7ifn3y4z2j8cS7jRue-iTMBHQ-yGMSc31KqW03SIg_m9ZHUQLdNlzUG4ML6AQI6sm2PXRRoiMFWEBirTu78uPmyZ2wimSjFyx/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://blogger.googleusercontent.com/img/proxy/AVvXsEhCdcJBqj2Un8pDdPHL2zkgrdxxVKasDWil4fvf7Ap5VnWoXV0cr4i2X4R3_WltyF0y55WWUKJMp_wCLMD5J8AW7L1GQHCkjAh2h0zEsCAbh45ubglAoDp5nG0m4wgM=" 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHYFB0Ads7q8nBa0AlZn2CkyP6vAhQ9Lce913q4pfPham6-ObOREMWmhmVFZO37m5aEm66oBN4AKLXy4J7T12h8OhS-FInax8XrqkQJcseIxvogYkuNwl6mEuULiw3iqjEtmhDrem7qHQ/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