BLACK

Kayıtlar

Blogger Eklentileri etiketine sahip yayınlar gösteriliyor

Tümünü göster

Okuyucudan: Dikey Akordeon Menü

- Eylül 04, 2013

Menüler blogların olmazsa olmazlarıdır ve genellikle yatay olanları tercih edilir. Ancak bu, dikey menü kullanılmayacak anlamına gelmez. Dikey menülerin fazla tercih edilmemesinin nedeni bence çok yer kaplamaları ancak ufak bir scriptle bu sorun çözülebilir. Blog Hocam’da daha önce bu tarz bir menü paylaşmadığımı gören Mustafa Aydın blogunda kullandığı akordeon menünün kodlarını bizimle paylaşmak istedi. Menüde ana başlıklara tıkladığınızda akordeon şeklinde açılıyor ve alt başlıklar gözüküyor. Akordeon şeklinde açılır kapanır olması daha az yer kaplamasını sağlıyor. Yani oldukça kullanışlı bir menü diyebiliriz. Görmüş olduğunuz resim, menüyü bizimle paylaşan Mustafa Aydın’ın bloguna ait. Nasıl çalıştığını görmek için blogunu ziyaret edebilirsiniz. Bu menüyü blogunuza eklemek isterseniz Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek aşağıdaki kodları yapıştırın. <script type="

Google Tarzı Sabit Arama Kutusu

- Ağustos 13, 2013

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman siz bile ardığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise. Bu bakımdan daha önce 2 farklı arama kutusu paylaşmıştım. Bunlar: Açılır Arama Kutusu PSD Arama Kutusu Bu kez paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Örneğin tarz olarak Google’ın tarzına sahip. Ayrıca daha önce paylaştığım açılır arama kutusundaki tıklayınca açılma efekti bunda da var. En önemli özelliği ise blogun bir köşesinde sabit kalması. Floating ( yüzen, kayan ) denen bu özellik sayesinde ziyaretçiler sayfayı aşağı yukarı kaydırsa bile arama kutusu hep önlerinde olacak. Sadece CCSS3 tekniği kullanılarak oluşturulan bu arama kutusunun nasıl çalıştığını daha iyi anlamak için aşağıdaki demo videoyu izleyebilirsiniz. Bu arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda

Dönme Efektli Sosyal Takip Eklentisi

- Ağustos 05, 2013

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi… Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm. Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.  <div class="subscribe"> <ul> <li class="rss"><a href="

Resmi Blogger İletişim Formunu Sabit Sayfaya Ekleme

- Temmuz 30, 2013

Yaklaşık 2 – 2,5 ay önce Blogger özelliklerini arttırmaya devam etmiş ve offical iletişim formunu gadget olarak ekleme imkanı sunmuştu. Oldukça hızlı, basit ve kullanışlı olan bu iletişim formunun belki de tek kötü yanı sadece gadget olarak eklenebilmesiydi. Bu yazıda Blogger’ın resmi iletişim formu nu kullanarak nasıl iletişim sayfası oluşturabileceğinizi anlatmak istiyorum. 1. Adım: Öncelikle Blogger’ın iletişim formu gadgetını blogunuzun sidebarına eklemeniz gerekiyor. Bunun için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetını seçin. 2. Adım: İletişim formunun sidebarda olmasını istemediğimiz bu adımda formun gadget olarak görünmemesi için gerekli kod değişikliğini yapacağız. Blogger kumanda paneline girip Şablon > HTML’yi Düzenle yolunu takip ettikten sonra sonra Widget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelin

3 Boyutlu Açılır Menü

- Temmuz 24, 2013

Blog şablonlarının ve tasarımlarının en önemli öğelerinden biri şüphesiz menüler. Bu sebeple farklı tarzlarda menüler paylaşmam için çok mesaj alıyorum. Bugüne kadar 3 değişik tarzda menü paylaşmıştım. Bunlar: - Basit Link Menüsü - Dropdown Menü - CSS Mega Açılır Menü Bu yazıda paylaşacağım 3 boyutlu açılır menün de işlev olarak mega açılır menüden farkı yok. Farkı açılırken 3 boyutlu bir efektle açılmasında. Resimde gördüğünüz gibi bu menüye; 1 sütunlu, 2 sütunlu, 3 sütunlu açılır ve sabit öğeler ekleyebiliyorsunuz. Menünün nasıl çalıştığını ve 3 boyut efektini görmek isterseniz demo videoyu izleyebilirsiniz. Gelelim menüyü blogunuza eklemeye. İlk olarak stil kodlarını ekleyelim. Bunun için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle diyerek şablonun kodlarını açıyoruz ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu buluyoruz. Bu kodun üzerinde bir yere aşağıdaki st

Metro Tarzı Sosyal Medya Eklentisi

- Temmuz 10, 2013

Windows 8 ile birlikte hayatımıza giren “METRO” tarzı web dünyasındaki tasarımlara da yansıdı ve kısa sürede metro tarzında pek çok tema ve eklenti tasarlandı. Ben Windows 8’i sevmediğim gibi bu metro tarzına da pek ısınamadım. Bu yüzden metro tarzı tasarımlara hiç yönelmedim. Ancak bazı blogcular tarafından tercih edildiğini görünce metro tarzına benzer görünümü olan bir sosyal medya eklentisi paylaşmaya karar verdim. Sosyal medyanın önemi hakkında daha önce çok şey yazdığım için tekrarlamak istemiyorum. Söyleyebileceğim tek şey eğer hala sosyal medya hesaplarınız yoksa hemen birer tane açın ve ziyaretçilerinizi bu hesaplara yönlendirin. İşte metro tarzı bu sosyal medya eklentisi dikkat çekici olması sebebiyle blogunuzu ziyaret eden kişilerin, sosyal medya hesaplarınıza kolaylıkla erişmesini sağlayacaktır. Bu eklentinin, sosyal medya hesaplarınızdaki takipçi sayınızı arttıracağından emin olabilirsiniz. Metro tarzı sosyal medya eklentisini blogunuza eklemek çok

Etikete Özel Resimli Son Yazılar Eklentisi

- Haziran 24, 2013

Bazı blogların sidebarında “Son Yazılar” eklentisini görmüşsünüzdür. Bu bölümde bloglarındaki son X yazıyı gösterirler. Ben bu güne kadar böyle bir eklenti ne kullandım, ne de paylaştım. Bunun nedeni zaten blogun ana sayfasında son X yazının gösteriliyor olmasıydı. Fakat bu yazıda paylaşacağım son yazılar eklentisinin başlıktan da anlayacağınız gibi farklı ve güzel bir özelliği var. Belli bir etikete ait son X yazıyı bogunuzun sidebarında gösterebiliyorsunuz. Blogger’da etikete özel resimli son yazılar eklentisini blogunuza eklemek için aşağıdaki kodları kendinize göre düzenleikten sonra Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript gadget yolunu izleyerek pencereye yapıştırmanız yeterli olacaktır. <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0BxxMpDce-fNUYmh1Ukdjb0FjbUU" /> <script src="http://yourjavascript.com/94233419149/bh-son-yazilar.js"></s

Blogger’da Yön Tuşlarıyla Sayfalar Arasında Geçiş Yapmak

- Haziran 14, 2013

Google, hem içerik hem de tasarım konusunda web yöneticilerinden kullanılabilirliği yüksek siteler oluşturmasını istiyor. Blog tasarımında kullanılabilirlik dendiğinde aklıma gelen şey kullanıcı dostu site oluşturmak. Bunun için neler yapılabilir? Kullanıcıların farklı cihaz ve sistemlerden kolay erişebildikleri, aradıklarını kolayca bulabildikleri ve site içerisinde rahat bir şekilde dolaşabildikleri bloglar yaratılabilir. Bu yazıda ziyaretçilerin blog içerisinde gezmelerini çok kolaylaştıracak bir navigasyon sisteminden bahsetmek istiyorum. Blogger şablonlarının çoğunda navigasyon önceki kayıtlar– daha yeni kayıtlar linkleri şeklindedir. Daha önce standart navigasyonu özelleştirebileceğiniz bazı alternatifler paylaşmışıtım. Bunlar: 1. Navigasyon Linklerini Resimle Değiştirmek 2. Numaralı Sayfa Navigasyonu 3. Blogger’da Yazıları Sonsuz Kaydırma İle Yükleme Bu kez çok daha farklı bir navigasyon yöntemini paylaşmak istiyorum. Sayfalar arasındaki geçişi sadec

BH Okuyucularına Özel Sosyal Paylaşım Butonları Kutusu

- Haziran 12, 2013

Yazılarınızın sosyal ağlarda paylaşılmsı hem ziyaretçi sayınızın artması, hem de SEO açısından çok önemli. Bunun için blog yazılarınızın altına mutlaka sosyal paylaşım butonları eklemelisiniz. Blogger’ın kendi paylaşım butonları olmasına rağmen efektifliği ve dikkat çekiciliği tartışılır. Sosyal paylaşım butonlarınız okuyucunun ilgisini ne kadar çok çekerse yazınızın paylaşılma ihtimali o kadar artar. Bu yüzden Blog Hocam okuyucularına özel sosyal paylaşım eklentisi kodladım. Eklentiye en popüler sosyal ağlar olan Facebook, Twitter, Google+, Pinterest ve LinkedIn butonlarını ekledim. Bu sosyal paylaşım butonlarını blogunuza eklemenin 2 aşaması var. İlk olarak Şablon > HTML’yi düzenle yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardmıyla ]]></b:skin> kodunu bulun. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekleyin. /* Blog Hocam Sosyal Paylaşım Butonları Eklentisi */ #bh-paylas { border:1px dotted #000; padding-left

Blogger Sekmeli İçerik Kutusu Eklentisi

- Mayıs 29, 2013

Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. Nasıl mı? Bu eklentide tab yani sekmeler bulunuyor. Her bir sekmeye farklı içerik ekeyebiliyorsunuz. İster resim, ister metin, ister video. Böylece hem kullanışlı hem de şık bir sidebar eklentisine sahip olabileceksiniz. Eklenti resimde gördüğünüz şekldedir. Bu eklentiyi blogunuza eklemek için Blogger kumanda paneline girdikten sonra Yerleşim > Gadet Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırmanız yeterli.  <style type="text/css"> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999999; border-left: 1px solid #999999; width: 100%; } ul.tabs li { float: left; margin: 0; cursor: pointer; padding: 0px 4px ; height:

Blogger’da Yazıları Sonsuz Kaydırma İle Yükleme

- Mayıs 27, 2013

Bildiğiniz gibi Blogger’da sayfalar arası geçişler Önceki Kayıtlar – Daha Yeni Kayıtlar linkleri ile yapılıyor. Navigasyon dediğimiz bu klasik sayfa geçşini modifiye etmek için daha önce 2 seçenek sunmuştum. 1. Navigasyon Linklerini Resimle Değiştirmek 2. Numaralı Sayfa Navigasyonu Bu yazıda son zamanlarda çok sık karşılaştığımız bir sayfa navigasyonu seçeneğini paylaşacağım. Infinite scrolling yani sonsuz kaydırma adı verilen bu yöntem şu şekilde çalışıyor: Ana sayfada 7 kayıt gösterdiğinizi var sayalım. Normal şarlarda 7. kayıttan sonra bir resim veya link ile daha eski sayfaya geçi yapılması gerekir. Ancak bu eklentide 7. kayıttan sayfa aşağıya doğru kaymaya devam ediyor ve bir sonraki 7 kayıt yükleniyor. Bu döngü tüm yazılarınız gösterilinceye kadar devam ediyor. Nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz. Bu eklentiyi bizimle paylaşan Manki ’ye teşekkür ettkiten sonra eklentiyi canlı test etmek isteyenl

Blogger İçin YouTube Eklentisi

- Mayıs 13, 2013

YouTube ile ilgili gelişmiş bir Blogger eklentisi bulmak pek mümkün olmuyor. Halbuki YouTube kanalına özen gösteren ve yüzlerce video yükleyen blogger olduğunu biliyorum. Paylaşacağım bu YouTube eklentisi seyesinde YouTube kanalanızı blogunuzun kenar çubuğunda gösterebileceksiniz. Bu eklentide kanalınıza ait bir YouTube abonelik kutusunun altında kanalınızdaki videolar listelenir. Videolardan birine tıkladığınızda ise eklentinin üst kısmında küçük bir video oynatıcı açılır ve tıkladığınız video oynamaya başlar. Bu harika eklentinin nasıl çalıştığını görmek için test blogumdan kaydettiğim aşağıdaki videoyu izleyebilirsiniz. Eklentiyi blogunuzda kullanmak için YouTube’da videolarınız olmasına gerek yok. Mevcut bir YouTube kullanıcısının videolarını da bu eklentide gösterebilirsiniz.Öncelikle Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu izleyerek Ctrl + F tuş kombinasyonunun yardımıyla </head> kodunu bulun. Bu kodun üzerine aş

Blogger’a Şık CSS Arama Kutusu Ekleyin

- Nisan 29, 2013

Site içi arama kutusu, ziyaretçilerin aradıkları bilgiye rahatça ulaşmaları ve bounce rate değerinizin düşmesi için blogunuz için büyük önem arzediyor. Arama kutusu için en ideal yer blogunuzun heder kısmı veya sidebar’ın en üstüdür. Kısaca, arama kutusu okuyucunun rahat görebileceği bir yerde olmalıdır. Daha önce blogda 2 farklı stilde arama kutusu paylaşmıştım. Ancak boyutları ve tarzı her tasarıma uygun olmayacağından alternatif bir arama kutusu paylaşmak vardı bir süredir aklımda. Bu yazıda paylaşacağım arama kutusu biraz daha şık bir tasarıma sahip ve üzerine tıklandığında genişleme efekti var. Arama kutusunun normal genişliği 150 px fakat sıklandığında 200 px boyutunda genişliyor. Bu arma kutusunu blogunuza eklemek için Blogger kmanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/Java Script yolunu takip edin ve aşağıdaki kodları yapıştırın.  <style type="text/css

Yeni Jquery Otomatik Galeri Slider

- Mart 22, 2013

Daha önce bir kaç farklı slider eklentisi paylaşmıştım. Blogunuzun başlığı ile yazı bölümü arasına ekleyeblieceğiniz bu sliderlar sayesinde öne çıkarmak istediğiniz yazıları otomatik slayt gösterisi olarak gösterebiliyorsunuz. Daha önce paylaştığım benzer sliderlar şunlardı: - Minimal Yatay Slayt Eklentisi - Slayt Manşet Eklentisi - Slayt Manşet [ JavaScript Versiyonu ] Bu yazıda paylaşacağım eklenti de Jquery script kullanılarak yapılmış çok şık bir slider. Üstelik blogunuza çok kolay bir şekilde ekleyebilirsiniz. Silder’ın örnek resmini verdikten sonra lafı fazla uzatmadan slider’ın eklenmesine geçmek istiyorum. Bu slider’ı blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra yerleşim sekmesini açın. Burada üst bilgi gadgetının hemen altındaki gadget ekle linkine tıklyarak listenen HTML/JavaScript gadgetı seçin ve aşağıdaki kodları ekleyin. <style type="text/css"> .container1 { width: 660px;padding: 0

Pinterest Fotoğraflarını Slayt Gösterisi Olarak Gösterme

- Mart 01, 2013

Bayanların bloglarına baktığınızda genellikle yemek, moda, hobi ve gezi ile ilgili yayınlar paylaştıklarını görürsünüz. Hepsinin ortak özelliği ise çok sayıda fotoğraf içeriyor olmaları. İşte bu yüzden fotoğraf imleme temeline dayanarak oluşturlan sosyal medya platformu Pinterest ’e özellikle bayanlar büyük ilgi gösterdi. Bayanların Pinterest’e ilgisi aşikar ancak Pinterest’in Blogger’a entegrasyonu konusunda sıkıntı yaşadıkları da bir gerçek. Diğer popüler sosyal ağlar olan Facebook, Twitter ve Google+ ile ilgili pek çok eklenti mevcutken Pinterest için Pin It butonu dışında kullanmaya değer sadece 1 adet eklenti bulup paylaşmıştım. Bu yazıda Pinterest hesabınızdaki fotoğrafları blogunuzda slayt gösterisi olarak göstermeyi anlatacağım ancak bunu harici bir eklenti kullanmadan yapacağız. Blogger’ın Gadget listesindeki slayt göstersi isimli gadgetı Pinterst hesabınıza bağlayarak bu işlemi kolayca gerçekleştireceksiniz. 1. Adım: Blogger kumanda panelinize gird