Youtube Videolarını TV İçerisinden Göstermek

15:38:00 Add Comment

Blogger bloğunuzda Youtube Videolarını TV İçerisinden Göstermek için ne yapılmalı bunu anlatacağım.

Birçoğumuz bloğumuzda youtube kanalımızdaki videoları veya herhangi bir videoyu paylaşıyoruz. Direkt embed kodlarını yapıştırıp paylaştığımız zaman açıkçası bu çok şık durmuyor.

Ben blogger için youtube videolarına bir çerçeve eklemeye karar verdim. Bu çerçevede resim çerçevesi gibi olmasın, konuya uygun olsun diye videoyu bir televizyonun içerisinden göstermek istedim. Yani youtube videolarıma TV çerçevesi ekledim. Çok güzel olduğunu düşündüğüm için bunu da sizlerle paylaşmak istedim.


Bazı bloggerlar blog sayfalarında yaptıkları düzenlemeleri nedense bir sır gibi saklıyorlar ben bunu uygun görmüyorum. Sanki o eklentiler kendilerinde var diye bloglarına girip okuyacağız. Ben bloguma eklediğim güzel şeyleri sizlerle de paylaşmak istiyorum ki takipçileriminde temaları güzelleşsin. Youtube videolarını televizyon içinden göstermekte bunlardan biri. Anlatıma geçelim:

Blogger için Youtube videolarını TV içerisinden göstermek için

1. Blogger kumanda panelimizden Şablon-HTML'yi Düzenle yolunu takip ederek 
]]></b:skin> kodunu buluyoruz bu kodun üst satırına aşağıdaki CSS kodlarımızı yapıştırıyoruz.



2. Şablonumuzu kaydediyoruz.

3. Şimdi normal yazı sayfamızda yayın oluştururken bir video eklemek istedik bunun için aynı sayfada sol üstteki HTML butonuna basıyoruz ve aşağıdaki kodları yapıtırıyoruz. 



4. Evet blogger bloğunuza eklediğiniz youtube video televizyon içerisinden gösteriliyor. Tebrikler :) 

Blogger blog için youtube videolarını Televizyon içinden göstermek bu kadar basit. Olumsuz bir durum ve sorularınız varsa yorumla bildirin. İyi bloglamalar. Takipte kalın ;)

 Kaynak : Blog Bakkalı

Blogger Kopyalanan Yazıya Kaynak Eklemek

16:44:00 Add Comment
Eklentinin işlevi yine aynı sitenizden bir yazı kopyalandığında yazının sonuna otomatik kaynak kodu oluşur.Yazıyı çalan kişi başka bir yere yapıştırdığında yazı sonunda sitenizin adresi belirir.

Aşağıdaki kodu temanızda <head></head>  kodları arasına yerleştirin.

Bloggerda Kod Kutusu Ekleme

14:59:00 Add Comment

Kod kutusu: İçinde kodların olmuş olduğu kutuya denir ve programlamayla ilgilenen arkadaşlar bu kod kutularına çok sık ihtiyaç duymaktadırlar.

ÖNİZLEMESİ BU ŞEKİLDEDİR

1.Adım: Blogger Yönetim Paneline giriniz.
2.Adım: Şablona tıklayınız.
3.Adım: Özelleştir butonuna tıklayınız.
4.Adım: Gelişmiş linkine tıklayınız.
5.Adım: Css ekle butonuna tıklayıp aşağıdaki kodları boş kutucuğun içine yapıştırıp "Bloga Uygula" butonuna tıklayınız.

/* Code Box
----------------------------------------------- */

.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}

.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}
6.Adım: Artık aşağıdaki kodu normal sayfalarınızdaki "HTML" bölümüne tıklayarak yapıştırmanız gerekecektir ve "YOUR CODE" kısmına eklemek istediğiniz kodları yapıştırıp sayfayı kaydetmeniz gerekmektedir.
<div class="code">

YOUR CODE

</div>

Blogger Kategorileri Yan Yana Sıralamak

08:04:00 Add Comment

Tasarım açısından gayet güzel görünen ve fazla kategoriye sahip blog sahipleri için ideal bir eklenti.Bu işlemi ufak bir CSS kodu ile gerçekletirmemiz mümkün.

Yeni panelde, Kumdan Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını Genişlet kutucuğunu işaretleyerek aşağıdaki kodumuzu buluyoruz.
]]></b:skin>
Bulduğumuz kodun hemen üstüne aşağıdaki kodu ekleyiniz.

Kategorileme için "Bağlantı Listesi" gadgetını kullanıyorsanız aşağıdaki kodu:

#LinkList1 ul li{float: left;width: 45%;}
Eğer birden fazla Bağlantı Listesi gadgetı kullanıyorsanız. LinkList1 altı çizili bölüme gadgetın numarasını girmelisiniz.

Kategorileme için "Etiketler" gadgetını kullanıyorsanız aşağıdaki kodu:

#Label1 ul li{float: left;width: 45%;}
Eğer birden fazla Etiketler gadgetı kullanıyorsanız.Label1 altı çizili bölüme gadgetın numarasını girmelisiniz. 

Umarım işinize yarar.İyi bloglamalar...

Blogger Renkli Kategoriler Eklentisi

03:59:00 Add Comment
Merhaba Arkadaşlar Bugünde Sizlere Yeni Renkli Kategoriler Eklentisini Paylaşıyorum.
Yerleşim Bölümden İstediğiniz Yere Gadget Ekle Diyorsunuz
Daha Sonra HTML Javascript Tıklıyoruz Kodumuzu Yapıştırıyoruz.
<center><div class="widget-content">
<div id="main">






<a href="/search/label/programlar" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBlab26n6j_wlQOSoXACcdVi3MGoAiOMfBcnAU78M5m_2FBtWQmIwiQQIp8awsJJTteh6ZuYlVGqQ9g3Nm8z5lecXRT3nXyVDEuPgaLv1GS2k78nuWGg1ulqD_V6mnwGtXxAUHzkTH3DDb/s1600/programlar.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/internet" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHZ1apgPhFOnAL9lJpEeFKSunn1qmgioZ_i_39bH9DMB6Dcaq31KHpx99bLBkb2N7jgj40Ve8QkQWiri3nonRvSDkoJo7k1f6o40HKdnbkJuzV_ve6OJZYwPO_F_34sZmNHDyFmSAdzWN/s1600/internet.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/mobil" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJTVwDl5iH4yHKfXRF-KTcoDODb-L-lYeggvajfUXT7rNnmvH3VknCR-p-z0F1Uv1qtrf6NQcELDgCHBd0AuCdC7M0gzb363VPpJS9aslKITJ9V4Pm8-MtrPgwvKbKETaHzQvH9lCHL0x/s1600/mobil.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/oyunlar" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIy2NH38ystnTAZFwl70eXn82p4-ySN27yQrSuBpCbsxtcsjoZciEwpXrn8sQ7QHV47JJxmsmx8fexI1v0Uf9h6QNJYic3bb2b6Kd916wTfWOPdFa58fXdchZeJ4zkYS82LuGL6bKDrYj/s1600/oyun.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/yazilim" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HlZy88_vCP9Y7Z32fU6WEPOzCfs_VYoCCUz7iGXnoFmNgV_7MusDX5-_gehjwyCNQztwWNMG3vZD5MZVlhlDkgfzDZOzLsQcSvLeK7qw_98dvGichF-yBaHNJQysrKSTN93BkNAvf9-G/s1600/webyazilim.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/tanitim" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYlEtyOiETLD4rcsVXMChtO-X1RKXPyCbbm3D0Ix8FAV6JGI8Jo9NIlniiXhuMRXxOm5FfVVmehzGe3_cKelOuBKpFCmaZkz3eWKIrNiApYi5JVjXld1-fhCSmZyGuk8VuAmDIT18BUT5a/s1600/Tan%25C4%25B1t%25C4%25B1mlar.png" style="opacity: 0.4;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/tasarim" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpTT1WPJorIxl6BrP0D8zMsjOVAuu1TVrkB4CvezJu-RTzL5t6Rhuk9vKIZeqQ7mrdwu9TmGbiL93dJl0uJxeyGowyGa_iDyTjZasXiGLY1O9aa3FSPwse1dHdt5fn-R8g3PbOCcsm4M_z/s1600/tasarim.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/teknoloji" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3MJhCTbZoupfJ_mLuAy44-fMMIjr8dqKNnu_hc9n3kRVJwpK5m874x6ZI-UZM9XzMAM_TcuV8VGe5lfHbSYXtfSLDqVt8UnvvwDL-2-OpF4jUs7N4NuJXM1aSCRkFdI3Urt-qzzcf_CZ2/s1600/teknoloji.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


<a href="/search/label/wordpress" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkN6N-S6hZxMT9kahAQLtzH-x5gxczdtCXa5_Ndy2ilVYDR73tjsCQZlFplrDD17cGfY_9s1opKZyE14CR4fHBDabXkbCC554TUJ3XlQ8bIV6Xnh7998sq3QSjJsrrHdt2-VENZ4OQkVf/s1600/wordpress.png" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" body="Reklamlar" alt="Reklamlar" /></a>


</div>
</div><center></center></center>
Ve Başarıyla Kategoriyi Eklemiş Olduk Takıldıgınız Bir Konu Olursa Yorum Atabilirsiniz.

Blogunuzdaki Tüm Linkleri Yeni Sekmede Açılır Yapmak

17:23:00 Add Comment

Blogger Tüm Linkleri Yeni Sekmede Açılır Yapmak. Ziyaretçi bir yazınızı okurken verdiğiniz bir bağlantı linkinize veya benzer yazılarınızdaki linklerden birine tıkladığı zaman mevcut okuduğu sayfa kapanır ve tıkladığı sayfaya yönlendirilir. Bunu engellemek için birazdan paylaşacağım kodu bloğunuza ekleyin ve linkleriniz yeni sekmede açılsın.

Blogtaki linklerin yeni sekmede açılması ne işe yarar?
Ziyaretçiniz o andaki okuduğu sayfayı kapatmadan herhangi bir bağlantı linkini otomatik olarak  yeni sekmede görüntüler ve okuduğu sayfayı kaybetmez. Ziyaretçiler herhangi bir sayfanızda ne kadar uzun süre kalırsa bu o sayfanın arama motorları tarafından önemli olarak indekslenmesini sağlar. Seo ve istatistikler açısından sayfanızın uzun süre açık kalması öenmlidir.

Tek tek her linke yeni sekmede açılması komutu vermektense ekleyeceğiniz ufak bir kod sayesinde tüm linklerinizin yeni sekmede açılmasını sağlayabilirsiniz. Nasıl mı?

Tüm Linleri Yeni Sekmede Açmak

1. Blogger
2. Şablon
3. HTML'yi Düzenle
4. CTRL+F tuşlarına aynı anda basarak arama kutusunu açın
5. </head> kodunu bulun
6. Aşağıdaki kodu bulduğunuz bu kodun alt satırına yapıştırın.



7. Şablonu kaydedin.

Tebrikler artık bloğunuzdaki tüm linkler otomatik olarak yeni sekmede açılıyor. Bu gibi basit ipuçlarının ve eklentilerin devamının gelmesi için bloğumu izleyin ve yazılarıma yorumlarınızla güzellik katın. Unutmayın birbirimize destek olarak büyüyebiliriz. İyi bloglamalar ;)

Kaynak : Blog Bakkalı

Blogger Animasyonlu Hareketli Buton Eklentisi

16:36:00 Add Comment

Hepimiz blogumuzda zaman zaman izle,demo görünüm,indir,bağlan yada farklı amaçlar için butonlar kullanıyoruz.Bugün sizlere farklı amaçlar için kullanabileceğimiz farklı boyutlarda ve renklerde butonlara ait CSS kodlarını vereceğiz.Butonlar görünüm olarak resimde gördüğünüz gibi, maus ile buton üstüne geldiğimizde buton içerisinde baloncuklar uçuşuyor, görünüm olarak gerçekten çok şık ve bir okadarda kullanışlı olan butonları uygulayacağınız birkaç basit işlem sonrasında sizde blogunuzda kullanabilirsiniz.

Blogger kullanıcıları için tasarlanmış olan,resimde ve aşağıda örnek olarak gördüğünüz butonları blogunuza uygulamak için: 

Deneme Buton 




Blogger Buton için CSS kodlarını blogumuza ekliyeceğiz.

Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin
Widget Şablonlarını genişlet kutucuğunu işaretleyin
HTML kodları içerisinde]]></b:skin>kodunu Ctrl+F yardımı ile aratıp bulun.
Aşağıdaki kodu kopyalayarak bulduğumuz]]></b:skin> kodununu üstüne yapıştırın.



Blogger Buton için Html Kodlarımızı Ekliyeceğiz:Aşağıda gördüğümüz kodlardan hangi boyut ve rengi istiyorsak ona ait kodu butonun görünmesini istediğimiz yere html modundayken yapıştırıyoruz.

1.Big Button için Html Kodları (Buton Rengine Göre bir kod seçin)



2.Medium Button için Html Kodları ( Buton Rengine Göre bir kod seçin )



3.Small Button için Html Kodları ( Buton Rengine Göre bir kod seçin )



4.Small Rounded Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

Blogger’da Sabit Bir Ana Sayfa Yapma (Boş Sayfa)

06:03:00 Add Comment


Boş Bir Sayfa Oluşturma

Blogger’da boş bir sayfa oluşturmak istediğimizde en az bir adet gadget eklemek gerektiğini belirten bir uyarı gelir. Aşağıdaki kodları incelediğinizde navbar gadgetını eklediğimizi fakat CSS kodlarıyla bu gadgetı sakladığımızı görebilrsiniz.

İlk örneğimizde boş bir sayfa oluşturulam ve yavaş yavaş bunu dolduralım. Boş ve sabit bir sayfa oluşturmak için Blogger kumanda panelinize girdikten sonra Şablon > HTML’yi Düzenle yolunu takip edin ve buradaki tüm kodları silerek yerine aşağıdaki kodları ekleyin.

Blogger Favicon Ekleme ve Değiştirme

02:04:00 Add Comment

Geçmiş dönemlerde Blogger‘da manuel olarak favicon yüklemeyi içeren bir yazı kaleme almıştım. Ancak elbette aradan geçen zaman dilimi içerisinde, Blogger‘da yaşanan birçok gelişme oldu. Bu bağlamda artık, Blogger’da herhangi bir kod kullanmadan direkt olarak favicon yükleyebiliyoruz. Yani web sitenizin tasarımına, görünümüne dikkat ediyorsanız, web sitenize özel bir favicon kullanmanız çok sağlıklı olacaktır. İşlem kolay da olsa, detaylı bir anlatım gerçekleştirmek istiyorum. En azından bilmeyen Blogger kullanıcıları için de faydalı olacaktır kanısındayım.
1) Öncelikle Blogger hesabınıza giriş yapın.
2) Favicon değiştireceğiniz blogunuzun Kontrol paneli’ne giriş yapın.
3) Yan menüde yer alan Yerleşim bölümüne girin.
4) Burada yer alan Sık kullanılan simge bölümündeki Düzenle bağlantısına tıklayın.

5) Açılan pencerede yer alan Dosya Seç butonuna tıklayarak, ilgili faviconu yükleyin.
6) Her şey tamamlandığında ise, Kaydet butonuna tıklayın.

Blogger Gadget Alanı Ekleme

01:58:00 Add Comment

Blogger Gadget alanı bazı temalarda istediğiniz yerde olmayıp yada hiçbir yerde gadget alanı yoksa istediğiniz yere eklemeniz mümkün.

Yapcağınız işlemler oldukça basit 2 kod ekleyerek istediğiniz yere alan ekleyebilirsiniz.Tabikide biraz kodların nerde olduğunu bilmeniz gerek çünkü her temada eklenicek alan başka.
Kurulum: Şablon>Htmlyi Düzenle>Devam Et yolunu izleyerek aşağıdaki kodu aratın.
]]></b:skin>

Kodu bulduğunuzda aşağıdaki kodu bulduğuz kodun üzerine ekleyin.
#gadget {float:left;width:900px;height:200px;background: #fff;}

Genislik ve yükseklik ayarlarını kırmızı ile belirttiğim width:900px ve height:200px yazan yerlerden ayarlayabilirsiniz.

Şimdi asıl olaya geldik.Gadget'ini nereye eklemek istiyorsanız o yeri ilk olarak seçmelisiniz kodların arasından ve seçtiğiniz yere aşağıdaki kodları eklediğinizde panelinizde Yerleşim alanında görebilirsiniz.
Mesela <head> <body> vs yerlere ya da gadget varsa o gadgetin altına yapıştırabilirsiniz.
<b:section class='gadget' id='gadget'></b:section>

Yapamadığınız yerler hakkında sorularınızı başlık altından sorabilirsiniz.
Kaydol: Kayıtlar (Atom)

Formulir Kontak

Ad

E-posta *

Mesaj *