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

Blogger Meta Tag Bilgilerini Sadece Ana Sayfada Gösterme

| | Comments

Blogger alt yapısını kullandığınız blogunuzda meta tag bilgilerini sadece ana sayfada göstermek isterseniz yapmanız gereken Description ve KEYWORDS meta bilgilerini ana sayfada tanımlamaktır. Bunu yapabilmek için özel bir kod kullanıyoruz. Eğer blogunuza dah önce meta bilgileri eklediyseniz aşağıda verdiğim yönteme göre yeniden düzenleyebilirsiniz.

Bir Blog'da Olması Gereken 10 Özellik - Blogger

| | Comments

Türkiye'de blog yazarları arasında en fazla tanınanlardan bir tanesi olan Sunipeyk iki gün önce çok güzel bir yazı hazırlamış. Yazının başlığı "Bir blog'da olması gereken 10 özellik". Bu yazıyı ilk olarak FriendFeed üzerinde gördüm ve hemen yazıyı okudum.

Sunipeyk wordpress blogları için hazırlamış bu yazıyı... FriendFeed'de bu yazı ile ilgili yapılan yorumlarda Blogger için de bu tür bir yazıya ihtiyaç duyulduğunu gördüm. Blogger ile ilgili belirli birdeneyim ve eklenti bilgisine sahip olmamdan yola çıkarak Sunipeyk'in hazırladığı yazının Blogger versiyonunu sizler ile paylaşmak istiyorum.

Blogger Yazı Başlıklarını Özelleştirme

| | Comments

Bu yazımda Blogger kullanıcıları için ufak bir css ipucu vereceğim. Blogunuz da yayınladığınız yazıların başlıklarını istediğiniz gibi özelleştirebilirsiniz. Tamamını büyük harf - küçük harf veya sadece ilk harflerinin büyük olmasını sağlayabilirsiniz. Bu işlemleri nasıl mı yapacağız? Aşama aşama anlatayım o zaman!..

İlk olarak bloğunuzda Css kodlarınız arasında yazı başlığı ile ilgili kod bölümünü tespit etmeniz gerekmektedir. Nasıl mı tespit edeceğiz diye sorarsanız bunun bir kaç değişik yöntemi var. Genellikle temalarda yazı başlığı ile ilgili Css kodu aşağıdaki kod öbekleri gibi oluyor;

Blogger'de Alınan Hataların Genel Çözümü

| | Comments

Blogger altyapısı ile yayın yapan arkadaşların en fazla dert ettiği konu Blogger'e yeni şablon yüklerken aldıkları bx- diye başlayan hatalar oluyor.

Bu hatalara karşı alınabilecek tedbir ilk olarak şablonunuzun yedeğini almayı unutmamanızdır. Herhangi bir hata durumunda sorunun nereden kaynaklandığını bulabilmeniz için elinizin altında şablonun bir yedeğinin bulunması işinizi kolaylaştıracaktır.

Öncelikle Blogger'de şablon hatasına neden olan sebeplerden bir tanesi şablonu düzenlerken kodlarda ufak eksiklikler yapmak veya yanlışlıkla silmek oluyor. Bu sorun ile karşılaşmamak için şablonunuzu düzenledikten sonra kaydetmeden önce önizleme yaparsanız hatanın nereden kaynaklandığı şablon penceresinin hemen üstünde kırmızı olarak yazacaktır. Böylelikle hatanın neden kaynaklandığını görüp kaydetmeden müdahale şansınız olacaktır.

SexyBookmarks v2 Blogger Eklentisi Entegrasyonu

| | 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.

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

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

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

| | Comments

colorbox blogger
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.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(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.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom.css' title='example' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(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.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom-ie.css' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(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>

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...

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...

<a href="http://www.teknomobi.net" target="_blank" title='TeknoMobi'><img src="http://i44.tinypic.com/2u56k9t.gif" border="0" alt="teknomobi"></a>

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

| | Comments

colorbox blogger
MultiBox uygulamasının Bloggger'e uyarlanması bayağı bir zamanımı almıştı. Uygulamayı bitirdikten sonra biraz mola verdim sayılır. Ama şimdi sizlere yeni ve çok beğeneceğiniz başka bir uygulamanın Blogger'e uyarlanmış halini vereceğim.

Öncelikle ColorBox uygulaması daha önce anlatımını yaptığım LightBox uygulamasının bir benzeri fakat hem görünüş hem de boyut açısından daha optimize bir uygulamadır.

ColorBox uygulamasının Blogger'de nasıl çalıştığını merak ediyorsanız aşağıda verdiğim demo adreslerinde ki resimlere tıklayabilirsiniz.

Demo 1 , Demo 2 , Demo 3 , Demo 4

Yukarıda verdiğim demo sayfaları benim blogger için hazırladığım  demo sayfalarıdır. ColorBox uygulamasının kendi demo sayfalarına buradaki sayfada bulunan view demosration bölümünden ulaşabilirsiniz.

Demoları incelediyseniz sırayla anlatımı yapmaya başlayayım.. Hangi demoyu beğendiyseniz aşağıda o demonun anlatımındaki kodları belirttiği şekilde blogunuza uygulayın. İlk anlatımı biraz detaylı olarak yapacağım diğer üç anlatımı biraz daha sade yapacağım.

Demo 1 Uygulanış Biçimi Anlatımı
  • İlk olarak Temamızda Yerleşim - HTML'yi Düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Ardından Widget Şablonlarını Genişlet diyoruz.
  • Şimdi temamızda </head> kodunu aratıyoruz ve bu kodun hemen üstüne aşağıdaki kodu yerleştiriyoruz.

<link href='http://tm52.110mb.com/colorbox/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://tm52.110mb.com/colorbox/example1/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example1/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://tm52.110mb.com/colorbox/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Resim {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>

Üstteki kodu yerleştirdikten sonra şablonumuzu kaydediyoruz. Tema ile ilgili işlem bu kadar artık yazılarımız üzerinde düzenleme yapacağız.
  • Yazımızı yazdıktan sonra oluştur bölümünün solunda bulunan HTML'yi Düzenle kısmına girerek yazımızdaki resimlerin kodlarını görüyoruz. Eğer yazınıza resim eklediyseniz resmin kodu aşağıdaki gibi olacaktır.
<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eklediğimiz resimin ColorBox penceresi ile açılması için yukarıdaki koda class="resim" etiketini ekliyoruz. Sonuçta resim kodumuz şu şekilde olacak.

<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" class="resim" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eğer birden fazla resim eklediyseniz ve bunların tek pencerede peş peşe tıklama ile gösterilmesini istiyorsanız(Demo 1 sayfasında alttaki üç resim). Yukarıda eklediğimiz etikete ek olarak birde rel="ailem" şeklinde bir etiket daha ekliyoruz. Grup olarak göstereceğimiz reismlerin kodlarıda şöyle oluyor...

<a href="http://i44.tinypic.com/ve6802.jpg" imageanchor="1" class="resim" rel="ailem" title="Me and my grandfather on the Ohoopee." style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/ve6802.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/htsjrd.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as a child" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/htsjrd.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/53r4w8.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as an adult" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="http://i44.tinypic.com/53r4w8.jpg" width="96" /></a>

  • Blogumuzda verdiğimiz herhangi bir bağlantının ColorBox penceresinde açılmasını istiyorsak aşağıdaki kodu kullanıyoruz.

<a id="websayfa" href="http://www.google.com.tr/">Web Sayfası - Iframed Content</a>

Bu bölümde ilk demonun anlatımına yer verdim. Bir sonraki yazımda diğer demoların uygulanış biçimlerine yer vereceğim.

Blogger Yorumlarını Renklendirme

| | Comments

Blogger altyapısı kullanan blogunuzda yazdığınız yazılara yapılan yorumları daha göz alıcı yapmak istermisiniz. Cevabınız evet ise şablonumuzun kodlarında ufak bir değişiklik yapmamız gerekiyor... Yapılan yorumları nasıl renklendireceğimizi anlatayım. Aşağıdaki ilk resim yorumların düzenlenlenmeden önceki hali, ikinci resim ise düzenleme yapıldıktan sonraki halidir... Resimleri büyütmek için üzerlerine tıklayın!..

blogger,blogger yorum formu, yorum formu renklendirmeblogger,blogger yorum formu, yorum formu renklendirme



  1. İlk olarak Yerleşim - HTML Düzenle kısmına geçelim.
  2. Tam Şablonu Yükle diyerek temamızın bir yedeğini alalım.
  3. Widgetları genişlet kutusuna tıklayalım.
  4. Şimdi CTRL + F yaparak temamızın kodları arasında aşağıda verdiğim kodları bulalım.

    <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>
  5. Yukarıda vediğim kodları aşağıdaki kodlar ile değiştirelim.

    <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <b:if cond='data:comment.author == data:post.author'> <p> <div style='color:#99FF00; background-color:#FF6633;padding:5px;'> <data:comment.body/> </div> </p> <b:else/> <p><data:comment.body/></p> </b:if> </b:if> </dd>
  6. Artık gerekli düzenleyi bitirdik. Şimdi temamızı kaydediyoruz ve kontrol ediyoruz.

Yorumların arkaplanını ve yazı rengini kendi isteğinize göre düzenlemek için beşinci aşamada verdiğim kodların arasındaki color:#99FF00; renk kodu yazı rengi, color:#FF6633; renk kodu da arkaplan rengidir. istediğiniz gibi renklendirme yapabilirsiniz... Ben belirgin olsun diye arkaplanı turuncu yazı renginide parlak yeşil olarak belirledim. Gerekli düzenlemeyi kendi blogunuzun renk uyumuna göre değiştirebilirsiniz!..

Blogger izleyiciler Eklentisi Güncellemesi

| | Comments

Son birkaç gündür çoğu kişi Blogger izleyiciler kısmında takip edenlerinin sayısında düşüş olduğundan şikayet ediyordu. Bunun neden kaynaklandığı nihayet ortaya çıktı. Google yine boş durmamış Blogger için izleyiciler eklentisini Google Friend Connect ile senkronize etmeye başladı. Tabi şuan için tam senkronlama tam gerçekleşmemiş gibi görünsede bir müddet sonra tam olarak rayına oturacaktır.


Daha önce çok basit bir şekilde görülen Blogger izleyiciler eklensiti şimdi görsel olarak biraz daha iyileştirilmiş olarak karşımıza çıktı.

Artık beğendiğiniz blogları Google Hesabınız, AOL Hesabınız, Yahoo Hesabınız ve Open ID hesabınız ile takip edebilirsiniz...



Yeni izleyiciler eklentisinin görünümü aşağıdaki gibi!..

Resimleri büyütmek için üzerlerine tıklayın!..

İkinci resimde görülende sayfa öğlerinden izleyiciler eklentisini aktif ettiğinizde sizlere sunulan kişiselleştirme ayarlarının görünümüdür. Hadi hayırlısı bakalım... Google Blogger'e başka neler ekleyecek...

Blogger izleyiciler eklentisinin kullanım videosu
Blogger izleyiciler eklentisinin kullanım videosu

Bilgi için : Blogger Buzz

Blogger'e Monetize Özelliği Eklendi

| | Comments

Google son hız güncellemelerine devam ediyor. Google son günlerde bütün servislerinde gözle görülür iyileştirmelere gittiğini yazmıştım. Şimdide Blogger'de daha önce Yerleşim - Sayfa Öğeleri yolu ile eklenebilen Adsense Reklam yayınlama özelliği biraz daha düzene sokulmuş gibi görünüyor.

Blogger'de Yerleşim sekmesine geldiğimizde en sağa Monetize yazısı eklenmiş. Monetize tuşuna bastığımızda aşağıdaki gibi bir ekran ile karşılaşıyoruz.

 
Resmi büyütmek için üzerine tıklayın!..

  • İlk seçenek kenar çubuğumda ve kayıtlarımda reklam göster seçeneği... Google tarafından önerilen de bu seçenek
  • İkinci seçenekte ise sadece kenar çubuğunda reklam göster seçeneği
  • Üçüncü seçenekte ise sadece kayıtlarımda reklam göster seçeneği

Üstteki seçeneklerden herhangi birini seçtikten sonra aşağıdaki gibi bir ekran ile karşılaşıyoruz.
 
Resmi büyütmek için üzerine tıklayın!..

  • Burada da ilk seçenek henüz Adsense hesabı olmayanlar için 
  • İkinci seçenek ise Mevcut Adsense hesabı olup blogunda reklam yayınlamak isteyenler bu seçeneği kullanmalılar. Bu seçenek kodlar ile uğraşmak istemeyenler için kolaylık sağlayacak cinsten...
 
Resmi büyütmek için üzerine tıklayın!..

Üstteki resimde de Adsense'ye ilk defa başvuracakların karşılaşacağı örnek ekran görüntüsü var.

Google Blogger'e yeni özellikler katmaya ve iyileştirmeler yapmaya devam ediyor. Ama bence ilk olarak Blogger için yapılması gereken Devamını oku özelliğini standart olarak sunulmasını sağlamak olmalı. Hadi Google Devamını Oku özelliğini standart hale getirde çoğu Blogger kullanıcısı rahatlasın!..

Blogger Yazı Gönderim Tarihi Yeniliği

| | Comments

Google bizleri şaşırtmaya devam ediyor. Bir yandan Gmail'e yeni özellikler eklenirken bir önceki yazımda belirttiğim Google Hesapları sayfasında yapılan yenilik...

Google bu arada Blogger kullanıcılarınıda unutmamış. Blogger'de yazı yayınlarken sağ alt köşede bulunan Kayıt Seçenekleri bölümünde ufak bir değişiklik yapılmış. Belki çoğu kişi bu değişikliği farketmeyebilir bile.

Blogger'de yapılan ufak değişiklik yazı gönderim tarihleri bölümü ile ilgili.. Daha önce sadece elle düzenlene bilen yazı gönderim tarihine şimdi de otomatik özellği eklenmiş. Daha tam olarak Türkçeleştirilmediğinde sanırım sadece Draft Blogger kullanıcıları için açık sanırım. Ben bütün bloglarımı Drafttan kullandığım için normal Blogger ekranlarına da bu özellik geldi mi bilmiyorum.

 
Resmi büyütmek için üzerine tıklayın!..


Google bu özelliği büyük ihtimalle taslak olarak kaydedip sonradan yayınladığımız yazılarda meydana gelen taslağın kayıt edildiği zamandaki tarih ile yayınlaması olarak düşünüyorum. Bence Google Blogger için yerinde bir iyileştirme yaptı.

MultiBox Blogger Entegrasyonu Ders 7

| | Comments

MultiBox Blogger Entegrasyonu derslerimizin sonuncusuna gelmiş bulunuyoruz. Bu dersimizde kendi bilgisayarımızdan herhangi bir hosta yüklediğiniz mp3, flv,swf,mov,wmv,rmvb dosyalarının ve verdiğiniz linkin ziyaretçi blogunuzdan ayrılmadan ziyaret etmesini sağlayabileceğiniz kodları vereceğim...

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için Hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

<a href='files/curly.flv' rel='width:400,height:300' id='flv' class='mb' title='Flv'>flv oynatımı</a>
<div class='multiBoxDesc flv'>flv oynatımı</div>

<a href='files/music.mp3' rel='' id='mp3' class='mb' title='Music'>mp3 oynatımı</a>
<div class='multiBoxDesc mp3'>mp3 oynatımı</div>

<a href='files/curly.wmv' rel='width:400,height:350' id='wmv' class='mb' title='Movie'>wmv oynatımı</a>
<div class='multiBoxDesc wmv'>wmv oynatımı</div>


<a href='files/curly.mov' rel='width:400,height:310' id='mov' class='mb' title='Mov'>mov oynatımı</a>
<div class='multiBoxDesc mov'>mov oynatımı</div>

<a href='files/curly.rmvb' rel='width:400,height:300' id='rmvb' class='mb' title='Movie'>real oynatımı</a>
<div class='multiBoxDesc rmvb'>real video oynatımı</div>

<a href='blank.htm' rel='width:400,height:300' id='mb9' class='mb' title='iFrame'>HTML Sayfası</a>
<div class='multiBoxDesc mb9'>html</div>

MultiBox'u Blogger'e %100 entegre eden ilk kişi benim inşallah yararını görürsünüz. Takıldığınız yerleri yorumlarda belirtirseniz elimden geldiğince yardımcı olmaya çalışırım. Yorumlarınızı ve desteklerinizi bekliyorum. Blogumu takip ederseniz çok yakında yeni bir sürpriz ile karşınızda olacağım!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6

MultiBox Blogger Entegrasyonu Ders 6

| | Comments

MultiBox Blogger Entegrasyonu Ders 5'te Dailymotion videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğini anlatmıştım. Bu yazımda ise Yahoo Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Yahoo Videolarını MultiBox İle Blogger'e Entegre Edelim!.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda Yahoo videolarının yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.4&amp;id=v40349578&amp;vid=2043149" id="Yahoo Video" rev="width:388 height:323 scrolling:no caption:`Beautiful Liar`" title="Beyonce feat Shakira">Yahoo Video Oynatımı</a>
<div class="multiBoxDesc Yahoo Video">
Beautiful Liar</div>

Ardından hangi Yahoo Videosunu göstermek istiyorsanız videonun linkinde aşağıdaki resimde gösterilen renklere göre yukarıdaki kodda aynı renkli olan yerdeki kodların yerine yerleştirin.

 
Resmi büyütmek için üzerine tıklayın!..

Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Yahoo Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın videonun efektli halini önizlemede göremezsiniz.

MultiBox Blogger Entegrasyonu derslerinde son bir tane yazım daha kaldı. Son yazıda görüşmek üzere yorumlarınızı eksik etmeyin...

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 5

| | Comments

MultiBox Blogger Entegrasyonu Ders 4'te Google videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. Bu yazımda ise Dailymotion Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://www.dailymotion.com/swf/x3yqdo&amp;related=1&amp;canvas=medium" id="Dailymotion Video" rev="width:480 height:348 scrolling:no caption:`Shakira`" title="Shakira"> Dailymotion Video Oynatımı</a>
<div class="multiBoxDesc Dailymotion Video">
Ojos Asi</div>

Ardından hangi Dailymotion Videosunu göstermek istiyorsanız videonun linkinde /video/ ile ilk _ işaretinden önceki kısımı kopyalayıp (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..

yukarıda verdiğim kodlarda swf/ ile & arasına yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Dailymotion Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 4

| | Comments

MultiBox Blogger Entegrasyonu Ders 3'te YouTube videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. O yazımın sonunda bir sonraki dersin Google Video olacağını belirtmiştim. Bu yazımda Google Video üzerinde bulunan videoların MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukardaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://video.google.com/googleplayer.swf?docId=97340551995132925&amp;hl=en&amp;playerMode=mini" id="Google Video" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`" title="Shakira">Google Video Oynatımı</a>
<div class="multiBoxDesc Google Video">
Hips Don't Lie Bamboo Fifa 2006 Live</div>

Ardından hangi Google Videosunu göstermek istiyorsanız videonun linkinde docid=- iden sonra ilk & işaretine kadar olan kısmı kopyalayıp [eksi işaretini almayın] (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..


yukarıda verdiğim kodlarda docid= den sonraya yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Hips Don't Lie Bamboo Fifa 2006 Live yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Google Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 3

| | Comments

Uzun bir bayram tatilinden sonra yazı dizisine devam ediyorum. Bu seferki anlatımımızda multibox uygulaması ile online video izlenebilen sitelerdeki videoları kendi blogumuz içinde açılır pencere şeklinde nasıl oynatacağımızı göstereceğim.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda youtube videolarını yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://youtube.com/v/Pvwy8MdUB64&amp;hl=en" id="YouTube Video" rev="width:425 height:344 scrolling:no caption:`Kat DeLuna - Run the Show`" title="Kat Deluna">YouTube Video Oynatımı Örneği için Buraya Tıklayın</a>
<div class="multiBoxDesc YouTube Video">
Kat DeLuna - Run the Show </div>

Ardından hangi youtube videosunu göstermek istiyorsanız videonun linkinde v= den sonraki kısımı(Alttaki resimde kırmızı ile belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..

kopyalayıp yukarıda verdiğim kodda v/ dan sonraki Pvwy8MdUB64 nin yerine kopyalayın. Artık yazınızı yayınlayabilirsiniz. Önizleme de efektli halini göremezsiniz.

Bir sonraki yazımda Goole Videolarının entegre edilme işlemini anlatacağım... Yorumlarınızı esirgemeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 2

| | Comments

Buradaki yazımda MultiBox uygulamasını blogger şablonumuza entegre etmiştik. Artık sıra MultiBox uygulamasının nimetlerinden yazılarımızda nasıl faydalanacağımızı anlatmaya geldi. İkinci dersimizde yazılarımıza eklediğimiz resimleri ziyaretçilerin blogunuzdan hiç ayrılmadan nasıl görebileceğini anlatacağım. Öncelikle aşağıdaki verdiğim demo sayfasında bulunan resmin üzerine tıklayarak ne demek istediğimi görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Şimdi ilk dersimizde ki gibi aşama aşama anlatımımızı yapalım.

YÖNTEM BİR

1. Aşama

Blogger'de yazılarımıza ekleyeceğiniz resimleri öncelikle Photobucket veya Tinypic gibi web üzerinde resim barındıran sitelerelere yükleyin. Bloggerin kendi resim hostu lightbox ve türevlerine pek alışamadı.

2. Aşama

Yayınlayacağımız yazıya resmimizi ekleyelim. Ardından HTML'yi düzenle seçeneğine gelerek resmimizin kodunu bulalım.
Resmi büyütmek için üzerine tıklayın!..

Büyük ihtimalle aşağıdaki gibi bir kod olacaktır.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

3. Aşama

Yukarıdaki görmüş olduğunuz koda birkaç ekleme yapacağız. Yukarıdaki kodda yaptığımız değişiklikle aşağıda kırmızı renk ile gösterilmiştir.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" id="mb1" class="mb" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

4. Aşama

Resimin altına açıklama eklemek içinde aşağıdaki kodu ekliyoruz.

<div style="display: none;" class="multiBoxDesc mb1">Resim açıklamasını buraya giriyorsunuz.</div>

5. Aşama

Eğer bütün aşamaları doğru yaptıysanız yazınızın içindeki resme tıklanıldığında sayfanızdan ayrılmadan ziyaretçileriniz resimi büyük boyutta görebilirler. Bütün aşamalardan sonra elimizde aşağıdaki gibi bir kod olacak...

<a class="mb" href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Akyarlar Koyu Sahilinden Bir Gorunum.</div>

YÖNTEM İKİ

Eğer ben bu kadar uğraşmak istemiyorum veya tam olarak anlamadım diyorsanız. Biraz daha basitleştireyim sizler için...

Öncelikle resminizi tinypic veya başka bir yere yükleyin. Şimdi aşağıdaki kodu yazınızda istediğiniz yere yapıştırın.

<a class="mb" href="ResimLinki" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="ResimLinki" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Resim Açıklaması.</div>

Yüklediğiniz resmin direk linkini yukarıda kırmızı işaretli yerdeki Resim Linki yazılarının yerine yapıştırın. Resim açıklamasını da isteğinize göre girebilirsiniz.

MultiBox Giriş Yazısı, MultiBox Ders 1 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 1

| | Comments

Buradaki yazımda MultiBox ile ilgili bir giriş yazısı yayınlamıştım. Artık MultiBox uygulamasının anlatımına başlıyoruz. İlk yazımda anlatım yapmamıştım. Dediğim gibi onu giriş yazısı niyetine yayınlamıştım. MultiBox uygulamasının Blogger'e entegrasyon işlemi biraz zahmetli ve detaylı olduğundan tek bir yazıda değil bir kaç yazı halinde yayınlayacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Entegrasyon işlemimize aşama aşama başlayalım. İlk olarak temamızı entegrasyon işlemine hazır hale getirelim.

1. Aşama

İlk olarak Yerleşim - HTML Düzenle - Widget Şablonlarını Genişlet diyoruz. Ardından her ihtimale karşı Tam Şablonu Yükle diyerek Şablonumuzun bir tane yedeğini alıyoruz.

 

2. Aşama

Şimdi Ctrl+F yaparak şablonumuzda ]]></b:skin> kodunu aratıyoruz.


3. Aşama

Temamızda bulduğumuz ]]></b:skin> kodunun hemen altına aşağıdaki kodları yapıştırıyoruz.

<link href='http://dl.getdropbox.com/u/1704149/Mbox/css/multibox.css' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]><link rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Mbox/css/ie6.css" type="text/css" media="all" /><![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/overlay.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/multibox.js' type='text/javascript'/>

<style type='text/css'>

#htmlElement {
padding: 10px;
background-color: #000;
}

</style>

4. Aşama

Şimdi ise şablonumuzun en altına gidip </body> kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>


5. Aşama

Artık şablonumuzu kaydedip blogumuzu kontrol ediyoruz. Herhangi bir sorun yok ise bir sonraki yazımı bekliyorsunuz.

MultiBox uygulamasının bütün dosyalarını kendi hostumda barındırıyorum. Kodlar ve dosyaları yüklemek ile uğraşmanıza gerek kalmadı.

Aşağıdaki videoda anlatımını yaptığım aşamaların eğitim görseli... Kodları nereye nasıl yerleştireceğinizi görsel olarak izleyebilirsiniz!. İster online olarak izleyin! İsterseniz de HD Çözünürlükteki xViD dosyasını bilgisayarına indirerek izleyin!..


Buradaki linke tıklayarak eğitim videosunun HD kalitesindeki avi dosyasını bilgisayarınıza indirebilirsiniz!..

Bir sonraki yazımda MultiBox uygulamasını yazılarımızda kullandığımız resimlerde, Mp3'lerde, Videolarda, Youtube - Google Video - DailyMotion - Yahoo Video - Vimeo - Msn SoapBox gibi sitelerdeki videoları kendi sitemizde görsel olarak nasıl kullanabileceğinizi tek tek ele alacağım.

MultiBox Giriş Yazısı , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7