TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

blogger ipuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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ı »

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)

Blogger'e Afilli Feedback Butonu Ekleyelim

Gönderen TeknoMobi | Cuma, Temmuz 24, 2009 | Comments

Benden BlogcuForum'da en fazla istek alan uygulamayı Blogger'de kullanılabilir hale getirmemi isteyen birçok kişi oldu. Elimde bir kaç proje olduğundan bu uygulamayı hazırlamam biraz gecikti. Bu gecikmeden dolayı istekte bulunan bütün arkadaşlardan özür dilerim.

Blogger'de afilli bir feedback butonu için yapmanız gereken adımları kolayca anlayabileceğiniz şekilde anlatacağım. Anlatacağım aşamaları düzgün bir şekilde yaparsanız benim blogumda sağ tarafta bulunan Feedback butonuna tıkladığınızda karşınıza çıkan iletişim ekranı gibi bir özelliğe kendi blogunuzda da sahip olabilirsiniz.

1. İlk olarak yapmanız gereken daha önce anlatımını yaptığım Colorbox uygulamasını kurmalısınız. Colorbox uygulamasının blogger entegrasyonunu iki bölüm halinde yayınlamıştım. Colorbox Bölüm 1 , Colorbox Bölüm 2

2. Colorbox uygulamasını blogunuza sorunsuz entegre ettiğinizi düşünerek anlatıma devam ediyorum. Şimdi yapmamız gereken. Blogumuzun yanına yerleştireceğimiz feedback butonunun Css kodlarını blogumuzda ki Css kodlarınına eklemeye.. Aşağıdaki kodları blogunuzun Css kodlarının en altına kopyalayın.

/* FeedBack Butonu */

#feedbackright img {
border:0px;
float:right;
position:fixed;
right:-10px;
top:160px;
}

#feedbackright img:hover {
right:-5px;
}

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

3. Feedback butonunun css kodlarınıda ekledikten sonra sıra blogumuzun Html kod bölümünde yapacağımız düzenlemeye... Blogunuzun Html kodları arasında

<div id='wrapper'> veya <div id='outer-wrapper'>

kodlarını aratın. Eğer bu kodlar temanızda bulunmuyorsa Header div kodunun hemen üstüne aşağıdaki kodu kopyalayın.

<div id='feedbackright'>
<a href='açılmasını istediğiniz sayfanın bağlantısı' id='websayfa' target='blank'>
<img src='http://tinyurl.com/dldzh5'/>
</a>
</div>

4. Yukarıdaki kodda feedback butonunu değiştirmek için http://tinyurl.com/dldzh5 bağlanısının yerine kendi istediğiniz resmin bağlantısını verebilirsiniz.

Bu anlatımı yaparken şurada bulunan "Blogger'de Sağ Tarafa Feedback Butonu Yapalım" makalesinden yararlanılmıştır.

Soru/Öneri/Görüşlerinizi bu yazıya yorum yaparak veya iletişim formundan iletebilirsiniz!..

ColorBox Blogger Eklentisi - LightBox Klonu Bölüm 2

Gönderen TeknoMobi | Çarşamba, Nisan 08, 2009 | Comments

ColorBox uygulamasının anlatımını yaptığım ilk bölümde de bahsettiğim gibi biraz detaylı anlatım yaptım. Blogger'e yeni geçiş yapmış blogcu arkadaşlar için daha anlaşılır olması için detaylı anlatımın daha yararlı olacağını düşündüm. ColorBox uygulamasının ilk Demo (Demo 1) örneğinin uygulanış biçimini ilk bölümde anlattıktan sonra sırasıyla diğer demoların anlatımlarını yapalım.

Demo 2 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<!--[if IE]>

<![endif]-->

$(document).ready(function(){

$.fn.colorbox.settings.bgOpacity = '0.5';

$('.resim').colorbox();

$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});

$('#flash').colorbox({contentAjax:'../content/flash.html'});

$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});

$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});

});

</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İl bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 3 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<!--[if IE]>

<![endif]-->

$(document).ready(function(){

$('.resim').colorbox();

$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});

$('#flash').colorbox({contentAjax:'../content/flash.html'});

$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true}); $('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});

});

</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 4 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<!--[if IE]>

<![endif]-->

$(document).ready(function(){

$.fn.colorbox.settings.transition = 'elastic';

$.fn.colorbox.settings.bgOpacity = '0.8';

$.fn.colorbox.settings.contentCurrent = '({current}/{total})';

$('.resim').colorbox();

$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});

$('#flash').colorbox({contentAjax:'../content/flash.html'});

$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});

$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});

});

</script>

ColorBox uygulaması bütün tarayıcılarda sorunsuz çalışmaktadır. Güle güle kullanın. Bloguma destek olmak istiyorsanız sidebarda bulunan Paypal Bağış butonunu kullanarak bağışta bulunabilir. Veya blogunuzda bağlantı kutularınıza (30x30 px) aşağıdaki kodları ekleyebilirsiniz...