speakex2: Blogger Eklenti

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

20 Mart 2013 Çarşamba

Blogger En Çok Yorum Yapanlar Eklentisi

Oldukça kullanışlı ve farklı bir eklentiyle karşınızdayım.
Sizler de biliyorsunuz ki yorumcular bloga hayat verenlerdir. Kimi zaman yön gösterici kimi zaman yanlışlarınızı düzeltici kimi zamanda tartışmalara yol açarak farklı bakış açıları oluşturucu. Kısaca onlar blogların yapıtaşları :)

Yorum yapanlar bloglarda bu kadar önemli bir yere sahipken onlar için blogunuzda bir yer ayırmamanız haksızlık olurdu.

Aşağıda vereceğim kodlar sayesinde blogunuzun istediğiniz bir yerinde (blogunuzun kuruluşundan itibaren) en çok yorum yapan kullanıcıları avatar ve yorum sayıları ile birlikte görüntüleyebilirsiniz.

Önizleme olarak aşağıdaki görüntüyü inceleyebilirsiniz;

Eklentiyi bloguma nasıl eklerim?

Kumanda paneli → Blog adınız → Yerleşim → Gadget ekle → Html/Javascript kısmına gelerek aşağıdaki kodları boş alana yerleştirin.

Kodları görüntülemek için linke tıklayınız.

Tamamdır. Geriye yalnızca göstermek istediğiniz kullanıcı sayısı ve avatar boyutlarınızı düzenlemek kaldı.

var maxTopCommenters = 8; kodu ile göstermek istediğiniz kullanıcı sayısını
var sizeAvatar = 28; kodu ile kullanıcı avatarlarının boyutlarını belirleyebilirsiniz.

Blogunuzu yapılan yorumlara cevap vermeyi unutmayın, iyi bloglamalar...

Kaynak

19 Mart 2013 Salı

Blogger Powered by Blogger Yazısını Kaldırma

Bloggerlerin rahatsız olduğu Poweted by Blogger yazısını kaldırmak için kullanacağınız css kodunu sizler ile yazımızda paylaşıyoruz.

İlk olarak CTRL + F yapıp aşağıdaki kodu aratıyoruz.

]]></b:skin>
Bu kodu bulduktan sonra üstüne aşağıdaki kodu ekliyoruz.

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

İşlemimiz bu kadar, kolay gelsin.

18 Mart 2013 Pazartesi

Blogger için Sitemap Eklentisi

Bütün bloggerlerin merak ettiği bir sorudur bu, bu sitenin sitemapı nerede :) Sitemapımızı kendimiz çok kısa bir kod ile oluşturuyoruz.

İlk önce bloğumuzun admin paneline gelip sol taraftan Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ediyoruz gelen editörten HTML kısmına geçip aşağıdaki kodları yaptışrıyoruz.

<style>
.comments {
display: none;
}
</style>
<script src="http://grafikers.tk/arsiv.js"></script>
<script src="http://speakex.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Önizleme

İşlemimiz bu kadar, canlı önizlemeyi görmek için tıklayın.

Blogger / Blogspot Etiketleri Yan Yana Koyma

Bir çok blogger kullanıcısın başına çeken bir sorunun çözümünden bahsedeceğiz size. Bildiğiniz üzere bloggerda etiketler alt alta gözüküyor ve etiket sayınız arttığı zaman bu gerçekten çok kötü bir görüntü kirliliğine yok açıyor.

Bunun çok kolay bir çözümü var. Aşağıda önizleme resmi ve nasıl yapacağınza dair bilgi var.

Önizleme

İlk olarak ]]></b:skin> kodunuz CTRL + F yapıp, arama yaparak buluyoruz. Bu kodun tam üstüne aşağıdaki kodu ekliyoruz.

#Label1 ul li{float: left;width: 45%;}

Son olarak temamızı kaydediyoruz ve herşey tamamdır.

Etiketler: blogger kategorileri yan yana dizme, etiketleri yan yana dizme, blogspot etiketleri yan yana, yanyana etiketler, etiketleri yanyana sıralama kodu

16 Mart 2013 Cumartesi

Blogger Sosyal Medya Eklentisi ve Email Takip Html Kodu

Herkes çogunlukla sosyal medyaya kayıtlı olduğu alanları toplu ve düzgün bir şekilde göstermek istiyor...
Buna istinaden bende böyle bişey paylaşmak istedim çok sade ve hoş görünüyor. Bütün renk te temalara koyuldugunda çok hoş bir görüntü bırakıyor sizlerle paylaşmak istedim. Biraz anlatmak gerekirse üzerine gelince renklenen ve parlayan java kodla yaptım. Önizlemesi aşağıdadır. İsterseniz demosu için buraya tıklayın.

Kodlarımızı şu şekilde ekliyoruz;
Tasarım>Gadget Ekle>Html/JavaScript Ekle aşağıdaki kodları sitenize eklemek
Kod:

<style type="text/css">

.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
    color: #000;
    border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style>   <!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style> <![endif]-->
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table>
    <tbody>
        <tr>
            <td><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ocabbaroglu"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAo4p_G-hkLy94VLLxxmhFLyvy7lEMgP6JoseqlxywjuL_HDUhvq6HyxegX1yZG4uClFCaCcHrnIV4Q4p-20VzBADpdygKjX9tWbkwhwKDEdHQcsI91Oe99fwD6bhqAq6hBoeLx3PFuEQ/s1600/rss.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://twitter.com/ozicab" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaaCeZT7R3cqu7U7dS4ERPZXARwykhrIy13kw03vmkX3nMF7sieKgKUYg2LsnmJcExbfS1v9hCxY-eWcCAicMIDFqVCbE8gD88rt5We9R1urUvi8EJScz6wq1XLLjjG3CmQDaCaNdyabY/s1600/twitter.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://facebook.com/oguzhanpage" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdkwzgFAoLHcteQKGKe74VNvYmmFz98ldzBN4Mu9G1e4XdtA1VkYm4J7PCY4K9U7DYVGGueu-losatrJA811G83tw8t9vIFHMAyvif0QaL2Dcbs-hWaH4_BSzkkzAWePAqdOK62zPbNM/s1600/facebook.png" /></a></td>
        </tr>
    </tbody>
</table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="10" class="emailupdatesinput" name="email" value="Email Adresin..." onblur="if (this.value == '') {this.value = 'Email Adresin...';}" onfocus="if (this.value == 'Email Adresin...') {this.value = '';}" type="text" /><input value="yasarguner" name="uri" type="hidden" /><input value="Takip&ccedil;i ol" class="joinemailupdates" type="submit" />
</form>
</div>
</div>
</div>
</div>

Blogger Sayfa Numaralandırma

Yine Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar. Bugün, anlatımı birçok sitede mevcut olduğu halde herkesin yapamadığı bu eklentiyi yapıcaz inşallah.Benim blogumda da kullandığım üzere bu eklenti Wordpress bloglardan görülerek Blogger’a uyarlanmıştır. Yapacağımız bu sayfalandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Şimdi Gelelim yapımına..

Yerleşim/HTML’yi Düzenle sekmesine gelip “Widget Şablonlarını Genişlet” tikini aktif hale getirdikten sonra </b:skin> kodundan önce şu kodları yapıştıralım;

Kod:

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:14px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 0px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
color: #000;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd ;
  }
 
.showpageNum a:hover {
  border:1px solid #888;
  background: #e0e0e0 ;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 ;
  text-decoration: none;
  }

Kodu Koyduk 3 tamam. Şimdi </body> Tagını Arıyoruz Ve Diğerindeki Gibi </body> Tagının Bi
Üstüne Aşağıdaki Kodları Koyuyoruz Bitti.

Kod:

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=9;
var numshowpage=4;
var upPageWord =&#39;Önceki&#39;;
var downPageWord =&#39;Sonraki&#39;;
</script>
<script src='http://tema.dataservis.org/eklentiler/blogger-numaralandirma.js' type='text/javascript'/>

Artık Blogumuz Önceki Sonraki Sayfalar Değilde, Numaralandırma Şeklinde Gözükecektir. Güle güle kullanın.