Blogger'a CSS Tooltip Ekleyelim!

Herkese Merhaba. Bugün bu Yöntemi Blogger'a uyarlamış bulunuyorum. İçinizden belki birkaç kişiniz soracaktır, CSS Tooltip da ne? Cevabı çok basit. Bazı Sitelerde belki görmüşsünüzdür, Linkin üzerine Mouse ile geldiğinizde Açıklama balonu çıkar ve bu Balon çok hoş gözükür. Bunu yapmanın yolu çok kısa ve basit. Aslında biraz değişiklik ekleyerek daha da iyi yaptım kendi Bloğum için bu özelliği fakat biraz daha üzerinde değişiklikler yapmam gerek. Herneyse, Konumun devamında bu özelliği anlattım.

İlk olarak Bloğumuza giriş yapıyoruz. Sonra Yerleşim'e tıklıyoruz. Sonra HTML'yi Düzenle ye ve Widget Şablonlarını Genişlet'i seçiyoruz. Ardından CTRL+F ile Arama yapıyoruz (Arayacağımız Bölüm Sidebarımız dır.) /* Sidebar burayı bulduğunuzda bu bölümün içerisine aşağıdaki Kodları ekliyoruz ve sonra Kodlarla işimiz bitiyor.

a.tooltip{
position: relative;
z-index: 20;
color: #000;
text-decoration: underline;
}

a.tooltip:hover{
z-index: 25;
}

a.tooltip span{ /* Span Element nicht anzeigen */
display: none;
}

a.tooltip:hover span{ /* Span Element nur angezeigt beim Ueberfahren mit der Maus */
background: #505050; /* Hintergrundbild */
display: block; /* macht aus dem Inlineelement ein Blockelement */
position: absolute;
top: 1.8em; /* abstand von oben */
left: 1.8em; /* abstand von links */
width: 15em; /* breite */
padding: 3px 7px; /* Innenabstand */
border: 1px solid #ccc; /* Rahmenfarbe */
color: #fff; /* Textfarbe */
text-align: left; /* Textausrichtung */
}

a.tooltip:hover span strong{
color: #AC93C8;
}

Artık bu İşlemimizi her kullanacağımız Link için Yazımızı yazarken HTML'yi Düzenle Moduna geçip aşağıdaki Yazı tipini ekleyeceğiz.
 

<a href="http://url.de" class="tooltip">LINK Text<span>Tooltip Text</span></a> 

Linkin üzerine geldiğinizde Resim göstermek için de aşağıdakini aynı şekilde Konunuzu yazarken ekleyeceksiniz.

<a href="http://url.de" class="tooltip">LINK Text<span><img src="bild.jpg" alt="" /></span></a> 

Önizleme için buraya tıklayın.