YuvarlakDünya

Yuvarlak Dünya, ne kadar yuvarlak birde bizim açımızdan bakın

Genel

Blogger Animasyonlu Fonksiyonel Sayfa Kaydırma Butonları

Blogger siteleri pratik eklentiler ile daha kullanışlı oluyor ve blog sayfalarının görüntüleme sayısını da artırıyor. Bu yazımızda fonksiyonel özeliklere sahip aşağı ve yukarı kaydırma butonları ile tıkla aç-kapat Disqus son yorumlar widget tasarımını paylaşacağım.Blogger aşağı ve yukarı sayfa kaydırma butonları ile tıkla aç-kapat Disqus son yorumlar widget’ını daha önceki yazılarımızda paylaşmıştık. Bu eklentileri tekrardan paylaşmamın nedeni, bir önceki özelliklerinde ve biraz da tasarımında farklı olmasından ve kurulum bilgilerini daha iyi anlatmak için paylaşıyorum.Blog Sayfalarını Aşağı ve Yukarı Kaydırma Butonları Nasıl Eklenir?Disqus Son Yorumlar Widget’ı Nasıl Eklenir?Blogger aşağı ve yukarı sayfa kaydırma butonlarına Disqus son yorumlar widget’ını açmak için kullandığımız butonu da dahil ederek blog sayfalarını aşağı kaydırdığınızda animasyon efekti ile açılan fonksiyonel butonlar görüntülenir. Butonların bu şekilde birleştirilmesi hem muhteşem bir görünüme hem de pratik bir kullanıma sahip oluyor.Animasyonlu fonksiyonel sayfa kaydırma ve tıkla aç-kapat Disqus son yorumlar widget’ını blog sitenize eklemek için aşağıdaki adımları takip edin.Animasyonlu Fonksiyonel Butonlar ve Disqus Son Yorumlar Widget’ı KurulumuBirinci adım: Blogger hesabınızda oturum açın ve kurulum yapmak istediğiniz blogun kumanda panelinde bulunan Tema > HTML’i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın.İkinci adım: Aşağıdaki CSS kodlarını bloğunuzda bulunan kodunun bir satır üzerine ekleyin.CSS/* === Animation === */.ripple_animate.ink.animate ripple} fadeInDown100%} rubberBand30%40%50%65%75%to} bounceInLeft0%60%75%90%to} slideInRightto} slideInDownto} slideInTopto}/* === ToTop CSS === */ a a:hover li:nth-child(1) li:nth-child(2) li:nth-child(3).drawer-header.drawer-header h4.drawer-header img .viewport-show .viewport-show:hover/* === Disqus Comments CSS === */.viewport-show:hover svg_viewport_viewport.active_overlay.active_viewport .drawer-close_viewport .drawer-close svg_viewport .drawer-close:hover svg ul.dsq-widget-list img.dsq-widget-avatar p.dsq-widget-meta p.dsq-widget-meta a p.dsq-widget-meta a:hover li.dsq-widget-item a.dsq-widget-user a.dsq-widget-user:hover span.dsq-widget-comment .dsq-widget-comment p .dsq-widget-item pre .dsq-widget-item pre code_viewport.active li.dsq-widget-item .dsq-widget-comment p a .dsq-widget-comment p a:hover screen and (max-width:1080px)} screen and (max-width:640px)_viewport .drawer-close}Üçüncü adım: Aşağıdaki javaScript kodunu bloğunuzda bulunan kodunun bir satır üzerine ekleyin.javaScriptDördüncü adım: Yukarıdaki javaScript kodunun bir satır üzerine aşağıdaki HTML kodu ekleyin. HTMLYorumlarYukarıdaki kod içerisinde belirtilen yere Disqus yorumları için kullanmış olduğunuz kullanıcı adınızı ekleyin. Kurulum adımlarını tamamladıktan sonra şablonu kaydedin ve blogunuzu kontrol edin. Ön İzlemeBu yazımızda Blogger pratik eklentilerinden olan fonksiyonel sayfa kaydırma ve Disqus son yorumlar widget’ı kurulumunu anlattım. Kurulum ile ilgili sorunlar yaşamanız durumunda yorum formunu kullanarak bana ulaşabilirsiniz.