25 Nisan 2012 Çarşamba

Η ηγεμονία των αριστερών ιδεών

Όταν κάποιοι κάναμε λόγο για ηγεμονία των αριστερών ιδεών στην Ελλάδα μας χλεύαζαν. Τώρα, έρχεται ο ίδιος ο πρόεδρος του ΣΥΡΙΖΑ να ομολογήσει αυτό που ήταν καταφανές:

"Όπως είπε ο κ. Τσίπρας, η συνάντηση της Αριστεράς με τον πολιτισμό δεν είναι μόδα αλλά έχει ισχυρές καταβολές και αναφέρθηκε σε μεγάλες προσωπικότητες όπως ο Θεοδωράκης, ο Ρίτσος, ο Κατράκης και πολλών ακόμη που έφεραν την ηγεμονία των αριστερών ιδεών στην Ελλάδα μέσω της λογοτεχνίας και των τεχνών."
(Τη συμμετοχή του πνευματικού κόσμου επιζητά ο ΣΥΡΙΖΑ, 25/4/2012, www.kathimerini.gr με πληροφορίες από ΑΜΠΕ)

Google+ Resmi Paylaş Butonu

Ziyaretçilerinizin, yazılarınızı Google+ hesaplarında paylaşmalarını sağlayacak olan resmi paylaş butonu kullanıma açıldı.Hemen blogunuza nasıl ekleyeceğinizi anlatayım.

 

Google+ Paylaş Butonu

 

1.Adım: Öncelikle Script kodlarını ekleyin.Şablonunuzda </head> kodunu bulun ve bunun hemen üzerine aşağıda ki kodları ekleyin.

 

<script type="text/javascript">
  window.___gcfg = {lang: 'tr', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

 

2.Adım: Şimdi butonu görüntüleyecek kodu ekleyin.Nerede görüntülenmesini istiyorsanız oraya ekleyeceksiniz.Örneğin yazının altında gözükmesini istiyorsanız <div class='post-footer'> kodunu bulun ve buınun hemen altına aşağıdaki kodu ekleyin.

 

 

<div class="g-plus" data-action="share" data-annotation="bubble"></div>

 

Paylaş butonunu farklı tarz ve boyutlarda da kullanabilirsiniz.Bunun için Google+ paylaş butonunun resmi sayfasına gidip istediğiniz tarzda ki butonu oluşturabilirsiniz.

24 Nisan 2012 Salı

Blogger Dişli Yorumlara Stil Verelim

Blogger’ın bir süre önce dişli yorumlara geçtiğini ve yorumlara yanıtlama seçeneğinin geldiğini çok iyi biliyorsunuz.Birçok Blogger kullanıcısı bu dişli yorumların görünümünü beğenmediği için kullanmayı pek tercih etmiyor.O halde dişli yorumlara biraz stil katıp, daha güzel bir görünüme kavuşturalım.

 

Blogger Dişli Yorumlara Stil Verelim

 

Yapacağınız 2 küçük değişiklik ile bu resimde gördüğünüz gibi bir yorum bölümüne kavuşacaksınız.Ancak hemen belirteyim, bunu sadece Blogger’ın kendi şablonlarında denediğim için özel şablonlarda işe yarayıp yaramadığından emin değilim.

 

Öncelikle şablonunuzun ]]></b:skin> kodunun üstüne aşağıdaki stil kodları ekleyin.

 

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

 

Ardından şablonunudza <b:include data='post' name='comments'/> kodunu aratın.Birden fazla sonuç çıkacaktır.Bunlardan ilkini yani en üsttekini aşağıdaki kodlar değiştirin.

 

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

 

Şablonunuzu kaydettikten sonra kayıt sayfalarını açtığınızda yorum bölümüneki değişikliği farkedeceksiniz.

22 Nisan 2012 Pazar

Özel 404 Hata Sayfası Oluşturun

Geçtiğimiz günlerde yazdığım Yeni Arama Tercihleri İle Blogger’da SEO Daha Kolay başlıklı yazıda Blogger’ın sunduğu yeni ayarlardan bahsetmiştim.Bunlardan biri 404 hata sayfalarını özelleştirebilmemizdi.Bir kullanıcı blogunuzda sdaha önce slinmiş bir yazıya ulaşmak istediğinde veya hatalı bir URL yazarak sayfalarınızdan birine ulaşmak istediğinde sayfanın bulunamadığını belirten bir hata sayfası ile karşılaşır.İsterseniz Blogger’ın klasik hata sayfasını aşağıda resimde gördüğünüz şekilde özelleştirebilirsiniz.

 

Özel 404 Hata Sayfası Oluşturun

 

1.Adım: Öncelikle şablonunuzun ]]></b:skin> kodundan önce aşağıdaki stil kodlarını ekleyin.

 

#error {
background-color: #F2F2F2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhKQgZA8-_ULSefkW9vYyXBkDyH8wRkqRk9bdRzJpDOeVnU5HQY2QTfbMUJ_NxkflCWnlq7-B5mM7eLmOJX54_O15_tDl4IYaqsplHMOFST_aFCa4-hB_dbk-t9isjzJicZerzl-4h2AJ/s200/bg_ku.png');
background-repeat: repeat;
color: #555555;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
line-height: 170%;
}
#error #halaman {
position: relative;
height: auto !important;
height: 100%;
min-height: 99%;
}
#error #halaman h2 {
margin: 1em 0;
}


#error #wadah {
margin-top: 120px;
}
#error .tengah {
margin: 0 auto;
width: 920px;
}
#error .box-atas, #error .box-bawah {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHqxAceOB4CSdE7kGDxzZfexj6McZLvUj4syIni688uXGysq0gxQtIkXxkAqKYAvPDx4v1LESF4w1LB5TK9YVGJXAWfUn_dXk0Dw_vr2x3zWuMJWwszXj6ch7TQk2SjlJo6dTDrEcykHC/s944/box-sprite.png');
background-repeat: repeat;
background-position: 0 0;
height: 43px;
margin: 0 -12px;
width: 944px;
}
#error .box-atas {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEHqxAceOB4CSdE7kGDxzZfexj6McZLvUj4syIni688uXGysq0gxQtIkXxkAqKYAvPDx4v1LESF4w1LB5TK9YVGJXAWfUn_dXk0Dw_vr2x3zWuMJWwszXj6ch7TQk2SjlJo6dTDrEcykHC/s944/box-sprite.png');
background-repeat: no-repeat;
background-position: 0 -43px;
}
#error .box {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgES_kBTxRvLQlDHHq-bIUhPUZ2kyD2J37eQDrjVbBYMmOgPt4leVc4nYaCAcZJ9mOil4utsyoLBQLG3eRSvW2nsqD2T2DBfQn0ZCS7i3MBqzgCDbd49Q0rvt4l3oIvgM-0JpneQD0-nejk/s920/box-horizontal.png');
background-repeat: repeat-y;
background-position: 0 0;
min-height: 200px;
padding: 10px 50px;
}

 

2.Adım: Şimdi Ayarlar > Arama tercihleri > Sayfa Bulunamadı Sayfası İçin Özel İçerik > Düzenle diyerek kutuya aşağıdaki kodları kendinize göre düzenleyerek ekleyin ve değişiklikleri kaydedin.

 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<h1>SAYFA BULUNAMADI !</h1>
<div id="error">
<div id="wadah">
  <div class="tengah">
   <div class="box-atas"></div>
   <div class="box">
    <div id="halaman">
    <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX32TznDMRoAsskpxZwoZ7J9d3KreocrQXmJtiET6e3VRE_N715lWQevrfCS5kztm3iSHjyNeZ9TEaYEVWfuQUVnzs3gtQMxZkqeTV0M2G-SjCC6V3MignaXFCVUqeohEexY4wfjbwwWGO/s350/4041.jpg" /></p>
     <p>Ulaşmaya çalıştığınız sayfa bulunamadı.Lütfen ulaşmak istediğiniz sayfanın adresini doğru yazdığınızı kontrol edin.Eğer adresi doğru yazdığınızdan eminseniz ulaşmak istediğiniz sayfa silinmiş olabilir.  </p>
     <p> <h2><a href="http://bloghocam.blogspot.com/" title="Blog Hocam" >Ana Sayfa</a></h2></p>
    </div>
   </div>
   <div class="box-bawah"></div>
  </div>
</div>
</div>

</b:if>

 

Şimdi blogunuzda var olmayan her hangi bir sayfaya gitmye çalışın.Örneğin:

 

http://blogunuz.blogspot.com/laylaylom.html

 

Eski hata mesajının yerine tam ekran bir hata mesajı sayfası karşınıa çıkacaktır.Bu yöntemle çok daha yaratıcı hata sayfaları oluşturabilirsiniz.

20 Nisan 2012 Cuma

Hello Bar: Bilgilendirme Çubuğu

Hello Bar isimli popüler servis bizlere bloglarımızda kullanmak üzere bilgilendirme çubuğu oluşturma imkanı sunuyor.Ücretli ve ücretsiz seçenekleri bulunan bu servis çoğu blogcu tarafından tercih ediliyor.Neden mi?

  • Gradient ekleme özelliği sayesinde aynı renkte fakat farklı desenlerde çubuklar oluşturabiliyorsunuz.
  • Diğer çubuklardan farklı olarak kapattıktan sonra tekrar açabiliyorsunuz.
  • Kaç kez tıklandığına dair istatistikleri görebiliyorsunuz.

İşte bu özellikleri Hello Bar’ı diğerlerinden farklı ve üstün kılıyor.Şimdi size Hello Bar’ı ücretsiz olarak blogunuza nasıl ekleyeceğinizi anlatmak istiyorum.

 

Hello Bar

 

 

1.Adım: Öncelikle ücretsiz üye olmak için Hello Bar ana sayfasına bulunan Free Sign Up butonuna bastığınızda açılan pencerede ki kutuya e-posta adresinizi yazdıktan sonra SIGN UP butonuna basın.

 

Hello Bar

 

2.Adım: ilk adımı tamamladıktan bir kaç saniye sonra e-posta adresinize Welcome to Hello Bar balıklı bir posta gelecek.Bu postada kullanıcı adınız ve şifreniz yazıyor.Hello Bar Login sayfasına giderek bu bilgilerle hesabınıza giriş yapın.

 

Hello Bar

 

3.Adım: Hesabınıza giriş yaptıktan sonra Hello Bar’ınızı oluşturmak için CREATE NEW butnuna basın.Settings bölümünden çubuğun ayarlarını yaptıktan sonra SAVE butonuna basın.

 

Hello Bar

 

4.Adım: Çubuğunuzun ayarlarını yapıp SAVE butonuna bastıktan sonra açılan penceredeki kodu kopyalayın ve şablonunuzun </head> kodundan önce yapıştırın.

 

Hello Bar

 

Bu paylaştığım üçüncü bilgilendirme çubuğu.Alternatifleri görmek isterseniz daha önce paylaştığım şeffaf kapatılabilir bilgilendirme çubuğuna ve Nedim Arabacı tarafından yapılan Noty bilgilendirme çubuğuna göz atabilirsiniz.