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.