Bloggerda Tab Menü Yapımı

Birçok ziyaretçinin benden istemiş olduğu bu eklentiyi ancak şimdi anlatabileceğim. Bu yazında sitemde sağ alt tarafta bulunan "Panaroma" tab menüsünün bir benzerinin nasıl yapılacağını anlatacağım. Aslında bu eklenti sadece blogger için değil wordpress bloglarınızda da deneyin çalıştığını göreceksiniz. İsterseniz bu eklentinin nasıl yapılacağına 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.