Bloggerda Tab Menü Yapımı

Birçok ziyaretçinin benden beylikduzu escort istemiş olduğu bu eklentiyi ancak şimdi anlatabileceğim. Bu yazında sitemde sağ alt tarafta bulunan “Panaroma” tab menüsünün bir atasehir escort benzerinin nasıl yapılacağını atakoy escort anlatacağım. Aslında bu eklenti sadece blogger için değil wordpress bloglarınızda da deneyin anadolu yakasi escort çalıştığını göreceksiniz. İsterseniz bu eklentinin nasıl yapılacağına avrupa yakasi escort geçelim hemen: Eklentinin çalışır haline ***DEMO*** adresinden bakabilirsiniz.

Öncelikle tab menümüzün CSS kodlarını </b:skin> kodundan önce ekliyoruz:

/* Tabmenu
----------------------------------------------- */

.hptabber {
 background: #FFFFFF;
 margin: 0px 0px 10px 0px;
 padding: 15px 10px 0px 10px;
 border: 1px solid #C0C0C0;
 }



.tabberlive .tabbertabhide {
 display: none;
 }

.tabber {
 0px;
 }

.tabberlive {
 margin-bottom: 10px;
 }

ul.tabbernav {
 margin: 0px;
 padding: 0px;
 color: #222222;
 font-size: 12px;
 font-family: Arial, Tahoma, Verdana;
 font-weight: normal;
 }

ul.tabbernav li {
 list-style: none;
 margin: 0;
 display: inline;
 }

ul.tabbernav li a {
 padding: 0px;
 border-bottom: none;
 text-decoration: none;
 }

ul.tabbernav li a:link {
 background: #DADADA;
 color: #222222;
 margin: 0px 5px 0px 0px;
 padding: 5px 10px 4px 10px;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 5px;
 -khtml-border-radius: 5px;
 -webkit-border-top-left-radius: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-bottom-left-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 }

ul.tabbernav li a:visited {
 background: #DADADA;
 color: #222222;
 }

ul.tabbernav li a:hover {
 background: #F7F7F7;
 color: #222222;
 text-decoration: none;
 }

ul.tabbernav li.tabberactive a {
 background: #F7F7F7;
 color: #222222;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-topright: 5px;
 -khtml-border-radius: 5px;
 -webkit-border-top-left-radius: 5px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-bottom-left-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 }

ul.tabbernav li.tabberactive a:hover {
 background: #DADADA;
 color: #222222;
 }

.tabberlive .tabbertab {
 background: #F7F7F7;
 color: #222222;
 margin: 3px 0px 0px 0px;
 padding: 15px 15px 5px 15px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-topright: 5px;
 -khtml-border-radius: 5px;
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 }

.tabberlive .tabbertab h2 {
 display: none;
 }

.tabberlive .tabbertab h3 {
 display: none;
 }

.tabbertab cite {
 font-size: 11px;
 margin: 0px;
 padding: 0px;
 }

.tabbertab p {
 font-size: 12px;
 margin: 0px 0px 10px 0px;
 }

CSS kodumuzu ekledikten sonra </head> kodundan önce şu kodu ekliyoruz:

<script src="http://konfor.enesilhan.net/tema/tabmenu/Tabber.js" type="text/javascript">
</script>

Daha sonrada bu tab menüyü blogumuzun neresine koymak istiyorsak şu yöntemi deneyeceğiz.  “HTML’yi Düzenle” kısmına gireceğiz. ve “Widget Şablonlarını Genişlet” tikini aktif hale getirdikten sonra CTRL+F arama kombinasyonu sayesinde blogumuzun herhangi bir gadgetimizin olduğu yere ekleyeceğiz.  Mesela benim blogumdan örnek vereyim daha iyi anlamanız açısından:  Blogumun en üst sidebarında “Abonelik Seçenekleri”  gadgeti var. Ve ben bunu HTML’yi düzenle kısmında aratınca şöyle bir kod kümesiyle karşılacağım:

<b:section class="sidebar" id="profilebox" showaddelement="yes">
<b:widget id="HTML11" locked="false" title="Abonelik Seçenekleri" type="HTML"> </b:widget></b:section>

İşte sizde blogunuzda bu eklentiyi hangi gadgetten önce veya sonra eklemek için gadgetinizin ismini html’yi düzenle kısmından bulduktan sonra şu kodları ekleyeceksiniz:

<div class='hptabber'>
                <div class='tabber'>

        <div class='tabbertab'>
        <h2>Hikaye 1</h2>
Bu kadarmıydı diyor genç kız ?
Bu kadarmıydı sevgin?
Delikanlı alaylı bir tavırla..
Ya ne sandın seni sevdiğimi mi?
Genç kız yıkılmıştı telefon başında.
Bir şey söyleyemedi ağlıyordu sessizce..
Bir ara delikanlı kızın ağladığını duydu..
Ne o yine konuşmuyorsun ağlıyorsun demek....
Üzülme canım o da geçer..
Yoksa ben bıraktım diye mi ağlıyorsun..
Olsun senin bıraktığını söyleriz.
Kız hıçkırıklar içinde çıkan boğuk sesiyle...
Bardağı taşıran bu son söze dayanamadı...


        <div class='clear'/>
    </div>
        <div class='tabbertab'>

        <h2>Hikaye 2</h2>

Anlamadın ki sersem.
Sen veya baskaşı ne farkeder..
Ayrılığımıza ağlıyorum.
Sana ve senin acınacak haline ağlıyorum.
Genç kız oysa bunları söylerkende seviyordu..
Daha öncede sevmişti, sevecekti.
Ama yapılacak bir şey yoktu.
Bu sözler karşısında direnen gururu vardı.
Bir tarafta gurur bir tarafta sevgi..
Ve sonunda sevgi ağır bastı.
Telefonu kapatırken delikanlı..
Soğuk bir tavırla &quot;ELVEDA&quot; dedi..
Kız ise gururunu ayaklar altına alarak..
Hıçkırık sesiyle &quot;SENİ SEVİYORUM&quot; dedi.
Telefonu kapatırken delikanlı düşündü..

        <div class='clear'/>

    </div>
        <div class='tabbertab'>
        <h2>Hikaye 3</h2>

Niye yapmıştı oysa oda seviyordu.
Ve sevdiğini itiraf etmek için tekrar aradı..
Ama geç kalmıştı..
Telefon cevap vermeyince hemen kızın evine koştu..
Kalabalıktı evin önü şaşırdı ve..
Ardından acı bir siren sesiyle irkildi..
İçeriden ağzının kenarında kan bulunan soğuk bir ceset çıktı..
Delikanli yıkıldı ve gözyaşlarını tutamadı..
elveda demedim!!! UYAN!!! dediyse de uyanmadı genç kız.
Bir ara elindeki buruşmuş kağıt parçası ilişti.
Gözü buğulanmış gözlerini silerek okudu..
Şöyle diyordu genç kız:

TÜM SEVENLERE VE SEVİLENLERE İBRET OLSUN!!!

        <div class='clear'/>

        </div>


</div>            </div>

Hikaye 1-2 ve 3 olan kısımlara istediğiniz kodları ekleyebilirsiniz arkadaşlar.Sormak istediğiniz yer olursa yorum kısmında belirtebilirsiniz. Kolay gelsin, bir daha ki yazıda görüşmek üzere.

Bu yazıdan önce yazmış olduğum "Blogger Bu Yoruma Karşılık Ver Butonu" başlıklı yazımı da okumanızı tavsiye ederim.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

10 yorum

  1. Mücahit   •  

    Ne zamandır bunu arıyordum hemen deniyorum abi saolasın

  2. Enes İLHAN   •  

    @Mücahit
    İşini gördüyse ne mutlu.
    @Savaş Çalışkan
    Eklentiyi CSS ile şekillendirerek çok daha farklı görüntüler elde edebilirsiniz.

  3. Tofan   •  

    Çok güzel bir uygulama enes teşekürler..

  4. Savaş Çalışkan   •  

    Ya eklentiye lafım yokda biraz geç yükleniyor js yimi geç algılıyor kendi ftmede attım dosyaları ama yine geç yüklüyr :S

  5. Savaş Çalışkan   •  

    Daha hızlı açılan bi tabmenü bekleriz.

  6. Bizimvideomuz   •  

    Güzel Paylaşım Teşekkürler…

  7. Caner   •  

    Gerçekten çok teşekkür ederim.

    Uyguladım ve çok güzel oldu 🙂

    gnrosesrock.blogspot.com

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.