Deneyimli Blogger kullanıcıları için çok gereksiz bir konu gibi olsa da Blog Hocam’ın her seviyede blog yazarına hitap ettiğini ve içeriğinin büyük bir kısmının okuycu talepleri ile oluştuğunu unutmayın lütfen.

Blogger’a yeni başlayan kullancıların en çok sorduğu soraların başında geliyor Blogger’da kategori oluşturma mevzusu. Bu sorulara cevap olması ve yeni Blogger kullanacaklara yol göstermesi açısından bu yazıyı yazmak istedim.

Blogger’da Kategori Nasıl Oluşturulur?

Blogger’da kategori oluşturma sistemi Wordpress veya diğer CMS’lerde olduğundan farklıdır. Örneğin müzik kategorisinde yazılar için müzik isimli bir sayfa oluşturulup yazılar o sayfanın içine yazılmaz ya da gönderilmez. Blogger’da yazıları bir farklı kategorilere ayırmak için etiketleme sistemi kullanılır.  Şimdi adım adım kategori oluşturmaya geçelim.

1. Adım: Öncelikle yazıları ayıracağımız kategorileri belirleyelim. Bu örneklte ben 4 adet kategori oluşturacağım. Kategoriler spor, kitap, teknoloji ve dans olsun. Şimdi spor ile ilgili bir yazı yazdığımızı düşünelim ve bunu spor kategorisine nasıl göndereceğimze geçelim.

Resimde gördüünüz gibi yazıyı yazdıktan sonra sağ taraftaki yayın ayarlarında etiketler kısmına yazıyı göndermek istediğim kategori olan spor yazıyorum ve tamamlandı butonuna basıyorum. Artık yazıyı yayınladığımda yazının kategorisi spor olacak.

2. Adım: Aynı şekilde diğer yazılarımı da kategorilere ayırdıktan sonra sıra bu kategorileri blogun ana sayfasında menü şeklinde göstermeye geliyor. Kategoriler menüsü genellikle 2 yerde kullanılır. Sidebar dediğimiz blogun kenar çubuğuna dikey menü şeklinde ve kayıt alanın üstüne yatay menü şeklinde. İlk olarak yan tarafa dikey menü şeklinde eklemeyelim.

Blogger kyumanda panelinde sağ taraftaki yerleşim sekmesine tıklayıp blogun yan taraflarındaki boş gadget alanlarında birinde gadget ekle yazısına tıklayın ve listeden etiketler isimli gadgetı seçin.


Burada gadget başlığı olarak kategoriler yazdıktan sonra kaydedin. İsteğinize bağlı olarak hangi kategoride kaç yazı olduğunu gösterebilir, kategorileri çoktan aza göre sıralayabilir veya gözükmesini istemediğiniz kategorileri kaldırabilirsiniz. Değişiklikleri kaydedikten sonra blogunuzu ziyaret ettiğinizde kenar çubuğunda şuna benzer bir dikey kateoriler menüsünün olduğunu göreceksiniz.

Şimdi de kategorileri yatay bir menü şeklinde blog kayıtlarının üst tarafında göstermeye geçelim. bunun için yapmanız gerken tek şey kenar çubuğunda eklediğimniz gadgetı sürükle bırak yöntemiyle blog kayıtlarının üstündeki boş gadget alanına taşımak.

Düzenlemeyi kaydettiğinizde aşağıdaki resimde gördüğünüz gibi kategorileriniz yatay menü şeklinde blog kayıtlarının üzerinde gözükecektir.

Sonuç olarak spor kategorisinde yazdığım yazı, diğer tüm kategorilerdeki yazılarla birlikte ana sayfada yer alır ama kategoriler menüsünden spor kategorisini tıkladığımda sadece spor kategorisindeki yazılar listelenir.

Umarım yeterince açıklayabilmişimdir.

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım eklenti Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum.

Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim.

1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle widget oluşturma sayfasına giderek Create account butonuna basın.


Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz.

2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz.

Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz.

3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.  

Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.

<div class="rw-ui-container"></div>

Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz.

İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne <br/> kodunu ekleyebilirsiniz.

İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-container"></div>
</b:if>

Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.

Bir blogger olarak en çok ihtiyacım olan donanım veya cihazları sorsalar ilk sıraya tabletimi koyarım. Bloggerların zihni sürekli açıktır ve eçevresinde olup bitenlerden ilham alarak içerik üretirler. Yazı fikrinin nasıl, nerede, ne zaman geleceği belli olmadığı için yanımızda ya bir not defteri ya da daha teknolojik bir çözüm olan tablet bulundurmalıyız.

 
Önceleri ben de not defteri ve kalem kağıtla idare etmeye çalışırken bunun pek de verimli olmadığına artık tablet almam gerektiğine karar vererek piyasada ihtiyaçlarımı karşılayacak table arayışlarına başladım.

 
Öncelikle kullanımı kolay bir tablet arıyordum. Malum bloggerlar bol bol klavye kullanırlar. Alacağım tabletle blog yazılarımı kolayca yazabilmeliydim. Ayrıca seyahatlerimde kolayca taşıyabileceğim ve elektriğe ihtiyaç duymadan uzun süre kullnabileceğim bir tablet olmalıydı. Şık bir görünüşü olsa da hiç fena olmazdı hani :)

 
Bu özelliklerde bir tablet ararken http://www.turkcell.com.tr/cihazlar/tabletler linkinde, Acer W511 ile karşılaştım. Ayrılabilir klavyesi, 18 saate kadar dayanabilen şarjı ve minimal tasarımı ile ihtiyaçlarımı karşılıyordu. Ancak tablet almak tek başına yetmezdi. Bir de internet paketim olmalıydı ki ihtiyaç duyduğumda blguma veya çevrimiçi servislerime erişebiliyim.  Tam da bu noktada Turkcell'in avantajlı teklifleriyle karşılaştım. Acer W511 ve  internet paketine bir arada avantajlı bir fiyata Turkcell güvencesiyle sahip oldum. Artık dilediğim yerde bloguma erişebiliyor ve yazılarımı yazabiliyorum. Siz de Acer W511 gibi kullanışlı bir tablete turkcell avantajlarıyla sahip olmak isterseniz burayı ziyaret edebilirsiniz.

<!--Koddostu Büyüleyici Duyuru Panosu Html Kodu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->

<div id="menucon"><div id="koddostu-tex"><br/><b>DUYURU</b><br/><br/>

Sitemize Hoşgeldiniz!

<br/><br/>

Koddostu.com tarafından sitemiz için hazırlanan bu duyuru panosunda sitemize dair en güncel yenilikleri paylaşacağız!

</div></div>
<koddostu><style> #menucon{ position:fixed; bottom:10px; left:10px; width:130px;height:130px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9SnEbomKpRHFwAH5m7pWkj0qJ0QdTT6vgSwdpzpaGxojTruvukKh5OVro1ifFH2-qBDMbmewXRnLLMNDB1_n_2vKL3pu3bpkqTrGLRt_99xFsCXZU7HJ-9d45lSqeXBNhuB_JFAjarNI/s1600/see.png) no-repeat center center; transition: all 0.8s ease-in-out; background-size:cover; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; } #menucon:hover{ bottom:35px;left:35px; width:80px;height:80px; transform: rotate(720deg); -ms-transform: rotate(720deg); -webkit-transform: rotate(720deg); }#koddostu-tex{position:absolute;bottom:37px;left:38px; box-shadow: -1px 1px 5px 0px #888888; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; line-height:22px; -webkit-transition-timing-function:ease-in-out; opacity:0; width:0px;height:0px; padding:6px;color:#fff; font-family:Helvetica, Arial, sans-serif; font-weight:normal; text-decoration:none; font-size:14px; text-align:center; -webkit-border-radius: 8px; -webkit-border-bottom-left-radius: 0; border-radius: 8px; border-bottom-left-radius: 0; }</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style> #menucon:hover #koddostu-tex{ width:200px;height:250px; background:#444; opacity:0.6;} </style></koddostu>

<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<!--Koddostu Büyüleyici Duyuru Panosu Html Kodu STOP-->

Uzun süredir Blogger’a nasıl forum ya da soru-cevap sistemi ekleneceği ile ilgili soru almama rağmen internette konuyla ilgili pek çok anlatım olduğu için Blog Hocam’da paylaşma gereği duymamıştım. Ancak bloga forum eklemeyle ilgili yardım talepleri gelmeye devam edince artık bunu anlatmaya karar verdim.

Blogunuza forum eklemek için tamamen ücretsiz bir Google servisi olan Google Grupları kullanabilirsiniz. Şimdi adım adım forum oluşturmaya ve bunu bloga eklemeye geçelim.

1. Adım: Yeni Grup Oluşturma



Yapmanız gereken ilk şey Grup Oluşturma sayfasına giderek oluşturacağınız grupla ilgili bilgileri içeren formu doldurmak. Formu doldururken dikkat etmeniz gereken en önemli yer grup türüdür. Eğer forum oluşturmak istiyorsanız web forumu, soru-cevap sistemi oluşturmak istiyorsanız soru-cevap forumu seçeneğini seçmelisiniz. Formu doldurduktan sonra üstteki kırmızı renkli “Oluştur” butonuna basabilirsiniz.

2. Adım: Grubun HTML Kodunu Alma


Bilgileri eksiksiz girdiyseniz grubunuzun oluşturulduğunu belirten ve şimdi ne yapmak istediğinizi soran bir sayfayla karşılaşırsınız. Burada “Grubunuzun ayarlarını özelleştirin” linkine tıklayın.

Ayarlar sayfasının en altında oluşturduğunuz grupa ait HTML embed kodlarını göreceksiniz. Bu kodları bir sonraki forum oluşturma adımında kullanacağınız için bir yere koopyalayın veya bu sayfayı kapatmayın.

3. Adım: Blogger’da Forum Sayfası Oluşturma

 
Blogger kumanda panelinize girerek Sayfalar > Yeni sayfa > Boş sayfa yolunu takip edin ve bir önceki adımda kopyaladığınız HTML kodlarını sayfanın HTML penceresine yapışırın. Sayfa başlığına “Forum”, “Pano” gibi şeyler yazdıktan sonra seçeneklerden yorum iznini kapatın ve sayfayı önizleme yapın. Eğer forum sorunsuz bir şekilde görüntlendiyse sayfayı kaydedebilirsiniz.

Tebrikler! Artık blogunuzun bir forum sayfası var.

Siteye Kar Yağma Efekti

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowfall.min.js">
</script>

İmleci Takip Eden Kar Efekti

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">
</script>

<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier.cur), url(http://www.jimdo.com/l/usersnippets/rentier.png), auto !important;}
</style>

<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier2.cur), url(http://www.jimdo.com/l/usersnippets/rentier2.png), auto !important;}
</style>

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">
</script>
<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/snowcurser.cur), url(http://www.jimdo.com/l/usersnippets/snowcurser.png), auto !important;}
</style>

<style type="text/css">
body .hr {
    background: url(http://www.jimdo.com/l/usersnippets/hr-snow-white.png);
    background-position:right;
    border: 0;
    height: 47px;
 }
</style>

<style type="text/css">
body .hr {
    background: url(http://www.jimdo.com/l/usersnippets/hr-snow-green.png);
    background-position:right;
    border: 0;
    height: 47px;
 }
</style>

Kodlar jimdo.com'a aittir.

• Sade, şık ve hoş yapısı ile dikkatleri üzerine çekiyor.
• SEO uyumlu blogger temasıdır.
•  Temanın açılış hızı yaklaşık 1 saniyedir.
• Temada ki sorgu sayısı sadece 11'dir.
• CSS Sprite tekniği temaya başarı ile uygulanmıştır.
•  CSS3 ve Jquery ile tema desteklenmiştir.
• Tema da hiçbir kodlama hatası bulunmamaktadır.
• Temada ki link yapıları SEO ile uyumlu şekilde kullanılmıştır.
• Temaya özel çeşitli bileşenler bulunmaktadır.
• Temada ki daha birçok özelliği önizleme adresinden inceleyerek keşfedebilirsiniz.

Kodu Yerleştirme

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

</head>

<script src='https://sites.google.com/site/sonsamsunluforever/asda/jquery-1.5.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/sonsamsunluforever/asda/queryLoaderpre.js' type='text/javascript'/>

</body>

<script>
 QueryLoader.selectorPreload = &quot;body&quot;;
 QueryLoader.init();
</script>

]]></b:skin>

.QOverlay {
 background-color: #000000; /* Yükleme sayfasının arkaplan rengi */
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC; /* Yükleme çubuğunun rengi */
 height: 1px;
}

.QAmt {
 color:#FF530D; /* %100 kısmının yazı rengi */
 font-size:50px; /* yazı büyüklüğü */
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}