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.