Blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

14 Eylül 2016 Çarşamba

Blogger İçin Sosyal Medya Widget'ı

Blogger İçin Sosyal Medya Widget'ı

Bir kişisel bloga sahipseniz, kullanmanız gereken widgetlardan birisi de sosyal medyadır. Böylelikle ziyaretçilerinize sosyal medya hesaplarınızı sunar ve takip etmeye teşvik edersiniz. İşte ben de sizlere görünümü güzel bir sosyal medya hesaplarınızı gösteren widget paylaşıyorum. Üstelik bu widget üzerinde takipçi sayılarınızı da görüntüleyebileceksiniz.

Yazıma devam etmeden öncesi bu sosyal medya widgetinin nasıl gözüktüğü ile ilgili bir önizleme linki paylaşayım.
Nasıl göründüğüne göz attıktan sonra, blogunda kullanmak isteyenler yazımı okumaya devam edebilirler. Geçeyim mi nasıl kullanabileceğinize?

  • Blogger kullanıcı panelinde bulunan Şablon ve HTML'yi düzenle seçeneklerine tıklayın. 
  • Karşınıza gelen kodların bulunduğu alana tıklayın ve klavyenizden Ctrl + F tuşlarına tıklayın.
  • Karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunun bir üst satırına aşağıda bulunan CSS kodunu yapıştırın.
/* Social Media with counter by www.bloggerspice.com */
.list-unstyled {
padding-left: 0;
list-style: none;
margin: 2px
}

.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
font-size: 16px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out
}

.bs-colored-social .fa,
.bs-social-icons .fa {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8)
}

.bs-colored-social.icon-circle .fa,
.bs-social-icons.icon-circle .fa {
border-radius: 50%
}

.bs-colored-social.icon-rounded .fa,
.bs-social-icons.icon-rounded .fa {
border-radius: 2px
}

.bs-colored-social.icon-flat .fa,
.bs-social-icons.icon-flat .fa {
border-radius: 0
}

.bs-colored-social .fa:hover,
.bs-colored-social .fa:active,
.bs-social-icons .fa:hover,
.bs-social-icons .fa:active {
color: #FFF
}

.bs-colored-social.icon-zoom .fa:hover,
.bs-colored-social.icon-zoom .fa:active,
.bs-social-icons.icon-zoom .fa:hover,
.bs-social-icons.icon-zoom .fa:active,
.bs-social-sidebar li:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1)
}

.bs-colored-social.icon-rotate .fa:hover,
.bs-colored-social.icon-rotate .fa:active,
.bs-social-icons.icon-rotate .fa:hover,
.bs-social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg)
}

.bs-colored-social .fa-dribbble,
.bs-social-icons .fa-dribbble:hover,
.bs-socialicons .bs-dribbble:hover .bs-sicon {
background-color: #F46899
}


.bs-colored-social .fa-stumbleupon,
.bs-social-icons .fa-stumbleupon:hover,
.bs-socialicons .bs-stumbleupon:hover .bs-sicon {
background-color: #eb4924
}

.bs-colored-social .fa-reddit,
.bs-social-icons .fa-reddit:hover {
background-color: #5f99cf
}

.bs-colored-social .fa-facebook,
.bs-social-icons .fa-facebook:hover,
.bs-socialicons .bs-facebook:hover .bs-sicon {
background-color: #3C599F
}

.bs-colored-social .fa-rss,
.bs-social-icons .fa-rss:hover,
.bs-socialicons .bs-rss:hover .bs-sicon {
background-color: #f26522
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover,
.bs-socialicons .bs-flickr:hover .bs-sicon {
background-color: #d51007
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover {
background-color: #FF0084
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover,
.bs-socialicons .bs-instagram:hover .bs-sicon {
background-color: #685243
}

.bs-colored-social .fa-foursquare,
.bs-social-icons .fa-foursquare:hover,
.bs-socialicons .bs-foursquare:hover .bs-sicon {
background-color: #0086BE
}

.bs-colored-social .fa-github,
.bs-social-icons .fa-github:hover,
.bs-socialicons .bs-github:hover .bs-sicon {
background-color: #070709
}

.bs-colored-social .fa-google-plus,
.bs-social-icons .fa-google-plus:hover,
.bs-socialicons .bs-googleplus:hover .bs-sicon {
background-color: #CF3D2E
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover {
background-color: #A1755C
}

.bs-colored-social .fa-linkedin,
.bs-social-icons .fa-linkedin:hover,
.bs-socialicons .bs-linkedin:hover .bs-sicon {
background-color: #0085AE
}

.bs-colored-social .fa-pinterest,
.bs-social-icons .fa-pinterest:hover,
.bs-socialicons .bs-pinterest:hover .bs-sicon {
background-color: #CC2127
}

.bs-colored-social .fa-twitter,
.bs-social-icons .fa-twitter:hover,
.bs-socialicons .bs-twitter:hover .bs-sicon {
background-color: #32CCFE
}

.bs-colored-social .fa-vk,
.bs-social-icons .fa-vk:hover,
.bs-socialicons .bs-vk:hover .bs-sicon {
background-color: #375474
}

.bs-colored-social .fa-soundcloud,
.bs-social-icons .fa-soundcloud:hover,
.bs-socialicons .bs-soundcloud:hover .bs-sicon {
background-color: #FF4100
}

.bs-colored-social .fa-vine,
.bs-social-icons .fa-vine:hover,
.bs-socialicons .bs-vine:hover .bs-sicon {
background-color: #35B57C
}


.bs-colored-social .fa-youtube,
.bs-social-icons .fa-youtube:hover,
.bs-socialicons .bs-youtube:hover .bs-sicon {
background-color: #C52F30
}

.top-social ul li {
margin: 0;
padding: 0
}

div#socialicons-top {
float: left
}

.top-social .list-unstyled {
margin: 0
}

.bs-socialicons {
text-align: center;
overflow: auto;
font-size: 22px;
margin: 0 -8px
}

.bs-socialicons .bs-socialInner {
position: relative;
overflow: hidden;
padding-left: 8px
}

.bs-socialicons .bs-social {
float: left;
width: 25%
}

.bs-socialicons .bs-sinn {
padding-right: 8px
}

.bs-socialicons .bs-sinn:hover .bs-sicon {
color: #fff
}

.bs-socialicons .bs-sicon {
display: block;
padding: 10px 0;
}

.bs-socialicons .bs-facebook .bs-sicon {
color: #3B5998
}

.bs-socialicons .bs-googleplus .bs-sicon {
color: #DD4B39
}

.bs-socialicons .bs-twitter .bs-sicon {
color: #2AA9E0
}

.bs-socialicons .bs-instagram .bs-sicon {
color: #685243
}

.bs-socialicons .bs-pinterest .bs-sicon {
color: #CC2028
}

.bs-socialicons .bs-youtube .bs-sicon {
color: #DE1829
}

.bs-socialicons .bs-vine .bs-sicon {
color: #35B57C
}

.bs-socialicons .bs-soundcloud .bs-sicon {
color: #FF4100
}

.bs-socialicons .bs-vk .bs-sicon {
color: #45668e
}

.bs-socialicons .bs-foursquare .bs-sicon {
color: #f94877
}

.bs-socialicons .bs-github .bs-sicon {
color: #333333
}

.bs-socialicons .bs-dribbble .bs-sicon {
color: #ea4c89
}

.bs-socialicons .bs-stumbleupon .bs-sicon {
color: #eb4924
}

.bs-socialicons .bs-linkedin .bs-sicon {
color: #0085AE
}

.bs-socialicons .bs-rss .bs-sicon {
color: #f26522
}

.bs-socialicons .bs-flickr .bs-sicon {
color: #FF0084
}

.bs-socialicons .bs-sicon {
background: #F5F5F5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease
}

.bs-socialicons .bs-scount {
display: block;
color: #FFFFFF;
background: #007ABE;
padding: 5px 0;
position: relative;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600
}

.bs-socialicons .bs-scount:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(238, 238, 238, 0);
border-bottom-color: #007ABE;
border-width: 4px;
margin-left: -4px
}

.bs-socialicons .bs-scount:hover {
background: #222222;
}
  • Bu kod alanıyla işiniz bitti artık. Şimdi Blogger panelinin sol kısmında bulunan Yerleşim seçeneğine tıklayın ve hemen ardından bu sosyal medya eklentisini eklemek istediğiniz yerde bulunan Gadget Ekle seçeneğine tıklayın.
  • Karşınıza gelen ekrandan HTML/Javascript seçeneğini işaretleyip, aşağıdaki kodları yapıştırınız.
<div class="bs-socialicons">
<div class="bs-socialInner">
<!--Facebook-->
<div class="bs-social">
<div class="bs-facebook bs-sinn">
<a href='#' target='_blank' tibse="Facebook">
<span class="bs-sicon"><i class="fa fa-facebook"></i></span>
<span class="bs-scount">3.1K</span>
</a>
</div>
</div>
<!--Google Plus-->
<div class="bs-social">
<div class="bs-googleplus bs-sinn">
<a href='#' target='_blank' tibse="Google Plus">
<span class="bs-sicon"><i class="fa fa-google-plus"></i></span>
<span class="bs-scount">2K</span>
</a>
</div>
</div>
<!--Twitter-->
<div class="bs-social">
<div class="bs-twitter bs-sinn">
<a href='#' target='_blank' tibse="Twitter">
<span class="bs-sicon"><i class="fa fa-twitter"></i></span>
<span class="bs-scount">1.4K</span>
</a>
</div>
</div>
<!--Instagram-->
<div class="bs-social">
<div class="bs-instagram bs-sinn">
<a href='#' target='_blank' tibse="Instagram">
<span class="bs-sicon"><i class="fa fa-instagram"></i></span>
<span class="bs-scount">2K</span>
</a>
</div>
</div>
<!--Pinterest-->
<div class="bs-social">
<div class="bs-pinterest bs-sinn">
<a href='#' target='_blank' tibse="Pinterest">
<span class="bs-sicon"><i class="fa fa-pinterest"></i></span>
<span class="bs-scount">4.5K</span>
</a>
</div>
</div>
<!--Youtube-->
<div class="bs-social">
<div class="bs-youtube bs-sinn">
<a href='#' target='_blank' tibse="YouTube">
<span class="bs-sicon"><i class="fa fa-youtube"></i></span>
<span class="bs-scount">2.8K</span>
</a>
</div>
</div>
<!--Vine-->
<div class="bs-social">
<div class="bs-vine bs-sinn">
<a href='#' target='_blank' tibse="Vine">
<span class="bs-sicon"><i class="fa fa-vine"></i></span>
<span class="bs-scount">3.3K</span>
</a>
</div>
</div>
<!--SoundCloud-->
<div class="bs-social">
<div class="bs-soundcloud bs-sinn">
<a href='#' target='_blank' tibse="SoundCloud">
<span class="bs-sicon"><i class="fa fa-soundcloud"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>

<!--VK-->
<div class="bs-social">
<div class="bs-vk bs-sinn">
<a href='#' target='_blank' tibse="VK">
<span class="bs-sicon"><i class="fa fa-vk"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!---->
<div class="bs-social">
<div class="bs-foursquare bs-sinn">
<a href='#' target='_blank' tibse="Foursquare">
<span class="bs-sicon"><i class="fa fa-foursquare"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--GitHub-->
<div class="bs-social">
<div class="bs-github bs-sinn">
<a href='#' target='_blank' tibse="GitHub">
<span class="bs-sicon"><i class="fa fa-github"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>
<!--Dribbble-->
<div class="bs-social">
<div class="bs-dribbble bs-sinn">
<a href='#' target='_blank' tibse="Dribbble">
<span class="bs-sicon"><i class="fa fa-dribbble"></i></span>
<span class="bs-scount">3.9K</span>
</a>
</div>
</div>

<!--Stumbleupon-->
<div class="bs-social">
<div class="bs-stumbleupon bs-sinn">
<a href='#' target='_blank' tibse="Stumbleupon">
<span class="bs-sicon"><i class="fa fa-stumbleupon"></i></span>
<span class="bs-scount">3.4K</span>
</a>
</div>
</div>

<!--Linkedin-->
<div class="bs-social">
<div class="bs-linkedin bs-sinn">
<a href='#' target='_blank' tibse="Linkedin">
<span class="bs-sicon"><i class="fa fa-linkedin"></i></span>
<span class="bs-scount">1.5K</span>
</a>
</div>
</div>

<!--Rss-->
<div class="bs-social">
<div class="bs-rss bs-sinn">
<a href='#' target='_blank' tibse="Rss">
<span class="bs-sicon"><i class="fa fa-rss"></i></span>
<span class="bs-scount">1.9K</span>
</a>
</div>
</div>

<!--Flickr-->
<div class="bs-social">
<div class="bs-flickr bs-sinn">
<a href='#' target='_blank' tibse="flickr">
<span class="bs-sicon"><i class="fa fa-flickr"></i></span>
<span class="bs-scount">2.9K</span>
</a>
</div>
</div>

</div>
</div>
</div>
Eğer her şeyi düzgün bir şekilde yaptıysanız ve eklenti düzgün bir şekilde gözükmediyse, büyük bir ihtimal blogunuzda Font Awesome kodları bulunmamaktadır. Son olarak onları bir ekleyin derim, mahrum kalmasınlar. Hemen kısaca son olarak yapmanız gerekenlere geçeyim ben.

  • Soldaki menüden Şablon ve daha sonra HTML'yi düzenle seçeneklerine tıklayın. 
  • Kodların bulunduğu alana bir kez tıklayın ve ardından klavyenizden Ctrl + F tuşlarına tıklayın. 
  • Gelen arama ekranına ise </head> yazıp Enter tuşuna tıklayın. 
  • Artık son ve son olarak </head> kodunun bir üst satırına aşağıdaki kodu yapıştırıp kaydedin.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Artık olmama gibi bir lüksü yok. Kendim de denedim, gayet başarıı bir şekilde çalışıyor. Ha derseniz ki "Ben yapamadım, bana bir yardım ediver." o zaman elimden geldiğince yardımcı olurum. Peki sizler bu eklenti hakkında neler düşünüyorsunuz? Beğendiniz mi?

5 Eylül 2016 Pazartesi

Yenilenen Google Fonts ve Blogger'da Kullanımı

Yenilenen Google Fonts ve Blogger'da Kullanımı

Geçtiğimiz hafta Google bir güncelleme yaparak, Google Fonts tasarımını ve içeriğini yeniledi. Sizlere bu yazımda yeni gelen özelliklerden ve nasıl kullanıldığından bahsedeceğim ki, kimse konuya yabancı kalmasın. Sizler de istediğiniz fontu kullanabilesiniz. Ufak bir tanımla sizlere Google Fonts'u anlatayım hemen.

Google Fonts, ücretsiz olarak yazı tipleri sunan ve sürekli güncellenen bir Google'ın servisidir. Bu sayede web sitelerinde ve bloglarda ücretsiz olarak font kullanabilme imkanı sağlıyor. Ayrıca web siteleri veya bloglardan hariç, fotoğraf düzenleme uygulamalarında ve bilgisayarlarda kullanılabiliyor. Yüzlerce font arasından istediğinizi ücretsiz olarak indirebilir ve istediğiniz yerde kullanabilirsiniz.

Tırnaklı, tırnaksız, bitişik yazı, el yazısı gibi birçok yazı tipi seçeneğini bulabileceğiniz bu servise bir de yakından bakalım.

Yenilenen Google Fonts ve Blogger'da Kullanımı

Yukarıdaki görsel, yenilenen Google Fonts'un yeni tasarımı. Göze hoş gelen animasyonları ve görüntüsüyle Material Design'ı benimseyen bu servis (ki Material Design=Google) daha kullanışlı hale gelmiş. Ana sayfada yazı fontlarının ismi ve nasıl göründüğü ile ilgili ufak bir demo var. Ayrıca hemen sağ üstlerinde bulunan "+" tuşlarına tıklayarak kaydedebiliyoruz.


Yukarıdaki menüye gelecek olursak;

DIRECTORY: Bu kısımda sağ taraftan seçtiğiniz özellikteki yazılar gözükür.
FEATURED: Son zamanların popüler yazı fontlarını gösterir.
ABOUT: Google Fonts hakkında bilgiler. (Aman çok da şey yapmamak lazım neyden bahsettiğini ben de anlamadım :D)
BOYA İKONU: Google Fonts görünümünü değiştirmeye yarar. Görünümü derken sadece renkleri kast ettim. 

ve son olarak "Search" kısmı, aramak istediğiniz fontu yazarak hızlı bir şekilde bulmaya yarar. (tabi Google'da varsa)


Yukarıdaki menüye baktık, yan tarafa da haksızlık etmeyelim değil mi?

Categories kısmında bulunan seçenekler, yazınızın şekli ile alakalı. Şimdi şekillere ve oradaki terimlerin anlamlarına bakalım da yetim kalmasınlar.

Serif: Tırnaklı yazı tipi. Örneğin "Times New Roman"
Sans Serif: Tırnaksız yazı tipi. Örneğin "Open Sans"
Display: Ne işe yaradığını hala anlamadım ama bu tipteki yazıların harflerinde ufak detay ve değişiklikler var.
Handwritting: Diyelim biz elimize kalem kağıt aldık ve yazı yazdık. Ha işte bu tipteki yazıları da öyle düşünün.
Monospace: Harflerin araları eşit bir şekilde aralıklı ve harfler arasında alışageldiğimizden biraz daha farklı bir mesafe var.
Sorting: Yazı tiplerini alfabetik, popüler, tarihe göre vs. sıralıyor.
Language: Latin alfabesinden farklı alfabeleri de seçmemize olanak sağlar.

Ayrıca alt kısımdaki seçenekler, yazının şekliyle alakalı işte siz anlarsınız.

Blogger'da Nasıl Kullanırım?

Nasıl kullanacağınıza başlamadan öncesi şunu da ipucu olarak söyleyeyim; Font isimlerinin üzerine tıkladığınızda, font ile ilgili detaylı bilgiye, diğer fontlarla karşılaştırılmasına ve kullanım yüzdelerine erişebilirsiniz, meraklısına!

Her neyse ben çok uzattım. Hızlıca yenilenen Google Fonts üzerinden Blogger'a font yüklemeyi anlatayım.

  • Öncelikle istediğimiz herhangi bir fontun yanındaki "+" butonuna tıklayınız ve bu tıklama işlemi sonucunda aşağıdaki gibi ekran görüntüsü gelecektir.

  • İşte burada 1 Family Selected yazısına tıklayın ve aşağıdaki ekran görüntüsüne ulaşın.

  • Gelen ekrandaki @IMPORT seçeneğine tıklayın ve aşağıdaki ekran görüntüsündeki seçtiğim kodu kopyalayın.

  • Daha sonra Blogger panelinden Şablon ve HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların üzerine bir kez tıklayıp Ctrl+F tuşlarına tıklayın. Gelen arama yerine ise <head> yazıp Enter tuşuna tıklayın.
  • <head> kodunun bir alt satırına kopyalamış olduğunuz kodu yapıştırın.
  • Son olarak kodların bulunduğu alana bir kez tıklayıp, Ctrl+F tuşlarına tıklayın. Gelen arama yerine ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunun bir üst satırına aşağıda vermiş olduğum kodu yapıştırın. Fakat şunu unutmayın ki, aşağıdaki kod içerisinde bulunan Font Adı kısmına yüklemek istediğiniz fontun adını yazın.
[* {
    font-family: 'Font Adı', sans-serif;
} ]

Eğer son maddedeki işlem olmadıysa, HTML'yi düzenle kısmındaki font isimlerini kullanmak istediğiniz fontun ismiyle değiştirip kaydedin, kesinlikle hallolacaktır.


Son Sözler

Yani anladık ki Google Blogger'da olmasa da Google Fonts üzerinde güzel bir yenilik yapmış. Gerek tasarım, gerekse de içerik olsun neredeyse kusursuz. Tek eksiği Türkçe desteği olmaması. Ama bir gün o da olur diye ümit ediyorum. Her neyse benim sizlere sorum, sizlerin favori fontunuz hangisidir?

26 Ağustos 2016 Cuma

Blogger'dan Beklentilerim


Vaktimizin çoğunu bu lanet olası platformda harcadığımızdan, insanın ister istemez birkaç beklentisi oluyor. Benim ya da diğer kullanıcıların aklına geliyor da bir sizin mi aklınıza gelmiyor, yoksa önemsemiyor musunuz? Azcık ucundan ilgilenseniz diyorum sayın Google Bey Amca. Burada bir şeyler zırvalayacağım işte, bakalım siz bu yazıyı okuyanlar olarak ne düşüneceksiniz?

Tasarım Değişikliği


Blogger'dan Beklentilerim

Yani mobil uygulamaların olsun, web araçların olsun bas bas bağırıyorsun be Material Design diye. Yayınladığın her uygulamada kullanıyorsun ama Blogger'a gelince yok! Olmaz böyle bu işe bir çare bulun ve Material'ı acilen bu Blogger'a getirin. En azından insanın içi açılır Blogger'da gezinirken. Bu arada bunun üzerinde bir çalışmanız varsa sorun yok ama ben sizlerin çalışma içerisinde olduğunuza da inanmıyorum, her neyse! Yapın artık şu tasarımı!

Mobil Uygulama


Blogger'dan Beklentilerim

Bu konuda sadece isyan eden ben değilim, değil mi? Kesinlikle blog yazarları olarak hem fikiriz sanırım. Sen koskoca Google, bir mobil uygulama yapma. Hem de Dünya'da milyonlarca kullanılan bir platformun, gerçekten ayıp ha yaptığınız.

Azcık Wordpress'e bakın da nasıl uygulama yapıldığını öğrenin. Şimdi sizler "Google'ın yayınladığı Blogger uygulaması var." diyeceksiniz. Evet var, hiç bir işe yaramayan ve görünümü tarihten kalma bir uygulama... Google'a "blogger apk" yazıp ararsanız bulursunuz zaten. 

Demem o ki, hem kendisi için hem de bizler için Google adam akıllı bir mobil uygulama yapmalıdır.

Çevrimiçi Şablonlarda Değişiklik


Blogger'dan Beklentilerim

Acaba biz hangi tarihteyiz? 2000'lerin başında mıyız da sizler bu dandik şablonları kullanmamız için sunuyorsunuz. Bir Wordpress'e bakın bir de kendinize. Hem teknik bilgisi olmayanlar ne yapacak? Sizlerin hiç de hoş olmayan şablonlarınıza esir mi kalacaklar? Koyun 100-200 şablon da herkes faydalansın. 

Burada tema yüklemeyi bilmeyenler, kodları görünce korkanlar, ya da konu hakkında bilgisi olmayan birçok kişi var. Kolaylık sağlarsınız yani çok mu şey?

Eklenti Desteği


Blogger'dan Beklentilerim

Tamam belki Wordpress'e özeniyorum ama haklı değil miyim? Wordpress'deki Yoast eklentisi gibi onlarca eklentiniz olsa fena mı olurdu? Kullanıcılar için hiç de kolaylık sağlamıyorsunuz ama siz. Azıcık yenilik getirin şu platforma da canımızı sıkmayın, yoksa blogu Wordpress'e taşırım he. (Evet tehtid ediyorum.)


(Bonus) Kullanıcıların Blogunu Bırakmaması


Blogger'dan Beklentilerim

Bu başlık tam olarak Blogger platformuyla ilgili değil ama yine de bir beklentim olarak yazmak istedim. Birçok kişi kafasına estiği gibi blog açıyor (açın tabi ki). Fakat bir süre sonra ya kaldırıyor ya da bir daha suratına bile bakmıyor. Daha sonra da ortada bir çöplük gibi kalıyor ve adı da "çöp blog" oluyor. 

Yav neden böyle yapıyorsunuz ki? Hem emekleriniz boşa gidiyor hem de insanları blogdan soğutuyorsunuz. Amacınız ne ki sizin? Bu arada yeni blog açanlara da söylüyorum, sakın ola ki bırakmayın. Devam ettirin ve hobi haline getirin. Hem siz kazanın hem de biz kazanalım.


Son Sözler


Sizlere Blogger'dan beklentilerimi aktardım. Tabi, burada Wordpress ile karşılaştırma yapıp eksikliklerini dile getirdim. Belki de şikayetçi olacaksınız ama şimdiki zamanda kim kime özenmiyor ki. Facebook bile kendisinden sonra çıkan Twitter'a özenmiyor değil. Hem Google olmasa Wordpress olmazdı değil mi? 

Bonus olarak yazdığım şey ise çok önemli. Yapmayın, etmeyin. Açtıysanız bir blog devamını getirin. Her neyse sizlerin daha farklı beklentileri var mı? Fikirlerinizi yorum bölümünde belirtebilirsiniz. Bu arada bir çılgınlık yapıp,  resmi Google ve Blogger hesaplarına etiket göndereceğim. Belki dikkate alırlar (olacağı yok ama, insan bekliyor işte).

Etiket işi yattı, mobilden yazdığımdan dolayı etiket olmuyor, PC'ye geçtiğim bir vakit hallederim.

18 Ağustos 2016 Perşembe

"Base" Kişisel Blogger Teması

"Base" Kişisel Blogger Teması


Kişisel bloglarınızda kullanabileceğiniz bir tema olan Base'in yapımcısı Template Clue'dır. Kusursuz mobil görünümü ve estetik tasarımıyla favorilerim arasına girmiştir. Sizlere sunduğum Base teması ücretsizdir. Fakat premium sürümünü 10.99$ gibi bir fiyata satın alabilirsiniz. 

Sizlere premium ile ücretsiz arasındaki farkları söyleyeyim. Premium sürümünde footer kısmındaki tema yapımcısının linkini kaldırabilirsiniz, fakat ücretsiz sürümde bu linki kaldıramazsınız. Kaldırdığınız taktirde blogunuz otomatik olarak tema yapımcısının sitesine yönlendirilir. Ayrıca ücret ödeyerek temayı satın alırsanız, tema yapımcısı sizlere kurulum öncesi, kurulum ve kurulum sonrasında yardımcı oluyor. Endonezya'lı bir kişiyle nasıl iletişim kurabilirsiniz orası ayrı bir şey. Merak etmeyin, gerekli yerlerde ben de yardımcı olurum.

Kısacası SEO ve mobil uyumlu, şık tasarımlı ve çok fonksiyonlu bir tema arıyorsanız indirme butonuna tıklayarak indirebilirsiniz. Ayrıca "Önizleme" butonuna tıklayarak da temaya göz atabilirsiniz.

15 Ağustos 2016 Pazartesi

Blogger'la Tanışma, Kişisel Blogumu Açma ve Bu Güne Kadar Getirme Sürecim

Blogger'la Tanışma Kişisel Blogumu Açma ve Bu Güne Kadar Getirme Sürecim

Belki de bu yazıyı uzun yıllar sonra ve başarılı bir blog sahibi olduktan sonra yazmalıydım. Şimdiye nasipmiş ne diyeyim. Bu yazımda sizlere Blogger ile nasıl tanıştığımı, kişisel blogumu nasıl açtığımı, öncesi ve sonrasında neler yaptığımı ve kişisel blogumu bu güne nasıl getirdiğimden bahsedeceğim. Hem kendimden bahsetmiş olurum hem de bazı tavsiyelerde bulunarak düştüğüm hatalara sizin de düşmemenizi öneririm.

  • [message]
    • ##info##  Bilgilendirme
      • Bu yazıyı ortalama 8 dakika içerisinde okumanız mümkün.

Blogger'la Tanışma

Facebook üzerinden bana "Knk şu bloga girip yazılara yorum yapıver" mesajıyla başladı aslında bütün maceram. Neyse işte, blogu ziyaret ettim. Yazıları dahi okumadan "Çok güzel yazı." vb yorumlar yaptım (Allah affetsin). Bloga domain alınmadığından uzantısı blogspot.com idi. Sanki daha önceden aşina olduğum bir uzantı gibime geldi. Her neyse bir kaç gün sonra aklıma bir fikir geldi ve ben kendime bir blog açacaktım. Bu blogda Samsung Galaxy Young adlı cihazın kaldırabileceği oyunların apk dosyalarını paylaşacaktım.

İlk Blogu Açma

Sanki Blogger platformundan blog açıldığını biliyormuşum gibi bir anda blogu açtım. Yüzlerce kişi gelecek düşüncesi içerisinde başka sitelerdeki uygulamaların açıklama metnini kopyala-yapıştır yapıyor ve bunun yanında resimle linkleri de kopyala-yapıştır yapıyordum (Allah bunu da affetsin). Daha sonraları karar değiştirerek dosyaları upload edip, açıklamaları da kendim yazmaya başladım orası ayrı.

Ufak bir ayrıntıyı da atladım, ülkemizde bloglarla uğraşan pek olmaz diye de yazıların İngilizce şeklinde olan açıklamalarını kullanıyordum. Daha sonra beklentim hep yazılarıma yorum gelmesiydi ve o yorum bir türlü gelmiyordu. Çünkü ben koskoca çölde olan bir kum tanesiymiş gibi kendi kendime konuşuyordum diyebilirim. Sonra bir çakallık yaparak, anonim hesap oluşturup kendi bloguma kendim yorum yapıyordum. Sanki başkası yapmış gibi (Ne kadar da zihniyetsiz bir davranış).

Yazılarım okunmuyor, yorum gelmiyor, tıklanma olmuyor ve ben hiçbir şeyden anlamıyordum. Sonra Blogger panelini kurcalayarak Şablon bölümünden düzenleme yapmaya karar verdim. Pek bir bilgim olmadığından Blogger'ın temel şablonlarını deniyor ve arka plan rengini ayarlamaya çalışıyordum. Blogumun eski ve yeni halinin ekran görüntüsünü alıp grup konuşmasına atıyordum ve hangisinin daha iyi olduğunu soruyordum. Bana gelen cevap ise "Olum sadece arka plan rengini değiştirmişsin!" olmuştu.

Tema Arayışları

Bunun üzerine yine ülkemize güvenmeyerek Google'a "Blogger themes" şeklinde bir arama yaptım ve bir siteden herhangi bir beğendiğim temayı indirdim. Temanın nasıl yükleneceğini araştırmadan dosya içerisindeki kodu gerekli yere yapıştırdım. Kendi kendime nasıl yüklendiğini bulduğum için hayret ediyordum ama oldu işte.

Daha sonraları tema arayışlarına devam ettim ve günlerce her gün 5-10 tema olmak kaydı ile temaları tek tek denedim. Hastalık olmuştu sanki. Fakat bir sorun vardı bu temalar İngilizce idi. Bilgim olmadığından İngilizce olarak kullanmaya devam ettim. Tema İngilizce, yazılar Türkçe. Çelişkiye bakar mısınız?

İlk Düzenlemeler

Yine araştırmaya gerek duymadan temaları Türkçe yapmaya karar verdim. Ama nasıl olduğunu bilmediğimden fikir üretmeye başladım ve temada gördüğüm herhangi İngilizce bir kelimeyi arayıp kendimce Türkçesini yazdım ve kaydettim. Bir baktım ki başarılı oldum ve temayı tamamladım.

Bu arada ben tema araştırıp indirmeye devam ediyorum tabi. Mavi tonlarını sevdiğimden mavi renkli temalar indiriyordum. Aylar geçti ve bu renklerin de değişebileceği fikrine kapıldım. Yine araştırmadan etmeden # ile başlayan yerlerin renklerle alakalı bir yer olduğunu anlamıştım. Bir şekilde kendimi renk kodlarının olduğu bir sitede buldum ve renkleri tek tek düzenlemeye karar verdim. Düzenlemeler için neredeyse günümün tamamını harcıyordum. Şimdi fark ettim ki zaman kaybında o sıralar nirvanaya ulaşmışım.

İçerik girmektense temalarla uğraşıyordum ve farklı farklı temalar edinip sil baştan düzenlemelere devam ediyordum. Daha sonradan içerik yazmaya devam ettim ve bir yorum gelir ümidiyle bekledim. Tabi o zamanlar Google+ ve topluluklarından haberim yoktu.

Bırakma Düşünceleri ve Kişisel Blogumu Açma

İyice sıkılmaya ve tamamen bırakmaya karar vermiştim. Sonra farklı farklı bloglar açıyor, önceki yaptıklarımı tekrar ediyordum. Söylemeyi de unuttum ilk blogumu 2014 temmuz ayında açmıştım. Tarih oldu 2015 sonbaharı ve ben hiç ilerleme kaydedememiştim.

En sonunda kendime şu anda bulunmuş olduğunuz kişisel blogumu açtım. İçerikler, temalar, fontlar vs. derken eskisi gibi yine berbat etmiştim. Bu sefer yazılar ile tema arasında uyumsuzluk olduğunu düşünerek, içeriklerimi de silmiştim. Her seferinde böyle yaptığımdan belki de şu an 150-200 içerikle karşınızda olacaktım. Yaz, sil, tema düzenle derken ben hala yorum beklentisi içerisindeydim ve o yorum bir türlü gelmiyordu.

Yeniden Başlayış, Google+ ve GFC ile Tanışma

Aylar geçti ve ben bırakmanın eşiğindeyken adam akıllı bir tema düzenlemeye karar verdim. Sonra silmemek kaydı ile düzenli içerikler yazmaya da karar verdim. Bu kararı faaliyete geçirdiğim zaman ise 1 Ocak 2016 tarihi olmuştu. Hemen ardından Google+ ve topluluklar ile tanıştım. Baktım ki millet burada yazılarını paylaşıyor ben de bir paylaşayım dedim. Çok geçmeden ilk yazımı paylaştım ve Google+ topluluklarında da paylaşarak, diğer yazılarıma odaklandım. İlk kez yorum arayışında değilken, bir de ne göreyim kişisel bloguma yorum gelmiş!

Bayağı sevinmiştim. Daha fazla yazma isteği geldi ve topluluklardan yorumlar gelmeye devam ediyordu. Doğal olarak ben de seveceğim yazıları okuyor ve yorumluyordum. Tek bir eksik vardı, o da GFC kullanmamamdı. Sebebi ise ne işe yaradığını bilmemem ve görüntüyü bozmasıydı. Yine araştırma gereği duymadan ne işe yaradığını yaradığını anlayıp, sanırsam Nisan 2016 tarihinden beri kullanmaya başladım.

Eskisi gibi yapmıyor, yazılarımı tamamen özgün bir şekilde yazıyordum. E tabi doğal olarak karşılığını da alıyordum. Arada ufak tefek sinirlenerek bırakmayı dahi düşündüm ama elim varmadı. Tek düşündüğüm; ziyaretçiler için faydalı olabilecek yazılar yazmak ve yardımcı olabilmekti. Zamanla yazılarıma devam ettim, amacım ise sadece faydalı olmaktı. Bunun yanında zaman zaman kişisel konulara da yer verdim.

Tavsiyeler

Blogger'la Tanışma, Kişisel Blogumu Açma ve Bu Güne Kadar Getirme Sürecim

Öyle böyle bu güne geldim işte. Şimdi de sizlere bu yazıyı yazıyorum. Umarım benim düştüğüm hiçbir hataya düşmezsiniz. Şimdi sizlere yaşadıklarımı da ele alarak birkaç tavsiye vermek istiyorum. Hem yeni blog açacak ya da açmış olanlara rehber olur hem de sizler de bu hatalara düştüyseniz, düzeltme fırsatınız olur.
  • Blogunuzu açarken beklentiniz kesinlikle yorum almak ve para kazanmak olmasın. Sonuç hüsran olacaktır.
  • Yazılarınızda kesinlikle bir cümle olsa bile kopyala-yapıştır yapmayın. Özgün olun ve emek verin. Aksi halde kaldığınız yerde sayıklamaya devam edersiniz.
  • Blogunuzu açtığınızda yapacağınız ilk şey tema seçimi yapmak ve ayarlarınızı düzenlemek olsun. Yoksa ileride çok fazla zaman kaybedersiniz. İleride ise zamanınızı sadece yazı yazmaya harcayın. 
  • Google+ topluluklarını kullanarak diğer Blogger kullanıcıları ile yardımlaşın, iletişim halinde olun. 
  • GFC (İzleyiciler) widget'ını kalıcı olarak blogunuza yerleştirin. Sizin yararınıza olacaktır.
  • Bir blog açtıysanız ve yazılar yazdıysanız, bırakmayı asla ve asla düşünmeyin. Eğer bırakacaksanız zaten hiç açmayın daha iyi. Bir hevesle açılan ve aynı hızda hüsrana uğrayan birçok blog gördüm, sizler yapmayın.

Son Sözler

Öncelikle zaman ayırıp bu sıkıcı ve biraz uzun yazının tamamını okuyup bu satırları da okuyan herkese teşekkür ediyorum. İşte sizlere Blogger serüvenimi bir nebze olsun anlattım. Umarım ki benim düştüğüm hiçbir hataya düşmez, başarılı bir şekilde işlerinizi halledebilirsiniz. 

Şunu da belirtmek istiyorum; bilgisayara geçme fırsatım olmadığından mobilden yazmak zorunda kaldım ve saatlerimi bu yazı için harcadım. Tek isteğim yazıya gelenler tarafından okunmasıydı. 

Sizler eksik bulduğunuz yerleri tamamlayabilir, öğrenmek istediğiniz bir şey olduğunda sorabilir ve tavsiyelere eklemeler de yapabilirsiniz. Peki sizler bu yazım hakkında neler düşünüyorsunuz?Yorum bölümünde belirtebilirsiniz.

13 Ağustos 2016 Cumartesi

Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!


Blogunuz için yazı yazmanın dışında görsel açıdan güzelleştirmeniz gerekir. Bu sayede ziyaretçilerin ilgisini çekebilir, blogunuzun görselliğini artırabilirsiniz. Ben de biraz araştırma yaptım ve araştırma sonucunda derlediğim 4 adet eklentiyi sizler için paylaşıyorum. Belki de aralarından hoşlandıklarınız olabilir ve kullanmaya başlayabilirsiniz. Haydi geçelim mi o eklentilere?

1. Filmleriniz İçin Puanlama

Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!

İzlediğiniz ya da yorumladığınız herhangi bir filmi ve diziyi bu eklenti sayesinde puanlayabilirsiniz. Ayrıca hemen altında da ufak bir açıklama yapabileceğiniz bu eklenti sizler için biçilmiş kaftan olacaktır.

  • Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.
[/*Review Widget */ .BSReview-summary{position:absolute;z-index:2;bottom:0;font-size:14px;left:14px;right:14px} .BSReview-summary{opacity:1} .BSReview-summary p,.BSReview-summary h3{margin:0} .BSReview-summary h3{font-size:20px} .BSReview-summary p{padding:10px} .BSReview-summary a{color:#FFF} .bs-review{border:1px solid #E7E7E7;margin-bottom:15px} .review-item,.item-summary:first-child{border-bottom:1px solid #E7E7E7} .review-item{padding:12px} .review-item:last-child{border-bottom:0} .rev-value-outer{background-color:rgba(0,0,0,0.10);overflow:hidden;box-shadow:inset 0 0 4px rgba(0,0,0,0.2)} .rev-value{height:10px;background-color:#E74C3C;box-shadow:0 0 5px rgba(0,0,0,0.3)} .review-circle{padding-bottom:5px;overflow:hidden;font-size:14px} .review-circle span{font-weight:400;float:right} .review-box {width:75%} .review-box{display:review-box;vertical-align:middle;margin-top:0;margin-bottom:0;float:left;margin:10px 0;margin-right:2%} .review-wrapper .review-box{display:block; width:20%} .item-summary{overflow:hidden;text-align:justify} .item-summary h4{margin:0 0 10px;display:inline-block;padding:3px 8px;background-color:#E74C3C;color:#FFF;text-transform:uppercase;font-size:16px} .item-summary span{display:block} .review-circle-place{padding:10px 12px;vertical-align:top} .review-wrapper{border-left:1px solid #E7E7E7;width:140px;text-align:center;font-weight:600;padding:10px 10px 20px;vertical-align:bottom;background-color:rgba(0,0,0,0.03)} .rev-score{font-size:50px} .srev-place{position:absolute;top:0;right:0;color:#E74C3C;font-size:30px;font-weight:600;width:50px;height:50px;text-align:center;line-height:50px;background-color:rgba(255,255,255,0.50)} .items .srev-place{right:auto;left:0;font-size:17px;width:30px;height:30px;line-height:30px} .c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto,auto,auto,auto)} .c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid #E74C3C;width:0.84em;height:0.84em;clip:rect(0em,0.5em,1em,0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)} .pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} .c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 15px 10px;border:9px solid #dcdcdc;border:9px solid rgba(0,0,0,0.1)} .c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} .c100 > .rev-score{position:absolute;width:100%;z-index:1;left:-0.28em;top:-0.28em;width:3.35em;line-height:3.35em;font-size:0.3em;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out} .c100:after{position:absolute;top:0.08em;left:0.08em;display:block;content:" ";-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:transparent;width:0.85em;height:0.85em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in} .c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em,1em,1em,0.5em);top:-0.074em;left:-0.074em} .c100:hover{cursor:default} .c100:hover > .rev-score{color:#E74C3C;-webkit-transform:scale(1.35)} .c100:hover:after{top:0.04em;left:0.04em;width:0.92em;height:0.92em} .top-revscrore{float:left;width:150px;text-align:center;height:150px;margin-right:10px;font-weight:600}] 

  • Son olarak aşağıda vermiş olduğum kodu yazılarınızı yazdığınız bölümde bulunan HTML kısmına tıklayın ve istediğiniz yere yapıştırın.
[<div class="bs-review"> <div class="review-item"><div class="review-circle">Hardware<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div> <div class="review-item"><div class="review-circle">Design<span>7</span></div><div class="rev-value-outer"><div class="rev-value" data-value="7" style="width:70%"></div></div></div> <div class="review-item"><div class="review-circle">Graphics<span>8</span></div><div class="rev-value-outer"><div class="rev-value" data-value="8" style="width:80%"></div></div></div> <div class="review-item"><div class="review-circle">Sound<span>9</span></div><div class="rev-value-outer"><div class="rev-value" data-value="9" style="width:90%"></div></div></div> <div class="item-summary"><div class="review-circle-place review-box"><h4>Summary</h4><span>HTC ONE X9 is another budget phone announced in 2016. This phone has got stylish looks and elegant design. This Smartphone’s body is averagely slim because the thickness is only 8mm which is good for grip. HTC ONE X9 is a 4G supported LTE phone with 5.5 inch capacitive touch screen.</span></div> <div class="review-wrapper review-box"><div class="overall-inner"><div class="c100 p75"><div class="rev-score">8.5</div><div class="slice"><div class="fill"></div><div style="transform: rotate(270deg);" class="bar"></div></div></div><span>Overall Score</span></div></div></div> </div>]

2. Mobil Uyumlu Paylaşım Butonları

Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!

Toplam paylaşım sayısının bulunduğu, mobil uyumlu olan ve bir o kadar da şık bir paylaşım butonlarına sahip olmak ister miydiniz? Ufak bir kod sayesinde sahip olabilirsiniz ayrıca buradaki siteye gidip kendinize göre düzenleyip de kullanabilirsiniz.

  • Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına <data:post.body/> yazıp Enter tuşuna tıklayın.
  • <data:post.body/> kodunun bir alt satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.
[<div class="don-share" data-style="icons" data-limit="4"> <div class="don-share-total"></div> <div class="don-share-facebook"></div> <div class="don-share-twitter"></div> <div class="don-share-google"></div> <div class="don-share-linkedin"></div> <div class="don-share-pinterest"></div> <div class="don-share-tumblr"></div> <div class="don-share-stumbleupon"></div> <div class="don-share-reddit"></div> <div class="don-share-hackernews"></div> <div class="don-share-buffer"></div> <div class="don-share-xing"></div> <div class="don-share-pocket"></div> <div class="don-share-fancy"></div> <div class="don-share-yummly"></div> <div class="don-share-scoopit"></div> <div class="don-share-weibo"></div> <div class="don-share-vk"></div> <div class="don-share-mailru"></div> <div class="don-share-odnoklassniki"></div> <div class="don-share-hatena"></div> </div> <script type="text/javascript"> (function() { var dr = document.createElement('script'); dr.type = 'text/javascript'; dr.async = true; dr.src = '//share.donreach.com/buttons.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr); })(); </script>]

Ayrıca şunu da belirteyim  <data:post.body/> kodu birden fazla bulunmaktadır. İlk denediğiniz yer olmazsa deneme yanılma ile diğer <data:post.body/> kodunun altına kodları yapıştırmayı deneyiniz.

3. Animasyonlu Popüler Yazılar

Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!

Göz alıcı bir animasyonla birlikte gelen ve minimalist tasarıma sahip alternatif bir popüler yazılar eklentisidir. Kullanmadan öncesi Popüler Yayınlar widget'ında küçük resim seçeneğinin aktif olmasına dikkat edin.

  • Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.
[.sidebar .PopularPosts .item-content {font-family:Raleway;position: relative;float: left;max-height: 310px;width: 100%;text-align: center;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);font-size: 20px;margin: 0px auto;background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;} .sidebar .PopularPosts .item-content * {-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content img {max-width: 100%;position: relative;top: 0;left: 0;} .item-content .item-title {position: absolute;top: 50%;left: 30px;right: 30px;line-height: 1.6em;-webkit-transform: rotate(0deg) translateY(-50%) scale(1);transform: rotate(0deg) translateY(-50%) scale(1);-webkit-transform-origin: center 0;transform-origin: center 0;} .item-content .item-title a {top: 50%;letter-spacing: -1px;color: #ffffff;text-transform: uppercase;padding: 10px 0;margin: 0;font-weight: 400;} .item-content .item-title a:hover {color: #fff;} .item-content .item-title:before,.item-content .item-title:after {background-color: rgba(255, 255, 255, 0.8);width: 100%;height: 2px;position: absolute;content: "";display: block;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content .item-title:before {left: 0;top: 0;} .item-content .item-title:after {bottom: 0;right: 0;} .item-content:hover .item-title,.item-content.hover .item-title {-webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);transform: rotate(-29deg) translateY(-50%) scale(0.9);} .item-content:hover .item-title:before,.item-content.hover .item-title:before,.item-content:hover .item-title:after,.item-content.hover .item-title:after {width: 200%;} .sidebar .widget{clear:both} .sidebar .PopularPosts .item-snippet {display: none;} .sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child {width: 100%;max-height: 100%;opacity: 0.9;} .sidebar .PopularPosts ul li:nth-child(even) {margin-right: 2%;} .sidebar .PopularPosts ul li:nth-child(2) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(3) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(4) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(5) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(6) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(7) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(8) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(9) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(10) .item-content {font-size: 12px} .sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow: hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;} .sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 123px;object-fit: cover;padding: 0; }]

Daha sonra Kontrol Paneli'nde bulunan Yerleşim seçeneğine tıkladıktan sonra herhangi bir Gadget ekle seçeneğine tıklayın. Popüler Yayınlar widget'ını seçtikten sonra yukarıda da dediğim gibi küçük resim seçeneğini işaretleyip kaydedin.

4. Yazı İçerisinde HD Twitter İkonları

Hiçbir Yerde Bulamayacağınız 4 Adet Blogger Eklentisi!

Blogunuzun her kısmında kullanabileceğiniz HD twitter ikonlarıdır. Yalnızca yüz ifadeleri ile sınırlı kalmayıp, yüzlerce ikonu da barındırmaktadır.

  • Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayın. Ardından karşınıza gelen arama ekranına </body> yazıp Enter tuşuna tıklayın.
  • </body> kodunun bir üst satırına aşağıda bulunan kodları yapıştırın ve şablonu kaydedin.
[<script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/master/twemoji2a2.min.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>]
Örneğin yazı içerisine ikon eklemek istiyorsanız, buradan istediğiniz ikonun kodunu kopyalayıp yazının HTML kısmına yapıştırınız.

Son Sözler

Gönül ister ki, buraya onlarca eklenti yazayım ve sizlerle paylaşayım, sizler için daha iyi olsun. Fakat hepsini bir anda paylaşırsam başka günlere ne kalır? Bu sebeple azar azar sizlerle paylaşacağımdan emin olabilirsiniz. Peki sizler bu eklentiler hakkında neler düşünüyorsunuz, beğendiniz mi?

28 Temmuz 2016 Perşembe

Blogger'da Youtube Videoları Mobil Uyumlu Hale Nasıl Getirilir?


Birçok Blogger kullanıcısı yazı içeriğinde Youtube videoları kullanmış ve kullanmaya devam etmektedir. Fakat bu videolar mobil uyumlu olmadığı taktirde, görünümü göze hitap etmeyen bir şekilde olacaktır. Bu sebeple göze hitap etmesi için mobil uyumlu hale getirmek gerekir. Aşağıda vereceğim birkaç satırlık kodu gerekli yere yapıştırdığınız zaman videolarınız mobil uyumlu hale gelecektir. Anlatmaya çalıştığım olayı aşağıdaki ekran görüntülerinden daha iyi anlayabilirsiniz.

Blogger'da Youtube Videoları Mobil Uyumlu Hale Nasıl Getirilir?

Görselden de anlaşıldığı üzere Youtube videoları mobil uyumlu olmadığı zaman, Youtube görseli tam olarak çıkmıyor ve en-boy oranında ise orantısızlık oluşuyor. Mobil uyumlu hale getirdiğiniz taktirde bu sorunu ortadan kaldıracak ve daha iyi görüntüleyebileceksiniz. Yazımı çok fazla uzatmadan kısaca yapmanız gerekenlere geçeyim ben.

  • Blogger Kontrol Paneli'nde bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayın ve Ctrl+F tuşlarına tıklayıp gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayın.
  • ]]></b:skin> kodunu bulup bir üst satırına aşağıda vermiş olduğum CSS kodunu yapıştırın.
[/* CSS Only */ .post-body iframe{width:100%!important;} @media screen and (max-width:960px){ .post-body iframe{max-height:90%}} @media screen and (max-width:768px){ .post-body iframe{max-height:75%}} @media screen and (max-width:600px){ .post-body iframe{max-height:60%}} @media screen and (max-width:480px){ .post-body iframe{height:auto!important;max-height:auto!important}}]

  • Son  olarak Şablonu Kaydet seçeneğine tıklayın
Böylece Youtube videolarını mobil uyumlu görüntüleyebilirsiniz. Varsa sorularınız sorabilirsiniz. Ayrıca yapamayanlar için de yardımcı olurum. Peki sizler bu eklenti hakkında neler düşünüyorsunuz?

26 Temmuz 2016 Salı

Blogger'da Logo veya Blog Başlıklarınıza Efekt Ekleme Eklentisi

Blogger'da Logo veya Blog Başlıklarınıza Efekt Ekleme Eklentisi

Uzun zamandan beri Blogger için eklenti paylaşmadım galiba. Geçen gün bir Arap blogunda karşılaştığım muhteşem eklentiden bahsetmek istedim. Kendim hemen kullanmaya başladım ve sizlerin de beğeneceğinizi düşünerek hemen paylaşmaya karar verdim. Pek önemli bir eklenti olmasa da bloguna azıcık görsellik katmak isteyenler için iyi bir eklenti olduğunu düşünüyorum.

Belki de fark edeniniz vardır. Logonun (biliyorum çok dandik) üzerine geldiğinizde şekil şukul bir eklenti beliriyor. İşte ben de bu eklentiden bahsedeceğim, beğenen varsa da kendi blogunda kullanır. Hemen belirteyim, çok fazla uğraş gerektirecek bir şey de değil. Aşağıda bulunan birkaç satır kodu gerekli yere yapıştırın ve kullanın. Lafı çok fazla uzatmadan yapmanız gerekenlere geçeyim ben.

  • Blogger Kontrol Paneli'nde sol tarafta bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
  • Kodların bulunduğu alana bir kez tıklayıp CTRL+F tuşlarına tıklayın. 
  • Gelen arama kısmına ]]></b:skin> yazıp Enter'a tıklayın ve ]]></b:skin> kodunun bir üst satırına aşağıda görmüş olduğunuz kodu yapıştırın.
[#header h1 a:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}#header img:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}  }]

Son Sözler

Yapacaklarınız bu kadardı. Artık blog başlıklarınızın veya logolarınızın mouse ile üzerine gelindiğinde hoş bir animasyon belirecektir. Animasyonun nasıl olduğunu öğrenmek için benim logomun üzerine gelmeniz yeterlidir. Umarım bu küçük eklentiyi sizler de beğenmişsinizdir. Az daha unutuyordum, blog başlıklarınızdan kastım H1 yani blogunuzun adının olduğu başlıktır. Fikirlerinizi yorum olarak belirtebilirsiniz ya da beğendiyseniz aşağıdaki butonlara tıklayarak paylaşabilirsiniz.

14 Temmuz 2016 Perşembe

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

SEO Uyumlu Makale, Bazı Püf Noktalar, Dikkat Edilmesi Gerekenler ve Daha Fazlası...

Buradaki yazımda başlık ve açıklamasında belirttiğim gibi, Blogger'da yazdığınız yazıları tabiri caizse arama motorlarına nasıl sevdirebileceğiniz hakkında birkaç şeye değineceğim. Umarım faydasını görürsünüz. Daha önceden de bu yazının demosu niteliğinde olan "Blog'da Yazı Yazarken Dikkat Edilesi Şeyler" adlı yazıma da bir göz atabilirsiniz. Şimdiki yazacaklarım daha önceki yazmış olduğum yazının bir tık fazlasıdır, haberiniz olsun.

İster Blogger, ister Wordpress, isterse de diğer platformlar olsun, yazdığımız yazıları arama motorlarının beğeneceği türden yazmalıyız. Nasıl ki bir manava gittiğimizde çürük olan bir sebze ya da meyveyi seçmiyorsak, arama motorları da tabiri caizse çürük yazıları yukarılarda göstermek istemiyor. Yazılar yukarılarda olmadığından dolayı amacımıza ulaşamayacak ve gerekli kitleye istediklerimizi iletemeyeceğiz. Hal böyle olunca yazı yazarken birtakım şeyleri uygulamak ve dikkat etmek gerekir. Gelin bu dikkat etmemiz gereken şeylere biraz daha yakından göz atalım!

Başlık ve Yazı İçeriği

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Daha önceden indexlenmemiş bir başlık, sizler için en iyisi olacaktır. Ayrıca başlık kullanırken daha dikkat çekici olmasına ve (Türkçede olduğu gibi) her kelimesinin ilk harfinin büyük olmasına dikkat etmek gerekir. Son olarak kullandığınız başlık "Etiketler" kısmında kullandığınız anahtar kelimelerden birini ya da daha fazlasını içermeli ki yazılarınız daha yukarılarda görünebilsin. Diyelim ki kullandığınız ana anahtar kelime "Blogger"olsun. Yazı başlığında da "Blogger" kelimesinin geçmesi gerekir.

Yazi içeriği içinse, ilk olarak özgünlük şarttır. Her yerde karşınıza çıkıyor değil mi özgünlük kelimesi? Hemen biraz açıklık getireyim şu olaya. Özgünlükten kastım, yazacağınız yazıyı kendi cümleleriniz ile yazmak, alıntı yapmamak, kopyala-yapıştır asla ve asla yapmamaktır. Çünkü Google bu tarz şeyleri anlamayacak kadar basit bir şey değildir.

Diyelim bir yazıyı kopyala-yapıştır yöntemi ile paylaştınız. Öncelikle emek hırsızlığı yapmış olacaksınız ki bu hem suç hem de islami yönden uygun değil. Her neyse işin blogi (:D) yönünden bakarsak Google, paylaştığınız yazıyı kesinlikle ve kesinlikle kopyala-yapıştır ile paylaştığınızı anlayacak ve cezayı yapıştıracaktır. Bu ceza ile birlikte yazılarınız arama motorlarında bile gözükmeyecektir.

Az çok özgünlüğü anlattım. Şimdi ise yazının nasıl olması gerektiğine geçelim. Yazının muhakkak Türkçe yazım ve imla kurallarına uygun bir şekilde yazılmasına özen gösterilmelidir. Her şeyde olduğu gibi bu konuda da Google, yazım ve imla kurallarına uymuş ya da uymamış bir yazıyı seçebilmektedir.

Yazınız en azından 250 kelimeden fazla olmalıdır. Söylentiye göre Google 250 kelimeden az olan yazıları değersiz olarak kabul etmektedir ki bu da biz yazarların canını sıkabilir. Aslında önemli olan kelime sayısı değil, özgünlükle beraber yazım ve imla kurallarına uygunluktur diye düşünüyorum. Yazınızın kelime sayısını öğrenmek için buradaki yazımda bulunan "Word Count" eklentisini kullanabilirsiniz.

Yazdığınız yazıları sıkışık bir şekilde değil de gerektiği yerlerde paragraflara ayırarak, paragraflar arası eşit bir şekilde boşluk bırakarak daha derli toplu yazmak gerekir. Ayrıca yazı içerisinde kalın (bold), eğik (italik), altı çizili (underline), fosforlu gibi yazı çeşitlerini de kullanmak gerekir. Özellikle anahtar kelimeleri bu gibi yazı çeşitlerini kullanarak yazdığınız taktirde Google'ın yazınızı anlaması daha kolaylaşacaktır.

Yazının ilk 100 kelimesi içerisinde ana anahtar kelimeyi kullanmak çok faydalı olacaktır. Ayrıca ana anahtar kelimenizi yazınızın tamamında %3 ile %5 arası kullanmanız gerekmektedir. Bu da demek oluyor ki, 300 kelimelik bir yazı yazdıysanız, anahtar kelimeyi 9 ile 15 arası bir sayı kadar kullanmanız gerekmektedir. Fazlası spam olarak algılanabileceğinden ceza yeme olasılığınız artacaktır.

Yazı içeriğinde başlık(lar) ve alt başlık(lar) kullanmak hem ziyaretçi için kolaylık olacak hem de Google tarafından yazınız daha kolay ayrıştıralacaktır. Son olarak yazınızın düzenli olması ziyaretçiler açısından her zaman önem kaynağı olacaktır. Bu da arama motorlarındaki sıralamanızı etkileyen bir durumdur.

Başlık ve yazı içeriği hakkında söyleyeceklerim bu kadardı. Elbette ki unuttuğum, bilmediğim, yanlış yorumladığım ve benzeri bazı konular olacaktır. Sizler bu hata ve eksiklikleri belirtmeniz halinde yazımı düzelteceğimden emin olabilirsiniz.

Görsel

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Kesinlikle yazınızın içeriğinde en az bir adet görsel kullanmalısınız. Bu görsel, ziyaretçi açısından göze hitap edecek şekilde olmalıdır. Görseliniz yüksek çözünürlüğe sahip olmalı ve görsel adının "x10aıghaa234.png" yerine "Yazınızın Başlığı.png" şeklinde olması çok daha iyi olacaktır.

Görselinizin mutlaka yükseklik (height) ve genişlik (width) değerlerine sahip olması gerekir. Zaten çoğunlukla otomatik olarak bu değerleri aldığından sizin dikkat etmeniz gereken şey resim boyutunun "Orjinal boyut" seçeneğin olmaması. Çünkü bu seçenekte olduğu zaman görseliniz yükseklik ve genişlik değerlerini otomatik olarak almayacaktır. Dilerseniz de yazının "HTML" bölümünden istediğiniz yükseklik ve genişlik değerini verebilirsiniz.

Görsel ile ilgili belki de en önemli konuya gelelim. Tabiki de ALT ve TITLE etiketleri. Bu konu ile ilgili birçok yazıya denk gelmişsinizdir sanırım. Fakat yabancı bir terim olduğundan dolayı anlamakta sıkıntı çekebiliyoruz. Hemen şöyle izah edeyim: ALT ve TITLE etiketleri sayesinde Google yazınızı görselden bile tanıyabilir. Bu sebeple yazılarınızın daha üst sıralara çıkması olasıdır.

Herhangi bir görsele ALT ve TITLE etiketleri eklemek istiyorsanız, görseli Blogger'ın yazı kısmına yükledikten sonra üzerine tıklayıp "Özellikler" seçeneğine tıklamanızdır. İlk boşluğa blog başlığınızı yazabilir, 2. boşluğa ise anahtar kelimeler yazabilirsiniz.

Görselinizi alıntı yapmadan kendiniz oluşturduğunuzda Google daha çok beğenecek ve bu sebeple üst sıralara çıkma olasılığınız artacaktır. Photoshop, Illustrator hatta Paint'le bile görselinizi oluşturabilirsiniz. Ayrıca programa ihtiyaç duymadan online resim düzenleyicilerinden de görselinizi oluşturabilirsiniz. Hatta online düzenleyicilerden biri olan "Canva" hakkındaki yazıma buradan erişebilirsiniz.

Görsel ile ilgili söyleyeceklerim bu kadardı. Yukarıda dediğim gibi  elbette ki unuttuğum, bilmediğim, yanlış yorumladığım ve benzeri bazı konular olacaktır. Sizler bu hata ve eksiklikleri belirtmeniz halinde yazımı düzelteceğimden emin olabilirsiniz.

Yayın Ayarları

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Belki de burada yazmış olduğum yazının en önemli kısmıdır. Yazı ile işiniz bittikten sonra "Yayınla" butonuna basmadan önce mutlaka bu yazdıklarımı uygulamanız gerekmektedir. Blogger yazı editörünün hemen sağ tarafında bulunan bu ayarları isterseniz yakından inceleyelim.

Etiketler

Yazınızı asıl belirleyen bir ayardır. Bu sayede yazılarınız hem Google'ın gözünde hem kategorilenir hem de yazı hakkında Google bilgi sahibi olur, tabi doğal olarak bu kategorilendirmeye göre indexleme işlemini yapar.

Bu kısımda aralarında virgül olmak kaydı ile yazınız ile ilgili birkaç tane anahtar kelime yazıp "Tamamlandı" butonuna tıklamanız yeterli olacaktır. Her şeyin fazlası zarar olduğundan bu kısmı etiket yağmuruna tutmak spam olarak algılanacağı için ceza yeme olasılığınız da artacaktır.

Program Yap

Bu kısmı kullandığınız taktirde yazınız istediğiniz tarih ve saatte yayınlanır. Blogunuzun istatistiklerine bakarak ziyaretçilerinizin en fazla hangi saatte blogunuzu ziyaret ettiğini kontrol ettikten sonra yazınızı ziyaretçi trafiğinin en çok olduğu zamanlar paylaşabilirsiniz. Daha çok ziyaretçi trafiği olduğundan dolayı yazınızın da üst sıralara çıkma olasılığı artacaktır. Yapmanız gereken şey "Program Yap" seçeneğine tıkladıktan sonra istediğiniz tarih ve saati seçip "Tamamlandı" butonuna tıklamaktır. 

Kalıcı Bağlantı

Aynı başlığa ve içeriğe sahip iki yazı olsun. Birisinde "Kalıcı Bağlantı" kullanılsın ve diğerinde kullanılmasın. "Kalıcı Bağlantı" kullanılan yazının daha üst sıralarda olacağından şüpheniz olmasın. Bu ayarı kullanmadığınız taktirde, uzun başlıklı yazılarınız varsa bağlantı yarıda kalacak ve başlığınız Türkçe karakter içeriyorsa bağlantı kısmında Türkçe karakterler gözükmeyecektir. Düzenlemek için "Kalıcı Bağlantı" seçeneğine tıklayıp URL kımını Türkçe karakterler olmadan, onların yerine benzerlerini (örneğin: ş yerine s, ı yerine i, ğ yerine g gibi) yazdıktan sonra "Tamamlandı" butonuna tıklayınız. Aşağıdaki görselden işaretlediğim kısma bakarak "Kalıcı Bağlantı'nın" ne demek olduğunu daha iyi anlayacaksınızdır. Son olarak buradaki yazıma göz atarak "Kalıcı Bağlantı" ile ilgili daha fazla bilgiye sahip olabilirsiniz.

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Arama Açıklaması

Bu ayar da "Kalıcı Bağlantı" ayarından bir tık daha önemlidir. Bu ayar sayesinde aşağıdaki görselde de işaretlediğim gibi blog başlığının hemen altında yazı ile ilgili açıklama bölümünü düzenleyebilirsiniz. Bu sayede ziyaretçi yazınızın ne ile ilgili olduğuna bakacak ve en belkide "Arama Açıklaması" olmayan yazının aksine "Arama Açıklaması" olan bir yazıyı tercih edecektir. Ayrıca yazacağınız açıklama metni içerisinde anahtar kelime bulunduğu zaman üst sıralara çıkma olasılılığı daha da artacaktır. Arama Açıklaması'nı düzenlemek için "Arama Açıklaması" seçeneğine tıkladıktan sonra boşluğa 1-2 cümle yazdıktan sonra "Tamamlandı" butonuna tıklamaktır. Son olarak buradaki yazıma göz atarak Arama Açıklaması ile ilgili daha fazla bilgiye sahip olabilirsiniz.

Blogger'da Arama Motorlarının Beğeneceği Türde Yazılar Nasıl Yazılır?

Son Sözler

Bu yazımda sizlere yazı yazarken uyulması gereken birkaç kuraldan bahsettim. Bu kuralları uyguladığınız taktirde çok fazla faydasını göreceğinizden eminim. Eksik kalan yerleri tamamlayabilir, yanlış bulduğunuz yerleri belirtebilirsiniz. Anlamadığınız bir şey olduğunda her zaman yardımcı olmaya çalışırım, sormaktan çekinmeyin.

Sizlere bu yazımla az da olsa faydalı olabildiysem ne mutlu bana. Peki sizler bu yazım hakkında ne düşünüyorsunuz?