TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

ajax etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

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

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

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

Gönderen TeknoMobi | Salı, Nisan 07, 2009 | Comments

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.

<!--[if IE]>

<![endif]-->

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

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

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

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.

MultiBox Blogger Entegrasyonu Ders 7

Gönderen TeknoMobi | Pazartesi, Ocak 26, 2009 | 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

Gönderen TeknoMobi | Cumartesi, Ocak 24, 2009 | 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&id=v40349578&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

Gönderen TeknoMobi | Cuma, Ocak 16, 2009 | 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&related=1&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

Gönderen TeknoMobi | Perşembe, Ocak 01, 2009 | 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&hl=en&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

Gönderen TeknoMobi | Cumartesi, Aralık 20, 2008 | 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&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

Gönderen TeknoMobi | Pazar, Kasım 30, 2008 | 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

Gönderen TeknoMobi | Cuma, Kasım 28, 2008 | 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'/>


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

MultiBox Blogger Entegrasyonu Ders 1 Hazırlayan TeknoMobi on Vimeo.

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

MultiBox İle Blogger'inizi Coşturun!..

Gönderen TeknoMobi | Salı, Kasım 25, 2008 | Comments

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz.
swf, flv gibi flash videoları
mov uzantılı quicktime videoları
wmv uzantılı windows media videoları
rv / rm / rmvb uzantılı real mediavideolarını
mp3 formatındakimizik dosyalarını
ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak 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..

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

İntenseDebate Yorum Formunu Blogger'e Entegre Edelim Video Anlatım

Gönderen TeknoMobi | Pazartesi, Kasım 24, 2008 | Comments

Buradaki yazımda yeni yorum formuna geçiş yaptığımı yazmıştım. İntenseDebate yorum formu gerçekten çok kullanışlı ve özellik olarakta harika... İntenseDebate'nin sitesindeki kurulum anlatımları beni pek tatmin etmedi. Acemi Türk blogger kullanıcıları için bir tane eğitim videosu hazırladım. Bu videoyu izleyerek İntense Debate yorum formunu blogunuza nasıl entegre edeceğinizi öğrenebilirsiniz.

DailyMotion : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Vimeo : İntenseDebate Yorum Formu Blogger Entegrasyon İşleminin Videosu

Bilgi için : İntenseDebate Ana Sayfa

Blogger Sağ Üst Köşeye Şehitler Ölmez Arması Yerleştirelim

Gönderen TeknoMobi | Cumartesi, Kasım 22, 2008 | Comments

Blogger alt yapısı kullandığımız bloglarımızın sağ üst köşesine aşağıdaki resimde gördüğünüz Şehitler Ölmez Vatan Bölünmez armasını yerleştirelim. Daha önce sol üst köşeye Türk Bayrağımızı yerleştirmeyi değişik bloglar yer vermişti. Türk Bayrağını yerleştirirken CSS kodlarına ekleme yapmamız gerekiyordu. Gerçi zor değil ama acemi kullanıcılar yerleşimde hatalar yapabiliyorlardı.

Şehitler Ölmez Vatan Bölünmez armasını yerleştiriken sizlere kolaylık olması için javascript kod dosyası hazırladım. Şimdi armamızı blogumuza nasıl yerleştireceğimizi anlatayım.

Öncelikle her türlü soruna karşı Yerleşim > HTML Düzenle diyerek Widget Şablonlarını Genişlet diyoruz. Ardından Tam Şablonu Yükle diyerek şablonumuzun yedeğini alıyoruz.

Ardından şablonumuzun en alt kısmına giderek </body> ve </html> kolarının arasına aşağıdaki kodu yerleştiriyoruz. Kodu nereye yerleştireceğinizi aşağıdaki resimden görebilirsiniz.

<script language='javascript' src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/sehitlerolmezarmasi.js' type='text/javascript'/><noscript><a href='http://teknomobi.blogspot.com/'>TeknoMobi</a></noscript>

Ardından şablonumuzu kaydedip kontrol ediyoruz. İlk kontrolde görünmeyebilir. ikinci kere sayfayı yenilediğinizde artık Şehitler Ölmez Vatan Bölünmez arması Blogger blogumuzda görünecektir.

Soru / Görüş / İstek ve Önerilerinizi yorum yaparak veya iletişim formunu kullanarak iletebilirsiniz.Bu arada Blogger için çok hoş bir yazı dizisi hazırlıyorum. Örnek olarak aşağıdaki Ceza ft. Doa - Müziğin Doası yazısına tıklayın

Ceza ft. Doa - Müziğin Doası

Müziğin Doası

25 Kasım 2008 Güncelleme Notu : Şehitler Ölmez Vatan Bölünmez Armasının blogunuza ekleyeceğiniz kod iyileştirilmiş olarak yenileniştir. Eğer daha önce verdiğim kodları yerleştirdiyseniz onların yerine yukarıda verdiğim yeni kodları yerleştirin.

İntense Debate Yorum Formuna Geçiş Yaptım

Gönderen TeknoMobi | Pazartesi, Kasım 17, 2008 | Comments

Blogger kullanıcılarının çoğu Wordpress bloglarındaki yorum formlarıda iç geçirerek bakıyorlar. Keşke bloggerde de wordpress tarzı yorum formu kullanabilsek diyenlerin sayısı bir hayli fazladır sanırım. Google yakın zamanda blogger yorum formlarını Aşağı Katıştırılmış olarak draft üzerinden kullanıma sunmuştu. Bende aşağı katışık yorum formunu kullanıyordum. Daha önce başka bir blog üzerinde İntense Debate'nin yorum formunu test etmiştim. Hatta Javascript kodları üzzerinde oynama yaparak Türkçe çevirisinide yaptım fakat çevirinin aktif olabilmesi için İntense Debate'nin oanyı gerekiyor. İntense Debate'nin sayfasında henüz diğer diller ile ilgili bir çalışmalarının olmadığını okudum. Sanırım sistemi tam olarak çalışır hale getirdikten sonra çeviri işine el atacaklar.

Blog Wolkanca İntense Debate ile ilgili güzel bir yazı yazmış. Tabi Wolkanca wordpress altyapısını kullandığı için wordpress ile ilgili bilgi vermiş.

Bende yakında İntense Debate yorumlama sisteminin bloggerde kullanımı ile ilgili beğeneceğiniz bir yazı dizisi ile karşınızda olacağım. Tabi önce başka bir yazı dizisi hazırlıyorum. Özellikle Blogger kullanıcısı olan arkadaşların blogumu RSS bağlantısından takip etmesinde yarar var...

Bilgi için : intensedebate

İntense Debate Yorum Formu

Bloggerde Yazı Altına Sosyal İkon Yerleştirme

Gönderen TeknoMobi | Cuma, Ekim 17, 2008 | Comments

Daha önce yabancı bir blog yazarı (Sosyal ikon) scriptinin bloggerde nasıl çalıştırılacağını anlatmıştı. Benim anlatacağım yöntem çok daha basit diyebilirim. Bu yazı altında sosyal ikonda ne oluyor diyenler yazılarımın altındaki imleme sitelerine direk bağlantı ikonları koyduğunu görecekler. Sosyal imleme sitelerinin ikonlarının yazı altına nasıl yerleştirildiğini yazımın sonunda sizlerde kolaylıkla gerçekleştirebileceksiniz.

Diğer Blogger 1999 Ağustos'unda San Fransisko'da Pyra Labs adında ufak bir şirket olarak kuruldu.blogger kullanıcılarınında yararlanabilmesi ve kendilerine göre nasıl özelleştirebileceklerini elimden geldiğince anlatacağım.

1. Öncelikle buradaki kodları Notepad ++ ile veya başka bir metin editörü ile açıyoruz. Ctrl+F tuşlarına basarak arama kutusunu açıyoruz. Kodların içinde teknomobi.blogspot.com yazan yerlere aynı şekilde kendi blogunuzun adresini yazıyorsunuz. Bunu kolayca yapmak için hepsini değiştir diyebilirsiniz.

2. Ardından TeknoMobi diye arama yaptırıyoruz. Kodlardan da farkedeceğiniz gibi title etiketinin karşılığı olarak TeknoMobi yazdım. Bu benim blogumun başlığı sizde kendiniz buraya istediğiniz başlığı yazabilirsiniz.

3. İlk iki aşamayı tamamladıktan sonra Ctrl+S yaparak kaydediyoruz.

4. Şimdi temamızda gerekli yere kodlarımızı entegre edeceğiz. Temamızda Yerleşim - HTML Düzenle - Widget genişlet diyoruz. Tabi ki öncelikle temamızın yedeğini alıyoruz.

5. Ctrl+F yaparak <data:post.body/> kodunu arattırıyoruz ve hemen altına üçüncü aşamada hazırladığımız kodları yapıştırıyoruz. Temamızı kaydetmeden önce önizleme yaparak işlemleri doğru yapıp yapmadığınızdan emin olabilirsiniz.

Acemi kullanıcıların javascript dosyasıyla uğraşmamaları için kendi googlepages sayfama yükledim. İsteyen verdiğim kodların içindeki BaseTM.js dosyasını indirip kendi googlepages sayfalarına yükleyebilirler.

Blogger Css Dock Menu Tasarımı

Gönderen TeknoMobi | Salı, Eylül 23, 2008 | Comments

Evet yeni bir Ajax uygulamasının bloggere uyarlanması işlemiyle karşınızdayım. Önceki yazımızda köşeden açılan reklam yani pageear yapımını anlatmıştık. Bu yazımızda ise Css Dock Menü'nün blogger alt yapısında nasıl kullanılabileceğini uygulamalı olarak anlatacağız. Css Dock Menünün ne olduğunu veya nasıl göründüğünü merak ediyorsanız burayı ziyaret edin!..

1. Öncelikle buradan üzerinde çalışacağımız dosyaları indirelim. Dosyayı indidikten sonra images klasörü içindeki resimlerin hepsini herhangi bir resim barındırma sitesine veya googlepagesinize yükleyin.

2. Ardından stlye dosyasını Notepad ++ ile veya herhangi bir metin editörü ile açarak url(images/main-bg.gif)şeklinde olan yerlere yüklediğiniz resim dosyasının linkini kopyalayın. Örnek olarak url(http:www.test.googlepages.com/images/main-bg.gif) vb. gibi... Resim linklerini kpyaladıktan sonra dosyayı kaydedin.

3. Şimdi stlye.css , iepngfix , interface.js , jquery.js dosyalarını googlepagesinize veya alternatif bir siteye yükleyin.

4. Artık blogumuza entegre işlemine geçebiliriz. Şimdi HTML düzenleme moduna geçiyoruz. Öncelikle herhangi bir sorunla karşılaşmamak için temamızın bir yedeğini alıyoruz. Şablonu genişlet diyerek işlemimize başlayalım.

5. <head> kodunun hemen altına

<script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/jquery.js' type='text/javascript'/> <script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/interface.js' type='text/javascript'/> <link href='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/style.css' rel='stylesheet' type='text/css'/>

<style>

kodunu kopyalıyoruz. Yukarıdaki kod içindeki dosya bağlantılarını kendi yüklediğimiz dosyaların bağlantıları ile değiştiriyoruz.

6. <body> kodunun hemen altına bu kodu kopyalıyoruz. Burası işlemlerimizin son aşamasıydı artık buradaki ikonları ve bağlantıları kendi isteğinize göre düzenleyebilirsiniz. Temanızı kaydetmeden önce önizleme yaparak işlemleri doğru yapıp yapmadığınızdan emin olabilirsiniz. Her temada aynı düzende görünmeyebilir.

Css Dock Menünün bloggere uygulanması biraz zahmetli ama yine de çok zor değil takıldığınız bir yer olduğunda yorum yaparak sorununuzu / isteğinizi açıkça belirtirseniz elimden geldiğince yardımcı olmaya çalışırım.

Yazan : TeknoMobi Editörü
Not : Eğer bu yazıyı kendi siteniz veya blogunuzda yayınlamak isterseniz yazınızın altında TeknoMobi ve yazının tam linkini vermelisiniz.

Blogger için Pageear Hazırlama - Köşeden Açılan Reklam

Gönderen TeknoMobi | Pazartesi, Eylül 08, 2008 | Comments

Daha önce Harun Güven'in (Hrn) blogunda yayınladığı pageearı kullanıyordum. Efekt olarak göze çok hoş gelen bu eklenti sayesinde blogunuzun sağ üst köşesinin sayfa yaprağı gibi açılmasını sağlıyoruz, Pageear'dan eklenti diye bahsettim ama aslında blogumuzda ufak bir javascript kodu entegre ediyoruz. Şimdi gelelim bu yazıyı neden kaleme aldığıma.. Hrn blogunda anlattıklarını sorunsuz yapmıştım. Hatta blogunda ve BloggerDestek sitesinde yazdığı yazılarda verdiği JavaScript Kodunu indirmede sorun yaşadığım içinde .js kodunu bloguna entegre eden Taytanik'ten rica ettim oda sağolsun beni kırmadı ve js dosyasını gönderdi. Bende bloguma entegre ettim ve bir kaç gün öncesine kadarda sorunsuz kullanıyordum. Ne olduysa pageear açılmamaya başladı. Sorunun nereden kaynaklandığını araştırırken gördüm ki .js kodlarının içinde .swf dosyalarının yüklendiği sitede sorun var. Bende pagearı kendim düzenlemeye daha doğrusu bloggere entegre etmeye çalıştım. Bu çalışmamda Hrn'un yazısından öğrendiklerimin çok faydası oldu.

Şimdi gelelim Blogger'de Pageear'ın (PagePeel) efektini nasıl vereceğimize öncelikle buradan bize gerekli düzenlemeleri yapacağımız dosyaları indirelim. Ardıdan klasörün içindeki pageear.js dosyasını herhangi bir metin editörü ile açalım tavsiyem Notepad ++ dır. Tabi siz istediğinizi kullanbilirsiniz. açtığınız pageear.js dosyasında var pagearSmallImg = yazan satırdaki resim linki 100x100 px boyutlarında köşe açılmadan önceki resmimiz. var pagearBigImg = ise köşe açılınca görünecek olan 500x500 px boyutundaki büyük resmimiz. Ben sizler için şablon hazırladım ve bir sunucuya yükledim. Siz isteğinize göre düzenleyip pageear.js içindeki linkleri değiştirerek kendi resimlerinizin görünmesini sağlayabilirsiniz.

Köşe açıldığında gidilmesini istediğimiz linki değiştirmek için ise yine pageear.js dosyasında var jumpTo = satırındaki bağlantı linkini değiştiriyoruz.

Artık pageear.js dosyamızı hazırladık. Şimdi yapmanız gereken pageear.js ve AC_OETags.js dosyalarını googlepages gibi herhangi bir barındırma sitesine yüklemek. Googlepages'e alternatif olarak Weebly'i de kullanabilirsiniz.

Şimdi ise hazırladığımız pageear.js dosyalarını blogumuza kod ekleyerek çağırmalıyız. HTML düzenleme moduna geçerek şablonu genişlet diyoruz Tabi öncelikle temazını yedeğini almayı unutmayın. Ardından <title><data:blog.pageTitle/></title> kodunu ctrl+f ile aratarak hemen altına


kodlarını yapıştın.

En son olarak ise </div></div>  kodunun hemen altına veya </body> kodunun hemen üstüne
<script language='javascript' src='http://www.weebly.com/uploads/1/1/4/2/1142610/ac_oetags.js'/>
<script src='http://www.weebly.com/uploads/1/1/4/2/1142610/pageear.js' type='text/javascript'/>

<script type='text/javascript'>
writeObjects();
</script>

kodunu yapıştırın. Artık işlemlerimiz bitti şablonu kaydetmeden önce önizleme yaparak doğru düzenlediğinize emin olun.

Yazı sizlere biraz karışık gelebilir ama korkmayın hiçbir zorluğu yok. Yapamadığınız bir yer veya anlamadığınız bir yer olursa yorum yazarak veya iletişim formunu kullanarak sorununuzu / isteğinizi açıkça yazabilirsiniz.

Yazan : TeknoMobi Editörü

Not : Eğer bu yazıyı kendi sitenizde veya blogunuzda yayınlamak isterseniz yazınızın altında kaynak olarak TeknoMobi ve sayfanın tam linkini vermelisiniz.