Eklenti blog sahibinin yorum rengini değiştirerek daha belirgin hale getirmeye yarayan eklenti.Eklentinin en güzel yani çok kolay kuruluma sahip olması yani oldukça güzel bir eklenti ve kurulumu oldukça basit ve artık kuruluma geçelim.

Kurulum: Şablon>Htmlyi Düzenle>Devam Et yolunu izleyerek Widget Şablonlarını Genişlet'i işaretleyip aşağıdaki kodu aratın.

</body>

Bulduğunuz kodun üstüne aşağıdaki kodları ekleyin.

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- ss highlight author starts -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('background','#F0A2A2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ibamGMZimoxoJsk4s7UORuDCyu0SlfmGPU0tkKavoutSBqxh9TJ68PvoOwhwdN3nrV7mG6nlen7h3WnvHV3AmIyE7I_H4JnApl2UreuQ2J_DjC2AxJlhOFNDMT1-ltR2aoZROy9rYmA/s1600/beyaz.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- ss highlight author ends -->

Kodu ekledikten sonra artık olması gerek eklentinin yorumlarınızın rengi değişmiş olucak.Kodlar arasında ' .css('background','#F0A2A2 ' kısmındaki renkleri değiştirerek istediğiniz rengi seçebilirsiniz

Blogger ile tamamen uyumlu bir kar yağdırma özelliğine ait ilgili kodları paylaşmak istiyorum. En azından her yıl, ziyaretçilerinize farklı bir görünüm sunmak istiyor iseniz, bu kodlar sizin için yararı olabilir. Böylelikle herhangi bir zahmete de girmenize gerek kalmıyor. Ayrıca ilgili kodlar web site hızınızı da olumsuz yönde etkilemeyecektir.

İlgili özelliği sağlıklı bir biçimde kullanmak için öncelikle temamızın HTML kodları içerisinde aşağıdaki kodu bulalım.

 </body> 

Yukarıdaki kodun hemen altına ise, aşağıdaki kodları ekleyerek işlemlerimizi tamamlıyoruz.

 <script type="text/javascript">
//<![CDATA[
var snowmax=300
var snowtype=new Array("Times","Arial","Times","Verdana")
var snowcolor=new Array("#f2f8fa","#eff5f7","#dcedf1","#ffffff","#BFE4FF")
var snowletter="*"
var sinkspeed=0.6
var snowmaxsize=30
var snowminsize=10
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1
// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById("s"+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+'px';
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].style.zIndex=1000
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx+'px';
snow[i].style.top=snow[i].posy+'px';
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
snow[i].style.top=snow[i].posy+'px';
if (snowi].posy>=marginbottom-2*snow[i].size  .style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout("movesnow()",50)
}
for (i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
window.onload=initsnow
}
//]]>
</script> 

Bir web sitesi üzerinde, ziyaretçilerin ilgili içeriklere göz atması oldukça önemlidir. Örneğin, bir yayını öne çıkarmak da bu yönde alınan bir aksiyon olarak dile getirilebilmektedir. Blogger da ise bu tip bir özellik olmadığı için, kodlar yardımı ile yapılıyordu. Geçtiğimiz günler de ise Blogger‘a bu yönde bir özellik eklendi.

Öne Çıkan Yayın adlı özellik sayesinde artık bu yöndeki ihtiyaçlarımızı kolaylıkla giderebileceğiz. Artık blogunuzda yer alan istediğiniz bir yazıyı, öne çıkarabileceksiniz. Böylelikle ilgili yazınız daha fazla okunacaktır. Nedeni ise, bildiğiniz gibi ana sayfada yer alan yazılar, yeni içerik ekledikçe arka sayfalara gitmektedir. Bu özellik sayesinde ise, sabit olarak bir yazınızı öne çıkarabiliyorsunuz. Peki bu gadget’ı nasıl kullanacağız?

1. Öncellikle Blogger‘a giriş yapın.
2. Blogunuzun Kontrol paneli’ne giriş yapın.
3. Yan menüde yer alan Yerleşim bağlantısına tıklayın.
4. Gadget Ekle > Öne Çıkan Yayın bağlantısına tıklayın.
5. İlgili ayarları tamamladıktan sonra, Kaydet butonuna tıklayın.

Not: İlgili yönergeler çerçevesinde, öne çıkardığınız ilgili yayını aralıklarla değiştirmenizi öneririz. Böylelikle web sitenizde yer alan diğer yazılarınızın da ulaştığı kitle olasılıkla artmış olacaktır.

Blogger kullanımı kolay bir bloglama sistemidir. Eklentiler ile kullanımı daha da kolay hale getirebilecek kadar basittir. Bu eklentimiz sayesinde blog yazılarımızda, klavyelerimizde bulunan yön tuşları ile önceki ya da sonraki yazılara geçiş yapmayı sağlayan bir eklentiden bahsedeceğiz. Eklenti kodları tek yapıdadır, yani uğraştıracak eklentilerimizden değil. Dilerseniz eklenti kurulumuna geçelim.

Blogger panelinden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izliyoruz ve her zamanki gibi kodları ekliyoruz.

<script type="text/javascript">
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

Uzun süredir Facebook, hep aynı tasarımdan oluşan beğeni kutusu kullanıyordu ve herhangi bir değişiklik bulunmuyordu.Kısa bir süre önce tasarım değişikliği yapıldı.Kapak fotoğrafını da işin içine dahil eden Facebook güzel bir görüntü ortaya çıkarmayı başarmış.Dilerseniz gelin özelliklerden söz edelim.


Ne gibi değişiklikler yapıldı?

• Sayfanıza ait kapak fotoğrafı görüntüleme/gizleyebilme
• Sayfa akışını görüntüleyebilme
• Eklenti üzerinde beğen ve paylaş butonları
• Genişlik ve uzunluk değerlerini ayarlayabilme
• Çok daha şık ve modern bir görünüm

Nasıl Kullanılır?
Blogger > Blogunuz > Yerleşim > Gadget Ekle > HTML/Javascript kısmına aşağıdaki kodları kendinize göre düzenledikten sonra kopyalayıp yapıştırın ve kaydedin.

<div id="fb-root">
</div>
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.3"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/BlogEklentileri"
data-width="330" data-height="350"
data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
</div>

Değiştirebileceğiniz Yerler;

• https://www.facebook.com/BlogEklentileri buradaki adresi kendi sayfa adresinizle değiştirin.
• data-width="330" 330 değeri eklentinin genişliği ifade eder, kendinize göre arttırıp azaltabilirsiniz.
• data-height="350" 350 değeri eklentinin yüksekliğini ifade eder.
• data-hide-cover="false" false değerini true yaparak kapak fotoğrafının görünmesini engelleyebilirsiniz.
• data-show-facepile="true" true değerini false yaparak beğenen kişilerin fotoğraflarının görünmesini engelleyebilirsiniz.
• data-show-posts="false" false değerini true yaparak yayın akışınızı görüntüleyebilirsiniz.

Merhaba arkadaşlar bugün sizlere blogumda kullandığım yazı bandını paylaşacağım.Eklenti blogunuzda paylaştığınız son yazılarınızı gösteriyor.Hiç uzatmadan konuya geçeyim.








Css Kodları

]]></b:skin>  kodunu aratın ve hemen üstüne alttaki kodları ekleyin.

#header3-1-left-tickerimg{float:left;}
#beakingnews {
float: left;
height: 20px;
line-height: 25px;
overflow: hidden;
width: 107.2%;
}
#recentpostbreaking li a {
color:#000000;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 5px;
}
#recentpostbreaking li a:hover {
color:#333;
}
#beakingnews .tulisbreaking {
background:#333;
}
#beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#beakingnews .tulisbreaking {
color: #000000;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 5px 10px;
position: absolute;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 400;
}
#recentpostbreaking {
float: left;
margin-left: 14px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:-22px  0 0}

Html Kodları

Aşağıdaki kodları sitenizin neresine isterseniz oraya yapıştırabilirsiniz.

<div class='header3-1-left-tickerimg'><img alt='Headlines' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzJaL62ge-YN5KAAaasslrHxcfwxf04WzC7z04qmRVWNiCzXLjRMgr2_BTKfKThDeKhW__Wt6oaxXD8z7ll64BrkEf8nRJW2TEsFAmg9wu4zhUg1HBY0R5-hFG7pb_TdpMhjjA5TMRor_/s1600/yazi-bandim.png'/></div>
<div id='header3-1-left-ticker'><ul>

<div id='beakingnews'>
            <div id='recentpostbreaking'>
              Yükleniyor...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'http://yunusbalimm.blogspot.com.tr', // Replace With your Blog Url
                  numpostx  = 20; // Maximum Post
              $.ajax({
                url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
                type: 'get',
                dataType: "jsonp",
                success: function(data) {
                  var posturl, posttitle, skeleton = '',
                      entry = data.feed.entry;
                  if (entry !== undefined) {
                    skeleton = "<ul>";
                    for (var i = 0; i < entry.length; i++) {
                      for (var j=0; j < entry[i].link.length; j++)
                      {
                        if (entry[i].link[j].rel == "alternate")
                        {
                          posturl = entry[i].link[j].href;
                          break;
                        }
                      }    
                      posttitle = entry[i].title.$t;
                      skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                    }
                    skeleton += '</ul>';
                    $('#recentpostbreaking').html(skeleton);
                    // kode untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking 

ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script></ul></div>

Yukarıda kırmızı ile belirttiğim 20 sayısını ne kadar yazı gösterilmesini istediğiniz sayı ile değiştiriniz.Kırmızı ile belirttiğim http://yunusbalimm.blogspot.com.tr adresini kendi blog adresiniz ile değiştirin.Yapamadığınız bir yer olursa yorum yazarak belirtiniz.

Blogunuza giren ve interneti yavaş olan ziyaretçilerinize kolaylık sağlaması açısından Blogger Jquery Lazy Load Eklentisini sizlerle paylaşıyorum.

Bu eklenti blogunuzdaki resimlerin hepsinin birden yüklenmesini engeller, sadece görünen yerlerdeki resimleri yükler ve bu sayede blogunuz hızlanmış olur. Hiç bir zararlı etkisi yoktur, özellikle galeri tarzı blogu olan yada çok görsel kullanan bloggerlar için birebir eklenti diyebiliriz.


Gelelim kuruluma;

Öncelikle Blogger Kontrol Panelinden Şablon > HTML'yi Düzenle kısmına giriyoruz ve aşağıdaki kodu aratıyoruz.

</head>

Bu kodun hemen altına aşağıdaki kodu ekliyoruz.

<script charset='utf-8' src='http://konfor.enesilhan.net/js/jquery.min.js' type='text/javascript'></script>
<script src='http://konfor.enesilhan.net/js/jquery.lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
          $("img").lazyload({
              placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFwb-qHsnFhqUS403VlDKzRDETIFJFsuUt38xneTyrCakJxtcdgoDkMemVkOqiQszKtXb80ph8XfaN5OZSTODTUjMh-QUkJ7Z7AhT1rmKHHgnJzPMptsYFDVN9F_K9niB4879_xsPAHE/s1600/grey.gif",
              effect      : "fadeIn"
           });
       });
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

Blogger İçin sayfa yükleniyor eklentisi.

Css Kodları;

]]></b:skin>  kodunu aratın ve hemen üstüne alttaki kodları ekleyin.

/* CSS Yükleniyor Sayfası */
div.sayfa-yükleniyor{opacity:0.9;filter:alpha(opacity=90);position:fixed;z-index:4000; text-align:center;}
div.sayfa-yükleniyorhd{top:0px;left:0px;} 
div.sayfa-yükleniyor{_position:absolute;}
div.sayfa-yükleniyorhd{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
div#yukleniyor{background-color:#ffffff;width:100%;height:100%;padding-top:20%;}
.yukleniyor_resim {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqBRP01Mm1Xy_dzwhSt3jNMxWRqRUFdWj1WevTt7oKAHshmzGM7BQ78pac1f9Dee2yIGAmtF9ebMfcZJ_kD3T0pxjI0haqJEsgEfTOi66uT91wxfHB8Po5DIzM0h8W0ssN0vDyVGQF27J/s1600/Loader3.gif);padding:0px;margin:0px;background-color:transparent;border:none;width:110px;height:110px;}

Js Kodları;

 </head> kodunu aratın ve hemen üstüne alttaki kodları ekleyin.

<script type="text/javascript">
window.onload=function(){document.getElementById("yukleniyor").style.display="none";} 
</script>

Html Kodları;

</head> kodunu aratın ve hemen altına alttaki kodları ekleyin

<div id="yukleniyor" class="sayfa-yükleniyor sayfa-yükleniyorhd"> 
            <center>
                <div style="font-family:Arial;font-size:19px;color:#4f4f4f;">Lütfen Bekleyiniz..</div><br/><br/>
                <div class="yukleniyor_resim"> </div>
            </center>
        </div>  

Bu eklentimiz ile, yazılarınızın altına , twitter , facebook ve google+ kutucukları eklenecektir , ziyaretçileriniz böylelikle yazılarınızı twitter , facebook ve google+ da paylaşabilecekler..

Aşağıdaki kodlardan birini bulunuz , ilk denediğiniz olmazsa diğerini deneyiniz , bazı bloglarda bu kodlardan bir kaç tane olabilir , üşenmeyin deneyin..

<data:post.body/>


YADA


<div class='post-footer-line post-footer-line-1'/>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHd_8riJJxne1I-r55G3c7W8866Kqvu0-GuyQX_8GQD8G8cUB5wnOa-CyDRBSt6rA4fUDXAPBuPzZLoQJcXNiedMPtVzQuYPG96zlxZzjGNzWonVS58Z49NX5ioYWpnS4bBu0mWOHb_RJ/s1600/social-kutucuk.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="yunus_balim" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
          
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                  
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (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></div>
</div> 
</b:if>

Blogger blogunuzda , en çok yorum yapılan yazılarınızı göstermek istermisiniz ?

Lafı uzatmadan hemen anlatıma geçelim..

Blogunuzun Yerleşim kısmına girerek Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodları ekleyin..

<!-- Popular posts with comment yunusbalimm.blogspot.com.tr -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://yunusbalimm.blogspot.com.tr
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>

<!-- Popular posts with comment yunusbalimm.blogspot.com.tr -->

Bu eklentimiz resimde gördüğünüz gibi, rss , twitter ve facebook takip sayısı göstergesi şeklindedir..
Tabi burda yazan rakamlar , tamamen hayal ürünü olup , size kalmıştır...
Adı üstünde Yalancı Takipci Sayısı Eklentisi !

<style> 
.rss-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Dy9YtHDBrc8uSDWpy2_rPKoMA1H1cknmvqMqedep166Lo0ofQEX472GlAofgZVZ5vqaqGemSnZ5K5EEtFa1zy_nIe1gVOOXtGut1fE3lB7FPLOb_05uDkUNJJfCE8nfxyZ8MUJKgsfg/s800/RSS1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.twitter-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsOvPwv26Qx9oGxTJ8LekCRpZFdOfi1skUsZCLCXtP1iFxBllEl9-etqi6SouvOigu-5h2D3BmwrnuOkKAqafhVIM4u4g-ND7Nwaa_a-hT0M4rhruLVV5IrAKR5VKlA301wNtCtdfGqrA/s800/TWITTER1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.facebook-mbt { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23a5tCD1xQMiSD2-lUb7iR7CgqkHMTILN-SbVvz8I7n-IcMhdM7F1hbG3gH39otwhTiUhNU3uFeRa2_DgDMWSYfG8z7bDS6yOsoC0fke7u93VkHrBVRcdj85gnnevSy_CkJZCKceFjM0/s800/FACEBOOK1.png) no-repeat; 
    height: 64px; 
    padding: 0px 20px 0px 80px; 
    margin-top: 20px; 
}
.follower-rss, .follower-twitter, .follower-facebook { 
    font-family: Georgia,  sans-serif, Times; 
    font-size: 1.1em; 
        font-style:italic; 
        color:#289728; 
}
.follower-rss span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#FFB93C;     
}
.follower-twitter span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#6DB6E6;     
}
.follower-facebook span { 
    font-size: 1.9em; 
    font-weight: bold; 
        font-style:italic; 
        color:#3889BA;     
}
</style>
<div class="rss-mbt"> 
<div class="follower-rss"> <span>78</span> Okuyucu 
</div> 
<a href="Rss adresiniz" rel="nofollow">RSS feed</a> 
| <a href="E-mail adresiniz" target="_blank" rel="nofollow">E-mail</a> 
</div>
<div class="twitter-mbt"><div class="follower-twitter"><span>138</span> Takipçi</div>                            
<a href="Twitter Adresiniz" target="_blank" rel="nofollow" title="I definitely follow you back">Bizi Twitter'da Takip et</a> 
</div>                       
<div class="facebook-mbt">                        
<div class="follower-facebook"><span>403</span> Takipçi                           </div>                            
<a href="Facebook Adresiniz" target="_blank" rel="nofollow">Bizi Facebook'da takip et</a> 
</div>

Yukarıdaki kodu blogunuza gadget şeklinde istediğiniz yere , yerleşim'den ekleyiniz..Kod içinde kırmızı olan yerlere, kendi twitter , facebook , rss ve mail adresinizi yazınız..Mavi olan yerler ise , takipçi sayısı kısmı, buralara istediğiniz rakamı yazabilirsiniz..

Twitter uçan kuş eklentisini bayağı bir sitede görmüşsünüzdür. Bu yazımda ise bu konudan bahsedeceğim. Aşağıdaki tabloda gördüğünüz üzere bu eklenti ile sadece twitter uçan kuşunu değil, blogumuzda uçurmak için bir çok seçeneğe sahip olacağız.

Kuruluma geçiyorum. Blogumuza eklemek istediğimiz kodu Yerleşim > gadget ekle > Html javascript ekle bölümüne tıklayarak ekliyoruz.

Kodların içerisindeki twitter adresiniz ve twitter notunuz bölümlerini kendinize göre düzenlemeyi unutmayınız.

	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-tripleflap.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different Arrow Plain.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-Black Howk.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-Crishtmas.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-Orange-man.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-kama humaha.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>
	<script type="text/javascript" src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different-red howk.js"></script><script type="text/javascript"> var twitterAccount = "Twitter adresiniz"; var tweetThisText = "Twitter notunuz"; tripleflapInit(); </script>

Bu gün sizlere blogger için windows 8 metro tarzı sosyal ağ abonelik eklentisini anlatacağım. Bütün işlemleri yaptığınız zaman eklenti yukarıdaki gibi gözükecektir. Farklı olarak üzerine gelindiğinde her sosyal ağın orjinal rengi belirecektir.

Kuruluma geçiyorum.

Şablon > Html'yi düzenle bölümünden

</b:skin>

kodunu buluyoruz ve hemen üstüne

#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-UKryCh_9ofg/UTZhTsKo1JI/AAAAAAAABB8/nZELvc-I_mU/s000/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-l7ZToPjmMuU/UTZhUBsetSI/AAAAAAAABCE/7mAmFM2I3Vg/s000/twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-BlNwAezZeJE/UTZhUQqnRiI/AAAAAAAABCM/R_lwCLevtBQ/s000/google%25252Bplus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-rAtL540hTiU/UTZhUjdTDrI/AAAAAAAABCU/6msqfzMDbG8/s000/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

kodunu ekliyoruz. Daha sonra Yerleşim > Gadget ekle > Html/javascript ekle bölümünden

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/YOUR_USERNAME/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/YOUR_USERNAME'></a></li>
</ul>

kodlarını ekliyoruz ve işlem tamamdır. İkinci kod bölümündeki "your username" bölümlerini kendinize göre değiştirmeyi unutmayınız. Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.

Blogunuzdaki yazılarınızın bir çoğunu bu eklenti ile sağ tarafta şık bir şekilde gösterebilirsiniz yapmanız gereken adımlar aşağıda gösterilmiştir.Eklentinin özelliği diğer yazılarınızı daha doğrusu benzer yazılar diyede nitelendiribiliriz.

Yerleşim Tıklıyoruz > Gatget Ekle > HTML/JavaScript dedikten sonra aşağıdaki kodları içerisine yerleştiriyoruz.

Blogger için bu eklenti dikey tarzında ve bir çok blog içinde vazgeçilmez olduğunu düşünüyorum.Bu Dikey menüden yanı sıra blogumda yatay eklentilerde mevcut ama blog tarzı veya stili dikey menü için uygun olan arkadaşların işini göreceğini düşünüyorum.Eklenti sadece bir adımda çok kolay ekleyebileceğiniz bir eklentidir.Şimdi nasıl ekleyeceğimize gelelim.


Yerleşim Tıklıyoruz > Gatget Ekle > HTML/JavaScript dedikten sonra aşağıdaki kodları içersine yerleştiriyoruz.



Yukarıdaki kod içersinde değişiklik yapacağınız yer kodun en altında olan bölümdür menü seçeneğini kendiniz belirleyebilirsiniz ve menüye link vermeyi unutmayınız.