Blogger’a CSS Toolyip Eklemek

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.

LINK TextTooltip Text 

LINK Text 

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

Reklamlar

About Lacivert

HuniliBlog.Com'un tek yazarıyım. Bana hep deli derler ama ben kimseye deli demedim. Sitemi ziyaret ederseniz hakkımda daha çok şey öğrenebilirsiniz
Bu yazı Blogger Widget Tema İpucu içinde yayınlandı. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s