Evet Arkadaşlar Başlıkta da belirttiğim gibi Sizlere MouseHover ToolTip + Usluer Manşet yani Bir Yazının veya resimin üzerine geldiğimizde yanında çıkan baloncukta yazı yazdırmayı ve İsmail Usluer'in blogunda paylaştığı manşet sliderı kurup kullanmayı size videolu olarak anlatacağım.Ve Bu Anlatımı Bayramın Sonuna Kadar yapmaya çalışacağım.Şimdiden Hepinize İyi Bayramlar..
[SIZE=2][FONT=Georgia]
(Not: Videolar Bu Paylaşımın Altında ve Kişisel Blogumda Yer Alacaktır.Takipte Kalın.)
[/FONT][/SIZE]
Evet Sizlere Bahsettiğim MouseHover ToolTip'i Anlattım.Şimdi Başlayalım.
ToolTip nedir?
Tooltip web sitelerinde kelime,resim veya yazı alanlarının üzerine mouse’umuzu getirdiğimizde çıkan küçük bilgi baloncuklarıdır.Tooltip bizlere daha farklı ve göze hoş gelen bilgilendirme baloncukları oluşturmamızı sağlar ve kullanıcıların gözüne daha hoş gelen açıklama kısımları oluşturmamız için kolaylık sağlar.
Bu jQuery Uygulumasının internette birçok örneği mevcut.En Basitinden 1stwebdesigner.com‘da 30 adet ToolTip Örneği var.Bunların İstediklerinize bakabilir hatta Birazdan anlatacağım işlemi daha değişik şekillerde uygulayarak benzerlerini yapabilirsiniz.
Yapacağımız ToolTip’in demosunu Sitemin “Arama Kısmı“nın üzerine gelerek Görebilirsiniz.İsterseniz Kısa Keserek Hemen Anlatıma Geçeyim.
ToolTip Gösterimi
Öncelikle Yapmamız Gerek Bu Adresten indirdiğimiz .js dosyasını sitemizin “js” klasörüne atmak olacaktır.(Eğer js Klasörünüz Yoksa Bunu tagları arasında belirttiğiniz yola atınız.)Header.php dosyasında bu .js dosyamızın yolunu belirtiyoruz.Ardından Bu ToolTip’in görünmesini istediğiniz yere
class="BELİRTECEĞİNİZ BİR SINIF" "tooltip.show('GÖRÜNMESİ GEREKEN YAZI');" onmouseout="tooltip.hide();"Yazıyoruz (Büyük harfli yerleri kendimize göre düzenliyoruz.) ve hepsi bu kadar.Şimdi geriye kalan tek şey bu “ToolTip”i CSS ile düzenleme.Ben sizler için ufak bir CSS dosyası yaptım ve bunuda sizlere sunayım.
/* Baloncuk */
.DOSYAYA VERDİĞİNİZ SINIF {color: #666666; font-weight:bold; padding-bottom: 1px; cursor: pointer;}
#tt {position: absolute; display: block; background-color: #9c0909; font-size: 12px; font-family: Verdana; line-height: 18px; -moz-border-radius: 5px; -webkit-border-radius:5px;}
#tttop{display: block; height: 5px; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;}
#ttcont {display: block; padding: 0px 8px; color: #fff; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;}
#ttbot{display: block; height: 5px; background-color: #9c0909; overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;}Ve Sitemizde Bizimde Artık Bir ToolTip’imiz var.Sizde Bu işlemleri uygulayarak kendinize çok değişik tooltipler yapabilirsiniz.Bu İşlemi Yapmakta Zorlananlar İçin size Birde videolu olarak anlattım,yapacaklarımız videoyu izlediğimizde kafamızda daha da netleşecektir.(Not: 720p Kalitesinde İzleyiniz.)
Kaynak: http://www.erenkeskin.com/tooltip-nedir-nasil-gosterilir/
WordPress Slider Entegre
WordPress Kullanan Her sitenin ihtiyacıdır bence bir slider.Ve interneti araştırdığımızda karşımıza yüzlerce slider çıkar.Ben Bu Sliderların Hiçbirini beğenmedim ama bu(şuan kullandığım) sliderı beğendim.Gerek Estetik yönünden Gerekse kullanış bakımından çok güzel ve kolay bir slider.
Bu Sliderı Usluer.net‘te İsmail Usluer paylaşmıştı ve ben şimdi sizlere bu sliderı entegre edip kullanmayı daha etkili bir yol olan videolu şekilde anlatacağım.
İlk Başta Buradaki dosyaları indiriyoruz. Ve indirdiğimiz dosyayı rar’dan çıkartıyoruz.”Manşet” Adlı Bir klasöre çıkacak olan bu dosyaları olduğu gibi (“Manşet” klasörünü değil içerisindeki dosyaları) temamızın ana dizinine atıyoruz.Manşetimizin Görünmesini İstediğimiz Yere
yazıyoruz.Herşey Bu kadardı. Artık Bizimde Sitemizde bir sliderımız var.Ama Bu Sliderda ufak tefek düzenlemeler yapmamız gerekebilir.Örneğin Bizim Sitemize Göre olup olmadığı.Yani Eğer sliderınızın genişliği fazla yada az ise bunları eliniz ile düzeltmeniz gerekiyor.Bunun içinde “manset.php“yi bir metin editörü yardımıyla açıyoruz.(Benim tavsiyem NotePad++) CTRL+F ile “width” kelimesini aratıyoruz ve 3.bulunan kelimedeki değeri
width="570" height="200"kendimize göre ayarlıyoruz ardından hemen yan tarafında bulunan “height“ıda aynı şekilde ayarladıktan sonra tekrar bir aramam işlemi gerçekleştiriyoruz ve birer tane daha width ve height buluyoruz onlarıda düzenledikten sonra artık sliderımız tam olarak oturmuş demektir.
Sliderımıza Resim Eklemek Konu eklerken özel alanlardan “manset” adında bir özel alan oluşturuyoruz ve oraya resmimizi ekliyoruz.
Demememizi Yapıyoruz ve oda ne resmimizin üzerinde bir yazı var..işte bu yazı sizin paylaşımınızın başlığı ve ilk 150 karakterinden oluşmakta.Bunu Bu şekilde kullanabilirsiniz ama ben size bunu kaldırmayıda kısa bir şekilde anlatayım.
“manset.php“imizi tekrar açıyoruz ve 6.satırda bulunan
'.$niphell[post_title].'
'.htmlspecialchars(substr(strip_tags($niphell[post_content]),0,150)).']]>yazısını siliyoruz ve bitiriyoruz.Herkesin bu sliderı kullanması ve daha iyi anlaması adına bunu birde videolu olarak anlatmak istedim ve onuda sizlere sunuyorum.
(Not: videoları 720p kalitesinde izleyiniz.)
Kaynak: http://www.erenkeskin.com/wordpress-slider-entegre/
