Blogger Film ve Videolar� Part �eklinde G�sterme Detayl� Anlat�m

Jquery ile Blogger'da Sekmelerdeki videolar�, foto�raflar� veya herhangi bir HTML'yi yerle�tirin

�zellikle Video ag�rl�kl� veya Film ag�rl�kl� blogger kulan�c�lar�n i�ine yar�yacak bi eklentiden bahsediyorum sizlere. Bu Blogger eklentisi sayesinde Film ve Videolar� part part g�stermeniz m�mk�n olcak.
Herhangi bir sayfa y�k� olmadan kolayl�kla de�i�tirilebilir sekmelere i�erik ekleme konusunda pek �ok soru var, blog yazarlar� normalde JQuery kullanarak bulam�yor ve �o�unun JQuery eklentisine y�nlendirilmedi�i, y�nergenin karma��k oldu�u ve anla��lmas� kolay olmad��� bir soru var. Ancak, bu Tabs JQuery eklentisini Blogger'a y�klemek i�in kolay ve net bir talimat verece�im.

Her blogger dinamik fonksiyon eklemek istiyor ama JQuery eklentileri y�kleme hakk�nda yaz�yor �o�u insan yok ��nk�, bunu yapmak m�mk�n de�ildir Blogger bloglar�. Yaz� i�eri�ini yeni bir �ekilde g�r�nt�lemek istersen, bu eklenti ihtiyac�n olan tek �ey bu eklentidir, bu eklenti bir yay�nda bir�ok videoya sahip olan video blog yazarlar� i�in yararl�d�r, e�er bu eklentiyi kullan�rsa videolar i�in kullan�lan alan� azaltabilirler.

A�a��da Kodlar�n Haz�r Hilinin Bir Demosunu Koyucam Dilerseniz Sitenize Eklemeden G�zat�n
Daha fazla uzatmadan anlat�ma ge�iyorum ad�mlar� izleyin.

DEMO / �n �zleme

Bir �ok ki�inin kuland��� basit kodlar fakat bir �ok ki�ininde a�ina olmad��� i�in bu anlat�m� ad�mlara ay�rd�m.Dikkatlice ad�mlar� tek tek uygularsan�z sorun ya�am�ycaks�n�z

Dikkat: Ba�lamadan �nce �ablonunuzun Bir Yedegini Almay� Unutmay�n Her �htimale Kar��.

JS dosyalar�n� dahil et

�lk ad�m, bu eklenti i�in JQuery kitapl���n� ve JS dosyas�n� �ablonunuza eklemektir. JQuery Lib. �htiyac�n�z olan senaryo budur.

Bunun ��in  yapmam�z gereken Blogger Admin Paneline Giri� Yap�p �ablon>>HTML'yi D�zenle Diyoruz Burda CTRL+F yaparak a��lan arama penceresine </head> Kodunu yaz�p arat�yoruz.
Bu </head> Kodunu buldukdan sonra kodun bir sat�r �zerine a�ag�daki kodlar� yaz�yoruz.

<!..TeknoWin..>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/94529577/idTabs-stramaxon.js' type='text/javascript'></script>
<!..TeknoWin..>

• 1.Sat�r: �lk Kod e�er �ablonunuzda mevcutsa eklenemize gerek yok,Bu zaten Google'da bar�nd�r�lan minified JQuery k�t�phanesinin en son s�r�m� i�in eklentidir.

• 2.Sat�r: �kinci sat�r daki kod ise sekmeleri i� yapar hale getirmek ve ana eklenti JS dosyas� i�indir. Dosya benim DropBox taraf�ndan bar�nd�r�l�yor, sen kendi sunucusunda bar�nd�rmak istersen burada JS dosyas�n� i�eri�ini g�rebilirsin.

 HTML'de Kullan�lacak Kodlar

HTML'ye eklenecek a�a��daki kodlar yaln�zca sayfan�z�n neresinde g�stermek isterseniz oruya yaz�lacak kodlard� ancak bu eklenti kavram�n� ve nas�l �al��t���n� anlamaya �al���rsan�z, bu HTML ile �al��man�z sizin i�in kolayla��r. Her neyse, her bir unsur hakk�nda k�saca bilgi verece�im.

��te ihtiyac�m�z olan HTML

<ul class="idTabs">
<li><a href="#tab1">Ba�l�k 1</a></li>
<li><a href="#tab2">Ba�l�k 2</a></li>
<li><a href="#tab3">Ba�l�k 3</a></li>
<li><a href="#tab4">Ba�l�k 4</a></li>
<li><a href="#tab5">Ba�l�k 5</a></li>
</ul>
 
<div id="tab1">
<!-- Yerle�tirilecek ��erik Buruya Gelecek -->
</div>
 
<div id="tab2">
<!-- Yerle�tirilecek ��erik Buruya Gelecek -->
</div>
 
<div id="tab3">
<!-- Yerle�tirilecek ��erik Buruya Gelecek -->
</div>
 
<div id="tab4">
<!-- Yerle�tirilecek ��erik Buruya Gelecek -->
</div>
 
<div id="tab5">
<!-- Yerle�tirilecek ��erik Buruya Gelecek -->
</div>

• Sat�r 1: Bu UnorderedList ba�lang�� etiketi (ul)
• Sat�r 2: Bu sat�rda 9 �zerinde id = 'tab1' ile div ��esi i�erik i�in ba�lant� sekmesiSat�r 3: hat 2 a��klamas�na benzer �ekilde, bu sekme ba�lant� id = 'Sekme2'ye' ile div ��esi i�erik i�indir.
  
• Sat�r 4: Bu ayn� zamanda hat 2 ve hat 3 ayn� �eyi yapar ama id = 'Tab3' ile div ��esi i�in de ge�erli
• Sat�r 9: Bir sekme i�in g�r�necektir ilk div eleman� �izgisi 11 hat 9 itibaren, bir video embed kodu koyabilir veya, i�ine herhangi bir ge�erli HTML koyabilirsiniz di�er yandan div elemanlar�, bunlara kar��l�k gelen ba�lant�lar� i�indir <a> eleman� vard�r # Tab1'i �yle de href baglant� de�eri ile div ��esi i�in sekme g�revi g�rmekdedir id = 'tab1' ve aras�ndaki ge�i�ler buna bagl�d�r.
  

Yani k�saca a��kla derseniz e�er yukardaki kodlarda bulunan href=otomatikmen sayfa id sini al�r ve burda devreye DropBox girer ve alg�lanan id'yi ge�ersiz k�lar ve herhangi bi y�nlendirme olmadan yani hedef adrese sekme a��lmadan ayn� sayfa �zerinde Tap sekmesi ile ge�i� yap�l�r. href="#tab1"> g�sterilen ba�l�k <div id="tab1"> ise bu ba�l�ga bagl� olan g�sterilecek i�eri�i ta��r.

Ve Gelelim CSS Kodlar�na

CSS Kodlar�n� ekledi�inizde ise sizinde g�receginiz �zre normal yaz� �eklinde olan sekmeleriniz
art�k daha ��k bi g�r�n�me sahip olcak.CSS kodlar�n�n eklentisinden sonra Tap sekmeleriniz Buton �eklini al�cakt�r. CSS'yi sekmelerde uygulamak i�in gereken profesyonel bir g�r�n�m vermek i�in, yaln�zca sekmelerde stiller uygulayaca��z. CSS kodlar� a�a��dad�r

.idTabs {padding-left:0px !important;}
.idTabs li {display:inline;padding-left:0px;}
.idTabs li a {
    padding:5px 15px;
    background-color:#030303;
    color:white;
    text-decoration:none;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    font-weight:bold;
    border:1px solid transparent;
    border-radius:10px 10px 0px 0px;
}
.idTabs li a:hover {
    padding:5px 15px;
    background-color:#030303;
    color:white;
    text-decoration:none;
}
.idTabs li a.selected {
    background-color:#ff0000;
}
.idTabs li a.selected:hover {
    background-color:#ff0000;
}

CSS kodlar�n� blogger'a entegre etmenin 2 farkl� yolu bulunmakda ve bu 2 yoluda anlat�yorum ad�mlar� izleyin.

• �ablon>> �zelle�tir>>Geli�mi�>>CSS ekle'ye gelip a��lan kod penceresine yukar�daki kodlar� ekleyip Bloga Uygulay�n bu yol 1.�e�enek.E�er bu yola teman�z izin vermiyorsa veya sitilerde hatalar ortaya ��k�yorsa 2.yolu izleyin.
• �ablon>>HTML'yi D�zenle CTRL+F yolu ile a��lan arama penceresine bu kodu arat�p bulun ]]></b:skin> ve bu kodun bi �st sat�r�na yukar�daki CSS kodlar�n� ekleyin kaydedin

��te bukadar ba�ard�n�z.CSS de bulunan renk kodlar�n�da teman�za g�re d�zenleye bilirsiniz.

Umar�m anlatabilmi�imdir herhangi bir zorluk �ekmeden entegre etmi�sinizdir. Soru, �neri ya da sadece te�ekk�r etmek istersen yorumlar�n�z memnuniyetle kar��lan�r.TeknoWin �yi G�nler Diler.