TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema Tasarımları

Okul Hasreti Sona Eriyor!..

Gönderen TeknoMobi | Pazartesi, Ağustos 31, 2009 | Comments

Blogumda Herşeye Rağmen Yalnız Değiller Derneğinin başlatmış olduğu anlamlı bir kampanyayı duyurmak istedim. Blog camiasının yakından tanıdığı Davut Topcan'ın bu anlamlı kampanyasına en azından duyurma aşamasında destek vermeliyiz diye düşünüyorum.

Kampanyanın amacı yeni açılacak bir okulun bilgisayar ve bilgisayar yan malzemelerinin teminini sağlamak. Eğer sizlerin veya tanıdıklarınızın elinin altında kullanmadıkları bilgisayar veya bilgisayar yan malzemeleri varsa Herşeye Rağmen Yalnız Değiller Derneği ile iletişime geçebilirler.

Herşeye Rağmen Yalnız Değiller Sitesinde konu ile ilgili yapılan duyuru aşağıdaki gibidir.

Devamı »

SexyBookmarks v2 Blogger Eklentisi Entegrasyonu

Gönderen TeknoMobi | Pazar, Ağustos 30, 2009 | Comments

Blogger'de blog yazılarınızın altına sosyal ağlar için paylaş butonu eklemek isteyenler için bir çok alternatif bulunmaktadır. Fakat bu alternatifler içinde görsel olarak en göze çarpıcı olanı SexyBookmarks eklentisidir.

SexyBookmarks eklentisi aslında Wordpress için hazırlanmış bir eklentidir. Fakat Cssreflex sitesi Blogger kullanıcıları için bu eklentiyi optimize etmişlerdi. SexyBookmarks v1 de sosyal ağ sitelerinin ikonları tek sıra halinde görülüyordu. ikinci versiyonda ise sosyal ağ ikonlarının yarısı alta kaydırılmış. Tabi dinamik bir yapı ile alta kaydırılmış. Altta bulunan ikonlar sürekli görünür halde bırakılmamış. Böylece sayfanızda kalabalık ve dağınık bir görüntü oluşması engellenmiş. Altta kalan ikonların görünmesi için herhangi bir sosyal ağ ikonunun üzerine geldiğinizde alt menü otomatik olarak görünüyor. Görsel olarak çok güzel görünüyor.

sexybookmarks v2 blogger, blogger eklentisi

Sözü fazla uzatmadan Cssreflex sitesinde yapılan anlatımı kısaca paylaşayım.

Devamı »

BlueMania Blogger Template - SkinPress

Gönderen TeknoMobi | Cumartesi, Ağustos 29, 2009 | Comments

Beni takip edenler genelde Css tema çevirisi yaptığımı bilirler. Ama son zamanlarda benden Magazin tarzı tema çevirisi yapmam yönünde bir çok istek aldım. Bu isteklere cevapsız kalmak olmaz diyerek hoşuma giden ve Blogger için çevrilmemiş temaları çeviri sırasına aldım.

Magazin tarzı temalardan ilk çevirisini yaptığım SkinPress tarafından hazırlanan ve ücretsiz dağıtılan BlueMania Wordpress temasıdır.

BlueMania teması web 2.0 tarzını çok iyi bir şekilde yansıtıyor. Blog başlığı büyük ve kalın harflerle oluşturulduğundan göz alıcı bir başlık tasarımı yapabilirsiniz.

Devamı »

Blogger'e Navbar Share - Paylaş Özelliği Eklendi

Gönderen TeknoMobi | Cumartesi, Ağustos 29, 2009 | Comments

Blogger'e yeni özellikler katılmaya devam ediyor. En son etiket bulutu için düzenleme yapılmıştı. Blogge etiketleme siteminde yapılan yeniliği burada anlatmıştım.

Blogger şimdi de klasik navbarda ufak bir düzenlemeye gitmiş. Sosyal ağların gelişmesinden sonra link paylaşımının önemi çok fazla arttı. Bloggerde klasik navbarına Share yani Paylaş butonu eklemiş.

Her ne kadar Blogger'in klasik navbarını kullanan kişi sayısı az olsada işe yarar bir özellik diyebilirim.

Blogger 10. yaşını kutladığı bu yıl içinde kullanıcılarına daha bir çok yenilik sunacak gibi görünüyor. Blogger kullanıcılarının en fazla istediği özellik ise Robots.txt de Blogger için bulunan /Search kısıtlaması ve etiketlerin kısıtlamaya maruz kalmasıdır. Umarım Google yakında Robots.txt içinde yenilik yapar.

Bilgi için : Blogger Buzz

Blogger Yeni Etiket Bulutu Sayfa Öğesi Eklentisi

Gönderen TeknoMobi | Salı, Ağustos 25, 2009 | Comments

Blogger etiket gösteriminden çoğu blogger kullanıcısı şikayet etmiştir. Bloggerin kendi etiket gösterim yöntemini beğenmeyenler genelde üçüncü parti eklentileri kullanıyorlar.

Artık Blogger etiket gösterimine yeni bir özellik getirdi. Wordpress ten aşina olunan etiket bulutu gösterimi Blogger içinde yayına sunuldu. Hemde harici bir eklenti kullanmaya gerek duymadan blogunuza sayfa öğesi olarak etiket öğesini eklediğinizde karşınıza çıkan seçeneklerde bulut özelliğine tıklamanız gerekiyor. sadece kendi istediğiniz etiketlerin görünmesini sağlayabiliyorsunuz. Etiket sayfa öğesini etiketlerin kullanılma sıklığını görede sıralayabiliyorsunuz.

Artık Blogger'in etiket gösterim şekli biraz daha kullanışlı oldu. Yakında yeni özelliklerde açıklanacaktır.Beklemede kalın...

Bilgi için : Blogger Buzz

Draft Blogger Nedir? Nasıl Kullanılır?

Gönderen TeknoMobi | Pazar, Ağustos 23, 2009 | Comments

Blog dünyasına yeni adım atıp Blogger'de blog açan kullanıcılar genellikle bloggerin standart yönetim panelini kullanırlar. Bir müddet standart yönetim panelini kullandıktan sonra ise standart yönetim paneli bazı isteklerini karşılamıyor. Özellikle web tasarımdan anlayan blogcular için bloggerin standart yönetim paneli bazı durumlarda yetersiz kalıyor.

Peki blogger kullanıcısı olarak standart yönetim paneline mahkum mu kalacağız! Tabi ki hayır!

Blogger bildiğiniz üzere Google tarafından satın alındıktan sonra bayağı bir geliştirildi. Dünyada ve ülkemizde bir çok kullanıcı ücretsiz ve kullanışlı olan bu blog sistemine çok fazla ilgi gösterdi. Google'da bu ilgiyi karşılıksız bırakmamak için sürekli geliştirme çalışmaları yapmaktadır.

Google blogger için geliştirdiği uygulamaları veya bloggerde kullanacağımız yeni özellikleri acemi kullanıcıların etkilenmemesi için draft blogger denilen yönetim panelinden kullanıma sunuyor.

Peki draft blogger panelini kullanırsak bize ne gibi avantajları/dezavantajları olur?

Draft bloggerden blogunuza giriş yaptığınızda normal yönetim panelinden çok da farklı olmayan bir ekran ile karşılaşabilirsiniz. Fakat kullanım olarak standart yönetim panelinde bulunmayan çoğu özellik draft panelinde bulunmaktadır. Örnek verecek olursak;

blogunuza resim yüklerken draft blogger panelin biraz daha opsiyon bulunmakta (sağa/sola yasla vb.).

Draft blogger panlinden yeni yazı yazacağınız zaman karşınıza çıkan yazım editörü çok daha kullanışlı ve kullanıcı dostu diyebilirim.

Draft blogger paneli yukarıda bahsettiğim gibi bloggerin test mekanı olduğundan bazı eksileride bulunmaktadır. Bunlardan en öne çıkanı test edilen uygulamaların stabil olmaması dolayısıyla da blogunuzda bazen ufak tefek sorunlara veya çakışmalara neden olabiliyor. Draft bloggere test edilmek için yeni özellik geldiğinde bazen ufak çaplı kesintiler olabiliyor. Tabi bu durumda hemen normal blogger panelinden giriş yapıp işlemlerinizi gönül rahatlığıyla yapabilirsiniz.

Bu yazıyı hazırlamadan bir iki gün önce draft bloggerden bloguma giriş yapıp yeni yazmaya çalıştığımda yazı editörünün sorunlu olduğunu daha doğrusu yazım editörünün görünmediğini farkettim. Bende hemen normal blogger paneline geçiş yaptım ve blogumu bir iki gün bu şekilde kullandım. ara sıra draft panelini kontrol ettim ve sorun düzelince tekrar darft panelinden blogumu yönetiyorum.

Blogger'e yeni adım attıysanız sizlere tavsiyem ilk başlarda normal blogger yönetim panelini kullanmanız yönündedir. Çünkü yeni öğrenmeye başladığınız bir sistemde stabil olarak kullandığınızda karşılaşacağınız hatalara daha kolay çözüm bulabilirsiniz.

Not : Bu yazı Blog Dergisi (BD) 1. sayısı için özel olarak hazırlanmıştır. Bu yazı birinci sayıda 9. sayfada yayınlanmıştır. Blog Dergisi 1. sayıya buradan ulaşabilirsiniz. Blog Dergisi'nin birinci sayısını ister online okuyabilir, isterseniz de PDF formatında bilgisayarınıza indirebilirsiniz.

Colorbox Jquery Ligthbox in Blogger - Section Four

Gönderen TeknoMobi | Pazar, Ağustos 16, 2009 | Comments

Blogger general application integration to tell jQuery lightbox Colorbox after the order to the use of this plugin

one of the first examples on these pages integrate blog

A little code to add pictures to your article class will assign. These codes are the problem, manually enter the class each image.

İmage Content Types

When you add a code like the following image with your blog is. We will assign this code class rel ...

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" width="400" />

elastic transition for : rel="example1" , fade transition for : rel="example2" , no transition + fixed width and height (75% of screen size) for : rel="example3" , slideshow for : rel="example4" add one of the class.

Our code will be as follows after Add.

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" rel="example1" title='Test title' style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" alt='test' width="400" />

Other Content Types

<a class='iframe' href="http://www.google.com">Outside webpage (IFrame)</a>

<a class='youtube' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Direct Link To YouTube)</a>

Youtube video link to open the link in the window below colorbox something like this should make arrangements.

Before
http://www.youtube.com/watch?v=bqeuSWTgtQo

watch? would delete section = replace / put

After
http://www.youtube.com/v/bqeuSWTgtQo

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Three

Colorbox Jquery Ligthbox in Blogger - Section Three

Gönderen TeknoMobi | Pazar, Ağustos 16, 2009 | Comments

Application to both the third part Colorbox jQuery Lihgtbox start.

Colorbox Example4

Visit to Colorbox Example4 Demo

</head> Add the following code immediately above the code

  <link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example4/colorbox.css" />

<!--[if IE]>

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example4/colorbox-ie.css" title="example" />

<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//Examples of how to assign the ColorBox event to elements

$("a[rel='example1']").colorbox();

$("a[rel='example2']").colorbox({transition:"fade"});

$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});

$("a[rel='example4']").colorbox({slideshow:true});

$(".single").colorbox({}, function(){

alert('Howdy, this is an example callback.');

});

$(".colorbox").colorbox();

$(".youtube").colorbox({iframe:true, width:650, height:550});

$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});



//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){ 

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Colorbox Example5

Visit to Colorbox Example5 Demo

</head> Add the following code immediately above the code

  <link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example5/colorbox.css" />

<!--

This example has no IE-Only Stylesheet because the theme uses no transparent png files.

-->



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//Examples of how to assign the ColorBox event to elements

$("a[rel='example1']").colorbox();

$("a[rel='example2']").colorbox({transition:"fade"});

$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});

$("a[rel='example4']").colorbox({slideshow:true});

$(".single").colorbox({}, function(){

alert('Howdy, this is an example callback.');

});

$(".colorbox").colorbox();

$(".youtube").colorbox({iframe:true, width:650, height:550});

$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});



//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){ 

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Four

Colorbox Jquery Lİgthbox in Blogger - Section Two

Gönderen TeknoMobi | Pazar, Ağustos 16, 2009 | Comments

Application to both the second part Colorbox jQuery Lihgtbox start.

Colorbox Example2

Visit to Colorbox Example2 Demo

</head> Add the following code immediately above the code

  <link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example2/colorbox.css" />

<!--

This example has no IE-Only Stylesheet because the theme uses no transparent png files.

-->



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//Examples of how to assign the ColorBox event to elements

$("a[rel='example1']").colorbox();

$("a[rel='example2']").colorbox({transition:"fade"});

$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});

$("a[rel='example4']").colorbox({slideshow:true});

$(".single").colorbox({}, function(){

alert('Howdy, this is an example callback.');

});

$(".colorbox").colorbox();

$(".youtube").colorbox({iframe:true, width:650, height:550});

$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});



//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){ 

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

Colorbox Example3

Visit to Colorbox Example3 Demo

</head> Add the following code immediately above the code

  <link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example3/colorbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//Examples of how to assign the ColorBox event to elements

$("a[rel='example1']").colorbox();

$("a[rel='example2']").colorbox({transition:"fade"});

$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});

$("a[rel='example4']").colorbox({slideshow:true});

$(".single").colorbox({}, function(){

alert('Howdy, this is an example callback.');

});

$(".colorbox").colorbox();

$(".youtube").colorbox({iframe:true, width:650, height:550});

$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});



//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){ 

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Three , Colorbox js v1.2.9 in Blogger Section Four

Colorbox Jquery Ligthbox in Blogger - Section One

Gönderen TeknoMobi | Pazar, Ağustos 16, 2009 | Comments

Learn how to use the platform before colorbox told blogger application. Application of the most familiar application of Colorbox lightbox is a clone. Colorbox application and speed, and usability, but also work seamlessly in all browsers because of my profile, my priority.

One of the most advanced derivative lightbox Multibox application that has integrated one of the blogger platform 100% I decided to use the application colorbox.

Multibox application of the integration of Turkish blogger can visit here for installation guide ...

Wordy blogger platform integrated into the application and use colorbox tell methods.

Describes five different types of application separately Colorbox will. First, I will at the beginning of explanation: I recommend you take a look at the demo. So you may decide to use which kind of colorbox.

After the application code Colorbox types of images, video, or you can use links within the page also will describe the code. Please give example from 1 until 5 of the example of my code wait. The last course I will tell them ...

Colorbox Example1

Visit to Colorbox Example1 Demo

</head> Add the following code immediately above the code

  <link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example1/colorbox.css" />

<!--[if IE]>

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example1/colorbox-ie.css" title="example" />

<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//Examples of how to assign the ColorBox event to elements

$("a[rel='example1']").colorbox();

$("a[rel='example2']").colorbox({transition:"fade"});

$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});

$("a[rel='example4']").colorbox({slideshow:true});

$(".single").colorbox({}, function(){

alert('Howdy, this is an example callback.');

});

$(".colorbox").colorbox();

$(".youtube").colorbox({iframe:true, width:650, height:550});

$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});



//Example of preserving a JavaScript event for inline calls.

$("#click").click(function(){ 

$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");

return false;

});

});

</script>

Visit to : Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Three , Colorbox js v1.2.9 in Blogger Section Four

Ormeggiare Blogger Template by TeknoMobi

Gönderen TeknoMobi | Perşembe, Ağustos 13, 2009 | Comments

Yeni bir Css tema çevirisi ile karşnızdayım. Blogger için çevirisini yaptığım temamızın adı Ormeggiare.

Ormeggiare teması turuncu ve beyaz renk ağırlıklı olarak tasarlanmış. Renk uyumu çok güzel olmuş. İki sütunlu yapıya sahip ve sidebar sağ taraftadır.

Tarayıcı uyumluluğu : Firefox 3-3,5,Google Chrome 2-3, Safari 3-4, Opera 9-10, İnternet Explorer 6-7-8

Lisans Koşulları : Creative Commons Attribution 2.5 License

blogger temaplate, css template, ormeggiare template

Kurulum Klavuzu

1. Menü bölümünde düzenleme yapmak için html kodlarında aşağıdaki bölümü bulun ve gerekli değişikliği isteğinize göre yapın.

 <div id='menu'>

<ul>

<li class='current_page_item'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a href='#'>Blog</a></li>   

<li><a href='#'>About</a></li>

<li><a href='http://www.blogcuforum.net/' title='BlogcuForum'>Forum</a></li>

<li><a href='#'>Contact</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

</ul>

</div>

2. Temaya otomatik devamını oku eklentisi standart olarak eklenmiştir. Bu eklenti ile ilgili detaylı bilgiye bu yazımdan ulaşabilirsiniz.

Ormeggiare Blogger Tema: Demo/Önizleme , İndir

English Statement

With a new translation Css At your theme. The theme for the blogger's name Ormeggiare translation.

Predominantly orange and white color theme Ormeggiare designed. Tonality was very good. Two-column structure, and the sidebar on the right side.

Browser Compatibility : Firefox 3-3.5, Google Chrome 2-3, Safari 3-4, Opera 9-10, İnternet Explorer 6-7-8

Lisans Conditions : Creative Commons Attribution 2.5 License

İnstallation Guide

1. Menu to edit the html code in the following section and make necessary changes according to your request.

 <div id='menu'>

<ul>

<li class='current_page_item'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li><a href='#'>Blog</a></li>   

<li><a href='#'>About</a></li>

<li><a href='http://www.blogcuforum.net/' title='BlogcuForum'>Forum</a></li>

<li><a href='#'>Contact</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

</ul>

</div>

2. Theme as a standard plug-in automatically read more added. Detailed information about this plugin can be found in this.

Ormeggiare Blogger Template : Demo/Preview , Download

Blogger'e Otomatik Devamını Oku Özelliği Eklentisi

Gönderen TeknoMobi | Perşembe, Ağustos 13, 2009 | Comments

Daha önce TamBirBlog'da Blogger Otomatik Devamını Oku Bağlantısı-2 adı altında yayınlanan eklentiyi bazı blogger kullanıcılarından gelen istek üzerine biraz daha kullanışlı hale getirmeye çalıştım.

Devamını oku kısmının arka planına css kodları ile kullanışlı bir arkaplan atadım. Şimdi bazıları çıkıp biz kendimiz direk resim ile de yapabilirdik diyebilirler. Ama resim ile eklendiğinde w3 doğrulamasında hata olarak görebiliyor. En temizi css kodları ile arkaplan (backround)belirlemek.

Otomatik Devamını Oku Eklentisinin Kurulum Aşamaları

1. Css kodlarınızın en altına aşağıdaki kodları ekleyin.

 /* Devamını oku          */

.links {

display: block;

width: 130px;

height: 33px;

margin-top: 20px;

padding-top: 7px;

background: url(http://i30.tinypic.com/papo5.gif) no-repeat right top;

text-align: center;

text-transform: uppercase;

font-size: 10px;

color: #F3F4F4;

}

/* -------------------------------- */

Arkaplanda kullandığım resmi değiştirmek isterseniz. Üstteki http://i30.tinypic.com/papo5.gif resim dosyasının yerine kendi hazırladığınız resmin bağlantısını verebilirsiniz.

2. Tema kodları arasında </head&gt; kodunun hemen üstüne aşağıdaki kodları yerleştiriyoruz.



<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://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js' type='text/javascript'/>

Yukarıdaki kodda bulunan summary-post javascript dosyasını buraya sağ tıklayıp farklı kaydet diyerek summary-post.js dosyasını bilgisayarınıza indirin. Ardından kendi googlepages sayfanıza veya alternatif bir hosta yükleyip yukarıda bulunan http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js bağlantı linki ile değiştirin.

3. Son aşama olarak temanızın kodları arasında <data:post.body/> kodunu bulup aşağıdaki kod ile değiştirin.



<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' class='links'> Devamını oku "<data:post.title/>"</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Yukarıdaki aşamalar tarafımdan test edilerek yayınlanmıştır. Bütün tarayıcılarda sorunsuz çalışmaktadır.

Bu yazı hazırlanırken yararlanılan kaynaklar : TamBirBlog (Blogger Otomatik Devamını Oku Bağlantısı-2)

Metamorph Rainbow Blogger Template/Tema

Gönderen TeknoMobi | Cumartesi, Ağustos 08, 2009 | Comments

Blogger kullanıcıları için yeni bir css tema çevirisi yaptım. Metamorph Rainbow css temasını Blogger için çevirdim. Umarım beğenilir.

Metamorph Rainbow Blogger temasının özellikleri ; 2 sütunlu, mavi ve yeşil renk ağırlıklı, sağ sidebar,

Tarayıcı Uyumluluğu : Firefox 3/3.5 , Chrome 3 , Safari 4 , İnternet Explorer 6/7/8

Kurulum Klavuzu

Header altındaki menüde düzenleme yapmak için HTML kodlarının içinde aşağıdaki kod öbeğini bulup gerekli değişikliği yapabilirsiniz.

<div id='buttons'>
<ul>
<li class='first'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#' title=''>Blog</a></li>
<li><a href='#' title=''>Gallery</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
</ul>
</div>

Metamorph Rainbow Blogger Tema : Demo/Önizleme , İndir

English Statement

Blogger users who've made a new translation css theme. Have converted to Blogger Metamorph Rainbow theme css . I hope I will be like.

Metamorph Rainbow Blogger theme features; 2-column, blue and green color-weighted, right sidebar,

Browser Compatibility : Firefox 3/3.5 , Chrome 3 , Safari 4 , İnternet Explorer 6/7/8

Installation Manuals

To edit the menu under the header of the HTML code below to find the code phrases and can make the necessary changes.

<div id='buttons'>
<ul>
<li class='first'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#' title=''>Blog</a></li>
<li><a href='#' title=''>Gallery</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
</ul>
</div>

Metamorph Rainbow Blogger Template : Demo/Preview , Download

YouTube'a Giriş Yöntemleri

Gönderen TeknoMobi | Cumartesi, Ağustos 08, 2009 | Comments

Dünyanın en fazla tıklanan video paylaşım sitesi YouTube'a erişim ülkemizde uzun süredir engellenmiş durumda. Yasağın ilk başladığı zamanlar DNS engelleme yöntemiyle uygulandığından bilgisayarınızdaki internet bağlantı ayarlarından DNS ayarlarını Open DNS veya başka bir DNS servisine yönlendirdiğinizde YouTube'a kolaylıkla erişebiliyordunuz. Fakat DNS engelleme yönteminin işe yaramadığı görülünce IP tabanlı engelleme yoluna gidildi.

Peki YouTube'a hiç mi erişilmez. Tabi ki bir şekilde erişebilirsiniz. Ben YouTube video paylaşım sitesine genellikle beğendiğim şarkıcıların kliplerini izlemek için giriyorum.

Neyse konuyu birazcık toparlayayım. YouTube erişebilmek için bir kaç alternatif yöntemden bahsedeyim.

ShiftDelete yazarlarından Hakkı Alkan'ın "Başbakan YouTube'a Böyle Giriyor" başlıklı makalesinde anlattığı ufak bir host dosyası değişikliği ile,
Benim yazdığım "Tor Kullanarak Blogge'e Güvenli Erişin" başlıklı makalede anlattığım yöntem ile,
Birde Tunnel siteleri aracılığıyla

Benim yukarıda verdiğim yöntemlerin haricinde başka bildiğiniz yöntemler var ise yorumlarınızda belirtebilirsiniz.

En iyi Link Kısaltma Servisleri

Gönderen TeknoMobi | Cuma, Ağustos 07, 2009 | Comments

Twitter, FriendFeed, Facebook vb. gibi sosyal ağların kullanımı azımsanmayacak derecede yagınlaştı. Bu yaygınlaşmanın sonucunda da bazı ihtiyaçlar doğdu.

Sosyal paylaşım sitelerinde kullanıcılar birbirlerine beğendikleri bir makalenin, videonun veya fotoğrafın bağlantı linkini göndermek isterler. Sosyal paylaşım sitelerinin çoğunda karakter sınırlaması olduğundan gönderilecek bağlantı linkinin uzun olması sorun yaratabiliyor. Bu durumda ya peş peşe birkaç mesaj yazmak zorunda kalmamak için internetin nimetlerinden yararlanmak gerekir.

Paylaşmak istediğiniz uzun bağlantı linklerini kısaltmak için çeşitli servisler bulunmakta, şu sıralar en gözde link kısaltma servislerine bir göz atalım.

Bit.ly, şuan link kısaltma servisleri arasında en fazla kullanılan bu site diyebilirim. En fazla kullanıma sahip olmasının en büyük nedeni Firefox eklentilerinden TwitterFox'un linkleri bu sitenin api'si ile oluşturması diye düşünüyorum. Görsellik yönünden bit.ly sitesi çok güzel... Kısa link oluşturduktan ve arkadaşlarınızla paylaştıktan sonra bit.ly sitesinde paylaştığınız link ile ilgili istetistiki bilgileri görebilirsiniz.

Tr.im, bit.ly ile benzer özelliklere sahip bir link kısaltma servisidir. Arayüz kullanım açısından başarılı denilebilir. Firefox için bir eklentisi bulunmakta fakat bu eklenti çok kullanışlı değil. bit.ly servisinde olduğu gibi link kısaltma işleminden sonra istetistiki bilgileri görebilirsiniz.

Tinyurl, Arayüz olarak bit.ly ve tr.im kadar kullanışlı olmasa da kullanım olarak iki servis ile benzer özelliklere sahip. Firefox için kullanışlı bir eklentisi olmasına karşın henüz Firefox 3.5 sürümünü desteklemiyor.

Kısaurl. Türkçe yayın yapan bir link kısaltma servisidir. Çoklu link kısaltma hizmeti vermektedir. Ayrıca masaüstünde çalıştırılabilir bir yazılımı var. Bu yazılım yardımıyla tarayıcıdan giriş yapmadan direkt olarak masaüstünden link kısaltabilirsiniz. Kısalttığınız linke şifre koyarak sadece şifreyi verdiğiniz kişilerin bağlantıya ulaşmasınıda sağlayabilirsiniz.

Zipmyurl Kısaurl servisinde olduğu gibi oluşturduğunuz liklere şifre koyabilirsiniz. Arayüz olarak web 2.0 tarzı kullanılmış. Başarılı bir link kısaltma servisidir.