Emre ŞÖHRET: Temmuz 2012

3 Temmuz 2012 Salı

Blogger Devamını Oku Eklentisi Yapımı

Blogger sitelerinde için en çok aranan eklentilerden biriside blogger devamını oku bağlantısı yapmaktadır.Blogunuza bir yazı eklerseniz ve yazı çok uzundur.Siteye girdiğinizde sitenizin sayfa yüklenmesini güçleştirir.Bu gibi durumlarda devamını oku eklentisi ile blogunuzun anasayfasına girdiğinizde yazının ilk xxx karakterini gösterir ve devamını görmek için devamını oku bağlantısı verir.

Sorunsuz çalışan bir eklentidir bunu belirtmek istedim.

eklenti gayet güzel çalışmaktadır.Eklenti tamamen otomatik olduğunu için siz yazınızı bloga göndermeniz yeterli.Otomatik olarak yazının belli kısmı anasayfada yayınlanacak diğer kısımlar gizlenecek.Yazıda resim var ise otomatik olarak boyutu küçülecek ve thumbnail yazıya eklenecektir.

Eklentinin Özellikleri:

Yazının bir bölümü gizlenecek.
Resimler otomatik olarak küçülecek

Blogger hesabımıza giriş yapıyoruz.Blog panelinden Tasarım – Html’yi Düzenle kısmına girerek Widget şablonlarını genişletiyoruz.Ctrl+F kombinasyonu ile kodların içinden aşağıdaki kodu arıyoruz.

</head>

Yukarıdaki kodu bulduktan sonra o kodun alt kısmına aşağıdaki kodu ekliyoruz.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;summary_noimg = 430;summary_img = 340;img_thumb_height = 100;img_thumb_width = 120;</script><script src='http://yourjavascript.com/1211712851/demreli_devamini_oku.js' type='text/javascript'/>

Daha sonra aşağıdaki kodu arıyoruz yine Ctrl+F kombinasyonu ile

<data:post.body/>

Yukarıdaki kodu bulduktan sonra kodu silip yerine aşağıdaki kodu ekliyoruz ve Şablonu kaydediyoruz.

<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Devamını oku</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

İşlem bu kadar.Artık blogunuza girip bakabilirsiniz.Yazılarınız istediğiniz kadar uzun olsun sorun değil.Eklenti sayesinde otomatik olarak yazılar gizlenecektir.Eklenti ile ilgili bir kaç ufak ayar var.Onlarıda aşağıda yazıyorum.Eğer resmin thumbnail olarak kullanacağınız resimlerin boyutundan bir değişiklik yapmak isterseniz lazım olabilir.

summary_noimg = 430; - Yazıda resim yoksa yazının boyutusummary_img = 340;   - Yazıda resim varsa yazının boyutuimg_thumb_height = 100; - Thumbnail'in(Yazıdaki ilk resmin) boyuimg_thumb_width = 120;  - Thumbnail'deki ilk resmin genişliği

Devamını oku

Syantax Highlighter Blogger

Blogger alt yapısı kullanan bloglarımızda kod paylaşmak her zaman zor olmuştur. Kısacık bir kod eklemek için bile uzun pre ve code kodlarıyla, çeşitli css kodlarıyla güzelleştirmeye veya farklılaştırıp paylaşmaya çalışıyoruz. Fakat bu tip kodlar her ne kadar işimizi görmüş olsa da uzun zaman kayıplarına, yazı içerisindeki kalabalıklığa ve görüntü kirliliğine neden olmakta. Kısa araştırma sonucu bulduğum ve blogumda kullanmaya başladığım SyntaxHighlighter adında bir kod eklentisi bulunmakta. Bu eklenti aslında sadece blogger için değil diğer hazır web sistemleri için de kullanılabilir.

SyntaxHighlighter eklentisini geliştiren ve kullanıma sunan site alexgorbatchev.com. Bu eklenti ile birçok programlama diline ait kodları paylaşmamız oldukça kolay. Eklentiyi ister kendi sitesinden indirip sitenizin ftp'sine atarak aşağıdaki şeikilde css ve js dosyalarını çağırarak kullanabilirsiniz ya da diğer kod depolama (http://code.google.com) sitelerini kullanabilirsiniz. Aşağıdaki css ve js dosyalarını <head> etiketinden hemen sonra yapıştırınız.

Tasarım > HTML'yi Düzenle adımlarını uygulayıp Widget Şablonlarını Genişlet işaretliyoruz, şimdi kod yerleştirmeye başlıyoruz, aşağıdaki kodu bulalım.

<head>

<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.strings.alert = &quot;Bu bir uyarıdır!&quot;;
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>

Başlıca Kullanılabilecek Kod Tipleri
Xhtml, Xml, Html, Css, Javascript, Php, Sql, Java

Yazılarda Nasıl Kullanılır ?
Alttaki brush: js yazan kısmı kullanacağınız kod türüne göre değiştiriniz. Örneğin xml, xhtml ve html kullanmak için js'yi xml yapmalısınız.

<pre class="brush: js">...</pre>

Devamını oku

2 Temmuz 2012 Pazartesi

jQuery toggle()

jQuery toggle() özelliği ile tıklamalarımızı ve tıklamalarımızın sonrasında yapmak istediklerimizi kontrol edebiliriz. İşlem yapmak istediğimiz eleman için 2 farklı işlem belirlediğimizi düşünürsek, eleman üzerindeki birinci tıklamada belirlediğimiz birinci işlem, ikinci tıklamada belirlediğimiz ikinci işlem gerçekleşecektir. Üçüncü tıklamada ise başa dönerek belirlediğimiz birinci işlem, dördüncü tıklamada belirlediğimiz ikinci işlem gerçekleşecektir. Bu süreç bu şekilde devam edecektir. Eğer 3 işlem belirlemiş olsaydık dördüncü tıklamada başa dönerek belirlediğimiz birinci işlem yapılacaktır.

Kullanım şekli aşağıdaki gibidir.

`1`	`$("hedef eleman").toggle();`

toggle ile yapabileceklerimiz arasında örneğin bir elemanın css özelliklerinden display özelliğinin kontrol edilebilmeside vardır. İşlem yapmak istediğimiz elemanın display özelliği block ise none, none ise block olarak değiştirilir. Yani eleman kapalı ise açılır açık ise kapatılır. Bu özelliğin kullanımı aşağıdaki gibidir. Bunun için show/hide komutlarını kullanıyoruz.

`1`	`$("hedef eleman").toggle("show");`

yada

`1`	`$("hedef eleman").toggle("hide");`

Bu kullanıma ek olarak eğer işlem yapmak istediğimiz eleman açık ve kapatmak istiyorsak yada eleman kapalı ve açmak istiyorsak, işlemde tek tıklama ile gerçekleştirilsin diyorsak true/false komutlarını kullanıyoruz. Bu şekilde eleman üzerinde tek tıklamaya izin veriyoruz. Bu kullanımda başa dönme olmaz.

`1`	`$("hedef eleman").toggle(true);`

yada

`1`	`$("hedef eleman").toggle(false);`

toggle kullanım şekillerinden bir diğeride yukarıda açıkladığımız gibi her tıklamaya denk gelen özelliğin çalıştırılmasıdır. Kullanım şekli aşağıdaki gibidir.

$("hedef eleman").toggle(
  
function () {
       
// birinci tıklamadaki işlemler

  
},   function () {
       // ikinci tıklamadaki işlemler  

   },

   function () {
       // üçüncü tıklamadaki işlemler
   }
);

Her tıklama için bir function açıyoruz. Bu function larıda virgül(,) ile ayırıyoruz.

Bu kullanıma örnek olarak her tıklamada işlem yapmak istediğimiz katmanın fon rengini değiştirebileceğimiz bir fonksiyon hazırlayalım.

$("#ColorChange").toggle(   function () {
         $("#Ornek2Div").css("background", "#ff0000");
   },
   function () {

$("#Ornek2Div").css("background", "#0004be");
},
function

() {
         $("#Ornek2Div").css("background", "#00be09");
   }
);

Alıntı : Tuncay Demirer

Devamını oku

Restoranya.com

Daha önce hiç denemediğiniz mutfaklarda yeni tatlar deneyimlemek, fiyatları ile gözünüzü korkutan restoranlarda muhteşem akşam yemekleri ya da kısıtlı zamanlarınızda hızlı seçimler yapmak Restoranya ve fırsatları ile mümkün!

Bu fırsatlar kaçmaz söz konusu damak tadı ve açlık ise denemenizi öneriyorum.

Keyifli yemekler, afiyet olsun...

www.restoranya.com

Devamını oku

iPhone 5

Güney Kore medyasında yer alan habere göre, Apple, iPhone 5 modeli için 4,6 inçlik retina ekran kullanmayı kararlaştırdı ve tedarikçilerine bu yönde sipariş vermeye başladı.

The Maeil Business gazetesinin, Güney Koreli sanayici kaynaklara dayanarak verdiği haberinde, Amerikalı bilişim devi Apple’ın, yeni iPhone’u yılın ikinci çeyreğinden sonra piyasaya çıkarmaya hazırlandığı belirtildi.

Apple’ın iki büyük Koreli tedarikçisi LG Display ve Samsung Electronics Co ise haberle ilgili yorum yapmayı reddetti.

İlk kez 2007 yılında dokunmatik ekranlı özelliğiyle piyasaya çıkan iPhone satışları, Apple şirketinin toplam satışlarının yaklaşık yarısını oluşturuyor.Apple’ın akıllı telefon sektöründeki en büyük rakibi Samsung da geçen nisanda piyasaya çıkardığı akıllı telefonlarının amiral gemisi Galaxy S II’de 4,6 inçlik OLED ekran kullanıyor.

Apple’ın geçen hafta piyasaya çıkardığı son iPad’lerde kullandığı yüksek çözünürlüklü ”retina ekran” daha fazla piksellere sahip bulunuyor.

Apple son iPhone 4S’i geçen ekimde çıkarmıştı. Heyecan dorukta . . .

Resim örnektir ürünün orjinal görünümünü içermemektedir...

Devamını oku